/* ==========================================================================
   Rinjani Atlas — trip.css  (single trip template; requires main.css)
   Sections: Hero + facts (rinjani/trip-hero) · Itinerary (the trip's content) ·
   Elevation profile (rinjani/trip-profile) · Included · What to bring
   ========================================================================== */
:root {
  --i-check-circle: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" fill="none" stroke="%23000" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="11" cy="11" r="9.3"/%3E%3Cpath d="M7 11.3l2.6 2.5L15 8.4"/%3E%3C/svg%3E');
  --i-dash-circle: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" fill="none" stroke="%23000" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="11" cy="11" r="9.3"/%3E%3Cpath d="M7.2 11h7.6"/%3E%3C/svg%3E');
}

/* Intro elements stay hidden until trip.js animates them */
.js-motion:not(.ra-ready) :is(.site-header > *, .trip-hero__kicker, .trip-hero .h1__line > span, .trip-hero__side > *, .trip-hero__photo, .facts) { visibility: hidden; }

/* ==========================================================================
   1. HERO — text, then photo; facts card below (mobile/tablet) or on the photo (desktop)
   ========================================================================== */
.trip-hero { display: flex; flex-direction: column; }
.trip-hero__head { padding: clamp(22px, 5vw, 36px) var(--gutter) clamp(24px, 5vw, 36px); display: flex; flex-direction: column; gap: 18px; }
.trip-hero__title { display: flex; flex-direction: column; gap: 18px; }
.trip-hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.trip-hero__kicker .kicker__text { font-size: clamp(20px, 4.6vw, 24px); }
.trip-hero__kicker .kicker__line { width: 40px; }
.trip-hero .h1 { font-size: clamp(40px, 10.4vw, 76px); }
.trip-hero__side { display: flex; flex-direction: column; gap: 18px; }
.trip-hero__side .lead { max-width: 540px; }
.trip-hero__actions { max-width: 480px; display: flex; flex-wrap: wrap; gap: 8px; }
.trip-hero__wa { flex: 1 1 220px; height: 54px; padding: 0 7px 0 22px; justify-content: space-between; gap: 14px; }
.trip-hero__wa .btn__round { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: var(--white); color: var(--ink); }
/* "See the plan": grey pill + down arrow below 1280, underlined link + trail arrow on desktop */
.trip-hero__plan {
  flex: 1 1 160px; height: 54px; padding: 0 20px; border-radius: 999px; background: var(--pill); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-size: 15px; font-weight: 600;
}
.trip-hero__plan:hover { color: var(--ink); background: var(--pill-hover); }
.trip-hero__plan-ico--right { display: none; }

.trip-hero__photo { height: clamp(300px, 66vw, 520px); margin: 0 var(--inset); border-radius: var(--r-panel); }
.trip-hero__photo > .trip-hero__img { object-position: 50% 60%; }
.trip-hero__photo::before, .trip-hero__grade, .trip-hero__photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.trip-hero__photo::before { background: #B49A72; mix-blend-mode: soft-light; opacity: .55; }
.trip-hero__grade { background: #D9CFBF; mix-blend-mode: color; opacity: .22; }
.trip-hero__photo::after { background: linear-gradient(180deg, rgba(28,24,18,.18) 0%, rgba(28,24,18,0) 35%, rgba(28,24,18,0) 70%, rgba(28,24,18,.3) 100%); }
.trip-hero__cross { z-index: 1; top: clamp(18px, 4vw, 32px); left: clamp(18px, 4vw, 32px); background: var(--white); }
.trip-hero__cross--r { left: auto; right: 32px; }
@media (max-width: 699px) { .trip-hero__cross--r { display: none; } }

.facts {
  margin: 8px var(--inset) 0; padding: clamp(20px, 4vw, 26px) clamp(20px, 4vw, 28px); border-radius: clamp(24px, 3.6vw, 28px); background: var(--cream);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px 20px;
}
.facts__item { display: flex; flex-direction: column; gap: 6px; }
.facts dt { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--kicker); }
.facts dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.facts dd em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 15px; letter-spacing: 0; color: var(--text-3); }
.facts__diff { align-items: center !important; gap: 12px !important; height: 25px; }
.facts__diff .tick { height: 16px; }
.facts__route { align-items: center !important; }

