/* ---------- Base ---------- */
.zip-hiw{
  --ink:#2A2A2A; --muted:#6A6A6A; --line:#DCDCDC; --chip:#F5F2F0; --teal:#004D4E;
  --aqua:#D9FFFF; --lavender:#F0EBFF; --sage:#E1FCE0; --blush:#FFDAD4;
  --serif:'Fraunces',Georgia,serif; --sans:'Figtree',system-ui,sans-serif;
}
.zip-hiw,.zip-hiw *{box-sizing:border-box}

.zip-hiw img{display:block;max-width:100%}

/* ---------- Section (mobile first) ---------- */
.zip-hiw{padding:56px 24px 0}
.zip-hiw__title{margin:0;font:400 34px/1.06 var(--serif);letter-spacing:-0.035em;text-wrap:balance}
.zip-hiw__list{display:flex;flex-direction:column;gap:24px;margin-top:40px}

/* Stacking cards: each sticks a little lower than the last */
.zip-hiw-card{position:sticky;top:92px;border:1.5px solid var(--ink);border-radius:28px;overflow:hidden}
.zip-hiw-card:nth-child(2){top:106px}
.zip-hiw-card:nth-child(3){top:120px}
.zip-hiw-card:nth-child(4){top:134px}
.zip-hiw-card--aqua{background:var(--aqua)}
.zip-hiw-card--lavender{background:var(--lavender)}
.zip-hiw-card--sage{background:var(--sage)}
.zip-hiw-card--blush{background:var(--blush)}

.zip-hiw-card__text{padding:24px 28px 48px}
.zip-hiw-card__title{margin:0;font:400 28px/1.1 var(--serif);letter-spacing:-0.02em}
.zip-hiw-card__desc{margin:6px 0 0;font:400 16px/1.5 var(--sans);color:var(--ink);text-wrap:pretty}
.zip-hiw-card__mock{padding:0 28px 32px;display:flex;justify-content:center;align-items:center}

/* Solid drop shadow on mocks */
.zip-sh{box-shadow:0 8px 0 var(--ink)}

