/* ==========================================================================
   sell-tickets.html — the page an organizer lands on before they have an
   account. Loaded only here, so none of it costs the rest of the site.
   ========================================================================== */

/* ------------------------------------------------------------------- hero */

.host-hero {
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.host-hero-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 48px; align-items: center;
  padding: 72px 20px 80px;
}
.host-hero-copy h1 {
  color: #fff;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 18px;
}
.host-lede {
  font-size: 1.125rem; line-height: 1.6; color: #cfc9dd;
  max-width: 44ch; margin: 0 0 28px;
}
.host-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.host-cta-alt {
  color: #fff; font-weight: 600; font-size: .9375rem;
  text-decoration: underline; text-underline-offset: 4px;
}
.host-cta-alt:hover { color: #fff; }
.host-note { margin: 18px 0 0; font-size: .875rem; color: #a9a0c2; }

/* ---- the drawn ticket
   The one piece of decoration on the page, so it carries the brand rather
   than a stock photograph. */
.host-hero-art { display: flex; justify-content: center; }
.host-ticket {
  display: flex; width: 100%; max-width: 390px;
  background: #fff; color: var(--ink);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  transform: rotate(-2deg);
}
.host-ticket-main { flex: 1 1 auto; padding: 20px 18px; min-width: 0; }
.host-ticket-eyebrow {
  display: block; font-size: .6875rem; font-weight: 700;
  color: var(--brand-ink); letter-spacing: .04em; margin-bottom: 6px;
}
.host-ticket-main strong { display: block; font-size: 1.125rem; line-height: 1.25; }
.host-ticket-meta {
  display: block; font-size: .8125rem; color: var(--muted); margin-top: 4px;
}
.host-ticket-rows {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 10px;
  margin-top: 16px; padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: .8125rem;
}
.host-ticket-rows span:nth-child(even) { font-weight: 700; text-align: right; }
.host-ticket-rows span:nth-child(4) { color: var(--muted); font-weight: 600; }

/* The stub, separated by a perforation rather than a plain line. */
.host-ticket-stub {
  flex: none; width: 96px; padding: 20px 10px;
  background: var(--bg-soft);
  border-left: 2px dashed var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  font-size: .625rem; font-weight: 700; letter-spacing: .08em; color: var(--muted);
}
.host-ticket-qr {
  width: 56px; height: 56px; border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(0deg,  var(--ink) 0 4px, transparent 4px 8px);
  opacity: .85;
}

/* ----------------------------------------------------------------- blocks */

.host-block { padding: 72px 0; }
.host-block-soft { background: var(--bg-soft); }
.host-h2 {
  font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.01em;
  margin: 0 0 36px; max-width: 24ch;
}

/* ---- the three steps */
.host-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px;
  counter-reset: none;
}
.host-steps li { position: relative; padding-top: 6px; }
.host-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-ink);
  font-weight: 800; font-size: .9375rem; margin-bottom: 14px;
}
.host-steps h3 { font-size: 1.0625rem; margin: 0 0 6px; }
.host-steps p { margin: 0; color: var(--body); line-height: 1.6; max-width: 34ch; }

/* ---- what comes with it */
.host-grid {
  /* Six cards want three across, not four — at four the second row is a pair
     of orphans. 300px is the width that forces that at container size. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;
}
.host-card {
  background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: 22px 20px;
}
.host-card-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--brand-soft); color: var(--brand-ink); margin-bottom: 14px;
}
.host-card-ico svg { width: 21px; height: 21px; }
.host-card h3 { font-size: 1rem; margin: 0 0 6px; }
.host-card p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--body); }

/* ------------------------------------------------------------------- door */

.host-door { padding: 76px 0; }
.host-door-in {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,300px);
  gap: 56px; align-items: center;
}
.host-door h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 16px; letter-spacing: -.01em; }
.host-door p { color: var(--body); line-height: 1.7; max-width: 48ch; margin: 0 0 14px; }

.host-door-art { display: flex; justify-content: center; }
.host-phone {
  width: 210px; height: 400px; border-radius: 30px;
  background: var(--ink); padding: 10px;
  box-shadow: 0 20px 50px rgba(30,10,60,.26);
}
.host-phone-screen {
  width: 100%; height: 100%; border-radius: 22px;
  background: #0f0620;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.host-scan-frame {
  width: 128px; height: 128px; border-radius: 14px;
  border: 3px solid var(--green);
  box-shadow: 0 0 0 6px rgba(15,123,87,.18);
}
.host-scan-ok { color: #4ade9a; font-weight: 700; font-size: .9375rem; }
.host-scan-name { color: #9f97b8; font-size: .75rem; }

/* ------------------------------------------------------------ closing cta */

.host-final { background: var(--brand-soft); padding: 72px 0; }
.host-final-in { text-align: center; }
.host-final h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 10px; }
.host-final p { color: var(--body); margin: 0 0 26px; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .host-hero-in { grid-template-columns: 1fr; gap: 40px; padding: 52px 20px 60px; }
  .host-hero-art { order: -1; }
  .host-ticket { transform: none; max-width: 340px; }
  .host-door-in { grid-template-columns: 1fr; gap: 36px; }
  .host-door-art { order: -1; }
  .host-block, .host-door, .host-final { padding: 52px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .host-ticket { transform: none; }
}