@media (min-width: 1280px) {
  /* header + hero = one screen; photo fills what's left, facts sit on the photo */
  .trip-hero { min-height: calc(max(780px, 100vh - var(--ra-adminbar)) - var(--header-h)); }
  .trip-hero__head { padding: 40px 48px; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; align-items: end; }
  .trip-hero__title { gap: 24px; }
  .trip-hero__kicker { flex-wrap: nowrap; gap: 18px; }
  .trip-hero__kicker .kicker { gap: 18px; }
  .trip-hero__kicker .kicker__text { font-size: 28px; }
  .trip-hero__kicker .kicker__line { width: 56px; }
  .trip-hero .h1 { font-size: 88px; white-space: normal; }
  .trip-hero .h1__line--serif > span { white-space: nowrap; }
  .trip-hero__side { gap: 26px; padding-bottom: 12px; }
  .trip-hero__actions { max-width: none; flex-wrap: nowrap; align-items: center; gap: 26px; }
  .trip-hero__wa { flex: none; padding: 0 8px 0 22px; }
  .trip-hero__wa .btn__round { width: 38px; height: 38px; }
  .trip-hero__plan { flex: none; height: auto; padding: 0 0 6px; border-radius: 0; background: none; border-bottom: 1px solid var(--ink); }
  .trip-hero__plan:hover { background: none; }
  .trip-hero__plan-ico--right { display: flex; }
  .trip-hero__plan-ico--right svg { transition: transform .55s var(--ease); }
  .trip-hero__plan:hover .trip-hero__plan-ico--right svg { transform: translateX(6px); }
  .trip-hero__plan-ico--down { display: none; }
  .trip-hero__media { position: relative; flex: 1; min-height: 380px; display: flex; flex-direction: column; }
  .trip-hero__photo { flex: 1; height: auto; border-radius: 36px; }
  .trip-hero__photo::after { background: linear-gradient(180deg, rgba(28,24,18,.18) 0%, rgba(28,24,18,0) 30%, rgba(28,24,18,0) 50%, rgba(28,24,18,.42) 100%); }
  .trip-hero__cross { top: 40px; left: 40px; }
  .trip-hero__cross--r { left: auto; right: 40px; }
  .facts { position: absolute; left: 32px; right: 32px; bottom: 24px; margin: 0; padding: 22px 8px; border-radius: 24px; background: rgba(251,250,247,.95); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .facts__item { gap: 8px; padding: 0 24px; }
  .facts__item + .facts__item { border-left: 1px solid var(--line); }
  .facts dd { font-size: 21px; flex-wrap: nowrap; gap: 10px; white-space: nowrap; }
  .facts dd em { font-size: 16px; }
  .facts__diff { height: 29px; gap: 14px !important; }
  .facts__diff .ticks { gap: 6px; }
  .facts__diff .tick { height: 18px; }
}

/* ==========================================================================
   2. ITINERARY — days = the trip's own content (Group "day": heading, meta, list with bold times).
      Sticky side nav (desktop) / sticky pill bar (mobile/tablet) are added by trip.js.
   ========================================================================== */
.plan { padding: clamp(80px, 14vw, 112px) var(--gutter) clamp(72px, 12vw, 104px); scroll-margin-top: 0; }
.plan__aside { display: flex; flex-direction: column; max-width: 640px; }
.plan__title { margin-top: 18px; }
.plan__lead { margin-top: 20px; max-width: 500px; }
.day-nav { display: none; }

.day-bar { position: sticky; top: 8px; z-index: 5; margin-top: clamp(28px, 5vw, 40px); transition: top .6s var(--ease); }
.ra-float-on .day-bar { top: 76px; }
.day-bar__inner {
  display: inline-flex; max-width: 100%; gap: 4px; padding: 5px; border-radius: 999px;
  background: rgba(241,239,234,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  overflow-x: auto; scrollbar-width: none;
}
.day-bar__inner::-webkit-scrollbar { display: none; }
.day-bar button {
  flex: none; height: 44px; padding: 0 16px; border: none; border-radius: 999px; background: transparent; cursor: pointer;
  font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--text-3); transition: background .4s, color .4s;
}
.day-bar button.is-active { background: var(--ink); color: var(--white); }

.plan__days { margin-top: clamp(28px, 5vw, 40px); display: flex; flex-direction: column; gap: clamp(48px, 9vw, 64px); counter-reset: day; }
.plan .plan__days { margin-top: clamp(28px, 5vw, 40px); }
.day { counter-increment: day; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 20px; row-gap: 6px; scroll-margin-top: 96px; }
.day::before { content: 'Day ' counter(day, decimal-leading-zero); font-family: var(--serif); font-style: italic; font-size: clamp(40px, 9vw, 52px); line-height: 1; }
.day__title { font-size: clamp(21px, 3.4vw, 25px); font-weight: 500; line-height: normal; letter-spacing: -0.025em; }
.day .day__meta { flex-basis: 100%; margin-top: 4px; font-size: 14px; color: var(--text-3); }
.day__rail { flex-basis: 100%; margin-top: 12px; display: flex; align-items: center; }
.day__dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.day:last-child .day__dot { background: var(--white); border: 1.4px solid var(--ink); }
.day__ticks { flex: 1; display: flex; justify-content: space-between; align-items: center; padding-left: 18px; }
.day__ticks .tick { height: 12px; background: var(--tick-off); }
.day__ticks .tick:nth-child(n+17) { display: none; }
.day:last-child .day__ticks { -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent); mask-image: linear-gradient(90deg, #000 30%, transparent); }
.day .day__rows { flex-basis: 100%; margin-top: 8px; list-style: none; padding: 0; border-bottom: 1px solid var(--line); }
.day__rows li { display: grid; grid-template-columns: clamp(64px, 12vw, 88px) minmax(0, 1fr); align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.55; color: var(--text-body); text-wrap: pretty; }
.day__rows li strong { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 18px; line-height: normal; color: var(--ink); }

@media (min-width: 1280px) {
  .plan { padding: 128px 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 88px; align-items: start; }
  .plan__aside { position: sticky; top: 40px; max-width: none; }
  .plan__title { margin-top: 24px; }
  .plan__lead { margin-top: 24px; max-width: 440px; }
  .day-bar { display: none; }
  .day-nav { margin-top: 40px; display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
  .day-nav button {
    height: 60px; padding: 0; border: none; border-top: 1px solid var(--line); background: transparent;
    display: flex; align-items: center; gap: 16px; cursor: pointer; text-align: left; color: var(--muted); transition: color .4s;
  }
  .day-nav button:hover, .day-nav button.is-active { color: var(--ink); }
  .day-nav__dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; transition: background .4s; }
  .day-nav button.is-active .day-nav__dot { background: var(--ink); }
  .day-nav__n { width: 64px; font-family: var(--serif); font-style: italic; font-size: 18px; }
  .day-nav__title { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
  .plan .plan__days { margin-top: 0; gap: 72px; }
  .day { scroll-margin-top: 120px; align-items: flex-end; column-gap: 22px; row-gap: 0; }
  .day::before { font-size: 56px; }
  .day__title { font-size: 26px; }
  .day .day__meta { flex-basis: auto; margin: 0 0 0 auto; padding-bottom: 4px; white-space: nowrap; }
  .day__rail { margin-top: 24px; }
  .day__ticks { padding-left: 22px; }
  .day__ticks .tick:nth-child(n+17) { display: block; }
  .day .day__rows { margin-top: 20px; }
  .day__rows li { grid-template-columns: 96px minmax(0, 1fr); padding: 18px 0; font-size: 16px; }
  .day__rows li strong { font-size: 19px; }
}

/* ==========================================================================
   3. ELEVATION PROFILE — stats + profile chart (horizontal scroll below 1280)
   ========================================================================== */
.climb-prof { padding: 0 var(--inset) var(--inset); }
.climb-prof__panel { border-radius: var(--r-panel); background: var(--cream); padding: clamp(56px, 10vw, 88px) clamp(8px, 2.4vw, 24px) clamp(8px, 2.4vw, 24px); }
.climb-prof__head { padding: 0 clamp(12px, 2.6vw, 16px); max-width: 680px; }
.prof-card { margin-top: clamp(32px, 6vw, 44px); padding: clamp(20px, 4vw, 28px) 0 clamp(14px, 3vw, 20px); border-radius: clamp(20px, 3vw, 24px); background: var(--white); }
.climb-prof__panel .prof-card { margin-top: clamp(32px, 6vw, 44px); }
.prof-stats { margin: 0 clamp(20px, 4vw, 28px); padding-bottom: 22px; border-bottom: 1px solid var(--line-2); display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px 16px; }
.prof-stats__item { display: flex; flex-direction: column; gap: 6px; }
.prof-stats dt { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--kicker); }
.prof-stats dd { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(28px, 6vw, 34px); line-height: 1; }

.prof-scroll { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.prof-scroll::-webkit-scrollbar { display: none; }
.prof-chart { position: relative; min-width: 860px; height: 340px; }
.prof-chart__plot { position: absolute; left: 72px; right: 28px; top: 84px; bottom: 40px; }
.prof-chart__grid { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line-2); }
.prof-chart__grid span { position: absolute; right: 100%; margin-right: 16px; top: -9px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.prof-chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.prof-chart__km { position: absolute; bottom: -30px; font-size: 12px; font-weight: 600; color: var(--muted); }
.prof-chart__km--start { left: 0; }
.prof-chart__km--end { right: 0; }

.pt { position: absolute; width: 0; height: 0; }
.pt__dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 1.6px solid var(--ink); }
.pt--camp .pt__dot { background: var(--white); }
.pt__label {
  position: absolute; bottom: 16px; left: 0; transform: translateX(-50%); padding: 5px 9px; border-radius: 10px; background: var(--white);
  display: flex; flex-direction: column; align-items: center; gap: 1px; white-space: nowrap;
}
.pt__label b { font-size: 13px; font-weight: 600; }
.pt__label span { font-size: 12px; color: var(--text-3); }
.pt__label em { font-family: var(--serif); font-size: 14px; }
.pt--first .pt__label { transform: translateX(-10px); align-items: flex-start; }
.pt--last .pt__label { transform: translateX(calc(-100% + 10px)); align-items: flex-end; }
.pt--low .pt__label, .pt--slope .pt__label { bottom: auto; top: 16px; }

.prof-hint { margin: 4px 20px 0; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--kicker); }

@media (min-width: 1280px) {
  .climb-prof__panel { padding: 96px 40px 40px; }
  .climb-prof__head { padding: 0; max-width: none; }
  .climb-prof__panel .prof-card { margin-top: 64px; padding: 32px 36px 28px; border-radius: 28px; }
  .prof-stats { margin: 0; padding-bottom: 28px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .prof-stats__item { gap: 8px; padding: 0 24px; }
  .prof-stats__item + .prof-stats__item { border-left: 1px solid var(--line-2); }
  .prof-stats dd { font-size: 40px; }
  .prof-scroll { overflow: visible; }
  .prof-chart { min-width: 0; height: 400px; margin-top: 8px; }
  .prof-chart__plot { left: 76px; }
  .pt--slope .pt__label { top: auto; bottom: 16px; }
}

/* ==========================================================================
   PRICES — price per person by group size (rinjani/trip-prices; Trip details → Prices per person)
   ========================================================================== */
.prices { padding: clamp(80px, 14vw, 112px) var(--gutter) 0; scroll-margin-top: 24px; }
.prices + .incl-x { padding-top: clamp(64px, 11vw, 96px); }
.prices .price-tiers { margin: clamp(32px, 6vw, 48px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.price-tier { min-height: 172px; padding: 18px 18px 20px; border-radius: 24px; background: var(--cream); display: flex; flex-direction: column; }
.price-tier__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.price-tier__group { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--kicker); }
.price-tier__chip { height: 26px; padding: 0 10px; border-radius: 999px; background: var(--white); color: var(--ink); display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.price-tier__price { margin-top: auto; padding-top: 20px; display: flex; align-items: baseline; gap: 8px; }
.price-tier__cur { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--text-3); }
.price-tier__price b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(42px, 10vw, 48px); line-height: 1; letter-spacing: -0.02em; }
.price-tier__per { margin-top: 6px; font-size: 14px; color: var(--text-3); }
.price-tier.is-best { background: var(--ink); color: var(--white); }
.price-tier.is-best :is(.price-tier__group, .price-tier__cur, .price-tier__per) { color: rgba(255,255,255,.72); }

@media (min-width: 700px) {
  .prices .price-tiers { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 10px; }
  .price-tier { min-height: 196px; padding: 22px 20px 22px; border-radius: 26px; }
}
@media (min-width: 1280px) {
  .prices { padding: 128px 48px 0; }
  .prices + .incl-x { padding-top: 112px; }
  .prices .price-tiers { margin-top: 64px; gap: 16px; }
  .price-tier { min-height: 240px; padding: 26px 26px 28px; border-radius: 30px; }
  .price-tier__group { font-size: 13px; }
  .price-tier__price b { font-size: 64px; }
  .price-tier__per { font-size: 15px; }
}

/* ==========================================================================
   4. INCLUDED / NOT INCLUDED (List blocks; "N items" is counted on the server)
   ========================================================================== */
.incl-x { padding: clamp(80px, 14vw, 112px) var(--gutter) clamp(72px, 12vw, 104px); }
.incl-x__grid { margin-top: clamp(32px, 6vw, 48px); display: flex; flex-direction: column; gap: 8px; }
.incl-x .incl-x__grid { margin-top: clamp(32px, 6vw, 48px); }
.incl-box { padding: clamp(22px, 4.4vw, 30px) clamp(20px, 4.4vw, 30px) clamp(16px, 3vw, 22px); border-radius: clamp(24px, 3.6vw, 28px); }
.incl-box--in { background: var(--cream); }
.incl-box--out { border: 1px solid var(--line); }
.incl-box__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 14px; }
.incl-box__title { font-size: clamp(19px, 3vw, 21px); font-weight: 600; letter-spacing: -0.02em; }
.incl-box__count { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--kicker); }
.incl-box__list { list-style: none; margin: 0; padding: 0; }
.incl-box__list li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.incl-box__list li::before { content: ''; flex: none; width: 22px; height: 22px; margin-top: 1px; background: currentColor; -webkit-mask: var(--i-check-circle) center / contain no-repeat; mask: var(--i-check-circle) center / contain no-repeat; }
.incl-box--out li { color: var(--text-2); }
.incl-box--out li::before { background: var(--muted); -webkit-mask-image: var(--i-dash-circle); mask-image: var(--i-dash-circle); }
.incl-box__note { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.45; }
.incl-box .incl-box__note { margin-top: 10px; }