/* ---------- Shared mock bits ---------- */
.zip-panel{background:#fff;border:2px solid var(--ink);border-radius:24px;overflow:hidden}
.zip-pill{padding:6px 10px;border:1.5px solid var(--ink);border-radius:999px;font:600 12px/1 var(--sans)}
.zip-badge{padding:5px 9px;border-radius:999px;font:600 11px/1 var(--sans)}
.zip-avatar{flex:none;border-radius:50%;overflow:hidden;border:1.5px solid var(--ink)}
.zip-avatar img{width:100%;height:100%;object-fit:cover}

/* 1 · Discover */
.zip-disc{width:100%;transform:rotate(-3deg)}
.zip-disc__photo{height:156px;overflow:hidden}
.zip-disc__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.zip-disc__body{padding:12px}
.zip-disc__row{display:flex;justify-content:space-between;align-items:center}
.zip-disc__name{font:500 22px/1 var(--serif)}
.zip-disc__meta{margin-top:6px;font:400 14px/1.3 var(--sans);color:var(--muted)}
.zip-disc__tags{display:flex;gap:6px;margin-top:12px}

/* 2 · Schedule */
.zip-sched{width:100%;padding:18px;transform:rotate(1.5deg)}
.zip-sched__head{display:flex;align-items:center;gap:10px}
.zip-sched__head .zip-avatar{width:32px;height:32px}
.zip-sched__title,.zip-refl__title{font:500 20px/1.1 var(--serif);letter-spacing:-0.02em}
.zip-sched__dates{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:16px}
.zip-date{border:none;padding:10px 0;border-radius:14px;background:var(--chip);color:var(--ink);text-align:center;font-family:var(--sans)}
.zip-date.zip-is-on{background:var(--ink);color:#fff}
.zip-date__dow{font:500 11px/1 var(--sans);opacity:.7}
.zip-date__num{font:600 17px/1 var(--sans);margin-top:6px}
.zip-sched__times{display:grid;grid-template-columns:64px minmax(0,1fr);row-gap:10px;align-items:center;margin-top:16px}
.zip-sched__label{font:500 13px/1 var(--sans);color:var(--muted)}
.zip-times{display:flex;gap:6px}
.zip-time{flex:1;height:34px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--chip);font:600 13px/1 var(--sans)}
.zip-time.zip-is-on{background:var(--ink);color:#fff}

/* 3 · Adventure */
.zip-adv{position:relative;width:100%;height:300px}
.zip-adv__photo{position:absolute;inset:0 0 40px;border:2px solid var(--ink);border-radius:24px;overflow:hidden;transform:rotate(-2deg)}
.zip-adv__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.zip-adv__tags{position:absolute;top:12px;right:-6px;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.zip-adv__tag{padding:8px 14px;background:#fff;border:1.5px solid var(--ink);border-radius:999px;font:600 13px/1 var(--sans)}
.zip-adv__tag:nth-child(1){transform:rotate(4deg)}
.zip-adv__tag:nth-child(2){transform:rotate(-3deg)}
.zip-adv__tag:nth-child(3){transform:rotate(2deg)}
.zip-adv__status{position:absolute;left:12px;right:12px;bottom:0;background:#fff;border:2px solid var(--ink);border-radius:20px;padding:12px}
.zip-adv__row{display:flex;justify-content:space-between;align-items:center}
.zip-adv__title{font:500 17px/1.1 var(--serif)}
.zip-adv__time{display:flex;align-items:center;gap:10px;margin-top:10px;font:600 14px/1 var(--sans)}
.zip-adv__time span.zip-line{flex:1;height:1.5px;background:var(--line)}

/* 4 · Reflect */
.zip-refl{padding:18px;width:100%;transform:rotate(-1.5deg)}
.zip-refl__head{display:flex;align-items:center;gap:12px;padding:0}
.zip-refl__head .zip-avatar{width:40px;height:40px}
.zip-refl__body{padding:18px 0 0}
.zip-refl__q{font:500 14px/1.3 var(--sans)}
.zip-traits{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.zip-trait{display:flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:12px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);font:500 14px/1 var(--sans);transition:all 150ms cubic-bezier(.2,0,0,1)}
.zip-trait.zip-is-on{border-color:var(--teal);background:var(--aqua);color:var(--teal)}

/* ---------- Tablet (≥600px): text left, mock right ---------- */
@media (min-width:600px){
  .zip-hiw{max-width:1200px;margin:0 auto;padding:96px 32px 0}
  .zip-hiw__title{font-size:clamp(40px,4.2vw,56px);max-width:760px}
  .zip-hiw__list{margin-top:56px;gap:32px}
  .zip-hiw-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;min-height:460px;border-radius:36px}
  .zip-hiw-card__text{padding:48px 48px 36px;display:flex;flex-direction:column;justify-content:center}
  .zip-hiw-card__title{font-size:clamp(40px,4.4vw,64px);line-height:1.02;letter-spacing:-0.03em}
  .zip-hiw-card__desc{font-size:18px;max-width:420px;margin-top:16px}
  .zip-hiw-card__mock{padding:48px 48px}
  .zip-hiw-card__mock > *{max-width:340px}
  .zip-hiw-card__mock > .zip-disc{max-width:none}
}

/* ---------- Desktop (≥1024px) ---------- */
@media (min-width:1024px){
  .zip-hiw{padding:140px 48px 0}
  .zip-hiw-card__text{padding:64px 64px 36px}
  .zip-hiw-card__mock{padding:56px 64px}
}

#how.zip-hiw{height:auto!important;scroll-margin-top:100px;color:var(--ink);font-family:var(--sans)}
@media(max-width:359px){.zip-hiw{padding-inline:16px}.zip-trait{padding-inline:12px}}
@media(prefers-reduced-motion:reduce){.zip-hiw-card{position:relative;top:auto!important}.zip-trait{transition:none}}

/* Keep the booking illustration at its desktop proportions when it shrinks. */
.zip-sched-frame{width:100%;max-width:340px;flex:none;position:relative}
.zip-sched-canvas{width:300px;position:absolute;top:0;left:0;transform-origin:top left}
.zip-sched-canvas > .zip-sched{width:300px;max-width:none}

.zip-hiw-card--aqua .zip-hiw-card__mock{padding-inline:60px}

/* Preserve the desktop profile's photo, text and vertical proportions together. */
.zip-hiw-card__mock > .zip-profile-frame{width:100%;max-width:280px;flex:none;position:relative}
.zip-profile-canvas{width:220px;position:absolute;top:0;left:0;transform-origin:top left}
.zip-profile-canvas > .zip-disc{width:220px;max-width:none}

@media (min-width:600px) and (max-width:1023px){.zip-hiw-card--aqua .zip-hiw-card__mock{padding-inline:48px}}
@media (min-width:1024px){.zip-hiw-card--aqua .zip-hiw-card__mock{padding-inline:64px}}

/* Equal-height cards with a dedicated, vertically centered illustration area. */
.zip-hiw-card{height:520px;min-height:520px;display:grid;grid-template-rows:auto minmax(0,1fr)}
.zip-hiw-card__mock{min-height:0}
.zip-hiw-card__mock > .zip-profile-frame,
.zip-hiw-card__mock > .zip-sched-frame,
.zip-hiw-card__mock > .zip-static-frame{height:100%;min-height:0;position:relative;width:100%;flex:none}
.zip-static-frame{max-width:340px}
.zip-static-canvas{width:340px;position:absolute;transform-origin:center}
.zip-static-canvas > *{width:340px;max-width:none}
.zip-profile-canvas,.zip-sched-canvas,.zip-static-canvas{top:50%;left:50%;transform-origin:center}
@media(min-width:600px){.zip-hiw-card{grid-template-rows:minmax(0,1fr)}}

/* Remove the internal text/demo gap while preserving the outer side spacing. */
.zip-hiw-card__text{padding-bottom:0}
.zip-hiw-card__mock{padding-top:0}
@media(min-width:600px){
  .zip-hiw-card__text,.zip-hiw-card__mock{padding-block:0}
}

.zip-hiw-card__text{padding-bottom:24px}


.zip-refl__title{transform-origin:left center}