/* ─────────────────────────────────────────────────────────────────────
   Hero Labs · homepage hero experiment variants
   ─────────────────────────────────────────────────────────────────────
   Styles for the A/B hero variants swapped in by /hero-labs.js. Every
   selector is namespaced under .hx so nothing here can leak into the
   control hero (which keeps the .hero styles inlined in index.html) or
   the rest of the page. One block per variant, in the same order as the
   VARIANTS registry in hero-labs.js:

     .hx-map    → 02 "The map is the message"   (product demo as hero)
     .hx-field  → 03 "One thumb, one field"     (friction reduction)
     .hx-hood   → 04 "Pick your hood"           (micro-commitment)
     .hx-split  → 05 "Dead bar / packed bar"    (pain–outcome contrast)
     .hx-clock  → 06 "Peak clock"               (real urgency)
     .hx-tour   → 09 "Show, don't tell"         (product clarity)
     .hx-lineup → 10 "The lineup"               (outcome visualization)

   Occupancy band colors reuse the app's OCC_PIN tokens from styles.css
   (--hot / --warm / --chill / --live) so the variants stay in visual
   parity with the product. */

/* ── Shared variant scaffolding ───────────────────────────────────── */
.hx { position: relative; overflow: hidden; }
.hx .hx-btn {
  display: inline-flex; align-items: center; gap: 10px;
  border: none; cursor: pointer; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 15.5px;
  padding: 16px 30px; border-radius: 999px;
  background: var(--hero-cta-bg); color: var(--hero-cta-text);
  transition: transform .15s var(--ease-out), background .15s ease, box-shadow .15s ease;
}
.hx .hx-btn:hover { transform: translateY(-1px); }
.hx .hx-meta {
  font-size: 13px; opacity: .85; margin-top: 14px;
}
.hx .hx-meta .dot { margin: 0 8px; opacity: .6; }
.hx .hx-eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .hx *, .hx *::before, .hx *::after { animation: none !important; transition: none !important; }
}