@media (min-width: 700px) {
  .incl-box__list--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
}
@media (min-width: 1280px) {
  .incl-x { padding: 128px 48px; }
  .incl-x .incl-x__grid { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .incl-box { padding: 34px 36px 26px; border-radius: 30px; }
  .incl-box__head { padding-bottom: 18px; }
  .incl-box__title { font-size: 22px; }
  .incl-box__count { font-size: 18px; }
  .incl-box__list--2 { column-gap: 32px; }
  .incl-box__list li { padding: 16px 0; font-size: 16px; }
  .incl-box .incl-box__note { margin-top: 12px; padding-top: 18px; }
}

/* ==========================================================================
   5. WHAT TO BRING — List blocks turned into a checklist by trip.js (saved in this browser)
   ========================================================================== */
.bring { padding: 0 var(--inset); }
.bring__panel { border-radius: var(--r-panel); background: var(--cream); padding: clamp(56px, 10vw, 88px) clamp(12px, 3.6vw, 32px) clamp(12px, 3.6vw, 32px); }
.bring__head { padding: 0 8px; max-width: 680px; }
.bring__side { display: flex; flex-direction: column; gap: 18px; }
.bring__progress { display: flex; align-items: center; gap: 14px; }
.bring__ticks { flex: 1; max-width: 300px; display: flex; justify-content: space-between; align-items: center; }
.bring__ticks .tick { transition: background .4s; }
.bring__count { font-family: var(--serif); font-style: italic; font-size: 17px; white-space: nowrap; }
.bring__reset { flex: none; height: 44px; padding: 0 16px; border: none; border-radius: 999px; background: var(--white); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); transition: background .3s; }
.bring__reset:hover { background: var(--chip); }

