/* ============================================
   OHANA CREATOR MEETUP PAGE
   Static reuse of the rebuilt /experience lander
   (_experience.html inline styles) on top of
   styles.css: minimal header, 4:5 photo carousel
   with dots + counter, chips, host card, dark
   value block, sticky ask. Booking = Calendly
   popup. Keep in sync with _experience.html.
   ============================================ */

:root {
  --ink: var(--dark-deep);
  --hairline: #ececec;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
body { background: var(--white); color: var(--ink); }

/* --- Minimal header: no nav links, one escape hatch, one ask --- */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .25s; }
.hdr.scrolled { border-bottom-color: var(--hairline); }
.hdr-logo { font-size: 1.5rem; font-weight: 900; color: var(--orange); text-decoration: none; letter-spacing: -.02em; }
.hdr-cta { font-size: .82rem; font-weight: 700; color: var(--white); background: var(--dark-deep); padding: 9px 18px; border-radius: var(--radius-full); text-decoration: none; transition: background .3s; }
.hdr-cta:hover { background: var(--orange); }

.page { max-width: 600px; margin: 0 auto; padding-top: 58px; }
.wrap { padding: 0 20px; }
.side-col { display: none; }

/* --- Photo carousel: swipes like IG, dots + counter --- */
.car { position: relative; }
.car-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: pointer; }
.car-track::-webkit-scrollbar { display: none; }
.car-track img { width: 100%; flex-shrink: 0; scroll-snap-align: center; aspect-ratio: 4/5; max-height: 62vh; object-fit: cover; display: block; background: #f2f2f2; user-select: none; -webkit-user-drag: none; }
.car-dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.car-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); transition: background .2s, transform .2s; }
.car-dot.on { background: var(--white); transform: scale(1.15); }
.car-count { position: absolute; top: 14px; right: 14px; font-size: .72rem; font-weight: 700; color: var(--white); background: rgba(0,0,0,.45); padding: 4px 10px; border-radius: var(--radius-full); pointer-events: none; }

/* --- Title block --- */
.exp-head { padding-top: 22px; }
.exp-overline { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; }
.exp-title { font-size: 1.6rem; font-weight: 900; line-height: 1.15; letter-spacing: -.01em; margin-bottom: 8px; }
.exp-tagline { font-size: .95rem; line-height: 1.5; color: var(--gray-600); }

/* --- Fact chips --- */
.exp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 500; color: var(--ink); background: var(--gray-100); padding: 7px 12px; border-radius: var(--radius-full); }
.chip svg { width: 14px; height: 14px; color: var(--gray-400); }
.chip.chip-new { background: var(--orange-50); color: var(--orange-dark); font-weight: 700; }
.chip.chip-new svg { color: var(--orange); }

/* --- Sections: let it breathe --- */
.sec { margin-top: 40px; }
.sec-h { font-size: 1.05rem; font-weight: 800; margin-bottom: 14px; letter-spacing: -.01em; }

/* --- Host card (the trust anchor) --- */
.creator { margin-top: 28px; padding: 18px; border: 1px solid var(--hairline); border-radius: 20px; }
.creator-top { display: flex; align-items: center; gap: 14px; }
.creator-ava { position: relative; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--gray-200); display: flex; align-items: center; justify-content: center; }
.creator-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.creator-initials { font-size: 1.2rem; font-weight: 700; color: var(--ink); text-transform: uppercase; }
.creator-info { flex: 1; min-width: 0; }
.creator-label { font-size: .72rem; color: var(--gray-400); display: block; margin-bottom: 1px; }
.creator-name { font-size: 1.05rem; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.creator-ig { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--gray-600); margin-top: 2px; }
.creator-bio { font-size: .85rem; line-height: 1.55; color: var(--gray-600); margin-top: 14px; }