/* ── 02 · map — full-bleed night map, live ticker ─────────────────── */
.hx-map {
  background: #0D1320; color: #EAF0F8;
  padding: 0; min-height: min(640px, 84vh);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hx-map .hx-map-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(120,150,190,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,150,190,.09) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 60% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 80% at 60% 40%, #000 30%, transparent 100%);
}
.hx-map .hx-dot { position: absolute; border-radius: 50%; }
.hx-map .hx-dot::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid currentColor; opacity: .5;
  animation: hx-pulse 2.4s ease-out infinite;
}
@keyframes hx-pulse {
  0%   { transform: scale(.5); opacity: .7; }
  100% { transform: scale(1.7); opacity: 0; }
}
.hx-map .hx-dot-label {
  position: absolute; transform: translate(14px, -5px);
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  color: rgba(234,240,248,.7); white-space: nowrap;
}
.hx-map .hx-ticker {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 12px var(--gutter);
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: rgba(234,240,248,.62);
  border-bottom: 1px solid rgba(120,150,190,.16);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hx-map .hx-ticker b { color: #FF6B4A; font-weight: 600; }
.hx-map .hx-map-content {
  position: relative; z-index: 1;
  padding: 90px var(--gutter) 52px; max-width: var(--max);
  margin: 0 auto; width: 100%;
}
.hx-map .hx-map-inner { max-width: 640px; }
.hx-map .hx-live-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  color: #7FE3C4; margin-bottom: 16px;
}
.hx-map .hx-live-chip i {
  width: 7px; height: 7px; border-radius: 50%; background: #7FE3C4;
  animation: hx-blink 1.6s ease-in-out infinite;
}
@keyframes hx-blink { 50% { opacity: .25; } }
.hx-map h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(34px, 5vw, 56px); letter-spacing: -.03em; line-height: 1.02;
  margin: 0 0 14px; text-wrap: balance; color: #EAF0F8;
}
.hx-map h1 em { font-style: normal; color: var(--accent); }
.hx-map p { margin: 0 0 24px; font-size: 16px; line-height: 1.55; color: rgba(234,240,248,.75); max-width: 46ch; }
.hx-map .hx-btn { background: #E55934; color: #fff; }
.hx-map .hx-btn:hover { background: #F0663F; }
.hx-map .hx-meta { color: rgba(234,240,248,.6); }

/* ── Instagram landing — "Editorial Warm" (hero-labs.js, ?utm_source=instagram)
   A focused, on-brand landing for paid IG traffic: Jellyfish masthead + the
   full "Get the app" intake on cream, in the Sunset Wash palette (tokens from
   styles.css). Mobile-first — this traffic is ~100% phone. The ig-landing body
   class hides the standard nav so the masthead is the only header. */
body.ig-landing .nav { display: none; }
/* A landing page, not the homepage: hide the site's marketing sections so the
   IG visitor sees the form + the "Manual" steps and nothing else. The footer
   (a div, not a section) stays for privacy/terms — ad platforms require it. */
body.ig-landing > section { display: none; }
body.ig-landing .hero-after { display: none; }
/* ── IG landing · the press pass ────────────────────────────────────────
   The founder-picked design: early access framed as an issued pass rather
   than a form. Everything above the perforation is the pitch, everything
   below is the ask — and the ask is one field, because six in front of cold
   ad traffic was costing us the address.

   Press theme throughout: warm stock, ink, the masthead gradient, and the
   site's system stack. The CTA is the same #FFD24D now used sitewide.
   ──────────────────────────────────────────────────────────────────────── */
.hx-igland {
  min-height: auto;
  display: flex; justify-content: center;
  padding: clamp(18px, 4vw, 36px) clamp(14px, 4vw, 24px) clamp(40px, 6vw, 64px);
  background: var(--stock, #FAF6EF);
  font-family: 'Helvetica Neue', Helvetica, Inter, Arial, sans-serif;
}
.hx-igland-wrap { width: 100%; max-width: 560px; }

/* the pass */
.hx-igland .hx-igpass {
  border: 2px solid var(--ink, #12100F);
  border-radius: 12px;
  padding: clamp(15px, 3.5vw, 22px);
  background: var(--stock, #FAF6EF);
}
.hx-igland .hx-igpasstop { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.hx-igland .hx-igmark { width: 22px; height: 22px; display: block; }
.hx-igland .hx-igbrand {
  font-weight: 800; font-size: 15px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink, #12100F);
}
.hx-igland .hx-igpassno {
  margin-left: auto; font-weight: 800; font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted, #6E6A63);
}
.hx-igland .hx-iggrad {
  height: 9px; border-radius: 99px;
  background: linear-gradient(90deg, #FF8A3D, #FF2D6F 40%, #C226B8 72%, #7B2FF7);
}
.hx-igland .hx-igkick {
  font-weight: 800; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted-soft, #8A8378); margin: 16px 0 9px;
}
.hx-igland .hx-igh1 {
  font-weight: 800; font-size: clamp(31px, 8.6vw, 44px); line-height: 0.95;
  letter-spacing: -0.032em; color: var(--ink, #12100F); margin: 0 0 11px;
}
.hx-igland .hx-igh1 em { font-style: normal; color: var(--ink, #12100F); }
.hx-igland .hx-igsub {
  font-size: 14.5px; line-height: 1.5; color: var(--muted, #6E6A63); margin: 0;
}
.hx-igland .hx-igperf {
  border-top: 2px dashed rgba(18, 16, 15, 0.16);
  margin: clamp(15px, 3.5vw, 20px) calc(-1 * clamp(15px, 3.5vw, 22px));
}

/* the ask */
.hx-igland .hx-igform { margin: 0; }
.hx-igland .hx-igrow { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 420px) { .hx-igland .hx-igrow { grid-template-columns: 1fr; } }
.hx-igland .hx-igfld {
  border-bottom: 1.5px solid rgba(18, 16, 15, 0.14);
  padding-bottom: 7px; margin-bottom: 15px;
}
.hx-igland .hx-igfld label {
  display: block; font-weight: 800; font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted-soft, #8A8378); margin-bottom: 5px;
}
.hx-igland .hx-igno { color: var(--muted-faint, #A8A29A); margin-right: 7px; }
.hx-igland .hx-igfld input,
.hx-igland .hx-igfld select {
  width: 100%; border: 0; background: transparent; padding: 2px 0;
  font-family: inherit; font-size: 16px; color: var(--ink, #12100F);
  -webkit-appearance: none; appearance: none; border-radius: 0;
}
.hx-igland .hx-igfld input:focus,
.hx-igland .hx-igfld select:focus { outline: none; }
.hx-igland .hx-igfld:focus-within { border-bottom-color: var(--ink, #12100F); }
.hx-igland .hx-igfld input::placeholder { color: var(--muted-faint, #A8A29A); }
.hx-igland .hx-igsubmit {
  width: 100%; cursor: pointer; font-family: inherit;
  font-weight: 800; font-size: 15px;
  background: var(--cta-bg, #FFD24D); color: var(--cta-text, #0a0a0a);
  border: 1px solid var(--cta-border, #7A5000); border-radius: 8px; padding: 14px;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.hx-igland .hx-igsubmit:hover { transform: translateY(-1px); filter: brightness(1.03); }
.hx-igland .hx-igsubmit:disabled { opacity: 0.65; cursor: default; transform: none; }
.hx-igland .hx-igfine {
  font-weight: 800; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-faint, #A8A29A); margin: 11px 0 0; text-align: center;
}
.hx-igland .cta-status { font-size: 13px; margin-top: 9px; text-align: center; }
.hx-igland .cta-status.success { color: #1F6B3F; }
.hx-igland .cta-status.error { color: #9B2233; }

/* what's inside — icon cards, no numbers; the band colour sequences them */
.hx-igland .hx-man { margin-top: clamp(26px, 5vw, 38px); }
.hx-igland .hx-maneyebrow {
  font-weight: 800; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted-soft, #8A8378); margin: 0 0 12px;
  border-top: 2px solid var(--ink, #12100F); padding-top: 12px;
}
.hx-igland .hx-mancard {
  display: flex; gap: 13px; align-items: center;
  background: rgba(18, 16, 15, 0.055); border-radius: 10px;
  padding: 13px 14px; margin-bottom: 9px;
}
.hx-igland .hx-mantile {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px;
  border: 1.5px solid; display: flex; align-items: center; justify-content: center;
}
.hx-igland .hx-mantile svg { width: 20px; height: 20px; display: block; }
.hx-igland .hx-manbody h3 {
  font-size: 15px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--ink, #12100F); margin: 0 0 3px;
}
.hx-igland .hx-manbody p {
  font-size: 13px; line-height: 1.45; color: var(--muted, #6E6A63); margin: 0;
}
.hx-igland .hx-manclose {
  font-size: 13.5px; line-height: 1.55; color: var(--muted, #6E6A63);
  margin: 18px 0 14px;
}
.hx-igland .hx-manclose strong { color: var(--ink, #12100F); font-weight: 800; }
.hx-igland .hx-manbtn {
  width: 100%; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 15px;
  background: var(--cta-bg, #FFD24D); color: var(--cta-text, #0a0a0a);
  border: 1px solid var(--cta-border, #7A5000); border-radius: 8px; padding: 14px;
  transition: transform 0.12s ease;
}
.hx-igland .hx-manbtn:hover { transform: translateY(-1px); }

/* ── 03 · field — one giant promise, one input ────────────────────── */
.hx-field {
  background: #FFF6EC; color: #2A160E; text-align: center;
  padding: clamp(64px, 10vw, 120px) var(--gutter);
}
.hx-field h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(40px, 7vw, 84px); letter-spacing: -.04em; line-height: .98;
  margin: 0 0 18px; text-wrap: balance; color: #2A160E;
}
.hx-field h1 em { font-style: italic; color: #E55934; }
.hx-field .hx-sub { margin: 0 auto 34px; font-size: 16.5px; color: #8A6F5E; max-width: 46ch; }
.hx-field .hx-pill {
  display: inline-flex; max-width: 460px; width: 100%;
  background: var(--surface); border-radius: 999px; padding: 6px;
  border: 1px solid #F3E2D2; box-shadow: 0 10px 40px -12px rgba(150,70,20,.25);
}
.hx-field .hx-pill input[type="email"] {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  padding: 12px 20px; font-size: 15px; font-family: var(--body); color: #2A160E;
}
.hx-field .hx-pill input[type="email"]::placeholder { color: #BFA894; }
.hx-field .hx-pill input[type="email"]:focus-visible { outline: 2px solid var(--accent); border-radius: 999px; }
.hx-field .hx-pill button {
  flex-shrink: 0; border: none; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 14.5px;
  padding: 12px 24px; border-radius: 999px;
  background: #E55934; color: #fff; transition: background .15s ease;
}
.hx-field .hx-pill button:hover:not(:disabled) { background: #D14C28; }
.hx-field .hx-pill button:disabled { opacity: .7; cursor: default; }
.hx-field .cta-status { margin-top: 12px; font-size: 13.5px; min-height: 18px; }
.hx-field .cta-status.success { color: #047857; }
.hx-field .cta-status.error   { color: #B91C1C; }
.hx-field .hx-meta { color: #B39A87; }
@media (max-width: 460px) {
  .hx-field .hx-pill { flex-direction: column; border-radius: 22px; gap: 6px; }
  .hx-field .hx-pill button { width: 100%; padding: 14px 24px; }
}

/* ── 04 · hood — neighborhood chips + live snapshot card ──────────── */
.hx-hood {
  background: #FBF3E8; color: #241A11;
  padding: clamp(52px, 8vw, 90px) var(--gutter);
}
.hx-hood .hx-hood-inner { max-width: var(--max-narrow); margin: 0 auto; }
.hx-hood .hx-eyebrow { color: #C46A2B; margin-bottom: 14px; }
.hx-hood h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 4.6vw, 50px); letter-spacing: -.03em; line-height: 1.04;
  margin: 0 0 26px; max-width: 22ch; color: #241A11;
}
.hx-hood .hx-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.hx-hood .hx-chip {
  font-family: var(--display); font-weight: 600; font-size: 14.5px;
  padding: 10px 18px; border-radius: 999px;
  border: 1.5px solid #E2CDB4; background: var(--surface); color: #241A11;
  cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.hx-hood .hx-chip:hover { border-color: #E55934; }
.hx-hood .hx-chip[aria-pressed="true"] { background: #E55934; border-color: #E55934; color: #fff; }
.hx-hood .hx-snap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px;
  background: var(--surface); border: 1px solid #EFDFCB; border-radius: 18px;
  padding: 24px clamp(18px, 3vw, 32px); max-width: 680px;
  box-shadow: var(--sh-3);
}
.hx-hood .hx-snap-big {
  font-family: var(--display); font-weight: 800; font-size: 30px;
  letter-spacing: -.02em; line-height: 1.15;
}
.hx-hood .hx-snap-big small {
  display: block; font-family: var(--body); font-weight: 400; font-size: 12.5px;
  color: #9A836C; letter-spacing: 0; margin-top: 4px;
}
.hx-hood .hx-bars { display: flex; align-items: flex-end; gap: 5px; height: 52px; }
.hx-hood .hx-bars i { width: 14px; border-radius: 4px 4px 0 0; background: #F0C9A2; }
.hx-hood .hx-bars i.hi { background: #E55934; }
.hx-hood .hx-btn { margin-left: auto; }
.hx-hood .hx-meta { color: #9A836C; }
@media (max-width: 640px) {
  .hx-hood .hx-btn { margin-left: 0; width: 100%; justify-content: center; }
}

/* ── 05 · split — dead bar vs. packed bar at the same timestamp ───── */
.hx-split { padding: 0; background: #171310; }
.hx-split .hx-halves {
  display: grid; grid-template-columns: 1fr 1fr; min-height: min(560px, 80vh);
  position: relative;
}
.hx-split .hx-half {
  padding: clamp(34px, 5vw, 58px) clamp(22px, 4vw, 54px);
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; overflow: hidden; min-height: 270px;
}
.hx-split .hx-left  { background: #23262B; color: #B9BEC6; }
.hx-split .hx-right { background: linear-gradient(160deg, #F09848, #E55934 70%); color: #fff; }
.hx-split .hx-time {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  opacity: .72; margin-bottom: 10px;
}
.hx-split .hx-half h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(22px, 3vw, 36px); letter-spacing: -.025em; line-height: 1.05;
  margin: 0 0 8px; color: inherit;
}
.hx-split .hx-half p { margin: 0; font-size: 14.5px; opacity: .82; max-width: 34ch; line-height: 1.5; }
.hx-split .hx-stools {
  position: absolute; top: 60px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 26px; opacity: .45;
}
.hx-split .hx-stools i { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid #4A4F57; }
.hx-split .hx-crowd { position: absolute; top: 36px; left: 0; right: 0; height: 150px; }
.hx-split .hx-crowd i { position: absolute; border-radius: 50%; background: #FFD9B8; opacity: .85; }
.hx-split .hx-seam {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; text-align: center;
}
.hx-split .hx-seam .hx-btn {
  background: #fff; color: #20140C;
  box-shadow: 0 18px 50px -12px rgba(0,0,0,.5);
}
.hx-split .hx-seam .hx-meta {
  color: rgba(255,255,255,.9); text-shadow: 0 1px 8px rgba(0,0,0,.45);
  margin-top: 10px;
}
@media (max-width: 700px) {
  .hx-split .hx-halves { grid-template-columns: 1fr; min-height: 0; }
  .hx-split .hx-seam {
    position: static; transform: none;
    padding: 26px var(--gutter) 34px; background: #171310;
  }
}

/* ── 06 · clock — countdown to tonight's peak ─────────────────────── */
.hx-clock {
  background: linear-gradient(175deg, #31234E 0%, #5C2C46 55%, #B14A32 100%);
  color: #FBEFE6; text-align: center;
  padding: clamp(56px, 9vw, 100px) var(--gutter);
}
.hx-clock .hx-eyebrow { color: #F5B48A; margin-bottom: 18px; display: block; }
.hx-clock .hx-count {
  font-family: var(--display); font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: clamp(54px, 10vw, 116px); letter-spacing: -.02em; line-height: 1;
  margin: 0 0 10px;
}
.hx-clock .hx-count small {
  font-size: .34em; font-weight: 700; letter-spacing: .02em; color: #F5B48A;
}
.hx-clock h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(18px, 2.6vw, 25px); letter-spacing: -.01em;
  margin: 0 0 32px; color: rgba(251,239,230,.92);
}
.hx-clock .hx-wave {
  display: flex; align-items: flex-end; justify-content: center; gap: 6px;
  height: 64px; margin: 0 0 36px;
}
.hx-clock .hx-wave i { width: 16px; border-radius: 5px 5px 0 0; background: rgba(251,239,230,.22); }
.hx-clock .hx-wave i.now { background: var(--accent); position: relative; }
.hx-clock .hx-wave i.now::after {
  content: 'now'; position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: #F5B48A;
}
.hx-clock .hx-wave i.pk { background: #E55934; }
.hx-clock .hx-btn { background: #FBEFE6; color: #38160C; }
.hx-clock .hx-btn:hover { background: #fff; }
.hx-clock .hx-meta { color: rgba(251,239,230,.62); }

/* ── 09 · tour — three beats + phone that follows along ───────────── */
.hx-tour {
  background: #F2EFEA; color: #221C15;
  padding: clamp(44px, 6vw, 68px) var(--gutter);
}
.hx-tour .hx-tour-grid {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 34px; align-items: center;
  max-width: var(--max-narrow); margin: 0 auto;
}
.hx-tour h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(28px, 4.2vw, 46px); letter-spacing: -.03em; line-height: 1.04;
  margin: 0 0 18px; text-wrap: balance; color: #221C15;
}
.hx-tour .hx-steps { display: flex; flex-direction: column; margin: 0 0 26px; }
.hx-tour .hx-step {
  display: flex; gap: 14px; padding: 12px 14px; border-radius: 12px;
  cursor: pointer; transition: background .2s ease, box-shadow .2s ease;
  align-items: baseline; text-align: left;
  background: transparent; border: none; font: inherit; color: inherit; width: 100%;
}
.hx-tour .hx-step[aria-current="true"] { background: var(--surface); box-shadow: 0 10px 30px -18px rgba(60,40,10,.3); }
.hx-tour .hx-step .hx-sn { font-family: var(--mono); font-size: 11px; color: #B49F87; }
.hx-tour .hx-step[aria-current="true"] .hx-sn { color: #E55934; }
.hx-tour .hx-step h3 { font-family: var(--display); font-weight: 700; font-size: 16px; margin: 0 0 2px; }
.hx-tour .hx-step p { margin: 0; font-size: 13.5px; color: #847767; line-height: 1.45; }
.hx-tour .hx-btn { background: #E55934; color: #fff; }
.hx-tour .hx-btn:hover { background: #D14C28; }
.hx-tour .hx-device {
  justify-self: center; width: min(250px, 70vw); aspect-ratio: 9 / 19;
  border-radius: 36px; background: #14100C; padding: 10px;
  box-shadow: 0 34px 70px -30px rgba(50,30,5,.5);
}
.hx-tour .hx-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 28px; overflow: hidden; background: #0D1320;
}
.hx-tour .hx-sc {
  position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease;
  display: flex; flex-direction: column; padding: 18px 14px; color: #EAF0F8;
}
.hx-tour .hx-sc[data-on="true"] { opacity: 1; }
.hx-tour .hx-sc-top {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  color: rgba(234,240,248,.6); text-align: center; margin-bottom: 10px;
}
.hx-tour .hx-sc1 { background: radial-gradient(circle at 60% 30%, #182338, #0D1320); }
.hx-tour .hx-sc1 .hx-mdot { position: absolute; border-radius: 50%; }
.hx-tour .hx-sc2 { background: #101826; }
.hx-tour .hx-vcard { background: #1A2436; border-radius: 14px; padding: 14px; margin-top: auto; }
.hx-tour .hx-vcard .hx-vn { font-family: var(--display); font-weight: 700; font-size: 15px; }
.hx-tour .hx-vcard .hx-vm { font-size: 11px; color: var(--accent); margin-top: 2px; }
.hx-tour .hx-vcard .hx-vmeter { display: flex; gap: 3px; margin-top: 10px; }
.hx-tour .hx-vcard .hx-vmeter i { height: 6px; flex: 1; border-radius: 3px; background: #26334A; }
.hx-tour .hx-vcard .hx-vmeter i.f { background: #E55934; }
.hx-tour .hx-sc3 { background: #101826; }
.hx-tour .hx-plan { background: #1A2436; border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; font-size: 12px; }
.hx-tour .hx-plan b { font-family: var(--display); font-weight: 700; font-size: 13px; display: block; }
.hx-tour .hx-plan span { color: rgba(234,240,248,.55); font-size: 10.5px; }
@media (max-width: 760px) {
  .hx-tour .hx-tour-grid { grid-template-columns: 1fr; text-align: center; }
  .hx-tour .hx-step { text-align: left; }
  .hx-tour h1 { margin-left: auto; margin-right: auto; }
}

/* ── 10 · lineup — the night as a locked ticket ───────────────────── */
.hx-lineup {
  background: #1C1410; color: #F4E9DC;
  padding: clamp(48px, 8vw, 84px) var(--gutter);
}
.hx-lineup .hx-lineup-grid {
  display: grid; grid-template-columns: 1fr auto; gap: 44px; align-items: center;
  max-width: var(--max-narrow); margin: 0 auto;
}
.hx-lineup h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 4.6vw, 50px); letter-spacing: -.03em; line-height: 1.03;
  margin: 0 0 14px; text-wrap: balance; color: #F4E9DC;
}
.hx-lineup h1 em { font-style: italic; color: var(--accent); }
.hx-lineup .hx-sub { margin: 0 0 28px; font-size: 15.5px; color: rgba(244,233,220,.68); max-width: 44ch; line-height: 1.55; }
.hx-lineup .hx-btn { background: #E55934; color: #fff; }
.hx-lineup .hx-btn:hover { background: #F0663F; }
.hx-lineup .hx-meta { color: rgba(244,233,220,.5); }
.hx-lineup .hx-ticket {
  background: #FBF5EA; color: #241A11; width: min(320px, 100%);
  border-radius: 6px; padding: 22px 22px 18px;
  transform: rotate(2deg); position: relative; justify-self: center;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.6);
}
.hx-lineup .hx-ticket::before,
.hx-lineup .hx-ticket::after {
  content: ''; position: absolute; left: 0; right: 0; height: 14px;
  background-image: radial-gradient(circle, #1C1410 7px, transparent 7.5px);
  background-size: 22px 14px; background-position: center;
}
.hx-lineup .hx-ticket::before { top: -7px; }
.hx-lineup .hx-ticket::after  { bottom: -7px; }
.hx-lineup .hx-t-head {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: #A18B72; text-align: center;
  border-bottom: 1.5px dashed #DCCDB6; padding-bottom: 12px; margin-bottom: 14px;
}
.hx-lineup .hx-stop { display: flex; gap: 12px; padding: 9px 0; align-items: baseline; }
.hx-lineup .hx-stop .hx-tt {
  font-family: var(--mono); font-size: 11px; color: #A18B72;
  width: 52px; flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.hx-lineup .hx-stop .hx-tn { font-family: var(--display); font-weight: 700; font-size: 15px; }
.hx-lineup .hx-stop .hx-tm { font-size: 11.5px; color: #A18B72; }
.hx-lineup .hx-stamp {
  position: absolute; right: 14px; bottom: 34px; transform: rotate(-14deg);
  font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .14em;
  color: #C2330F; border: 2.5px solid #C2330F; border-radius: 6px;
  padding: 3px 10px; opacity: .85;
}
.hx-lineup .hx-t-foot {
  border-top: 1.5px dashed #DCCDB6; margin-top: 12px; padding-top: 12px;
  text-align: center; font-size: 11px; color: #A18B72;
}
@media (max-width: 760px) {
  .hx-lineup .hx-lineup-grid { grid-template-columns: 1fr; }
}

/* The site dropped its Google-Fonts import when the press theme landed
   (system stack everywhere). The IG landing keeps its original faces —
   the founder signed off on this page as-is. hero-labs.js loads the
   font stylesheet only when the landing renders. */
body.ig-landing {
  --display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── IG landing · step two ──────────────────────────────────────────────
   Revealed only after step one has the address, so the page opens with a
   single field and the feature rundown sits near the top instead of below
   six inputs. */
.hx-igstep2 { margin-top: 6px; }
.hx-igstep2[hidden] { display: none; }
.hx-igdone {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(21px, 3vw, 27px); letter-spacing: -0.02em;
  color: var(--ink); margin: 0 0 4px;
}
.hx-igstep2sub { margin-bottom: 14px; }
.hx-igstatus2 { margin-top: 10px; }

/* ── Happy-hours ad landing (paper pass) ─────────────────────────────
   Rides ig-landing's structure (nav + sections hidden); this class
   flips the palette to stock. Phone-first — ad traffic is phones. */
body.hh-landing { background: #FAF6EF; }
.hx-hhland { display: flex; justify-content: center; padding: 26px 16px 60px; }
.hh-wrap { width: 100%; max-width: 420px; }
.hh-pass { background: #FFFFFF; border: 1px solid rgba(18,16,15,.14);
  border-radius: 16px; overflow: hidden; color: #12100F;
  box-shadow: 0 18px 44px rgba(18,16,15,.12); }
.hh-top { display: flex; align-items: center; gap: 9px; padding: 15px 18px 12px; }
.hh-mark { width: 22px; height: 22px; display: block; }
.hh-brand { font-weight: 800; letter-spacing: .02em; font-size: 15px; }
.hh-ref { margin-left: auto; font-family: ui-monospace, Menlo, monospace;
  font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: #A8A29A; }
.hh-grad { height: 4px;
  background: linear-gradient(90deg,#FF8A3D,#FF2D6F 40%,#C226B8 72%,#7B2FF7); }
.hh-kick { font-size: 9.5px; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: #8A6600; margin: 18px 18px 0; }
.hh-h1 { font-weight: 800; font-size: 29px; letter-spacing: -.024em;
  line-height: 1.05; margin: 7px 18px 9px; }
.hh-h1 em { font-style: italic; }
.hh-sub { font-size: 13px; line-height: 1.55; color: #6E6A63; margin: 0 18px 16px; }
.hh-sub b { color: #12100F; }
.hh-perf { border-top: 2px dashed rgba(18,16,15,.16); position: relative; }
.hh-perf::before, .hh-perf::after { content: ""; position: absolute; top: -9px;
  width: 18px; height: 18px; border-radius: 50%; background: #FAF6EF;
  border: 1px solid rgba(18,16,15,.10); }
.hh-perf::before { left: -10px; } .hh-perf::after { right: -10px; }
.hh-form { padding: 16px 18px 18px; position: relative; }
.hh-lab { display: flex; gap: 6px; font-size: 9px; font-weight: 800;
  letter-spacing: .15em; text-transform: uppercase; color: #6E6A63; margin: 0 0 6px; }
.hh-lab span { font-family: ui-monospace, Menlo, monospace; color: #A8A29A; }
.hh-input { width: 100%; box-sizing: border-box; background: #FAF6EF;
  border: 1px solid rgba(18,16,15,.18); border-radius: 8px; color: #12100F;
  font-size: 16px; padding: 13px 14px; outline: none; font-family: inherit; }
.hh-input:focus { border-color: #12100F; box-shadow: 0 0 0 3px rgba(18,16,15,.08); }
.hh-cta { width: 100%; box-sizing: border-box; margin-top: 10px; padding: 14px;
  border-radius: 8px; background: #FFD24D; color: #0a0a0a;
  border: 1px solid #7A5000; font-weight: 800; font-size: 15px; cursor: pointer; }
.hh-cta:hover { background: #F5C21F; }
.hh-fine { font-size: 11px; color: #8A8378; text-align: center; margin: 10px 0 0; }
/* padding:0 kills the ~115px the global section rule injects — the
   mystery gap between the pass and the cards. */
.hh-inside { margin: 24px 0 0; padding: 0; }
/* The empty status well held 32px between the button and the fine print;
   it only needs space once a submit gives it something to say. */
.hh-form .cta-status:empty { display: none; }
.hh-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: #6E6A63; margin: 0 0 12px; text-align: center; }
.hh-card { display: flex; gap: 14px; align-items: flex-start;
  background: rgba(18,16,15,.05); border-radius: 12px; padding: 15px 16px;
  margin-bottom: 10px; color: #12100F; }
.hh-tile { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
  border: 1.5px solid; background: #FFFFFF;
  display: flex; align-items: center; justify-content: center; }
.hh-tile svg { width: 21px; height: 21px; }
.hh-card h3 { margin: 1px 0 3px; font-size: 15px; font-weight: 800;
  letter-spacing: -.01em; }
.hh-card p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #6E6A63; }
.hh-foot { text-align: center; font-size: 12.5px; color: #6E6A63;
  margin: 18px 0 0; line-height: 1.6; }
.hh-foot b { color: #12100F; }

/* ── Instagram profile hub (the bio link) ────────────────────────────
   Rides ig-landing's structure. A link-in-bio page: identity, one ask,
   then the destinations. Phone-first. */
body.bio-landing { background: #FAF6EF; }
.hx-bioland { display: flex; justify-content: center; padding: 30px 18px 60px; }
.bio-wrap { width: 100%; max-width: 400px; }
.bio-head { text-align: center; margin-bottom: 22px; }
.bio-mark { display: block; margin: 0 auto 12px; }
.bio-h1 { font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px;
  color: #12100F; }
.bio-tag { font-size: 14px; line-height: 1.5; color: #6E6A63; margin: 0 auto; max-width: 30ch; }
.bio-form { margin: 0 0 26px; }
.bio-input { width: 100%; box-sizing: border-box; background: #FFFFFF;
  border: 1px solid rgba(18,16,15,.18); border-radius: 8px; color: #12100F;
  font-size: 16px; padding: 13px 14px; outline: none; font-family: inherit; }
.bio-input:focus { border-color: #12100F; box-shadow: 0 0 0 3px rgba(18,16,15,.08); }
.bio-cta { width: 100%; box-sizing: border-box; margin-top: 9px; padding: 14px;
  border-radius: 8px; background: #FFD24D; color: #0a0a0a; border: 1px solid #7A5000;
  font-weight: 800; font-size: 15px; cursor: pointer; font-family: inherit; }
.bio-cta:hover { background: #F5C21F; }
.bio-form .cta-status:empty { display: none; }
.bio-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: #8A8378; margin: 0 0 10px; text-align: center; }
.bio-link { display: flex; align-items: center; gap: 13px; text-decoration: none;
  background: #FFFFFF; border: 1px solid rgba(18,16,15,.13);
  border-radius: 12px; padding: 0 15px 0 0; margin-bottom: 9px; overflow: hidden;
  transition: border-color 120ms ease, transform 120ms ease; }
.bio-link:hover { border-color: #12100F; transform: translateY(-1px); }
.bio-bar { flex: 0 0 auto; width: 5px; align-self: stretch; background: var(--lc); }
.bio-copy { flex: 1 1 auto; padding: 14px 0; }
.bio-copy b { display: block; font-size: 15.5px; font-weight: 800; color: #12100F;
  letter-spacing: -.01em; }
.bio-copy i { display: block; font-style: normal; font-size: 12.5px; color: #6E6A63;
  margin-top: 2px; line-height: 1.4; }
.bio-arrow { flex: 0 0 auto; color: #A8A29A; font-size: 17px; font-weight: 800; }
.bio-foot { text-align: center; font-size: 12px; color: #8A8378; margin: 20px 0 0; }

/* ── Step two, shared by the ad landings and the profile hub ─────────
   Reuses each skin's own input/button classes; only the layout of the
   step lives here. */
.jf-step2 { padding: 0 18px 18px; }
.bio-landing .jf-step2 { padding: 0; margin-top: -14px; }
.jf-done { font-size: 15px; font-weight: 800; color: #12100F; margin: 16px 0 2px; }
.bio-landing .jf-done { margin-top: 0; }
.jf-s2sub { font-size: 12.5px; line-height: 1.5; color: #6E6A63; margin: 0 0 14px; }
.jf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jf-fld { margin-bottom: 10px; min-width: 0; }
.jf-fld > input, .jf-fld > select { width: 100%; box-sizing: border-box; }
.jf-lab { display: flex; gap: 6px; font-size: 9px; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: #6E6A63; margin: 0 0 6px; }
.jf-lab span { font-family: ui-monospace, Menlo, monospace; opacity: .5; }
.jf-form2 select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236E6A63' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 11px;
  padding-right: 32px; }
.jf-form2 .cta-status:empty { display: none; }
.jf-skip { display: block; width: 100%; margin: 9px 0 0; padding: 4px; background: none;
  border: 0; font: inherit; font-size: 12.5px; color: #8A8378; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; }
.jf-skip:hover { color: #12100F; }
@media (max-width: 380px) { .jf-row { grid-template-columns: 1fr; gap: 0; } }