.bring__tabs { margin-top: 32px; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--chip-2); }
.bring__tabs button { flex: 1; min-width: 0; height: 44px; border: none; border-radius: 999px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); transition: background .35s; }
.bring__tabs button[aria-selected="true"] { background: var(--white); }
.bring__tabs em { font-family: var(--serif); font-weight: 400; font-size: 13px; color: var(--kicker); }

.bring__groups { margin-top: 8px; }
.bring__panel .bring__groups { margin-top: 8px; }
.pk-group { padding: 6px 20px 8px; border-radius: 22px; background: var(--white); display: flex; flex-direction: column; }
.pk-group__head { display: none; }
.js .pk-group:not(.is-active), .ra-ready .pk-group:not(.is-active) { display: none; }
.pk-list { list-style: none; margin: 0; padding: 0; }
.pk-list li:first-child .pk { border-top-color: transparent; }
.pk { width: 100%; min-height: 56px; padding: 12px 0; border: none; border-top: 1px solid var(--line-2); background: transparent; display: flex; align-items: center; gap: 14px; cursor: pointer; text-align: left; font: inherit; }
.pk__box { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 1.4px solid var(--line-3); background: var(--white); display: flex; align-items: center; justify-content: center; transition: background .3s, border-color .3s; }
.pk__label { font-size: 15px; line-height: 1.4; color: var(--ink); text-decoration-color: var(--line-3); transition: color .3s; }
.pk[aria-pressed="true"] .pk__box { background: var(--ink); border-color: var(--ink); }
.pk[aria-pressed="true"] .pk__label { color: var(--muted); text-decoration: line-through; }

