/* ==========================================================================
   ELITE TRIP: Curated Trips and the planning pages.

   Layout for Curated Trips (the comparison and the Private Car, Family and
   Group & Company days), the Private Planning Call, Host Match, How It Works
   and Become a Local Host. Selectors are .pk-* or .bb-*, colours, radii and
   shadows are elite.css tokens, and form fields, chips and inline messages
   keep the public.css look they share with the rest of the site.

     * the comparison: four columns answering the same four questions;
     * a trip page: a sticky summary on the left, numbered choices on the
       right, one gold action at the end;
     * How It Works: large numbered steps;
     * Become a Local Host: the invitation page.

   The Curated Trips pages add .pk-trips to .pk-page for their phone layout
   (section 11): the comparison becomes one sideways row, steps sit three
   to a row and the standards two to a row. Cards never lift on hover; they
   take a gold edge.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE FIRST SCREEN
   One large line, one lead, the action, then the picture.
   -------------------------------------------------------------------------- */

.pk-hero {
    padding: clamp(44px, 7vw, 92px) 0 clamp(40px, 5vw, 72px);
    text-align: center;
}
/* The hero melts into a sand chapter below it, as the homepage does. */
.pk-hero--fade { background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg) 62%, var(--c-bg-alt) 100%); }
.pk-hero__copy { max-width: 900px; margin-inline: auto; }
/* The fade already is the space between the two, so the sand chapter
   under it starts closer. */
.pk-hero--fade + .ap-chapter--sand { padding-top: clamp(40px, 5vw, 72px); }
.pk-hero .et-eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.pk-hero .et-eyebrow i, .pk-hero .et-eyebrow .et-i { font-size: 1em; color: var(--c-gold); }
.pk-hero h1 {
    font-size: var(--t-display); line-height: 1.07; letter-spacing: -0.005em;
    color: var(--c-ink);
}
.pk-hero--big h1 { font-size: var(--t-hero); line-height: 1.05; letter-spacing: -0.015em; }
/* The second line of a headline, set in the brand's gold. Large type only,
   where the darker end of the gradient keeps it readable. */
.pk-hero h1 .pk-gold {
    color: transparent;
    background: linear-gradient(90deg, var(--c-link) 0%, var(--c-bronze) 50%, var(--c-link) 100%);
    -webkit-background-clip: text; background-clip: text;
}
.pk-lead {
    max-width: 680px; margin: 20px auto 0;
    font-size: var(--t-sub); line-height: 1.25; letter-spacing: 0.007em;
    color: var(--c-muted);
}
.pk-actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 16px 28px; margin-top: 30px;
}
.pk-actions .ap-link { font-size: 1.1875rem; }
.pk-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; list-style: none; }
.pk-tags li {
    padding: 6px 14px; border-radius: var(--r-pill);
    background: var(--c-bg-alt); color: var(--c-ink-2);
    font-size: var(--t-small); letter-spacing: -0.01em;
}

/* The picture: wide, rounded, never animated. */
.pk-hero__media { margin: clamp(40px, 6vw, 72px) auto 0; max-width: 1180px; }
.pk-hero__media img {
    display: block; width: 100%; height: auto;
    aspect-ratio: 16 / 7; object-fit: cover;
    border-radius: var(--r-xl); background: var(--c-bg-alt-2);
    box-shadow: var(--sh-3);
}
/* The owner's photographs are cut around their subject already
   (tools/make_elite_photos.py), so the centre is the right crop. */

/* THE BIG HERO: the photograph is the stage and the words stand on it, as
   on the homepage. The picture fills the chapter behind a soft shade; the
   copy, the tags and the actions sit on top in white and gold. */