/* --- How the hour goes (scannable step cards) --- */
.plan-step { display: flex; gap: 12px; margin-bottom: 10px; padding: 14px; background: #f7f7f7; border-radius: 16px; }
.plan-num { width: 26px; height: 26px; border-radius: 50%; background: var(--white); color: var(--orange-dark); font-size: .78rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.plan-body { min-width: 0; }
.plan-body h3 { font-size: .92rem; font-weight: 800; margin-bottom: 3px; }
.plan-body p { font-size: .85rem; line-height: 1.5; color: var(--gray-600); }

/* --- About --- */
.exp-desc { font-size: .92rem; line-height: 1.7; color: var(--gray-600); white-space: pre-line; }

/* --- What you'll get --- */
.inc-list { display: flex; flex-direction: column; gap: 10px; }
.inc-item { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--gray-600); }
.inc-check { width: 20px; height: 20px; border-radius: 50%; background: var(--orange-50); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.inc-check svg { width: 12px; height: 12px; color: var(--orange); }

/* --- Meet + logistics facts --- */
.fact { display: flex; gap: 12px; align-items: flex-start; }
.fact + .fact { margin-top: 16px; }
.fact svg { width: 20px; height: 20px; color: var(--ink); flex-shrink: 0; margin-top: 1px; }
.fact-t { font-size: .92rem; font-weight: 800; }
.fact-s { font-size: .84rem; color: var(--gray-600); margin-top: 2px; line-height: 1.5; }
.fact-s a { color: var(--orange); text-decoration: none; font-weight: 700; }

/* --- The hook: dark value block, one ask --- */
.appblock { margin-top: 44px; background: var(--ink); border-radius: 24px; padding: 28px 24px; color: var(--white); }
.appblock h2 { font-size: 1.25rem; font-weight: 900; letter-spacing: -.01em; margin-bottom: 18px; color: var(--white); }
.appblock-row { display: flex; align-items: center; gap: 12px; font-size: .88rem; color: rgba(255,255,255,.85); margin-bottom: 12px; }
.appblock-row svg { width: 18px; height: 18px; color: var(--orange); flex-shrink: 0; }
.appblock-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px; margin-top: 20px; border-radius: var(--radius-full); background: var(--orange); color: var(--white); font-size: .98rem; font-weight: 800; text-decoration: none; transition: background .3s; }
.appblock-cta:active, .appblock-cta:hover { background: var(--orange-dark); }
.appblock-note { display: block; text-align: center; font-size: .76rem; color: rgba(255,255,255,.5); margin-top: 12px; }

/* --- Desktop booking rail (sticky card) --- */
.rail { border: 1px solid var(--hairline); border-radius: 24px; padding: 28px; box-shadow: 0 6px 28px rgba(0,0,0,.06); }
.rail-price { font-size: 1.7rem; font-weight: 900; }
.rail-per { font-size: .82rem; color: var(--gray-400); margin-left: 4px; }
.rail-rows { margin: 18px 0; padding: 18px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 12px; }
.rail-row { display: flex; align-items: center; gap: 10px; font-size: .86rem; color: var(--gray-600); }
.rail-row svg { width: 17px; height: 17px; color: var(--gray-400); flex-shrink: 0; }
.rail-cta { display: flex; align-items: center; justify-content: center; width: 100%; padding: 15px; border-radius: var(--radius-full); background: var(--orange); color: var(--white); font-size: .95rem; font-weight: 800; text-decoration: none; transition: background .3s, transform .3s, box-shadow .3s; }
.rail-cta:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 6px 20px var(--orange-glow); }
.rail-note { display: block; text-align: center; font-size: .76rem; color: var(--gray-400); margin-top: 10px; }
.rail-note a { color: var(--orange); text-decoration: none; font-weight: 700; }

@media (min-width: 900px) {
  .hdr { padding: 14px 32px; }
  .hdr-logo { font-size: 1.8rem; }
  .page { max-width: 1140px; padding-top: 80px; }
  .wrap { padding: 0 24px; }
  .car { margin: 6px 24px 0; border-radius: 24px; overflow: hidden; }
  .car-track img { aspect-ratio: auto; height: 520px; max-height: none; }
  .deskgrid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; }
  .side-col { display: block; position: sticky; top: 96px; margin-top: 22px; }
  .exp-title { font-size: 2.1rem; }
  .exp-tagline { font-size: 1.02rem; }
  .bar { display: none !important; }
  .foot { padding-bottom: 48px; }
}

.foot { text-align: center; padding: 36px 20px calc(120px + var(--safe-b)); font-size: .75rem; color: var(--gray-400); }
.foot a { color: var(--gray-400); text-decoration: none; margin: 0 6px; }

/* --- Sticky booking bar: price + one ask, always in reach --- */
.bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 300; display: none; align-items: center; justify-content: space-between; gap: 16px; background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--hairline); padding: 12px 20px calc(12px + var(--safe-b)); }
.bar.show { display: flex; }
.bar-price { line-height: 1.2; }
.bar-amount { font-size: 1.15rem; font-weight: 900; }
.bar-per { font-size: .74rem; color: var(--gray-400); display: block; }
.bar-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 26px; border-radius: var(--radius-full); background: var(--orange); color: var(--white); font-size: .92rem; font-weight: 800; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 16px var(--orange-glow); }
.bar-btn:active { background: var(--orange-dark); }