@media (min-width: 700px) {
  .bring__panel .bring__groups { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .pk-group, .ra-ready .pk-group:not(.is-active) { display: flex; padding: 22px 20px 12px; border-radius: 24px; }
  .pk-group__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; }
  .pk-group__name { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
  .pk-group__count { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--kicker); }
  .pk-list li:first-child .pk { border-top-color: var(--line-2); }
  .pk { min-height: 52px; padding: 10px 0; gap: 12px; }
  .pk__label { line-height: 1.35; }
}
@media (min-width: 1280px) {
  .bring__panel { padding: 96px 40px 40px; }
  .bring__head { padding: 0; max-width: none; }
  .bring__side { gap: 22px; padding-bottom: 10px; }
  .bring__side .is-style-lead { margin: 0; }
  .bring__progress { gap: 18px; }
  .bring__ticks { max-width: none; }
  .bring__ticks .tick { height: 16px; }
  .bring__count { font-size: 18px; }
  .bring__reset { height: 36px; padding: 0 14px; }
  .bring__panel .bring__groups { margin-top: 64px; gap: 16px; }
  .pk-group, .ra-ready .pk-group:not(.is-active) { padding: 28px 28px 18px; border-radius: 26px; }
  .pk-group__head { padding-bottom: 12px; }
  .pk-group__name { font-size: 20px; }
  .pk-group__count { font-size: 16px; }
  .pk { min-height: 54px; padding: 12px 0; gap: 14px; }
  .pk__label { font-size: 16px; line-height: 1.4; }
}

/* Reveal-on-scroll targets (trip.js) */
.js-motion :is(
  .plan__aside .is-style-kicker, .plan__title, .plan__lead, .day-nav, .day,
  .climb-prof__head .is-style-kicker, .climb-prof__head .is-style-section, .climb-prof__head .is-style-lead, .prof-card,
  .prices__head .is-style-kicker, .prices__head .is-style-section, .prices__head .is-style-lead, .price-tier,
  .incl-x__head .is-style-kicker, .incl-x__head .is-style-section, .incl-x__head .is-style-lead, .incl-box,
  .bring__head .is-style-kicker, .bring__head .is-style-section, .bring__side, .bring__tabs, .bring__groups
):not(.is-in) { opacity: 0; }