.pk-hero.pk-hero--big {
    position: relative; overflow: hidden; isolation: isolate;
    padding: clamp(84px, 11vw, 150px) 0 clamp(64px, 9vw, 120px);
    background: var(--c-espresso); color: #fff;
}
.pk-hero.pk-hero--big::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background:
        radial-gradient(75% 95% at 50% 45%, rgba(17, 12, 9, 0.74) 0%, rgba(17, 12, 9, 0.55) 60%, rgba(17, 12, 9, 0.38) 100%),
        linear-gradient(0deg, rgba(17, 12, 9, 0.55) 0%, rgba(17, 12, 9, 0) 45%);
}
.pk-hero.pk-hero--big::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 2;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0) 0%, var(--c-gold) 50%, rgba(37, 99, 235, 0) 100%);
}
.pk-hero.pk-hero--big .pk-hero__media { position: absolute; inset: 0; z-index: 0; margin: 0; max-width: none; }
.pk-hero.pk-hero--big .pk-hero__media img {
    width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover;
    border-radius: 0; box-shadow: none; background: var(--c-espresso);
}
.pk-hero.pk-hero--big .ap-wrap > :not(.pk-hero__media) { position: relative; z-index: 2; }
.pk-hero.pk-hero--big h1 { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25); }
.pk-hero.pk-hero--big h1 .pk-gold {
    background: linear-gradient(90deg, #93c5fd 0%, #2563eb 55%, #1d4ed8 100%);
    -webkit-background-clip: text; background-clip: text; text-shadow: none;
}
.pk-hero.pk-hero--big .et-eyebrow { color: var(--c-gold-light); }
.pk-hero.pk-hero--big .pk-lead { color: rgba(255, 255, 255, 0.86); }
.pk-hero.pk-hero--big .ap-link { color: var(--c-gold-light); }
.pk-hero.pk-hero--big .ap-link:hover { color: #fff; }
.pk-hero.pk-hero--big .pk-tags li {
    background: rgba(255, 255, 255, 0.12); color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.pk-hero.pk-hero--big .pk-points li { color: rgba(255, 255, 255, 0.8); }
.pk-hero.pk-hero--big .pk-points b { color: #fff; }
.pk-hero.pk-hero--big .pk-points .et-i { color: var(--c-gold); }
/* A big hero is dark now, so the next chapter starts at its own rhythm. */
.pk-hero--big.pk-hero--fade + .ap-chapter--sand { padding-top: var(--sp-chapter); }
@media (max-width: 734px) {
    .pk-hero.pk-hero--big { padding: 56px 0 44px; }
    .pk-hero.pk-hero--big::before {
        background: linear-gradient(180deg, rgba(17, 12, 9, 0.55) 0%, rgba(17, 12, 9, 0.7) 55%, rgba(17, 12, 9, 0.88) 100%);
    }
    .pk-hero.pk-hero--big .pk-hero__media img { aspect-ratio: auto; border-radius: 0; }
}

/* A tool page (a form or a quiz) puts the words and the picture side by
   side, so the form begins on the first screen. */
.pk-hero--split { text-align: left; }
.pk-hero--split .pk-hero__grid {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center; gap: clamp(32px, 5vw, 72px);
}
.pk-hero--split .pk-hero__copy { max-width: none; margin: 0; }
.pk-hero--split .pk-lead { margin-left: 0; font-size: var(--t-lead); line-height: 1.38; letter-spacing: 0.011em; }
.pk-hero--split .pk-actions, .pk-hero--split .pk-tags { justify-content: flex-start; }
.pk-hero--split .pk-hero__media { margin: 0; }
.pk-hero--split .pk-hero__media img { aspect-ratio: 5 / 4; }

@media (max-width: 834px) {
    .pk-hero--split .pk-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .pk-hero--split .pk-hero__media img { aspect-ratio: 16 / 10; }
}
@media (max-width: 734px) {
    .pk-hero { text-align: left; }
    .pk-hero .pk-lead { margin-left: 0; }
    .pk-actions, .pk-tags { justify-content: flex-start; }
    .pk-hero__media img { aspect-ratio: 4 / 3; border-radius: var(--r-lg); }
}

/* Three promises in a quiet row under the hero (Apple's "at a glance"). */
.pk-points {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
    max-width: 980px; margin: clamp(32px, 4vw, 48px) auto 0; padding: 0; list-style: none;
    text-align: left;
}
.pk-points li { display: flex; gap: 14px; align-items: flex-start; font-size: var(--t-small); line-height: 1.43; color: var(--c-muted); }
.pk-points i, .pk-points > li > .et-i { margin-top: 2px; font-size: 1.25rem; color: var(--c-bronze); width: 22px; text-align: center; flex: 0 0 auto; }
.pk-points b { display: block; font-size: var(--t-body); color: var(--c-ink); }
.pk-hero--split .pk-points { grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 28px 0 0; max-width: 520px; }
@media (max-width: 734px) { .pk-points { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* elite.css colours every `.et-head p` as the lead, which also catches an
   eyebrow written as a <p> inside the head. Put the eyebrow back. */
.pk-page .et-head p.et-eyebrow { margin-top: 0; color: var(--c-bronze); }
.pk-page .ap-chapter--dark .et-head p.et-eyebrow { color: var(--c-gold); }

/* --------------------------------------------------------------------------
   2. COMPARE THE TRIPS
   On a wide screen the four columns share their rows (subgrid), so every
   name, line, button and specification sits level with its neighbours.
   -------------------------------------------------------------------------- */

.pk-compare { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pk-model {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: clamp(28px, 3vw, 40px) clamp(20px, 2vw, 28px) 12px;
    border-radius: var(--r-xl); background: var(--c-bg);
    border: 1px solid transparent;
    text-align: center;
    transition: border-color 260ms var(--et-ease-glide, ease), box-shadow 260ms var(--et-ease-glide, ease);
}
/* No lift: a gold edge and a soft shadow. */
.pk-model:hover { border-color: rgba(37, 99, 235, 0.55); box-shadow: 0 10px 30px -18px rgba(17, 12, 9, 0.35); }
/* The icon sits in the Elite arch: round top, flat feet. */
.pk-model__ico {
    display: grid; place-items: center; width: 58px; height: 58px; border-radius: 29px;
    background: var(--c-espresso); color: #fff; font-size: 1.6rem;
}
.pk-model h3 { font-size: 1.5rem; line-height: 1.17; letter-spacing: 0.009em; }
.pk-model__tag {
    align-self: center; padding: 4px 12px; border-radius: var(--r-pill);
    background: var(--c-warn-bg); color: var(--c-link);
    font-size: var(--t-micro); font-weight: 600; letter-spacing: 0;
}
.pk-model__tag--free { background: var(--c-success-bg); color: var(--c-success); }
.pk-model__desc { font-size: var(--t-small); line-height: 1.43; color: var(--c-muted); }
.pk-model__cta { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 6px 0 14px; }
.pk-spec { width: 100%; padding: 16px 0; border-top: 1px solid var(--c-line); }
.pk-spec__k { font-size: var(--t-micro); color: var(--c-muted); letter-spacing: -0.01em; }
.pk-spec__v { margin-top: 4px; font-size: var(--t-small); line-height: 1.43; color: var(--c-ink); }

@supports (grid-template-rows: subgrid) {
    @media (min-width: 1069px) {
        .pk-compare { grid-auto-rows: auto; row-gap: 0; }
        .pk-model { display: grid; grid-row: span 9; grid-template-rows: subgrid; row-gap: 0; justify-items: center; align-items: start; }
        .pk-model > .pk-spec { align-self: stretch; }
        .pk-model > * { margin-bottom: 14px; }
        .pk-model > .pk-spec { margin-bottom: 0; }
        .pk-model > .pk-model__cta { margin-bottom: 8px; }
    }
}
@media (max-width: 1068px) { .pk-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .pk-compare { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .pk-model { padding: 28px 22px 8px; }
    .pk-model:hover { box-shadow: none; }
    /* Each specification becomes one row: the question left, the answer right. */
    .pk-spec { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 12px; padding: 13px 0; text-align: left; }
    .pk-spec__v { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   3. NUMBERED STEPS
   Large gold numerals, a title, a line. The <ol> gives assistive
   technology the order, so the numerals are decoration.
   -------------------------------------------------------------------------- */

.pk-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0; list-style: none; }
.pk-step {
    display: flex; flex-direction: column;
    padding: clamp(28px, 3vw, 40px); border-radius: var(--r-md);
    background: var(--c-bg-alt);
}
.ap-chapter--sand .pk-step { background: var(--c-bg); }
.pk-step__n {
    display: block; margin-bottom: 22px;
    font-size: clamp(3.25rem, 5.5vw, 4.5rem); font-weight: 600; line-height: 1; letter-spacing: -0.03em;
    color: transparent; background: linear-gradient(180deg, var(--c-gold) 0%, var(--c-link) 100%);
    -webkit-background-clip: text; background-clip: text;
}
.pk-step h3 { margin-bottom: 8px; font-size: 1.5rem; }
.pk-step p { font-size: var(--t-body); line-height: 1.47; color: var(--c-muted); }
/* The last step is the meeting: the black tile, as on the homepage. */
.pk-steps .pk-step--end { background: var(--c-espresso); color: var(--c-on-dark); }
.pk-step--end h3 { color: #fff; }
.pk-step--end p { color: var(--c-on-dark-2); }

/* The compact row: six short labels, one line each. */
.pk-steps--row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.pk-steps--row .pk-step { padding: 22px 18px 24px; }
.pk-steps--row .pk-step__n { margin-bottom: 14px; font-size: clamp(2.25rem, 3.2vw, 2.75rem); }
.pk-steps--row .pk-step h3 { margin: 0; font-size: 1.0625rem; letter-spacing: -0.01em; line-height: 1.25; }

@media (max-width: 1068px) { .pk-steps--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 734px) {
    .pk-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .pk-steps--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pk-step__n { margin-bottom: 14px; }
}

/* --------------------------------------------------------------------------
   4. FEATURES: a grid of quiet tiles, on sand or on black
   -------------------------------------------------------------------------- */

.pk-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0; list-style: none; }
.pk-feats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pk-feats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pk-feat { padding: clamp(26px, 3vw, 36px); border-radius: var(--r-md); background: var(--c-bg); }
.pk-feat > i, .pk-feat > .et-i { display: block; margin-bottom: 18px; font-size: 1.5rem; color: var(--c-bronze); }
.pk-feat h3 { margin-bottom: 8px; font-size: 1.1875rem; line-height: 1.21; letter-spacing: 0.012em; }
.pk-feat p { font-size: var(--t-small); line-height: 1.5; color: var(--c-muted); }
.ap-chapter:not(.ap-chapter--sand):not(.ap-chapter--dark) .pk-feat { background: var(--c-bg-alt); }

/* On the black chapter: one panel of hairline-divided cells. */
.ap-chapter--dark .pk-feats { gap: 1px; border-radius: var(--r-md); overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.ap-chapter--dark .pk-feat { border-radius: 0; background: var(--c-espresso-2); }
.ap-chapter--dark .pk-feat > i, .ap-chapter--dark .pk-feat > .et-i { color: var(--c-gold); }
.ap-chapter--dark .pk-feat h3 { color: #fff; }
.ap-chapter--dark .pk-feat p { color: var(--c-on-dark-2); }

@media (max-width: 1068px) {
    .pk-feats, .pk-feats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .pk-feats, .pk-feats--2, .pk-feats--4 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ap-chapter--dark .pk-feats { gap: 1px; }
}

/* --------------------------------------------------------------------------
   5. THE BUY PAGE
   A sticky summary on the left, numbered choices on the right.
   -------------------------------------------------------------------------- */

.pk-buy {
    display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    gap: clamp(28px, 4vw, 64px); align-items: start;
}
.pk-buy__aside {
    position: sticky; top: calc(var(--nav-h) + var(--local-h) + 24px);
    display: flex; flex-direction: column; gap: 18px;
}
.pk-buy__aside h2 { font-size: var(--t-title); line-height: 1.1; }
.pk-buy__aside > p { font-size: var(--t-body); color: var(--c-muted); }
.pk-incl { display: grid; gap: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-line-2); }
.pk-incl li {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 13px 0; border-bottom: 1px solid var(--c-line-2);
    font-size: var(--t-small); line-height: 1.43; color: var(--c-ink-2);
}
.pk-incl i, .pk-incl .et-i { margin-top: 3px; width: 16px; text-align: center; color: var(--c-bronze); flex: 0 0 auto; }
.pk-incl .et-i { height: 16px; color: var(--c-gold); }
.pk-buy__main { display: grid; gap: clamp(36px, 4vw, 56px); min-width: 0; }

/* One numbered choice: the number, a headline, a white panel. */
.pk-choice { min-width: 0; scroll-margin-top: calc(var(--nav-h) + var(--local-h) + 16px); }
.pk-choice__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.pk-choice__n {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--c-ink); color: #fff;
    font-size: 0.9375rem; font-weight: 600; transform: translateY(-4px);
}
.pk-choice__head h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.12; }
.pk-choice__head p { margin-top: 6px; font-size: var(--t-body); color: var(--c-muted); }
.pk-panel {
    padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-lg);
    background: var(--c-bg); box-shadow: var(--sh-1);
}
.pk-panel + .pk-panel { margin-top: 16px; }
.pk-panel--sand { background: var(--c-bg-alt); box-shadow: none; }
.pk-tags i, .pk-tags .et-i { margin-right: 4px; color: var(--c-bronze); }
.pk-sub {
    margin: 28px 0 6px; font-size: 1.1875rem; font-weight: 600; letter-spacing: 0.012em; color: var(--c-ink);
}
.pk-sub:first-child { margin-top: 0; }
.pk-sub + .pk-hint { margin-bottom: 14px; }
.pk-hint { font-size: var(--t-small); color: var(--c-muted); }
.pk-panel .et-note { margin-top: 22px; }
.pk-panel .form-grid { gap: 18px 16px; }

/* The one gold action and its fine print. */
.pk-send { margin-top: 24px; }
.pk-send .et-btn { width: 100%; min-height: 56px; font-size: 1.0625rem; white-space: normal; }
.pk-fine { margin-top: 12px; font-size: var(--t-micro); line-height: 1.5; color: var(--c-muted); text-align: center; }
.pk-page .toast-inline { margin-top: 14px; }

@media (max-width: 960px) {
    .pk-buy { grid-template-columns: minmax(0, 1fr); }
    /* On a narrow screen the choices come first and the summary follows
       them, as Apple's buy page does on a phone. */
    .pk-buy__aside { position: static; order: 2; }
    .pk-buy__aside h2 { font-size: var(--t-sub); }
}
@media (max-width: 600px) {
    .pk-panel { padding: 20px 18px; border-radius: var(--r-md); }
    .pk-choice__head { gap: 12px; }
}

/* --------------------------------------------------------------------------
   6. OPTION TILES: the vehicle and the way a family travels
   Picked like an Apple model: a quiet outline, a dark ring when chosen.
   -------------------------------------------------------------------------- */

.pk-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pk-option {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    width: 100%; min-height: 44px; padding: 20px 20px 18px;
    border: 1px solid var(--c-line-2); border-radius: var(--r-md);
    background: var(--c-bg); color: var(--c-ink);
    font: inherit; text-align: left; cursor: pointer;
    transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.pk-option:hover { border-color: var(--c-faint); }
.pk-option:focus-visible { outline: none; box-shadow: var(--ring); }
.pk-option.is-on, .pk-option[aria-pressed="true"] { border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); }
.pk-option.is-on:focus-visible, .pk-option[aria-pressed="true"]:focus-visible { box-shadow: inset 0 0 0 1px var(--c-ink), var(--ring); }
.pk-option__ico { font-size: 1.5rem; line-height: 1; color: var(--c-bronze); margin-bottom: 6px; }
.pk-option__name { font-size: 1.1875rem; font-weight: 600; line-height: 1.21; letter-spacing: 0.012em; }
.pk-option__meta { font-size: var(--t-small); line-height: 1.43; color: var(--c-muted); }
.pk-option__meta b { font-weight: 600; color: var(--c-ink); }
.pk-option__price {
    margin-top: 8px; padding-top: 12px; width: 100%; border-top: 1px solid var(--c-line);
    font-size: var(--t-small); line-height: 1.5; color: var(--c-ink);
}
.pk-option__price span { display: block; color: var(--c-muted); font-size: var(--t-micro); }
.pk-option__tick {
    position: absolute; top: 16px; right: 16px;
    display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    background: var(--c-ink); color: #fff; font-size: 0.85rem;
    opacity: 0; transition: opacity 200ms var(--ease);
}
.pk-option.is-on .pk-option__tick, .pk-option[aria-pressed="true"] .pk-option__tick { opacity: 1; }
.pk-option--soon { background: var(--c-bg-alt); border-style: dashed; }
.pk-option--soon .pk-option__ico { color: var(--c-muted); }
.pk-option__soon {
    margin-top: 8px; padding: 4px 12px; border-radius: var(--r-pill);
    background: var(--c-warn-bg); color: var(--c-link);
    font-size: var(--t-micro); font-weight: 600; letter-spacing: 0;
}
.pk-option__ok {
    margin-top: 8px; padding: 4px 12px; border-radius: var(--r-pill);
    background: var(--c-success-bg); color: var(--c-success);
    font-size: var(--t-micro); font-weight: 600; letter-spacing: 0;
}
.pk-option--skel { min-height: 180px; cursor: default; border-color: transparent; background: var(--c-bg-alt-2); }
.pk-hint--note { margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--c-gold); }
@media (max-width: 600px) { .pk-options { grid-template-columns: minmax(0, 1fr); } }

/* Optional extras: Apple's option list, one hairline per row. */
.pk-addons { display: grid; border-top: 1px solid var(--c-line); }
.pk-addon {
    display: flex; gap: 14px; align-items: flex-start;
    min-height: 44px; padding: 14px 0; border-bottom: 1px solid var(--c-line);
    font-size: var(--t-small); line-height: 1.43; color: var(--c-muted); cursor: pointer;
}
.pk-addon input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--c-ink); cursor: pointer; }
.pk-addon b { display: block; font-size: var(--t-body); font-weight: 600; color: var(--c-ink); }

/* --------------------------------------------------------------------------
   7. THE PLACES PICKER (built by static/js/places_picker.js)
   -------------------------------------------------------------------------- */

.pp-head { margin: 28px 0 6px; font-size: 1.1875rem; font-weight: 600; letter-spacing: 0.012em; color: var(--c-ink); }
.pp-sub { margin-bottom: 14px; font-size: var(--t-small); color: var(--c-muted); }
.pp-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pp-cats .chip-select { font-family: inherit; }
.pp-cats .chip-select i { color: var(--c-bronze); }
.pp-cats .chip-select.on i { color: var(--c-gold); }
.pp-places { margin-bottom: 16px; }
.pp-list { display: grid; gap: 8px; }
.pp-place { padding: 12px 16px; border-radius: var(--r-sm); background: var(--c-bg-alt); font-size: var(--t-small); line-height: 1.45; color: var(--c-ink); }
.pp-place__meta { color: var(--c-muted); }

/* --------------------------------------------------------------------------
   8. HOST MATCH: one question per row
   -------------------------------------------------------------------------- */

.pk-quiz { max-width: 860px; margin-inline: auto; scroll-margin-top: calc(var(--nav-h) + var(--local-h) + 16px); }
/* A question: the numeral in the margin, the question, the answers. A
   fieldset keeps its legend out of a grid, so this is plain flow. */
.pk-q {
    position: relative; display: block;
    margin: 0; padding: 26px 0 26px 74px; border: 0; border-bottom: 1px solid var(--c-line);
    min-width: 0;
}
.pk-q:first-child { padding-top: 6px; }
.pk-q:first-child .pk-q__n { top: 2px; }
.pk-q__n {
    position: absolute; left: 0; top: 22px; width: 56px; text-align: center;
    font-size: 2.5rem; font-weight: 600; line-height: 1; letter-spacing: -0.03em;
    color: transparent; background: linear-gradient(180deg, var(--c-gold) 0%, var(--c-link) 100%);
    -webkit-background-clip: text; background-clip: text;
}
.pk-q__label, .pk-q legend {
    float: left; width: 100%; padding: 0; margin-bottom: 14px;
    font-size: 1.3125rem; font-weight: 600; line-height: 1.19; letter-spacing: 0.011em; color: var(--c-ink);
}
.pk-q__label small, .pk-q legend small { font-size: var(--t-small); font-weight: 400; color: var(--c-muted); letter-spacing: -0.01em; }
.pk-q__body { min-width: 0; clear: both; }
.pk-q__body select { max-width: 360px; }
.pk-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.pk-picks .chip-select { font-family: inherit; }
.pk-quiz__go { margin-top: 28px; }
.pk-quiz__go .et-btn { width: 100%; min-height: 56px; font-size: 1.0625rem; }
.pk-results { scroll-margin-top: calc(var(--nav-h) + var(--local-h) + 16px); }
.pk-results .buddy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pk-results .bcard-meta i { color: var(--c-success); }
.pk-results .bcard .et-btn { margin-top: 10px; }
.pk-results__more { margin-top: 28px; text-align: center; }
.pk-empty { grid-column: 1 / -1; padding: clamp(32px, 5vw, 56px) 24px; border-radius: var(--r-lg); background: var(--c-bg); text-align: center; }
.pk-empty strong { display: block; margin-bottom: 6px; font-size: 1.3125rem; color: var(--c-ink); }
.pk-empty p { margin-bottom: 20px; font-size: var(--t-body); color: var(--c-muted); }
@media (max-width: 960px) { .pk-results .buddy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .pk-q { padding: 22px 0 22px 46px; }
    .pk-q__n { width: 32px; top: 20px; font-size: 1.9rem; }
    .pk-q:first-child .pk-q__n { top: 4px; }
    .pk-q__body select { max-width: none; }
    .pk-results .buddy-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   9. THE CLOSE
   -------------------------------------------------------------------------- */

.pk-close { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.pk-close__mark { width: 60px; height: auto; }
.pk-close h2 { max-width: 760px; font-size: var(--t-display); }
.pk-close .et-eyebrow { margin-bottom: -12px; }
.pk-close > p:not(.et-eyebrow) { max-width: 640px; font-size: var(--t-sub); line-height: 1.25; color: var(--c-muted); }
.pk-close > p.pk-close__long { max-width: 720px; font-size: var(--t-lead); line-height: 1.38; letter-spacing: 0.011em; }
.ap-chapter--dark .pk-close > p:not(.et-eyebrow) { color: var(--c-on-dark-2); }
.pk-close .pk-actions { margin-top: 6px; }

/* A chapter's closing link, centred under its grid. */
.pk-more { margin-top: 36px; text-align: center; }
.pk-more .ap-link { font-size: 1.1875rem; }
.pk-links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 28px; }

/* --------------------------------------------------------------------------
   10. BECOME A LOCAL HOST (the invitation page)
   -------------------------------------------------------------------------- */

/* The facts of applying, four big quiet cells. */
.bb-facts {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
    margin: clamp(40px, 5vw, 64px) auto 0; max-width: 1180px; padding: 0; list-style: none;
    border-radius: var(--r-lg); overflow: hidden; background: var(--c-line);
    text-align: left;
}
.bb-facts li { padding: 26px 24px; background: var(--c-bg-alt); }
.bb-facts span { display: block; margin-bottom: 8px; font-size: var(--t-micro); color: var(--c-muted); }
.bb-facts b { display: block; font-size: var(--t-body); font-weight: 600; line-height: 1.35; color: var(--c-ink); overflow-wrap: anywhere; }
@media (max-width: 1068px) { .bb-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .bb-facts { grid-template-columns: minmax(0, 1fr); } }

/* The three ways to take part. */
.bb-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bb-role {
    display: flex; flex-direction: column; gap: 12px;
    padding: clamp(28px, 3vw, 40px); border-radius: var(--r-xl); background: var(--c-bg);
}
.bb-role__ico { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border-radius: 50%; background: var(--c-espresso); color: #fff; font-size: 1.25rem; }
.bb-role h3 { font-size: 1.75rem; line-height: 1.14; }
.bb-role p { flex: 1; font-size: var(--t-body); line-height: 1.47; color: var(--c-muted); }
@media (max-width: 900px) { .bb-roles { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* Money: two price cards side by side, both numbers on every row. */
.bb-money-intro { max-width: 760px; font-size: var(--t-body); color: var(--c-muted); }
.bb-money-intro strong { color: var(--c-ink); }
.bb-label { margin: clamp(32px, 4vw, 44px) 0 14px; font-size: var(--t-small); font-weight: 600; color: var(--c-bronze); }
.bb-pay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.bb-pay__card { min-width: 0; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-xl); background: var(--c-bg-alt); }
.bb-pay__card--top { background: var(--c-espresso); color: var(--c-on-dark); }
.bb-pay__card h3 { font-size: 1.75rem; line-height: 1.14; }
.bb-pay__card--top h3 { color: #fff; }
.bb-pay__when { display: block; margin: 6px 0 18px; font-size: var(--t-small); color: var(--c-muted); }
.bb-pay__card--top .bb-pay__when { color: var(--c-on-dark-2); }
.bb-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bb-table th, .bb-table td { padding: 12px 0; text-align: right; font-size: var(--t-body); border-bottom: 1px solid var(--c-line-2); }
.bb-table thead th { padding-top: 0; font-size: var(--t-micro); font-weight: 400; color: var(--c-muted); }
.bb-table th:first-child { text-align: left; }
.bb-table tbody th { font-weight: 600; color: var(--c-ink); }
.bb-table tbody tr:last-child th, .bb-table tbody tr:last-child td { border-bottom: 0; }
.bb-table td.bb-earn { font-weight: 600; color: var(--c-success); }
.bb-pay__card--top .bb-table th, .bb-pay__card--top .bb-table td { border-bottom-color: rgba(255, 255, 255, 0.14); }
.bb-pay__card--top .bb-table thead th { color: var(--c-on-dark-2); }
.bb-pay__card--top .bb-table tbody th { color: #fff; }
.bb-pay__card--top .bb-table td { color: var(--c-on-dark); }
.bb-pay__card--top .bb-table td.bb-earn { color: var(--c-gold-light); }
.bb-note { margin-top: 18px; max-width: 760px; font-size: var(--t-small); line-height: 1.5; color: var(--c-muted); }
@media (max-width: 834px) { .bb-pay { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) {
    .bb-table th, .bb-table td { font-size: var(--t-small); }
}

/* Senior Travel Host: its own price list, one card per kind of visit. */
.bb-comfort { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin-top: 8px; }
.bb-comfort__card { min-width: 0; padding: clamp(24px, 3vw, 32px); border-radius: var(--r-lg); background: var(--c-bg); }
.bb-comfort__card h3 { margin-bottom: 10px; font-size: 1.3125rem; letter-spacing: 0.011em; }
.bb-ctable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bb-ctable th, .bb-ctable td { padding: 11px 0; border-bottom: 1px solid var(--c-line); font-size: var(--t-small); text-align: left; vertical-align: top; }
.bb-ctable th { font-weight: 400; color: var(--c-ink-2); padding-right: 12px; }
.bb-ctable td { text-align: right; font-weight: 600; color: var(--c-ink); white-space: nowrap; }
.bb-ctable td small { font-weight: 400; color: var(--c-muted); }
.bb-ctable tr:last-child th, .bb-ctable tr:last-child td { border-bottom: 0; }
.bb-comfort__card .bb-note { margin-top: 12px; }

@media (max-width: 420px) { .bb-ctable td { white-space: normal; } }

/* Activity: a variable price, said plainly, with no figure near it. */
.bb-variable { margin-top: clamp(32px, 4vw, 48px); padding: clamp(24px, 3vw, 32px); border-radius: var(--r-lg); background: var(--c-bg); }
.bb-variable h3 { margin-bottom: 10px; font-size: 1.3125rem; letter-spacing: 0.011em; }
.bb-variable__line { margin-bottom: 10px; padding-left: 14px; border-left: 3px solid var(--c-gold); font-size: var(--t-body); font-weight: 600; color: var(--c-ink); }
.bb-variable .et-eyebrow { margin-bottom: 6px; font-size: var(--t-small); }
.bb-variable p:not(.bb-variable__line):not(.et-eyebrow) { font-size: var(--t-small); line-height: 1.5; color: var(--c-muted); }

/* A plain list of checks or rules, one hairline per row. */
.bb-list { display: grid; max-width: 860px; padding: 0; list-style: none; border-top: 1px solid var(--c-line); }
.bb-list li {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 18px 0; border-bottom: 1px solid var(--c-line);
    font-size: var(--t-body); line-height: 1.47; color: var(--c-ink-2);
}
.bb-list i { margin-top: 4px; width: 20px; text-align: center; color: var(--c-bronze); flex: 0 0 auto; }
.ap-chapter--dark .bb-list { border-top-color: rgba(255, 255, 255, 0.14); }
.ap-chapter--dark .bb-list li { border-bottom-color: rgba(255, 255, 255, 0.14); color: var(--c-on-dark); }
.ap-chapter--dark .bb-list i { color: var(--c-gold); }
.bb-after { margin-top: 22px; max-width: 760px; font-size: var(--t-small); color: var(--c-muted); }
.ap-chapter--dark .bb-after { color: var(--c-on-dark-2); }

/* Good to know, before applying. */
.bb-know { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 56px); padding: 0; list-style: none; text-align: left; }
.bb-know li { display: flex; gap: 14px; align-items: flex-start; font-size: var(--t-body); line-height: 1.43; color: var(--c-ink-2); }
.bb-know i { margin-top: 3px; color: var(--c-bronze); font-size: 1.1rem; width: 20px; text-align: center; flex: 0 0 auto; }
@media (max-width: 834px) { .bb-know { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

/* --------------------------------------------------------------------------
   11. CURATED TRIPS ON A PHONE (.pk-trips)
   Fewer, shorter screens: the comparison is one sideways row, the steps
   sit three to a row, the standards two to a row, and the three promises
   under a trip's headline share one line.
   -------------------------------------------------------------------------- */
@media (max-width: 734px) {
    .pk-trips .pk-hero { padding: 28px 0 32px; }
    .pk-trips .pk-hero h1 { font-size: var(--t-display); }
    .pk-trips .pk-lead { margin-top: 14px; font-size: var(--t-body); line-height: 1.45; }
    .pk-trips .pk-actions { gap: 12px 20px; margin-top: 22px; }
    .pk-trips .pk-actions .ap-link { font-size: var(--t-body); }
    .pk-trips .pk-hero__media { margin-top: 24px; }
    .pk-trips .pk-hero--split .pk-hero__media img { aspect-ratio: 16 / 10; }

    .pk-trips .pk-hero--split .pk-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
    .pk-trips .pk-points li { flex-direction: column; gap: 6px; font-size: var(--t-micro); line-height: 1.35; }
    .pk-trips .pk-points b { font-size: var(--t-small); line-height: 1.25; }

    /* The four trips: a card and a glimpse of the next. position:relative
       keeps everything inside the scroller, so the page never widens. */
    .pk-trips .pk-compare {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        position: relative;
        gap: 12px;
        margin-inline: calc(var(--pad) * -1);
        padding: 2px var(--pad) 14px;
    }
    .pk-trips .pk-compare > * { flex: none; width: auto; min-width: 0; scroll-snap-align: none; grid-column: auto; }
    .pk-trips .pk-compare::-webkit-scrollbar { display: none; }
    .pk-trips .pk-model { scroll-snap-align: start; gap: 10px; padding: 24px 18px 6px; }
    .pk-trips .pk-model h3 { font-size: 1.3125rem; }
    .pk-trips .pk-model__ico { width: 48px; height: 48px; border-radius: 24px; font-size: 1.35rem; }

    .pk-trips .pk-steps--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .pk-trips .pk-steps--row .pk-step { padding: 14px 12px 16px; }
    .pk-trips .pk-steps--row .pk-step__n { margin-bottom: 8px; font-size: 1.75rem; }
    .pk-trips .pk-steps--row .pk-step h3 { font-size: var(--t-small); }

    .pk-trips .pk-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pk-trips .pk-feat { padding: 18px 16px; }
    .pk-trips .pk-feat > .et-i { margin-bottom: 10px; font-size: 1.25rem; }
    .pk-trips .pk-feat h3 { font-size: var(--t-body); }
    .pk-trips .pk-feat p { font-size: var(--t-micro); }

    /* The cars sit two to a row; the theme chips a size smaller, so
       several share a line. */
    .pk-trips #vehGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .pk-trips #vehGrid .pk-option { padding: 16px 14px 14px; }
    .pk-trips #vehGrid .pk-option__name { font-size: var(--t-body); }
    .pk-trips #vehGrid .pk-option__meta { font-size: var(--t-micro); }
    .pk-trips #vehGrid .pk-option__tick { top: 12px; right: 12px; }
    .pk-trips #vehGrid .pk-option--skel { min-height: 150px; }
    .pk-trips .pp-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .pk-trips .pp-cats .chip-select {
        justify-content: flex-start; min-width: 0; padding: 8px 12px;
        font-size: var(--t-small); line-height: 1.25; text-align: left; white-space: normal;
    }

    .pk-trips .pk-close h2 { font-size: var(--t-section); }
    .pk-trips .pk-close > p:not(.et-eyebrow) { font-size: var(--t-body); line-height: 1.45; }
    .pk-trips .pk-tags li { font-size: var(--t-micro); }
}

@media (prefers-reduced-motion: reduce) {
    .pk-model, .pk-option, .pk-option__tick { transition: none; }
}