:root {
  --navy: #111a34;
  --ink: #111827;
  --brand: #6d28d9;
  --brand-dark: #4c1d95;
  --coral: #be4b49;
  --cream: #f8f5ec;
  --slate: #1e293b;
  --muted: #64748b;
  --line: #d8dee8;
  --gold: #d97706;
  --white: #ffffff;
  --mist: #eef4f7;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--slate);
  background: #f6f8fb;
}
a { color: var(--brand); text-decoration: none; font-weight: 700; }
a:hover { color: var(--brand-dark); }
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 64px;
  padding: 0 32px;
  background: var(--navy);
  color: var(--white);
}
.topbar a, .topbar button { color: var(--white); }
.brand { font-size: 1.25rem; font-weight: 900; display: inline-flex; align-items: center; }
.brand-logo { height: 34px; width: auto; display: block; }
.footer-logo { height: 38px; margin-bottom: 12px; }
nav, .actions, .toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.main-nav { justify-content: flex-end; }
.main-nav a.active {
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 7px 10px;
}
.inline-form { display: inline; margin: 0; }
button, .button {
  border: 0;
  border-radius: 6px;
  padding: 11px 16px;
  background: var(--brand);
  color: var(--white);
  cursor: pointer;
  font-weight: 800;
  display: inline-block;
}
.button.secondary { background: var(--slate); }
.button.light { background: var(--white); color: var(--navy); }
.button.small { padding: 7px 11px; font-size: .9rem; }
.container { width: min(1120px, calc(100% - 32px)); margin: 32px auto 64px; }
.breadcrumbs {
  width: min(1120px, calc(100% - 32px));
  margin: 18px auto -10px;
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: .92rem;
}
.breadcrumbs a::after,
.breadcrumbs span::after {
  content: "/";
  color: #94a3b8;
  margin-left: 8px;
}
.breadcrumbs strong { color: var(--navy); }
.app-hero {
  background: linear-gradient(135deg, #ffffff, #eef4f7);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
}
.app-hero p { max-width: 720px; }
.dashboard-stats div { min-height: 98px; }
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr);
  gap: 20px;
  margin-bottom: 20px;
}
.dashboard-primary { min-height: 240px; }
.workflow-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.workflow-strip a {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}
.workflow-strip strong,
.workflow-strip span,
.attention-list strong,
.attention-list span {
  display: block;
}
.workflow-strip span,
.attention-list span { color: var(--muted); margin-top: 4px; }
.attention-list {
  display: grid;
  gap: 12px;
}
.attention-list p {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 14px;
}
.attention-list strong { color: var(--navy); font-size: 1.4rem; }
.workflow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.workflow-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
}
.workflow-card h2 {
  color: var(--navy);
  margin: 8px 0 10px;
  font-size: 1.25rem;
}
.workflow-card p { line-height: 1.55; }
.workflow-card .actions {
  gap: 8px;
  align-items: flex-start;
}
.workflow-card .actions a {
  background: #f5f3ff;
  border: 1px solid #c4b5fd;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: .9rem;
}
.activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.activity-list li {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.activity-list li:last-child { border-bottom: 0; }
.activity-list span { display: block; color: var(--muted); margin-top: 3px; }
.link-stack {
  display: grid;
  gap: 10px;
}
.link-stack a {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}
.marketing-main { margin: 0; }
.marketing-wrap { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.marketing-wrap.narrow-copy, .narrow-copy { width: min(820px, calc(100% - 32px)); }
.hero, .public-hero {
  background: var(--navy);
  color: var(--white);
  border-radius: 8px;
  padding: 56px;
  margin-bottom: 28px;
}
.hero h1, .public-hero h1 { font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 1; margin: 0 0 20px; }
.lede { font-size: 1.25rem; max-width: 760px; color: #dbeafe; }
.eyebrow { color: var(--brand); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; }
.marketing-hero {
  min-height: 680px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: var(--white);
}
.hero-copy { padding: 92px 0 120px; }
.hero-copy h1 {
  max-width: 820px;
  margin: 0 0 22px;
  font-size: clamp(3rem, 8vw, 6.8rem);
  line-height: .92;
  letter-spacing: 0;
}
.hero-copy .lede { color: #eef7f8; max-width: 720px; }
.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 180px));
  gap: 12px;
  margin: 44px 0 0;
}
.hero-metrics div {
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(17,26,52,.5);
  border-radius: 8px;
  padding: 16px;
}
.hero-metrics dt {
  margin: 0;
  color: var(--white);
  font-size: 1.45rem;
}
.hero-metrics dd { color: #dbeafe; font-size: .92rem; }
.subhero {
  background: var(--navy);
  color: var(--white);
  padding: 86px 0 72px;
}
.subhero h1 {
  max-width: 980px;
  margin: 0 0 18px;
  font-size: clamp(2.4rem, 6vw, 5.4rem);
  line-height: .96;
}
.subhero .lede { color: #dbeafe; }
.compact-subhero { padding: 64px 0 44px; }
.split-section {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 64px;
  padding: 88px 0;
}
.split-section h2, .marketing-band h2, .proof-section h2, .two-column-cta h2, .section-heading h2, .final-cta h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
}
.rich-copy p {
  margin-top: 0;
  font-size: 1.15rem;
  line-height: 1.75;
}
.marketing-band {
  background: var(--mist);
  padding: 84px 0;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}
.feature-card, .article-card, .pricing-card, .resource-panel, .contact-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
}
.feature-card span, .use-case-grid span {
  color: var(--coral);
  font-weight: 900;
}
.feature-card h3, .article-card h3, .pricing-card h2, .resource-panel h2, .contact-panel h2 {
  color: var(--navy);
  margin: 10px 0;
}
.proof-section, .two-column-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  padding: 84px 0;
  align-items: start;
}
.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pill-list span {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  color: #9a3412;
  font-weight: 800;
  padding: 10px 14px;
}
.check-list {
  display: grid;
  gap: 12px;
}
.check-list p {
  margin: 0;
  background: var(--white);
  border-left: 5px solid var(--brand);
  border-radius: 8px;
  padding: 18px 18px 18px 20px;
  box-shadow: 0 8px 28px rgba(15,23,42,.06);
}
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.article-card span, .article-list span, .article-meta {
  color: var(--muted);
  font-weight: 700;
}
.final-cta {
  background: #15141f;
  color: var(--white);
  padding: 86px 0;
  margin-top: 82px;
}
.final-cta h2 { color: var(--white); max-width: 860px; }
.feature-detail-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 72px 0;
}
.feature-detail-list article, .use-case-grid article, .article-list article {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
}
.feature-detail-list h2, .use-case-grid h2, .article-list h2, .legal-copy h2 {
  color: var(--navy);
  margin-top: 0;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 72px 0;
}
.pricing-card strong {
  display: block;
  color: var(--coral);
  font-size: 1.2rem;
  margin-bottom: 14px;
}
.pricing-card.emphasized {
  background: var(--navy);
  color: var(--white);
}
.pricing-card.emphasized h2 { color: var(--white); }
.pricing-card li { margin-bottom: 8px; }
.use-case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding: 72px 0;
}
.resource-layout, .contact-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding: 72px 0;
}
.resource-panel.wide { grid-column: 1 / -1; }
.article-list {
  display: grid;
  gap: 18px;
  padding: 72px 0;
}
.article-page {
  padding: 72px 0;
  background: var(--white);
}
.article-page h1 {
  color: var(--navy);
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  line-height: 1;
  margin-bottom: 12px;
}
.article-page .lede { color: var(--slate); }
.article-page p, .legal-copy p {
  font-size: 1.1rem;
  line-height: 1.8;
}
.article-next {
  border-top: 1px solid var(--line);
  margin-top: 34px;
  padding-top: 24px;
}
.legal-copy { padding: 56px 0 80px; }
.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 24px; }
.page-header.compact { margin-bottom: 12px; align-items: center; }
.page-header h1 { margin: 0; font-size: 2.4rem; color: var(--navy); }
.grid { display: grid; gap: 20px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panel, .card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 20px;
}
.panel.narrow { max-width: 720px; margin-inline: auto; }
.panel h2, .card h3 { margin-top: 0; color: var(--brand-dark); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.stats div { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
.stats strong { display: block; font-size: 1.6rem; color: var(--navy); }
.stats span, .muted { color: var(--muted); }
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--line); padding: 12px; text-align: left; vertical-align: top; }
th { background: var(--navy); color: var(--white); }
.toolbar { background: var(--cream); border: 1px solid #eadfc8; border-radius: 8px; padding: 14px; margin-bottom: 20px; }
.form-grid p { display: grid; gap: 6px; margin: 0 0 14px; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  font: inherit;
}
textarea { min-height: 100px; }
.messages { margin-bottom: 20px; }
.message { padding: 12px 14px; border-radius: 6px; background: #f1edfe; border: 1px solid #c4b5fd; }
.link-list { padding-left: 18px; }
.searchbar { display: flex; gap: 10px; margin-bottom: 18px; }
dt { font-weight: 900; color: var(--navy); margin-top: 14px; }
dd { margin-left: 0; }
.pass {
  width: min(720px, 100%);
  margin: 48px auto;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 8px;
  padding: 36px;
  text-align: center;
}
.pass h1 { color: var(--navy); font-size: 2.5rem; margin: 0 0 10px; }
.pass-code {
  margin: 28px auto;
  padding: 18px;
  border: 1px dashed var(--brand);
  border-radius: 8px;
  background: #f5f3ff;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow-wrap: anywhere;
}
.qr-code {
  width: 220px;
  height: 220px;
  object-fit: contain;
  margin: 24px auto 4px;
  display: block;
  border: 8px solid white;
  box-shadow: 0 0 0 1px var(--line);
}
.page-builder-form h2 { margin-top: 0; color: var(--navy); }
.toggle-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.toggle-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  font-weight: 800;
}
.toggle-list input { width: auto; }
.event-public-main { margin: 0; background: #f6f8fb; }
.event-site-wrap { width: min(var(--site-wrap, 1120px), calc(100% - 32px)); margin-inline: auto; }
.event-site-hero {
  min-height: 560px;
  background: linear-gradient(135deg, var(--navy), #1f2937);
  background-size: cover;
  background-position: center;
  color: var(--white);
  display: flex;
  align-items: center;
}
.event-site-hero .event-site-wrap { padding: 84px 0 104px; }
.event-site-hero .eyebrow, .event-site-cta .eyebrow { color: #c4b5fd; }
.event-site-hero h1 {
  max-width: 15ch;
  margin: 0 0 20px;
  font-size: clamp(3rem, 7vw, 6.75rem);
  line-height: .97;
  padding-top: .06em; /* room for ascenders at sub-1 line-height */
}
.event-site-hero .lede { color: #eff6ff; }
.event-logo {
  display: block;
  max-width: 150px;
  max-height: 90px;
  object-fit: contain;
  margin-bottom: 22px;
  background: rgba(255,255,255,.92);
  border-radius: 8px;
  padding: 10px;
}
.event-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: -46px;
  position: relative;
  z-index: 2;
}
.event-summary-strip div {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 5px solid var(--event-theme, var(--brand));
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 16px 40px rgba(15,23,42,.12);
}
.event-summary-strip strong {
  display: block;
  color: var(--navy);
  font-size: 1.1rem;
}
.event-summary-strip span { color: var(--muted); }

/* Event-type category chip + featured band */
.event-public-main .event-type-chip {
  display: inline-block;
  padding: 5px 13px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.event-featured-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding: 26px 30px;
  border-radius: 16px;
  background: var(--site-surface, #f8fafc);
  border: 1px solid var(--site-line, var(--line));
}
.event-featured-band h2 { margin: 4px 0 0; }

/* Smart empty/solo states: a single card should feel featured, not lonely.
   A two-item row stays balanced instead of leaving a gap. */
.event-public-main .grid.three:has(> :only-child) {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}
.event-public-main .grid.three:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 820px;
  margin-inline: auto;
}
.event-public-main .sponsor-wall:has(> :only-child) { justify-content: center; }

/* Sticky mobile call-to-action */
.mobile-cta-bar { display: none; }
@media (max-width: 720px) {
  .mobile-cta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .12);
  }
  .mobile-cta-meta { font-weight: 700; color: var(--navy); font-size: .9rem; }
  .mobile-cta-bar .button.cta { margin: 0; white-space: nowrap; }
  /* Keep the fixed bar from covering the powered-by footer. */
  .event-public-main { padding-bottom: 76px; }
}

.event-section { padding: 78px 0; }
.event-page-band {
  background: var(--mist);
  padding: 78px 0;
}
.event-product-card strong {
  display: block;
  color: var(--coral);
  font-size: 1.35rem;
  margin-bottom: 8px;
}
.event-section-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 78px 0;
}
.event-section-grid article {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
}
.event-section-grid h2 {
  color: var(--navy);
  margin: 0 0 12px;
}
.event-site-cta {
  background: var(--navy);
  color: var(--white);
  padding: 82px 0;
  margin-top: 42px;
  border-top: 6px solid var(--event-theme, var(--brand));
}
.event-site-cta h2 {
  max-width: 860px;
  margin: 0 0 24px;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
}
.checkout-layout { padding: 56px 0 80px; }
.checkout-form { display: grid; gap: 20px; }
.ticket-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.ticket-select-card {
  display: grid;
  gap: 18px;
  min-height: 220px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
}
.ticket-select-card.sold-out {
  opacity: .62;
  background: #f8fafc;
}
.ticket-select-card h3 { color: var(--navy); margin: 0 0 8px; }
.ticket-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
}
.ticket-card-footer strong {
  display: block;
  color: var(--coral);
  font-size: 1.4rem;
}
.ticket-card-footer span { color: var(--muted); }
.quantity-field {
  width: 140px;
  display: grid;
  gap: 4px;
}
.quantity-field label {
  font-size: .8rem;
  color: var(--muted);
  font-weight: 900;
}
.quantity-field small { color: #b91c1c; }
.event-receipt-hero {
  background: var(--navy);
  color: var(--white);
  padding: 76px 0 92px;
  border-bottom: 6px solid var(--event-theme, var(--brand));
}
.event-receipt-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1;
}
.receipt-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: -42px;
  margin-bottom: 32px;
}
.receipt-summary div {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 14px 34px rgba(15,23,42,.1);
}
.receipt-summary strong {
  display: block;
  color: var(--navy);
  overflow-wrap: anywhere;
}
.receipt-summary span { color: var(--muted); }
.ticket-pass-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.ticket-mini-card {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}
.ticket-mini-card h3 { margin: 0 0 8px; color: var(--navy); }
.ticket-pass { border-top: 8px solid var(--event-theme, var(--brand)); }
.ticket-pass-type {
  color: var(--brand-dark);
  font-weight: 900;
  font-size: 1.15rem;
}
.application-form-layout { padding: 56px 0 80px; }
.form-section-heading {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 22px;
}
.form-section-heading h2 {
  color: var(--navy);
  margin: 0 0 12px;
}
.form-grid small {
  color: var(--muted);
  font-weight: 600;
}
.application-filters input,
.application-filters select {
  width: auto;
  min-width: 180px;
}
.launch-panel h2 { color: var(--navy); margin: 0; }
.launch-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.launch-checklist div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #f8fafc;
}
.launch-checklist .done {
  border-color: #c4b5fd;
  background: #f5f3ff;
}
.launch-checklist .missing {
  border-color: #fed7aa;
  background: #fff7ed;
}
.launch-checklist strong,
.launch-checklist span {
  display: block;
}
.launch-checklist span { color: var(--muted); margin-top: 6px; }
.status-pill {
  display: inline-block;
  border-radius: 999px;
  font-weight: 900;
  padding: 8px 12px;
}
.status-pill.good { background: #ede9fe; color: #4c1d95; }
.status-pill.warning { background: #fed7aa; color: #9a3412; }
.seo-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 72px 0;
}
.seo-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  min-height: 230px;
}
.seo-card h2 {
  color: var(--navy);
  margin: 8px 0 12px;
  font-size: 1.35rem;
}
.seo-card p { line-height: 1.6; }
.page-library {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding: 72px 0;
}
.page-library .panel { margin-bottom: 0; }
.pill-list a { display: inline-block; }
.site-footer {
  background: var(--navy);
  color: #cbd5e1;
  padding: 54px 32px 28px;
}
.footer-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 32px;
}
.footer-brand {
  display: inline-block;
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 900;
  margin-bottom: 12px;
}
.site-footer h3 {
  color: var(--white);
  margin: 0 0 12px;
  font-size: 1rem;
}
.site-footer a {
  color: #dbeafe;
  display: block;
  margin-bottom: 9px;
}
.footer-bottom {
  width: min(1180px, 100%);
  margin: 34px auto 0;
  border-top: 1px solid rgba(255,255,255,.16);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: #94a3b8;
}
/* ==========================================================================
   Marketing redesign - layered design system for public marketing pages.
   Overrides earlier marketing styles; app (authenticated) styles untouched.
   ========================================================================== */

:root {
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-soft: 0 10px 40px rgba(17, 26, 52, .08);
  --shadow-lift: 0 22px 60px rgba(17, 26, 52, .16);
  --brand-bright: #8b5cf6;
  --amber: #f59e0b;
}

button, .button {
  border-radius: 999px;
  padding: 12px 22px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
button:hover, .button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(109, 40, 217, .28);
  color: var(--white);
}
.button.light:hover { color: var(--navy); }
.button.small { padding: 8px 14px; }
.button.cta { background: linear-gradient(120deg, #7c3aed, #a855f7); }
.button.cta:hover { box-shadow: 0 8px 22px rgba(139, 92, 246, .5); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(17, 26, 52, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  flex-wrap: wrap;
  gap: 12px 16px;
  padding-block: 8px;
}
.topbar .brand { flex: 0 0 auto; }
/* Above the sidebar breakpoint the header must stay a single 64px row so the
   sticky sidebar's top offset stays correct. */
@media (min-width: 961px) {
  .topbar { flex-wrap: nowrap; padding-block: 0; }
  .main-nav { flex-wrap: nowrap; row-gap: 0; }
}
/* Below it the nav wraps onto several rows, so a sticky header would cover the
   page. Let it scroll away instead. */
@media (max-width: 960px) {
  .topbar { position: static; padding-inline: 16px; }
  .main-nav { gap: 8px 10px; justify-content: flex-start; }
  .main-nav a, .nav-drop-toggle { font-size: .95rem; padding: 6px 8px; }
}

.marketing-main { color: var(--slate); }
.marketing-main h1, .marketing-main h2 { letter-spacing: -.02em; }

/* Hero */
.m-hero {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  color: var(--white);
  background-size: cover;
  background-position: center;
}
.m-hero .marketing-wrap { padding: 110px 0 130px; position: relative; z-index: 2; }
.m-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(139, 92, 246, .16);
  border: 1px solid rgba(167, 139, 250, .45);
  color: #c4b5fd;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .02em;
}
.m-hero h1 {
  max-width: 900px;
  margin: 22px 0;
  font-size: clamp(2.9rem, 7vw, 5.6rem);
  line-height: 1.02;
  font-weight: 900;
}
.m-hero h1 em {
  font-style: normal;
  color: var(--brand-bright);
}
/* Rotating headline word ("Event" -> Expo -> Convention ...) with a
   slide-down swap. The rotator masks the vertical slide and animates its
   width so the trailing text glides as words of different lengths swap.
   The h1 line-height is 1.02, so glyph descenders (the "p" in "Expo") paint
   below the line box; the extra bottom padding (cancelled by the negative
   margin so layout doesn't shift) keeps them inside the overflow mask. */
.word-rotator {
  display: inline-flex;
  overflow: hidden;
  vertical-align: bottom;
  padding: .1em 0 .22em;
  margin: -.1em 0 -.22em;
  transition: width .34s cubic-bezier(.22,.61,.36,1);
}
.word-rotate {
  display: inline-block;
  white-space: nowrap;
  transform: translateY(0);
  opacity: 1;
  transition: transform .34s cubic-bezier(.22,.61,.36,1), opacity .34s ease;
  will-change: transform, opacity;
}
/* 140% (not 105%) so the word fully clears the padded mask before swapping */
.word-rotate.is-out { transform: translateY(140%); opacity: 0; }
.word-rotate.is-in { transform: translateY(-140%); opacity: 0; }
.word-rotate.no-anim { transition: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .word-rotate { transition: opacity .2s ease; }
  .word-rotate.is-out, .word-rotate.is-in { transform: none; }
}
.m-hero .lede { color: #e2e8f0; max-width: 660px; font-size: 1.3rem; line-height: 1.6; }
.m-hero .actions { margin-top: 34px; }
.m-hero .button { font-size: 1.05rem; padding: 15px 28px; }
.m-hero-note { margin-top: 16px; color: #94a3b8; font-size: .92rem; }

.m-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
  margin-top: 54px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  color: #cbd5e1;
  font-weight: 700;
  font-size: .95rem;
}
.m-trust-strip span::before {
  content: "\2713";
  color: var(--brand-bright);
  font-weight: 900;
  margin-right: 8px;
}

/* Section scaffolding */
.m-section { padding: 96px 0; }
.m-section.tight { padding: 72px 0; }
.m-section-head { max-width: 760px; margin-bottom: 48px; }
.m-section-head.center { margin-inline: auto; text-align: center; }
.m-section-head h2 {
  margin: 10px 0 16px;
  color: var(--navy);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.05;
}
.m-section-head p { font-size: 1.16rem; line-height: 1.7; color: var(--muted); margin: 0; }
.m-band { background: var(--mist); }
.m-band-dark {
  background: linear-gradient(160deg, var(--navy) 0%, #14233c 60%, #2e1065 100%);
  color: var(--white);
}
.m-band-dark .m-section-head h2 { color: var(--white); }
.m-band-dark .m-section-head p { color: #cbd5e1; }

/* Pipeline (numbered workflow) */
.m-pipeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  counter-reset: step;
}
.m-pipeline article {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px;
  box-shadow: var(--shadow-soft);
}
.m-band-dark .m-pipeline article {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: none;
}
.m-pipeline article::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--brand);
  color: var(--white);
  font-weight: 900;
  margin-bottom: 14px;
}
.m-pipeline h3 { margin: 0 0 8px; color: var(--navy); font-size: 1.08rem; }
.m-band-dark .m-pipeline h3 { color: var(--white); }
.m-pipeline p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.m-band-dark .m-pipeline p { color: #cbd5e1; }

/* Alternating image / copy feature rows */
.m-feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 56px 0;
}
.m-feature-row.flip > .m-feature-media { order: 2; }
.m-feature-media {
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}
.m-feature-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.m-feature-row:hover .m-feature-media img { transform: scale(1.05) rotate(.4deg); }
.m-feature-copy h3 {
  margin: 12px 0 16px;
  color: var(--navy);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.1;
}
.m-feature-copy p { font-size: 1.1rem; line-height: 1.75; color: var(--slate); }
.m-feature-copy ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 22px;
  display: grid;
  gap: 10px;
}
.m-feature-copy li { padding-left: 30px; position: relative; font-weight: 600; }
.m-feature-copy li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ede9fe;
  color: var(--brand-dark);
  font-size: .8rem;
  font-weight: 900;
}

/* Photo cards (use cases) */
.m-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.m-photo-card {
  display: block;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 340px;
  color: var(--white);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.m-photo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); color: var(--white); }
.m-photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17,26,52,0) 20%, rgba(17,26,52,.55) 60%, rgba(17,26,52,.92) 100%);
}
.m-photo-card-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 24px;
  z-index: 2;
}
.m-photo-card h3 { margin: 0 0 8px; font-size: 1.3rem; }
.m-photo-card p { margin: 0 0 12px; color: #e2e8f0; font-size: .95rem; line-height: 1.55; }
.m-photo-card span { color: var(--brand-bright); font-weight: 800; font-size: .9rem; }

/* Stats + quote */
.m-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.m-stat-row div {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  padding: 26px 22px;
}
.m-stat-row strong { display: block; color: var(--white); font-size: 2rem; margin-bottom: 6px; }
.m-stat-row span { color: #cbd5e1; }
.m-quote {
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
}
.m-quote blockquote {
  margin: 0 0 18px;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.45;
  color: var(--navy);
  font-weight: 700;
}
.m-quote cite { color: var(--muted); font-style: normal; font-weight: 700; }

/* Feature index cards */
.m-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.m-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
}
.m-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.m-card h3 { color: var(--navy); margin: 12px 0 10px; font-size: 1.25rem; }
.m-card p { color: var(--muted); line-height: 1.65; margin: 0 0 16px; flex: 1; }
.m-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: #ede9fe;
}

/* Pricing */
.m-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.m-price-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-soft);
}
.m-price-card.featured {
  background: var(--navy);
  color: #e2e8f0;
  border-color: var(--navy);
  box-shadow: var(--shadow-lift);
  position: relative;
}
.m-price-card.featured::before {
  content: "Most popular";
  position: absolute;
  top: -14px;
  left: 26px;
  background: linear-gradient(120deg, #7c3aed, #a855f7);
  color: var(--white);
  font-size: .78rem;
  font-weight: 900;
  border-radius: 999px;
  padding: 5px 13px;
  letter-spacing: .03em;
}
.m-price-card h3 { margin: 0 0 4px; color: var(--navy); font-size: 1.2rem; }
.m-price-card.featured h3 { color: var(--white); }
.m-price { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 6px; }
.m-price strong { font-size: 2.6rem; color: var(--navy); font-weight: 900; }
.m-price-card.featured .m-price strong { color: var(--white); }
.m-price span { color: var(--muted); font-weight: 700; }
.m-price-desc { color: var(--muted); min-height: 44px; margin: 0 0 16px; font-size: .95rem; }
.m-price-card.featured .m-price-desc, .m-price-card.featured li { color: #cbd5e1; }
.m-price-card ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 9px; flex: 1; }
.m-price-card li { padding-left: 26px; position: relative; font-size: .95rem; }
.m-price-card li::before { content: "\2713"; position: absolute; left: 0; color: var(--brand-bright); font-weight: 900; }
.m-price-card .button { text-align: center; }
.m-pricing-note {
  margin-top: 26px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  color: #92400e;
  font-weight: 600;
}

/* FAQ */
.m-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.m-faq article {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.m-faq h3 { margin: 0 0 10px; color: var(--navy); font-size: 1.05rem; }
.m-faq p { margin: 0; color: var(--muted); line-height: 1.65; }

/* Final CTA */
.m-cta {
  position: relative;
  background-size: cover;
  background-position: center;
  color: var(--white);
  padding: 110px 0;
  text-align: center;
}
.m-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17,26,52,.88), rgba(46,16,101,.92));
}
.m-cta .marketing-wrap { position: relative; z-index: 2; }
.m-cta h2 {
  max-width: 780px;
  margin: 12px auto 18px;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.05;
}
.m-cta p { max-width: 560px; margin: 0 auto 30px; color: #cbd5e1; font-size: 1.15rem; }
.m-cta .actions { justify-content: center; }
.m-cta .button { font-size: 1.05rem; padding: 15px 28px; }

/* Sub-page hero (features/pricing/etc.) */
.m-subhero {
  position: relative;
  background-size: cover;
  background-position: center;
  color: var(--white);
  padding: 104px 0 92px;
}
.m-subhero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(17,26,52,.94), rgba(17,26,52,.72) 55%, rgba(17,26,52,.4));
}
.m-subhero .marketing-wrap { position: relative; z-index: 2; }
.m-subhero h1 {
  max-width: 860px;
  margin: 16px 0 18px;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  line-height: 1.02;
}
.m-subhero .lede { color: #e2e8f0; max-width: 640px; font-size: 1.2rem; line-height: 1.6; }

/* Article cards with imagery */
.m-article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.m-article-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
}
.m-article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.m-article-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.m-article-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.m-article-body h3 { margin: 8px 0 10px; font-size: 1.15rem; line-height: 1.35; }
.m-article-body h3 a { color: var(--navy); }
.m-article-body p { color: var(--muted); line-height: 1.6; margin: 0 0 14px; flex: 1; }
.m-article-body span { color: var(--muted); font-size: .88rem; font-weight: 700; }

.m-checker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.m-checker article {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-soft);
}
.m-checker h3 { color: var(--navy); margin: 0 0 10px; }
.m-checker p { color: var(--muted); margin: 0; line-height: 1.65; }

.m-section .page-library { padding: 0; }

/* ==========================================================================
   Rich navigation dropdowns
   ========================================================================== */
.nav-drop { position: relative; }
.nav-drop-toggle {
  background: none;
  border: 0;
  color: var(--white);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-drop-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .15s ease;
}
.nav-drop-toggle:hover { background: rgba(255,255,255,.1); transform: none; box-shadow: none; }
.nav-create-toggle {
  background: linear-gradient(120deg, #7c3aed, #a855f7);
  color: #fff;
  padding: 8px 14px;
}
.nav-create-toggle:hover { background: linear-gradient(120deg, #6d28d9, #9333ea); }
.nav-drop-label {
  margin: 4px 14px 2px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-drop-label:not(:first-child) { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.nav-drop-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  transform: translateY(6px);
  width: max-content;
  min-width: 320px;
  max-width: min(360px, calc(100vw - 32px));
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 10px;
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 60;
}
.nav-drop-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 12px;
}
/* Only one menu can ever be open: hover opens on pointer devices, .open is set
   by click (touch/keyboard), and JS clears .open when another drop is hovered. */
.nav-drop:focus-within .nav-drop-menu,
.nav-drop.open .nav-drop-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (hover: hover) and (pointer: fine) {
  .nav-drop:hover .nav-drop-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-drop:hover .nav-drop-toggle::after { transform: rotate(225deg) translateY(2px); }
}
.nav-drop.open .nav-drop-toggle,
.nav-drop:focus-within .nav-drop-toggle { background: rgba(255,255,255,.12); }
.nav-drop.open .nav-drop-toggle::after,
.nav-drop:focus-within .nav-drop-toggle::after { transform: rotate(225deg) translateY(2px); }
.nav-drop-menu a {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--slate);
}
.nav-drop-menu a:hover { background: var(--mist); color: var(--slate); }
.nav-drop-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: #ede9fe;
}
.nav-drop-menu strong { display: block; color: var(--navy); font-size: .95rem; }
.nav-drop-menu small { display: block; color: var(--muted); font-weight: 500; margin-top: 1px; }
.nav-drop-footer {
  margin-top: 6px;
  border-top: 1px solid var(--line);
  padding: 10px 12px 6px;
  display: flex;
  gap: 14px;
}
.nav-drop-footer a { display: inline; padding: 0; color: var(--brand); font-size: .9rem; }
.nav-drop-footer a:hover { background: none; color: var(--brand-dark); }

/* ==========================================================================
   Dashboard shell with sidebar
   ========================================================================== */
/* App pages carry a 264px sidebar, so they need more room than the marketing
   1120px column or the content column gets crushed. */
.app-shell { width: min(1560px, calc(100% - 48px)); }
/* The global breadcrumb pulls the next block up with a negative bottom margin.
   Inside the sidebar layout that drags the sidebar panel over the crumb text. */
.app-shell .breadcrumbs { width: 100%; margin: 0 0 18px; }
.dash-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.dash-main { min-width: 0; }
.dash-main .panel { overflow-x: auto; }
.dash-sidebar {
  position: sticky;
  top: 84px;
  /* The nav can be taller than the screen; cap it to the viewport and let it
     scroll internally so the whole nav stays reachable and follows on scroll
     instead of scrolling off the top. */
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 14px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 18px;
  align-content: start;
}
.dash-sidebar::-webkit-scrollbar { width: 8px; }
.dash-sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.dash-nav { display: grid; gap: 2px; }
.dash-nav-label {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 10px 6px;
}
.dash-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--slate);
  font-weight: 700;
  font-size: .95rem;
}
.dash-nav a:hover { background: var(--mist); color: var(--navy); }
.dash-nav a.active { background: #ede9fe; color: var(--brand-dark); }
.dash-nav a span:first-child { width: 22px; text-align: center; }
.dash-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--navy) 0%, #14233c 55%, #2e1065 100%);
  color: var(--white);
  border-radius: var(--radius);
  padding: 30px 32px;
  margin-bottom: 22px;
}
.dash-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.35), transparent 70%);
}
.dash-hero h1 { margin: 6px 0 8px; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.dash-hero p { color: #cbd5e1; max-width: 620px; margin: 0 0 18px; }
.dash-hero .eyebrow { color: #a78bfa; }
.dash-hero .actions { position: relative; z-index: 2; }
.dash-countdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: .88rem;
  font-weight: 700;
  color: #ddd6fe;
  margin-bottom: 14px;
}
.dash-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.dash-tile {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-soft);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
}
.dash-tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background: #ede9fe;
}
.dash-tile strong { display: block; font-size: 1.5rem; color: var(--navy); line-height: 1.1; }
.dash-tile span { color: var(--muted); font-size: .88rem; font-weight: 600; }
.dash-attention {
  display: grid;
  gap: 10px;
}
.dash-attention a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid #f43f5e;
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  color: var(--slate);
  font-weight: 600;
}
.dash-attention a:hover { box-shadow: var(--shadow-soft); }
.dash-attention a.calm { border-left-color: var(--brand); }
.dash-attention strong { color: var(--navy); font-size: 1.15rem; }

/* Today action queue */
.today-queue { display: grid; gap: 10px; }
.today-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  color: var(--slate);
  font-weight: 600;
  transition: box-shadow .15s ease, transform .15s ease;
}
.today-row:hover { box-shadow: var(--shadow-soft); transform: translateX(2px); }
.today-row--urgent { border-left-color: #f43f5e; }
.today-row--warn { border-left-color: #f59e0b; }
.today-row--calm { border-left-color: var(--brand); }
.today-row-label { color: var(--navy); }
.today-row-action { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.today-row-action strong {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--navy);
  font-size: 1rem;
}
.today-row--urgent .today-row-action strong { background: #ffe4e6; color: #be123c; }
.today-row--warn .today-row-action strong { background: #fef3c7; color: #b45309; }
.today-row-action em { font-style: normal; color: var(--brand); font-size: .9rem; }

.today-allclear {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(124, 58, 237, .05), rgba(124, 58, 237, 0));
}
.today-allclear-ico { font-size: 1.8rem; }
.today-allclear strong { display: block; color: var(--navy); font-size: 1.05rem; }
.today-allclear span { color: var(--muted); }

/* Website tabbed surface */
.website-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 18px 0 16px;
  border-bottom: 1px solid var(--line);
}
.website-tab {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 10px 16px;
  margin-bottom: -1px;
  border-radius: 8px 8px 0 0;
}
.website-tab:hover { color: var(--navy); background: rgba(124, 58, 237, .06); }
.website-tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.website-panel { display: block; }
.website-panel[hidden] { display: none; }

/* Launch checklist (Website Overview) */
.launch-checklist { display: grid; gap: 8px; }
.lc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.lc-check {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 999px;
  border: 2px solid var(--line);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  flex: none;
}
.lc-row.is-done .lc-check { background: #16a34a; border-color: #16a34a; }
.lc-label { flex: 1; color: var(--navy); font-weight: 600; }
.lc-row.is-done .lc-label { color: var(--muted); }
.lc-status { color: #16a34a; font-weight: 700; font-size: .85rem; }

/* Page cards (Website Pages) */
.page-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.page-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.page-card-title { font-weight: 800; color: var(--navy); }
.page-card-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: .82rem; font-weight: 600; margin: 0; }
.page-card-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line); font-size: .88rem; font-weight: 600; }
.page-card-actions .page-card-delete { color: #e11d48; margin-left: auto; }

.homepage-form h3 { margin: 18px 0 6px; }
.homepage-group h3 { margin-top: 0; }

/* Trust center */
.trust-highlight {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 30px;
  border-radius: 18px;
  background: linear-gradient(125deg, #f5f3ff, #faf5ff);
  border: 1px solid #e9d5ff;
}
.trust-highlight h2 { margin: 6px 0 10px; }
.trust-highlight h2 em { color: var(--brand); font-style: italic; }
.trust-highlight-badge {
  text-align: center;
  padding: 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
}
.trust-highlight-badge strong { display: block; font-size: 3rem; line-height: 1; }
.trust-highlight-badge span { display: block; margin-top: 8px; font-size: .92rem; opacity: .92; }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin-top: 30px;
}
.trust-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  background: var(--white);
}
.trust-ico { font-size: 1.7rem; }
.trust-card h3 { margin: 10px 0 6px; color: var(--navy); }
.trust-card p { color: var(--muted); margin: 0; }
.trust-cta { margin-top: 34px; }
.trust-cta-band { border-radius: 18px; }
.trust-disclaimer { text-align: center; margin-top: 16px; font-size: .85rem; }
@media (max-width: 720px) {
  .trust-highlight { grid-template-columns: 1fr; }
}

/* Learning Lab */
.learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.learn-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--white);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.learn-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: var(--brand); }
.learn-card-ico { font-size: 1.8rem; }
.learn-card strong { color: var(--navy); font-size: 1.05rem; }
.learn-card-tag { color: var(--muted); font-size: .88rem; }

.learn-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 24px; align-items: start; }
.learn-toc { position: sticky; top: 88px; }
.learn-toc-label { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px 10px; }
.learn-toc nav { display: grid; gap: 2px; }
.learn-toc a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; color: var(--slate); font-weight: 600; font-size: .9rem; }
.learn-toc a:hover { background: rgba(124,58,237,.06); color: var(--brand); }
.learn-toc a.is-active { background: var(--brand); color: #fff; }

.learn-article { max-width: 820px; }
.learn-article-head { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.learn-article-ico { font-size: 2.4rem; }
.learn-article-head h1 { margin: 0; }
.learn-block { margin-top: 26px; }
.learn-block h2 { font-size: 1.25rem; color: var(--navy); margin: 0 0 10px; }
.learn-block p { color: var(--slate); line-height: 1.65; margin: 0 0 12px; }
.learn-steps, .learn-tips { color: var(--slate); line-height: 1.6; padding-left: 22px; }
.learn-steps li, .learn-tips li { margin-bottom: 8px; }
.learn-steps li::marker { color: var(--brand); font-weight: 800; }
.learn-table-wrap { overflow-x: auto; }
.learn-table { width: 100%; border-collapse: collapse; }
.learn-table th, .learn-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.learn-table th { color: var(--navy); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }

.learn-preview { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--white); }
.learn-preview figcaption { display: flex; align-items: center; gap: 6px; padding: 9px 14px; background: #f8fafc; border-bottom: 1px solid var(--line); }
.learn-preview-dot { width: 10px; height: 10px; border-radius: 999px; background: #d1d5db; }
.learn-preview-label { margin-left: 8px; font-weight: 700; color: var(--navy); font-size: .88rem; }
.learn-preview-open { margin-left: auto; font-weight: 700; color: var(--brand); font-size: .85rem; }
.learn-preview iframe { width: 100%; height: 460px; border: 0; display: block; background: #fff; }

.learn-related { display: flex; flex-wrap: wrap; gap: 10px; }
.learn-related a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--slate); font-weight: 600; }
.learn-related a:hover { border-color: var(--brand); color: var(--brand); }
.learn-prevnext { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); }
.learn-prevnext a { font-weight: 700; color: var(--brand); }
.learn-next { margin-left: auto; text-align: right; }
@media (max-width: 860px) {
  .learn-layout { grid-template-columns: 1fr; }
  .learn-toc { position: static; }
  .learn-toc nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 6px; }
}

/* Event-day staff mode: high-contrast, large one-handed targets */
.staff-shell { max-width: 640px; margin: 0 auto; padding: 16px; }
.staff-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.staff-kicker { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.staff-bar strong { font-size: 1.25rem; color: var(--navy); }
.staff-exit { font-weight: 700; color: var(--brand); }
.staff-counts { display: flex; gap: 12px; margin-bottom: 18px; }
.staff-count { flex: 1; text-align: center; padding: 16px 8px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); }
.staff-count strong { display: block; font-size: 2rem; color: var(--navy); line-height: 1; }
.staff-count strong span { font-size: 1.1rem; color: var(--muted); }
.staff-count > span { color: var(--muted); font-weight: 600; font-size: .82rem; }
.staff-count--alert { border-color: #fca5a5; background: #fef2f2; }
.staff-count--alert strong { color: #dc2626; }
.staff-actions { display: grid; gap: 14px; margin-bottom: 22px; }
.staff-btn {
  display: flex; align-items: center; gap: 16px;
  min-height: 76px; padding: 18px 22px;
  border-radius: 16px; border: 2px solid var(--line); background: var(--white);
  color: var(--navy); font-size: 1.2rem; font-weight: 800;
}
.staff-btn:hover { border-color: var(--brand); }
.staff-btn--primary { background: linear-gradient(120deg, #7c3aed, #a855f7); color: #fff; border-color: transparent; }
.staff-btn-ico { font-size: 1.8rem; }
.staff-section-label { font-weight: 800; color: var(--navy); margin: 0 0 8px; }
.staff-recent { margin-bottom: 18px; }
.staff-recent ul { list-style: none; margin: 0; padding: 0; }
.staff-recent li { display: flex; justify-content: space-between; padding: 11px 4px; border-bottom: 1px solid var(--line); color: var(--slate); font-weight: 600; }
.staff-recent time { color: var(--muted); }

/* Programming timeline */
.timeline-day { margin-bottom: 18px; }
.timeline-date { font-weight: 800; color: var(--navy); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.timeline-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.timeline-item { display: flex; gap: 14px; }
.timeline-time { flex: none; width: 92px; font-weight: 700; color: var(--brand); font-size: .9rem; }
.timeline-time small { display: block; color: var(--muted); font-weight: 600; }
.timeline-time--tba { color: var(--muted); }
.timeline-body { flex: 1; padding-left: 14px; border-left: 2px solid var(--line); }
.timeline-body strong { color: var(--navy); }
.timeline-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 4px 0 0; color: var(--muted); font-size: .82rem; }

/* Sponsor pipeline board */
.sponsor-summary { margin-bottom: 18px; }
.pipeline-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.pipeline-col { background: var(--surface-1, #f8fafc); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.pipeline-col-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pipeline-col-head strong { color: var(--navy); font-size: .9rem; }
.pipeline-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 8px;
}
.pipeline-card > strong { display: block; color: var(--navy); }
.pipeline-card-meta { color: var(--muted); font-size: .82rem; margin: 6px 0 0; }
.pipeline-empty { color: var(--muted); font-size: .82rem; text-align: center; padding: 10px 0; margin: 0; }
@media (max-width: 900px) { .pipeline-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pipeline-board { grid-template-columns: 1fr; } }

/* Vendor portal: next action + timeline */
.portal-next {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px; margin: 14px 0 18px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--white);
  border-left: 6px solid var(--brand);
}
.portal-next--warn { border-left-color: #f59e0b; background: linear-gradient(180deg, #fffbeb, #fff); }
.portal-next--done { border-left-color: #16a34a; background: linear-gradient(180deg, #f0fdf4, #fff); }
.portal-next--info { border-left-color: #3b82f6; background: linear-gradient(180deg, #eff6ff, #fff); }
.portal-next--muted { border-left-color: #94a3b8; }
.portal-next-kicker { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.portal-next strong { display: block; margin-top: 4px; color: var(--navy); font-size: 1.05rem; }
.portal-timeline {
  display: flex; flex-wrap: wrap; gap: 6px 4px; list-style: none; margin: 0 0 8px; padding: 0;
}
.portal-step {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px;
  border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--muted);
}
.portal-dot { width: 11px; height: 11px; border-radius: 999px; border: 2px solid #cbd5e1; background: #fff; }
.portal-step.is-done { color: #15803d; }
.portal-step.is-done .portal-dot { background: #16a34a; border-color: #16a34a; }
.portal-step.is-current { color: var(--brand); background: rgba(124,58,237,.08); }
.portal-step.is-current .portal-dot { background: var(--brand); border-color: var(--brand); }

/* Booth setup + assignment tray */
.booth-setup-stats { margin-bottom: 18px; }
.zone-list, .assign-tray { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.zone-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white);
}
.zone-list strong { color: var(--navy); }
.zone-list span { color: var(--muted); font-weight: 600; font-size: .85rem; }
.assign-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white);
}
.assign-row strong { color: var(--navy); }
.assign-form { display: flex; gap: 8px; align-items: center; }
.assign-form select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; background: var(--white); max-width: 220px;
}

/* Application form builder */
.builder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.builder-add { position: sticky; top: 88px; }
.question-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.question-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.question-reorder { display: flex; flex-direction: column; gap: 2px; }
.question-reorder button {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 6px;
  width: 26px; height: 22px;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
}
.question-reorder button:disabled { opacity: .35; cursor: default; }
.question-main { flex: 1; }
.question-main strong { color: var(--navy); }
.q-required { color: #be123c; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.question-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; }
.q-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--slate);
  font-size: .74rem;
  font-weight: 700;
}
.q-badge--type { background: #ede9fe; color: #6d28d9; }
.q-help { color: var(--muted); font-size: .82rem; }
.question-actions { display: flex; gap: 12px; align-items: center; font-size: .88rem; font-weight: 600; }
.q-delete { color: #e11d48; }
@media (max-width: 860px) {
  .builder-layout { grid-template-columns: 1fr; }
  .builder-add { position: static; }
}

/* Reports dashboard */
.report-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.report-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.report-ico { font-size: 1.6rem; }
.report-card h3 { margin: 6px 0 2px; color: var(--navy); }
.report-summary { color: var(--brand); font-weight: 800; margin: 0; }
.report-desc { color: var(--muted); font-size: .88rem; margin: 0 0 12px; }
.report-card .button { margin-top: auto; align-self: flex-start; }

/* Guided form advanced section + select styling */
.guided-form-panel { max-width: 720px; }
.wizard-field select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--white);
}
.guided-advanced { margin: 4px 0 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.guided-advanced summary { cursor: pointer; font-weight: 700; color: var(--brand); list-style: none; }
.guided-advanced summary::-webkit-details-marker { display: none; }
.guided-advanced-body { margin-top: 14px; }
.form-errors { color: #be123c; background: #ffe4e6; border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 14px; }

/* Send-update audience list */
.audience-list { list-style: none; margin: 8px 0 12px; padding: 0; }
.audience-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--slate); font-weight: 600;
}
.audience-list strong { color: var(--navy); }

/* Saved views (application inbox) */
.saved-views { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; }
.saved-view {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--slate);
  font-weight: 600;
  font-size: .9rem;
  background: var(--white);
}
.saved-view:hover { border-color: var(--brand); color: var(--brand); }
.saved-view.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.saved-view-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px; height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--navy);
  font-size: .78rem;
  font-weight: 800;
}
.saved-view.is-active .saved-view-count { background: rgba(255,255,255,.25); color: #fff; }
.bulk-col { width: 34px; text-align: center; }
.bulk-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(124,58,237,.07), rgba(124,58,237,.02));
  font-weight: 700;
  color: var(--navy);
}
.bulk-actions { display: flex; gap: 8px; }

/* Guided create wizard */
.wizard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.wizard-field { margin-bottom: 16px; }
.wizard-field label { display: block; font-weight: 700; color: var(--navy); margin-bottom: 5px; }
.wizard-field input, .wizard-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
}
.wizard-field small { display: block; color: var(--muted); font-size: .85rem; margin-top: 5px; }
.wizard-toggle label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.wizard-toggle label span { color: var(--navy); }
.wizard-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.wizard-reassure { color: var(--muted); font-size: .85rem; text-align: right; margin: 10px 0 0; }
.wizard-preview { position: sticky; top: 88px; }
.ticket-preview-card {
  border: 1px solid var(--line);
  border-top: 5px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: 18px;
  margin: 8px 0 12px;
  background: var(--white);
}
.ticket-preview-card h3 { margin: 0 0 6px; color: var(--navy); }
.ticket-preview-card strong { display: block; font-size: 1.6rem; color: var(--brand); margin-top: 6px; }
@media (max-width: 860px) {
  .wizard-layout { grid-template-columns: 1fr; }
  .wizard-preview { position: static; }
}

/* Contextual metric cards */
.metric-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.metric-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}
.metric-label { color: var(--muted); font-weight: 700; font-size: .85rem; }
.metric-value { color: var(--navy); font-size: 1.9rem; line-height: 1.05; font-weight: 800; }
.metric-value .metric-of { color: var(--muted); font-size: 1.1rem; font-weight: 600; }
.metric-sub { color: var(--muted); font-size: .85rem; font-weight: 600; }
.event-switcher { display: inline-block; }
.event-switcher .nav-drop-toggle { cursor: pointer; }
@media (max-width: 960px) {
  .metric-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .metric-cards { grid-template-columns: 1fr; }
  .today-row { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 960px) {
  .dash-shell { grid-template-columns: 1fr; }
  .dash-sidebar { position: static; max-height: none; overflow-y: visible; }
  .dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .nav-drop { position: static; }
  .nav-drop-menu {
    left: 16px;
    right: 16px;
    width: auto;
    min-width: 0;
    max-width: none;
  }
  .dash-tiles { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .m-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-photo-grid, .m-card-grid, .m-article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .m-hero { min-height: 620px; }
  .m-hero .marketing-wrap { padding: 80px 0 90px; }
  .m-section { padding: 64px 0; }
  .m-pipeline, .m-pricing-grid, .m-photo-grid, .m-card-grid, .m-article-grid,
  .m-feature-row, .m-stat-row, .m-faq, .m-checker { grid-template-columns: 1fr; }
  .m-feature-row { gap: 28px; }
  .m-feature-row.flip > .m-feature-media { order: 0; }
  .m-subhero { padding: 76px 0 64px; }
}

@media print {
  .topbar { display: none; }
  body { background: white; }
  .container { margin: 0 auto; }
  .pass { margin-top: 20px; }
}
@media (max-width: 760px) {
  .topbar, .page-header, .section-heading { flex-direction: column; align-items: flex-start; }
  .grid.two, .grid.three, .stats, .hero-metrics, .split-section, .feature-grid, .proof-section, .two-column-cta, .article-grid, .feature-detail-list, .pricing-grid, .use-case-grid, .resource-layout, .contact-layout, .footer-grid { grid-template-columns: 1fr; }
  .event-summary-strip, .event-section-grid, .ticket-card-grid, .receipt-summary, .ticket-pass-grid, .seo-card-grid, .page-library, .launch-checklist, .dashboard-grid, .workflow-strip, .workflow-grid { grid-template-columns: 1fr; }
  .breadcrumbs { margin-top: 12px; }
  .marketing-hero { min-height: 620px; background-position: 58% center; }
  .event-site-hero { min-height: 520px; }
  .event-site-hero .event-site-wrap { padding: 62px 0 84px; }
  .hero-copy { padding: 68px 0 80px; }
  .hero, .public-hero { padding: 32px; }
  .subhero { padding: 56px 0 46px; }
  .split-section, .proof-section, .two-column-cta, .marketing-band, .feature-detail-list, .pricing-grid, .use-case-grid, .resource-layout, .contact-layout, .article-list, .event-section, .event-page-band, .event-section-grid { padding: 48px 0; }
  th, td { font-size: .9rem; }
  .ticket-card-footer { align-items: start; flex-direction: column; }
  .quantity-field { width: 100%; }
  .application-filters input,
  .application-filters select { width: 100%; }
}

/* ==========================================================================
   Marketing delight layer - playful motion and hover personality for the
   public marketing pages. Everything is decorative: content stays readable
   with JS disabled, and prefers-reduced-motion turns all of it off.
   ========================================================================== */

/* Smooth anchor scrolling ("See how it works" -> #how-it-works) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.marketing-main ::selection { background: #ddd6fe; color: var(--brand-dark); }

/* Hero entrance: badge, headline, lede, buttons cascade in on load */
@keyframes m-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .m-hero .m-hero-badge, .m-subhero .eyebrow { animation: m-rise .6s cubic-bezier(.22,.61,.36,1) backwards; }
  .m-hero h1, .m-subhero h1 { animation: m-rise .7s cubic-bezier(.22,.61,.36,1) .08s backwards; }
  .m-hero .lede, .m-subhero .lede { animation: m-rise .7s cubic-bezier(.22,.61,.36,1) .18s backwards; }
  .m-hero .actions, .m-subhero .actions { animation: m-rise .7s cubic-bezier(.22,.61,.36,1) .28s backwards; }
  .m-hero-note { animation: m-rise .7s cubic-bezier(.22,.61,.36,1) .38s backwards; }
  .m-trust-strip { animation: m-rise .8s cubic-bezier(.22,.61,.36,1) .48s backwards; }
}

/* Confetti-ish sparkle field drifting over the hero photo */
.m-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(circle 3px at 18% 24%, rgba(167,139,250,.75) 40%, transparent 55%),
    radial-gradient(circle 2px at 34% 68%, rgba(244,214,255,.6) 40%, transparent 55%),
    radial-gradient(circle 4px at 55% 18%, rgba(240,171,252,.6) 40%, transparent 55%),
    radial-gradient(circle 2px at 68% 52%, rgba(167,139,250,.65) 40%, transparent 55%),
    radial-gradient(circle 3px at 82% 30%, rgba(244,214,255,.55) 40%, transparent 55%),
    radial-gradient(circle 2px at 90% 72%, rgba(240,171,252,.5) 40%, transparent 55%),
    radial-gradient(circle 3px at 8% 78%, rgba(139,92,246,.55) 40%, transparent 55%);
}
@media (prefers-reduced-motion: no-preference) {
  .m-hero::after { animation: m-sparkle-drift 16s ease-in-out infinite alternate; }
}
@keyframes m-sparkle-drift {
  from { transform: translateY(6px); opacity: .7; }
  50% { opacity: 1; }
  to { transform: translateY(-14px); opacity: .75; }
}

/* The rotating word gets a slow animated gradient shimmer */
@media (prefers-reduced-motion: no-preference) {
  .m-hero .word-rotate {
    background: linear-gradient(90deg, #8b5cf6 0%, #c084fc 30%, #f0abfc 50%, #c084fc 70%, #8b5cf6 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: m-shimmer 5.5s linear infinite;
  }
}
@keyframes m-shimmer {
  from { background-position: 0% 0; }
  to { background-position: -220% 0; }
}

/* Trust strip items become pills that pop on hover */
.m-trust-strip span {
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .2s ease, border-color .2s ease;
}
.m-trust-strip span:hover {
  transform: translateY(-3px) rotate(-1deg);
  background: rgba(139,92,246,.22);
  border-color: rgba(167,139,250,.55);
}
.m-trust-strip { border-top: 0; padding-top: 22px; }

/* Eyebrows get a little spark */
.marketing-main .eyebrow::before {
  content: "\2726";
  color: var(--brand-bright);
  margin-right: 7px;
}

/* Pipeline cards: lift with a cheeky tilt, number chips wiggle */
.m-pipeline article {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.m-pipeline article:hover {
  transform: translateY(-6px) rotate(-.6deg);
  box-shadow: var(--shadow-lift);
  border-color: rgba(139,92,246,.45);
}
.m-pipeline article:nth-child(even):hover { transform: translateY(-6px) rotate(.6deg); }
.m-pipeline article::before {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .3s ease;
}
.m-pipeline article:hover::before {
  transform: rotate(-8deg) scale(1.12);
  background: linear-gradient(120deg, #7c3aed, #a855f7);
}

/* Photo + article cards: springier lift, arrow nudges, image zoom */
.m-photo-card { transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
.m-photo-card:hover { transform: translateY(-6px) rotate(-.5deg) scale(1.01); }
.m-photo-card span { display: inline-block; transition: transform .2s ease; }
.m-photo-card:hover span { transform: translateX(6px); }
.m-article-card img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.m-article-card:hover img { transform: scale(1.06); }
.m-card { transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, border-color .25s ease; }
.m-card:hover { transform: translateY(-6px); border-color: rgba(139,92,246,.4); }
.m-card-icon { transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .3s ease; }
.m-card:hover .m-card-icon { transform: rotate(-8deg) scale(1.12); background: #fae8ff; }

/* Stat tiles perk up and the numbers count in via JS (.js-countup) */
.m-stat-row div { transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.m-stat-row div:hover {
  transform: translateY(-4px);
  border-color: rgba(167,139,250,.55);
  background: rgba(139,92,246,.12);
}

/* Floating orbs behind dark bands and the closing CTA */
.m-band-dark { position: relative; overflow: hidden; }
.m-band-dark > .marketing-wrap { position: relative; z-index: 2; }
.m-band-dark::before,
.m-cta::after {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(139,92,246,.28), transparent 65%);
  top: -160px;
  right: -120px;
}
.m-cta { overflow: hidden; }
.m-cta::after { top: auto; right: auto; bottom: -180px; left: -140px; background: radial-gradient(circle, rgba(192,132,252,.25), transparent 65%); }
@media (prefers-reduced-motion: no-preference) {
  .m-band-dark::before, .m-cta::after { animation: m-orb-drift 18s ease-in-out infinite alternate; }
}
@keyframes m-orb-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-70px, 50px) scale(1.15); }
}

/* CTA buttons: shine sweep across on hover */
.marketing-main .button.cta,
.m-cta .button {
  position: relative;
  overflow: hidden;
}
.marketing-main .button.cta::after,
.m-cta .button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
  transition: left .5s ease;
  pointer-events: none;
}
.marketing-main .button.cta:hover::after,
.m-cta .button:hover::after { left: 130%; }

/* Scroll-reveal: JS adds .js-reveal (hidden) then .is-visible when scrolled
   into view. Without JS nothing is ever hidden. */
.js-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0s);
}
.js-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal { opacity: 1; transform: none; transition: none; }
  .m-trust-strip span, .m-pipeline article, .m-photo-card, .m-card, .m-card-icon,
  .m-article-card img, .m-feature-media img, .m-stat-row div { transition: none; }
}

/* ==========================================================================
   Dashboard feature launcher - every event module one click from the
   dashboard, in a compact icon grid.
   ========================================================================== */
.launch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.launch-grid a {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 11px;
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  color: var(--slate);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.launch-grid a:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(139, 92, 246, .5);
  color: var(--slate);
}
.launch-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  background: #ede9fe;
}
.launch-grid strong { display: block; color: var(--navy); font-size: .92rem; line-height: 1.2; }
.launch-grid small { display: block; color: var(--muted); font-size: .78rem; margin-top: 1px; }
.export-links {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: .9rem;
}
.export-links > span { color: var(--muted); font-weight: 700; }
@media (max-width: 720px) {
  .launch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   In-app help: (i) tooltips, help center tutorials, getting-started wizard
   ========================================================================== */

/* (i) info buttons with a hover/focus tooltip read from data-tip */
.info-tip {
  position: relative;
  width: 19px;
  height: 19px;
  min-width: 19px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ede9fe;
  color: var(--brand-dark);
  font-size: .7rem;
  font-weight: 900;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  vertical-align: middle;
  margin-left: 6px;
  line-height: 1;
}
.info-tip:hover, .info-tip:focus-visible {
  background: var(--brand);
  color: var(--white);
  transform: none;
  box-shadow: none;
}
/* The tooltip itself is a single fixed-position element appended to <body>
   and placed by marketing.js. Panels scroll (overflow auto), so a CSS-only
   tooltip inside the button gets clipped by its scroll container - a fixed
   element escapes every overflow context. */
.tooltip-pop {
  position: fixed;
  max-width: 270px;
  background: var(--navy);
  color: #e2e8f0;
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  padding: 10px 13px;
  border-radius: 10px;
  box-shadow: var(--shadow-lift);
  pointer-events: none;
  z-index: 300;
}
.tooltip-pop[hidden] { display: none; }

/* Help center */
.help-search { display: grid; gap: 8px; margin-bottom: 22px; }
.help-search input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 13px 20px;
  font: inherit;
  font-size: 1rem;
}
.help-search input:focus { outline: 2px solid var(--brand-bright); border-color: var(--brand-bright); }
.help-group { margin-bottom: 26px; }
.help-group h2 { font-size: 1.15rem; color: var(--navy); margin: 0 0 12px 4px; }
.help-grid { display: grid; gap: 10px; }
.help-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
}
.help-card summary {
  display: grid;
  grid-template-columns: 36px 1fr 20px;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.help-card summary::-webkit-details-marker { display: none; }
.help-card-heading strong { display: block; color: var(--navy); font-size: .98rem; }
.help-card-heading small { display: block; color: var(--muted); margin-top: 2px; }
.help-card-chevron {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .18s ease;
  justify-self: end;
}
.help-card[open] .help-card-chevron { transform: rotate(225deg); }
.help-card[open] summary { border-bottom: 1px solid var(--line); }
.help-card:hover { border-color: rgba(139, 92, 246, .5); }
.help-steps {
  margin: 14px 16px;
  padding-left: 22px;
  display: grid;
  gap: 8px;
  color: var(--slate);
  line-height: 1.55;
}
.help-steps li::marker { color: var(--brand); font-weight: 800; }
.help-card > .button { margin: 0 16px 16px; }
.help-more { margin-top: 30px; }

/* Getting-started wizard */
.wizard { max-width: 780px; }
.wizard fieldset { border: 0; padding: 0; margin: 0 0 8px; }
.wizard legend {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 16px;
  padding: 0;
}
.wizard-js .wizard-step[hidden] { display: none; }
.wizard-progress { margin-bottom: 22px; }
.wizard-progress p { margin: 10px 0 0; color: var(--muted); font-size: .92rem; }
.wizard-progress strong { color: var(--brand-dark); }
.wizard-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: #ede9fe;
  overflow: hidden;
}
.wizard-progress-bar span {
  display: block;
  height: 100%;
  width: 20%;
  border-radius: 999px;
  background: linear-gradient(120deg, #7c3aed, #a855f7);
  transition: width .3s cubic-bezier(.22,.61,.36,1);
}
.wizard-field { display: block; margin-bottom: 16px; }
.wizard-field > span { display: block; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.wizard-field input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font: inherit;
}
.wizard-field input:focus { outline: 2px solid var(--brand-bright); border-color: var(--brand-bright); }
.wizard-field small { display: block; color: var(--muted); margin-top: 5px; }
.wizard-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-error { display: block; color: #be123c; font-style: normal; font-weight: 700; margin-top: 5px; }
.wizard-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.wizard-choice { position: relative; }
.wizard-choice input { position: absolute; opacity: 0; }
.wizard-choice > span {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-weight: 700;
  color: var(--slate);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.wizard-choice input:checked + span {
  border-color: var(--brand);
  background: #f5f3ff;
  color: var(--brand-dark);
}
.wizard-choice input:focus-visible + span { outline: 2px solid var(--brand-bright); }
.wizard-choice > span:hover { transform: translateY(-1px); border-color: rgba(139,92,246,.5); }
.wizard-sell { display: grid; gap: 10px; margin-bottom: 18px; }
.wizard-sell-row {
  display: grid;
  grid-template-columns: auto 36px 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.wizard-sell-row:has(input:checked) { border-color: var(--brand); background: #f5f3ff; }
.wizard-sell-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand); }
.wizard-sell-row strong { display: block; color: var(--navy); }
.wizard-sell-row small { display: block; color: var(--muted); }
.wizard-price { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--navy); }
.wizard-price input {
  width: 76px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  font-weight: 700;
}
.wizard-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.wizard-toggle:has(input:checked) { border-color: var(--brand); background: #f5f3ff; }
.wizard-toggle input { width: 18px; height: 18px; accent-color: var(--brand); margin-top: 2px; }
.wizard-toggle strong { display: block; color: var(--navy); }
.wizard-toggle small { display: block; color: var(--muted); margin-top: 2px; }
.wizard-review { margin-bottom: 18px; }
.wizard-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 10px;
}
.wizard-nav button[disabled] { opacity: .4; cursor: default; }
@media (max-width: 720px) {
  .wizard-row { grid-template-columns: 1fr; }
  .wizard-sell-row { grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
  .wizard-sell-row .launch-ico { display: none; }
  .tooltip-pop { max-width: 210px; }
}

/* The .button display rule would otherwise override the hidden attribute */
.wizard-nav button[hidden] { display: none; }

/* ==========================================================================
   Microsite theming - the public event site consumes CSS variables emitted
   per event by microsites/_theme_css.html (SiteTheme.css_vars). Every rule
   falls back to the original values, so unthemed events look unchanged.
   ========================================================================== */
.event-public-main {
  background: var(--site-bg, #f6f8fb);
  color: var(--site-ink, var(--slate));
}
.event-public-main h1, .event-public-main h2, .event-public-main h3 {
  font-family: var(--site-heading-font, inherit);
  text-transform: var(--site-heading-transform, none);
  letter-spacing: var(--site-heading-spacing, normal);
}
.event-public-main h2, .event-public-main h3 { color: var(--site-head, var(--navy)); }
.event-site-hero h1, .event-site-cta h2, .event-site-cta h3 { color: var(--white); }
.event-public-main .card,
.event-public-main .panel {
  background: var(--site-surface, var(--white));
  border-color: var(--site-line, var(--line));
  border-radius: var(--site-radius, 8px);
}
.event-public-main .muted { color: var(--site-muted, var(--muted)); }
.event-public-main .eyebrow { color: var(--site-accent-ink, var(--brand)); }
.event-site-hero .eyebrow, .event-site-cta .eyebrow { color: #c4b5fd; }
.event-public-main .button { background: var(--site-accent-btn, var(--brand)); }
.event-public-main .button.light { background: var(--white); color: var(--navy); }
.event-public-main .button.secondary { background: var(--slate); }
.event-public-main .event-page-band { background: var(--site-band, var(--mist)); }
.event-public-main .event-summary-strip div {
  background: var(--site-surface, var(--white));
  border-color: var(--site-line, var(--line));
  border-top-color: var(--site-accent-ink, var(--brand));
  border-radius: var(--site-radius, 8px);
}
.event-public-main .event-summary-strip strong { color: var(--site-head, var(--navy)); }
.event-public-main .event-summary-strip span { color: var(--site-muted, var(--muted)); }
.event-public-main .event-section-grid article {
  background: var(--site-surface, var(--white));
  border-color: var(--site-line, var(--line));
  border-radius: var(--site-radius, 8px);
}
.event-public-main .site-img {
  max-width: 100%;
  border-radius: var(--site-radius, 12px);
  display: block;
}
.event-public-main a { color: var(--site-accent-ink, var(--brand)); }
.event-public-main .button, .event-public-main .button.light { color: var(--site-btn-ink, var(--white)); }
.event-public-main .button.light { background: var(--white); color: var(--navy); }
.event-public-main .event-product-card strong { color: var(--site-accent-ink, var(--coral)); }

/* Block style variants (tinted / dark / accent bands) */
.site-block--band { background: var(--site-band, var(--mist)); }
.site-block--dark { background: var(--navy); color: #dbe3f0; }
.site-block--dark h2, .site-block--dark h3 { color: var(--white); }
.site-block--dark .muted { color: #9fb0ca; }
.site-block--accent {
  background: linear-gradient(135deg, var(--site-accent, var(--brand)), color-mix(in srgb, var(--site-accent, var(--brand)) 65%, #111a34));
  color: #f3f0ff;
}
.site-block--accent h2, .site-block--accent h3 { color: var(--white); }
.site-block--accent .eyebrow { color: rgba(255,255,255,.75); }
.site-cta--band { background: var(--site-band, var(--mist)); color: var(--site-ink, var(--slate)); border-top: 0; }
.site-cta--band h2 { color: var(--site-head, var(--navy)); }
.site-cta--dark, .site-cta--default { /* event-site-cta already dark */ }
.site-cta--accent {
  background: linear-gradient(135deg, var(--site-accent, var(--brand)), color-mix(in srgb, var(--site-accent, var(--brand)) 60%, #111a34));
  border-top: 0;
}
.site-narrow { max-width: 780px; margin-inline: auto; }
.site-flip > div:first-child { order: 2; }

/* FAQ accordions */
.site-faq { display: grid; gap: 10px; margin-top: 20px; }
.site-faq-item {
  background: var(--site-surface, var(--white));
  border: 1px solid var(--site-line, var(--line));
  border-radius: var(--site-radius, 10px);
}
.site-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  font-weight: 800;
  color: var(--site-head, var(--navy));
  cursor: pointer;
  list-style: none;
}
.site-faq-item summary::-webkit-details-marker { display: none; }
.site-faq-item[open] .help-card-chevron { transform: rotate(225deg); }
.site-faq-item p { margin: 0; padding: 0 18px 16px; color: var(--site-muted, var(--muted)); line-height: 1.65; }
.site-block--dark .site-faq-item { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.site-block--dark .site-faq-item summary { color: var(--white); }
.site-block--dark .site-faq-item p { color: #b6c2d8; }

/* Countdown */
.site-countdown-band { text-align: center; }
.site-countdown {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 26px 0 14px;
  flex-wrap: wrap;
}
.site-countdown div {
  min-width: 96px;
  padding: 18px 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--site-radius, 12px);
}
.site-block--band .site-countdown div,
.site-cta--band .site-countdown div {
  background: var(--site-surface, var(--white));
  border-color: var(--site-line, var(--line));
}
.site-countdown strong {
  display: block;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.site-countdown span { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.site-countdown-date { font-weight: 700; opacity: .85; }

/* Highlights (stat numbers) */
.site-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.site-highlights div {
  background: var(--site-surface, var(--white));
  border: 1px solid var(--site-line, var(--line));
  border-radius: var(--site-radius, 12px);
  padding: 24px 20px;
  text-align: center;
}
.site-highlights strong {
  display: block;
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--site-accent-ink, var(--brand));
  line-height: 1.15;
}
.site-highlights span { color: var(--site-muted, var(--muted)); font-weight: 700; }
.site-block--dark .site-highlights div { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.site-block--accent .site-highlights div { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); }
.site-block--accent .site-highlights strong { color: var(--white); }
.site-block--dark .site-highlights span, .site-block--accent .site-highlights span { color: rgba(255,255,255,.75); }

/* Quote */
.site-quote { margin: 0; text-align: center; }
.site-quote p {
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.45;
  font-weight: 700;
  color: var(--site-head, var(--navy));
  margin: 0 0 16px;
}
.site-quote cite { font-style: normal; font-weight: 700; color: var(--site-muted, var(--muted)); }
.site-block--dark .site-quote p, .site-block--accent .site-quote p { color: var(--white); }

/* Video */
.site-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--site-radius, 12px);
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(17,26,52,.25);
  margin-top: 20px;
}
.site-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Divider */
.site-divider {
  border: 0;
  height: 4px;
  width: 120px;
  margin: 34px auto;
  border-radius: 999px;
  background: var(--site-accent-ink, var(--brand));
  opacity: .5;
}

/* ==========================================================================
   Site studio (organizer-facing editor)
   ========================================================================== */
.theme-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.theme-preset button {
  width: 100%;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: left;
  cursor: pointer;
  color: var(--slate);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  display: grid;
  gap: 8px;
}
.theme-preset button:hover {
  transform: translateY(-2px);
  border-color: rgba(139,92,246,.55);
  box-shadow: var(--shadow-soft);
  color: var(--slate);
}
.theme-preset.is-active button {
  border-color: var(--brand);
  background: #f5f3ff;
  box-shadow: 0 0 0 1px var(--brand);
}
.theme-preset strong { color: var(--navy); font-size: .92rem; }
.theme-preset small { color: var(--muted); font-size: .78rem; line-height: 1.4; }
.theme-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 10px;
}
.theme-chip--dark { background: var(--navy); }
.theme-chip-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--chip-accent, var(--brand));
  flex: 0 0 auto;
}
.theme-chip-lines { display: grid; gap: 4px; flex: 1; }
.theme-chip-lines i {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: rgba(100,116,139,.4);
}
.theme-chip--dark .theme-chip-lines i { background: rgba(255,255,255,.35); }
.theme-chip-lines i:last-child { width: 60%; }
.theme-custom summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--brand-dark);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
.theme-custom summary::-webkit-details-marker { display: none; }
.theme-custom[open] .help-card-chevron { transform: rotate(225deg); }
.theme-custom-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: end;
  margin-top: 16px;
}
.theme-custom-form label { display: grid; gap: 6px; font-weight: 700; color: var(--navy); }
.theme-custom-form select, .theme-custom-form input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  font: inherit;
  min-width: 160px;
}
.theme-custom-form input[type="color"] { min-width: 64px; height: 42px; padding: 4px; cursor: pointer; }

.preset-pages-title { margin: 26px 0 4px; color: var(--navy); }
.preset-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.preset-page-card {
  width: 100%;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 11px;
  align-items: center;
  background: #f8fafc;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 13px;
  cursor: pointer;
  color: var(--slate);
  text-align: left;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.preset-page-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  border-style: solid;
  background: #f5f3ff;
  color: var(--slate);
  box-shadow: none;
}
.preset-page-card strong { display: block; color: var(--navy); font-size: .92rem; }
.preset-page-card small { display: block; color: var(--muted); font-size: .78rem; margin-top: 1px; }

.block-palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.block-palette a {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 11px;
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--slate);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.block-palette a:hover {
  transform: translateY(-2px);
  border-color: rgba(139,92,246,.5);
  box-shadow: var(--shadow-soft);
  color: var(--slate);
}
.block-palette a.is-live { border-style: dashed; }
.block-palette strong { display: block; color: var(--navy); font-size: .9rem; }
.block-palette small { display: block; color: var(--muted); font-size: .76rem; margin-top: 1px; }

@media (max-width: 720px) {
  .site-countdown div { min-width: 72px; padding: 12px 8px; }
  .site-countdown strong { font-size: 1.7rem; }
  .site-flip > div:first-child { order: 0; }
}

/* Event hero action hierarchy: the CTA row and the site-nav pill row were
   two bare .actions flexboxes stacked with no separation. Give the CTAs
   breathing room and turn the nav into a distinct ghost-pill rail. */
.event-site-hero .actions { margin-top: 30px; gap: 12px 14px; }
.event-site-hero .actions .button { padding: 13px 24px; }
.event-site-hero .microsite-nav,
.microsite-header .microsite-nav {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  gap: 10px;
}
.microsite-nav .button,
.microsite-nav .button.light {
  background: rgba(255, 255, 255, .1);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .28);
  font-size: .9rem;
  font-weight: 700;
  padding: 8px 16px;
}
.microsite-nav .button:hover,
.microsite-nav .button.light:hover {
  background: rgba(255, 255, 255, .24);
  color: var(--white);
  box-shadow: none;
}
@media (max-width: 720px) {
  .event-site-hero .actions { margin-top: 22px; }
  .event-site-hero .microsite-nav, .microsite-header .microsite-nav { margin-top: 22px; padding-top: 18px; }
}

/* ==========================================================================
   Audit round: nav architecture, public-site hero hierarchy, richer public
   cards, dashboard readiness, and the Site Studio live preview.
   ========================================================================== */

/* Homepage kicker line under the stable headline (holds the word rotator) */
.m-hero-kicker {
  margin: 18px 0 10px;
  color: #c4b5fd;
  font-size: 1.25rem;
  font-weight: 800;
}
.m-hero-kicker .word-rotate { font-style: normal; }

/* Profile avatar menu in the top bar */
.nav-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(120deg, #7c3aed, #a855f7);
  font-weight: 900;
  justify-content: center;
  padding: 0;
}
.nav-avatar::after { display: none; }
.nav-profile .nav-drop-menu { min-width: 260px; }
.nav-drop-user { color: var(--muted); font-size: .88rem; font-weight: 700; margin-right: auto; }
.link-button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--brand);
  font-weight: 800;
  font-size: .9rem;
  cursor: pointer;
}
.link-button:hover { background: none; color: var(--brand-dark); transform: none; box-shadow: none; }

/* Slim app footer - app screens end inside the app, not in marketing */
.app-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  width: min(1560px, calc(100% - 48px));
  margin: 0 auto;
  padding: 18px 0 26px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .88rem;
}
.app-footer-links { display: flex; gap: 18px; }
.app-footer a { font-weight: 700; font-size: .88rem; }

/* Public event hero: meta chips, ghost button, scroll cue */
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 6px; }
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: .9rem;
  font-weight: 700;
  color: #e9edf6;
}
.hero-chip--accent {
  background: color-mix(in srgb, var(--site-accent-ink, var(--brand)) 30%, transparent);
  border-color: color-mix(in srgb, var(--site-accent-ink, var(--brand)) 60%, white 12%);
}
.button.ghost {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .55);
  color: var(--white);
}
.button.ghost:hover { background: rgba(255, 255, 255, .16); color: var(--white); }
.event-site-hero { position: relative; }
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 30px;
  height: 48px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  display: flex;
  justify-content: center;
  padding-top: 9px;
}
.hero-scroll-cue span {
  width: 4px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-scroll-cue span { animation: cue-drop 1.6s ease-in-out infinite; }
}
@keyframes cue-drop {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(12px); opacity: .2; }
}

/* Richer public cards: tags, avatars, portraits, sponsor wall */
.card-tag {
  display: inline-block;
  background: var(--site-band, var(--mist));
  border: 1px solid var(--site-line, var(--line));
  color: var(--site-muted, var(--muted));
  border-radius: 999px;
  padding: 3px 11px;
  font-size: .78rem;
  font-weight: 800;
  margin: 0 6px 8px 0;
}
.card-tag--accent {
  background: color-mix(in srgb, var(--site-accent-ink, var(--brand)) 14%, transparent);
  border-color: color-mix(in srgb, var(--site-accent-ink, var(--brand)) 40%, transparent);
  color: var(--site-accent-ink, var(--brand));
}
.card-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--site-accent-ink, var(--brand)) 16%, transparent);
  color: var(--site-accent-ink, var(--brand));
  font-size: 1.3rem;
  font-weight: 900;
  margin-bottom: 12px;
}
.guest-card-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--site-radius, 12px);
  margin-bottom: 12px;
}
.card-more { display: inline-block; margin-top: 8px; font-size: .9rem; color: var(--site-accent-ink, var(--brand)); }
.sponsor-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.sponsor-tile {
  background: var(--site-surface, var(--white));
  border: 1px solid var(--site-line, var(--line));
  border-radius: var(--site-radius, 12px);
  padding: 22px;
  text-align: center;
}
.sponsor-tile .card-avatar { margin-inline: auto; }
.sponsor-tile h3 { margin: 0 0 8px; font-size: 1.05rem; }

/* Dashboard: slim hero with readiness ring and next steps */
.dash-hero--slim {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 26px 32px;
}
.dash-hero--slim h1 { margin: 4px 0 6px; }
.dash-hero-meta { color: #cbd5e1; margin: 0 0 14px; font-weight: 600; }
.dash-hero--slim .actions { margin: 0; }
.status-chip {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 11px;
  font-size: .8rem;
  font-weight: 800;
  background: rgba(255, 255, 255, .14);
}
.status-chip--published { background: rgba(16, 185, 129, .25); color: #6ee7b7; }
.status-chip--draft { background: rgba(245, 158, 11, .22); color: #fcd34d; }
.dash-readiness { flex: 0 0 auto; position: relative; z-index: 2; }
.readiness-ring {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, #1b2a4a 78%, transparent 79%),
    conic-gradient(#a855f7 calc(var(--readiness) * 1%), rgba(255, 255, 255, .14) 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.readiness-ring strong { font-size: 1.45rem; color: var(--white); line-height: 1.1; }
.readiness-ring span { font-size: .78rem; color: #cbd5e1; font-weight: 700; }
.readiness-panel { margin-bottom: 22px; }
.readiness-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.readiness-step {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  color: var(--slate);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.readiness-step:hover { transform: translateY(-2px); border-color: rgba(139, 92, 246, .5); box-shadow: var(--shadow-soft); }
.readiness-step-num {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #ede9fe;
  color: var(--brand-dark);
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.readiness-step strong { display: block; color: var(--navy); font-size: .95rem; }
.readiness-step small { display: block; color: var(--muted); }
.readiness-step-go { color: var(--brand); font-weight: 900; }
a.dash-tile { color: var(--slate); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
a.dash-tile:hover { transform: translateY(-2px); border-color: rgba(139, 92, 246, .5); box-shadow: var(--shadow-soft); }
.attention-action { display: inline-flex; align-items: center; gap: 10px; }
.attention-action em {
  font-style: normal;
  font-size: .8rem;
  font-weight: 800;
  color: var(--brand);
  background: #ede9fe;
  border-radius: 999px;
  padding: 3px 11px;
}
.dash-attention a.urgent { border-left-color: #f43f5e; }
.dash-attention a.warn { border-left-color: var(--amber); }
.dash-attention a.done { border-left-color: #10b981; }

/* Site Studio: split layout with live preview */
.studio-split {
  display: grid;
  grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}
.studio-preview { position: sticky; top: 84px; }
.studio-frame-wrap {
  background: #e8edf5;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.studio-frame-wrap iframe {
  width: 100%;
  height: 560px;
  border: 0;
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  transition: width .3s ease;
}
.studio-frame-wrap.is-mobile iframe { max-width: 390px; }
.studio-preview-note { margin: 12px 0 0; font-size: .88rem; }
.preview-devices { display: inline-flex; gap: 4px; background: var(--mist); border-radius: 999px; padding: 4px; }
.preview-device {
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .85rem;
  font-weight: 800;
}
.preview-device:hover { transform: none; box-shadow: none; color: var(--navy); }
.preview-device.is-active { background: var(--white); color: var(--navy); box-shadow: var(--shadow-soft); }
.theme-preview-btn {
  background: none;
  border: 0;
  color: var(--brand);
  font-size: .82rem;
  font-weight: 800;
  padding: 6px 0 0;
  cursor: pointer;
}
.theme-preview-btn:hover { background: none; transform: none; box-shadow: none; color: var(--brand-dark); }
.theme-preview-btn.is-previewing { color: var(--brand-dark); text-decoration: underline; }
@media (max-width: 1100px) {
  .studio-split { grid-template-columns: 1fr; }
  .studio-preview { position: static; }
}
@media (max-width: 960px) {
  .dash-hero--slim { flex-direction: column; align-items: flex-start; }
  .readiness-steps { grid-template-columns: 1fr; }
}

/* The hero's primary CTA must never disappear into the photo overlay, even
   when the site theme accent is dark (e.g. Noir). Blend the accent toward
   the brand purple and edge it in white so it always reads as the action. */
.event-public-main .button.cta {
  background: linear-gradient(120deg, color-mix(in srgb, var(--site-accent, var(--brand)) 55%, #7c3aed), #a855f7);
  border: 1.5px solid rgba(255, 255, 255, .4);
  box-shadow: 0 8px 26px rgba(124, 58, 237, .38);
  color: var(--white); /* gradient stays purple even when --site-btn-ink is dark */
}

/* ==========================================================================
   Audit round 2: global inbox, event-day mode, hero product mock, semantic
   module accents, and draft/publish chips.
   ========================================================================== */

/* Global organizer inbox */
.inbox-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.inbox-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  color: var(--slate);
  font-weight: 800;
  font-size: .92rem;
}
.inbox-tab em {
  font-style: normal;
  background: var(--mist);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: .8rem;
  color: var(--muted);
}
.inbox-tab.is-active { border-color: var(--brand); color: var(--brand-dark); background: #f5f3ff; }
.inbox-tab.is-active em { background: #ede9fe; color: var(--brand-dark); }
.inbox-list { display: grid; gap: 10px; }
.inbox-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  color: var(--slate);
  transition: transform .15s ease, box-shadow .15s ease;
}
.inbox-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.inbox-row--urgent { border-left-color: #f43f5e; }
.inbox-row--warn { border-left-color: var(--amber); }
.inbox-row--calm { border-left-color: var(--brand); }
.inbox-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.inbox-body strong { display: block; color: var(--navy); }
.inbox-body small { color: var(--muted); }
.inbox-meta { text-align: right; display: grid; gap: 4px; justify-items: end; }
.inbox-meta em {
  font-style: normal;
  font-size: .8rem;
  font-weight: 800;
  color: var(--brand);
  background: #ede9fe;
  border-radius: 999px;
  padding: 3px 12px;
}
.inbox-meta small { color: var(--muted); font-size: .8rem; }
.inbox-empty { text-align: center; padding: 46px 20px; }
.inbox-empty span { font-size: 2.4rem; display: block; margin-bottom: 10px; }
.inbox-empty h2 { margin: 0 0 8px; color: var(--navy); }
.inbox-empty p { max-width: 460px; margin-inline: auto; }

/* Event-day mode: big, glanceable, tablet-friendly */
.eventday-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  background: linear-gradient(120deg, var(--navy) 0%, #14233c 55%, #2e1065 100%);
  color: var(--white);
  border-radius: var(--radius);
  padding: 26px 32px;
  margin-bottom: 20px;
}
.eventday-hero h1 { margin: 4px 0 6px; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.eventday-hero .eyebrow { color: #a78bfa; }
.eventday-hero .actions .button { font-size: 1.05rem; padding: 14px 26px; }
.eventday-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.eventday-stat {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-soft);
  color: var(--slate);
}
.eventday-stat > div strong { display: block; font-size: 1.6rem; color: var(--navy); line-height: 1.15; }
.eventday-stat > div span { color: var(--muted); font-weight: 600; }
.eventday-ring {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(closest-side, var(--white) 74%, transparent 75%),
    conic-gradient(var(--ring-color, #7c3aed) calc(var(--rate) * 1%), #e6e9f2 0);
}
.eventday-ring strong { font-size: 1.15rem; color: var(--navy); }
.eventday-stat--tickets .eventday-ring { --ring-color: #0e7490; }
.eventday-stat--vendors .eventday-ring { --ring-color: #7c3aed; }
.eventday-stat--support { border-left: 5px solid var(--amber); }
.eventday-big {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--navy);
  min-width: 64px;
  text-align: center;
}
@media (max-width: 960px) {
  .eventday-stats { grid-template-columns: 1fr; }
  .eventday-hero { flex-direction: column; align-items: flex-start; }
}

/* Semantic module accents: one hue per functional area */
.mod-ico { border-radius: 7px; padding: 1px 3px; }
.mod-overview { background: #ede9fe; }
.mod-sell { background: #cffafe; }
.mod-people { background: #ffe4e6; }
.mod-run { background: #d1fae5; }
.mod-site { background: #dbeafe; }

/* Draft / published chips */
.page-chip {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: .8rem;
  font-weight: 800;
  margin-right: 8px;
}
.page-chip--live { background: #d1fae5; color: #065f46; }
.page-chip--draft { background: #fef3c7; color: #92400e; }
.page-chip--draft a { color: #92400e; text-decoration: underline; }

/* Marketing hero: product mock beside the copy */
.m-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
}
.hero-mock {
  position: relative;
  background: rgba(13, 20, 40, .82);
  border: 1px solid rgba(167, 139, 250, .3);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(2, 6, 23, .55);
  backdrop-filter: blur(6px);
  padding: 0 0 22px;
  transform: rotate(1.2deg);
}
.hero-mock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.hero-mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.hero-mock-bar span { margin-left: 8px; color: #94a3b8; font-size: .78rem; font-weight: 700; }
.hero-mock-body { display: flex; gap: 20px; align-items: center; padding: 20px 20px 6px; }
.hero-mock-ring {
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(closest-side, #0d1428 74%, transparent 75%),
    conic-gradient(#a855f7 82%, rgba(255, 255, 255, .12) 0);
}
.hero-mock-ring strong { color: var(--white); font-size: 1.3rem; line-height: 1.1; }
.hero-mock-ring span { color: #94a3b8; font-size: .72rem; font-weight: 700; }
.hero-mock-rows { display: grid; gap: 9px; flex: 1; min-width: 0; }
.hero-mock-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: .85rem;
  color: #e2e8f0;
  font-weight: 600;
}
.hero-mock-row em { font-style: normal; }
.hero-mock-row span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-mock-row b { color: #c4b5fd; font-weight: 800; white-space: nowrap; }
.hero-toast {
  position: absolute;
  left: -26px;
  bottom: -18px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  color: var(--navy);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(2, 6, 23, .45);
  padding: 11px 16px;
  font-size: .85rem;
  font-weight: 700;
  transform: rotate(-1.2deg);
}
.hero-toast em { font-style: normal; font-size: 1.05rem; }
@media (prefers-reduced-motion: no-preference) {
  .hero-mock { animation: mock-float 7s ease-in-out infinite alternate; }
  .hero-toast.is-in, .hero-toast { animation: toast-pop .45s cubic-bezier(.34,1.56,.64,1) backwards; }
}
@keyframes mock-float {
  from { transform: rotate(1.2deg) translateY(0); }
  to { transform: rotate(1.2deg) translateY(-12px); }
}
@keyframes toast-pop {
  from { opacity: 0; transform: rotate(-1.2deg) translateY(14px) scale(.92); }
  to { opacity: 1; transform: rotate(-1.2deg) translateY(0) scale(1); }
}
@media (max-width: 1020px) {
  .m-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .m-hero-product { max-width: 480px; }
  .hero-toast { left: 10px; }
}

/* ==========================================================================
   Branded error pages and auth (login/signup) split layout
   ========================================================================== */
.oops-page {
  min-height: 62vh;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 90px 0;
  background:
    radial-gradient(circle 3px at 18% 24%, rgba(139,92,246,.35) 40%, transparent 55%),
    radial-gradient(circle 2px at 78% 30%, rgba(240,171,252,.4) 40%, transparent 55%),
    radial-gradient(circle 3px at 60% 75%, rgba(139,92,246,.3) 40%, transparent 55%),
    #f6f8fb;
}
.oops-code {
  font-size: clamp(3.4rem, 9vw, 6rem);
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--navy);
  margin: 0 0 8px;
}
.oops-page h1 { color: var(--navy); font-size: clamp(2rem, 4.5vw, 3.2rem); margin: 0 0 14px; }
.oops-page .lede { color: var(--muted); max-width: 560px; margin: 0 auto 28px; font-size: 1.15rem; line-height: 1.65; }
.oops-page .actions { justify-content: center; }

.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
  width: min(1020px, calc(100% - 32px));
  margin: 0 auto;
  padding: 90px 0 110px;
}
.auth-pitch h1 { color: var(--navy); font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.08; margin: 10px 0 22px; }
.auth-points { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.auth-points li { font-weight: 600; color: var(--slate); }
.auth-note { color: var(--muted); font-size: .92rem; }
.auth-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 34px 32px;
}
.auth-card h2 { margin: 0 0 18px; color: var(--navy); }
.auth-card form p { margin: 0 0 14px; }
.auth-card label { display: block; font-weight: 700; color: var(--navy); margin-bottom: 5px; font-size: .92rem; }
.auth-card input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  font: inherit;
}
.auth-card input:focus { outline: 2px solid var(--brand-bright); outline-offset: 1px; border-color: var(--brand-bright); }
.auth-card .button { width: 100%; text-align: center; margin-top: 6px; }
.auth-card .helptext { display: block; color: var(--muted); font-size: .8rem; font-weight: 400; margin-top: 4px; }
.auth-card .errorlist { color: #be123c; margin: 0 0 10px; padding-left: 18px; font-size: .9rem; }
.auth-alt { margin: 18px 0 0; text-align: center; color: var(--muted); font-size: .93rem; }
@media (max-width: 860px) {
  .auth-layout { grid-template-columns: 1fr; gap: 34px; padding: 56px 0 70px; }
}

/* ==========================================================================
   Brand kit + usability pass
   ========================================================================== */
.app-context-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-soft);
}
.app-context-bar strong,
.sidebar-event-card strong { display: block; color: var(--navy); line-height: 1.2; }
.app-context-bar small,
.sidebar-event-card small { display: block; color: var(--muted); font-weight: 700; margin-top: 2px; }
.context-kicker {
  display: block;
  color: var(--brand);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.context-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.context-actions a,
.sidebar-event-card a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border-radius: 999px;
  background: var(--mist);
  color: var(--brand-dark);
  padding: 6px 11px;
  font-size: .82rem;
  font-weight: 900;
}
.sidebar-event-card {
  display: grid;
  gap: 8px;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.sidebar-event-card div { display: flex; flex-wrap: wrap; gap: 6px; }
.sidebar-event-card a { min-height: 28px; padding: 5px 9px; font-size: .78rem; }

/* ==========================================================================
   Two-mode app shell: workspace switcher + event context header
   ========================================================================== */
/* Top bar: brand + workspace switcher share the left; main-nav stays right. */
.topbar-lead { display: flex; align-items: center; gap: 14px; min-width: 0; }
.nav-workspace { position: relative; }
.nav-workspace-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px 6px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
}
.nav-workspace-toggle:hover { background: rgba(255, 255, 255, .12); }
.nav-workspace-badge {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  font-weight: 900;
  font-size: .82rem;
  flex: 0 0 auto;
}
.nav-workspace-name {
  font-weight: 800;
  font-size: .92rem;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The switcher lives on the left, so its menu opens left-aligned. */
.nav-drop-menu--left { right: auto; left: 0; }

/* Sidebar event header: the single, definitive "you are inside this event"
   indicator. Replaces the old duplicated active-event card + context strip. */
.sidebar-event-head {
  display: grid;
  gap: 8px;
  padding: 12px 12px 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #faf5ff, #f4f2ff);
  border: 1px solid #e9e3fb;
}
.sidebar-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  font-weight: 800;
  color: var(--brand-dark);
  width: max-content;
}
.sidebar-back:hover { color: var(--brand); }
.sidebar-event-head strong { color: var(--navy); line-height: 1.25; font-size: 1rem; }
.sidebar-event-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--muted);
  font-weight: 700;
}
.sidebar-event-head .status-chip { padding: 2px 9px; font-size: .72rem; }
.sidebar-event-head .status-chip--published { background: rgba(16, 185, 129, .16); color: #047857; }
.sidebar-event-head .status-chip--draft { background: rgba(245, 158, 11, .16); color: #b45309; }
.sidebar-event-links { display: flex; gap: 8px; margin-top: 2px; }
.sidebar-event-links a {
  flex: 1;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--mist);
  color: var(--brand-dark);
  font-size: .78rem;
  font-weight: 900;
}
.sidebar-event-links a:hover { background: #ede9fe; }

/* Test-mode checkout completion (dev/demo only) on the public order page. */
.test-checkout-form { display: grid; gap: 8px; justify-items: start; margin-top: 12px; }
.test-checkout-form .muted { font-size: .82rem; }

/* ==========================================================================
   All-events workspace home
   ========================================================================== */
.continue-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  margin-bottom: 22px;
  border-radius: var(--radius);
  background: linear-gradient(120deg, #faf5ff, #eef2ff);
  border: 1px solid #e6e0fb;
  box-shadow: var(--shadow-soft);
  color: var(--slate);
  transition: box-shadow .15s ease, transform .15s ease;
}
.continue-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.continue-main { min-width: 0; }
.continue-main h2 { margin: 4px 0 0; color: var(--navy); font-size: 1.5rem; }
.continue-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
  font-size: .85rem;
  color: var(--muted);
  font-weight: 700;
}
.continue-facts { margin: 6px 0 0; font-size: .9rem; color: var(--slate); font-weight: 600; }
.continue-facts span { margin-right: 4px; }
.continue-attention { color: var(--rose, #e11d48); font-weight: 800; }
.continue-go {
  flex: 0 0 auto;
  align-self: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(120deg, #7c3aed, #a855f7);
  color: #fff;
  font-weight: 900;
  font-size: .92rem;
  white-space: nowrap;
}

.event-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.event-filter {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--slate);
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 800;
  font-size: .85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.event-filter span {
  background: var(--mist);
  color: var(--muted);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: .78rem;
}
.event-filter:hover { border-color: var(--brand); color: var(--brand-dark); }
.event-filter.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.event-filter.is-active span { background: rgba(255, 255, 255, .22); color: #fff; }

.event-table { width: 100%; }
.event-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.event-table td { vertical-align: middle; }
.event-name { display: block; font-weight: 800; color: var(--navy); }
.event-name:hover { color: var(--brand); }
.event-table td .muted { font-size: .82rem; }
.attention-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(225, 29, 72, .12);
  color: #be123c;
  font-weight: 900;
  font-size: .82rem;
}
.event-empty-filter { text-align: center; color: var(--muted); font-weight: 700; padding: 20px 0 6px; }

.empty-state { text-align: center; display: grid; justify-items: center; gap: 8px; padding: 40px 24px; }
.empty-state .empty-ico { font-size: 2.6rem; }
.empty-state h2 { margin: 0; color: var(--navy); }
.empty-state .actions { justify-content: center; margin-top: 8px; }

/* On the All-events table the status chips sit on a light panel, not the dark
   top bar, so they need darker ink than the top-bar variants. */
.event-table .status-chip--published { background: rgba(16, 185, 129, .16); color: #047857; }
.event-table .status-chip--draft { background: rgba(245, 158, 11, .16); color: #b45309; }
.continue-meta .status-chip--published { background: rgba(16, 185, 129, .16); color: #047857; }
.continue-meta .status-chip--draft { background: rgba(245, 158, 11, .16); color: #b45309; }

.dashboard-path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.dashboard-path a {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 8px 12px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px;
  color: var(--slate);
  box-shadow: var(--shadow-soft);
}
.dashboard-path a:hover {
  transform: translateY(-2px);
  border-color: rgba(109, 40, 217, .35);
  color: var(--slate);
}
.dashboard-path span {
  grid-row: span 2;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef2ff;
  color: var(--brand-dark);
  font-size: .8rem;
  font-weight: 900;
}
.dashboard-path strong { color: var(--navy); }
.dashboard-path small { color: var(--muted); font-weight: 700; }

.studio-roadmap { margin-bottom: 18px; }
.studio-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.studio-step {
  min-height: 118px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: grid;
  align-content: start;
  gap: 6px;
}
.studio-step.is-done {
  background: #ecfdf5;
  border-color: #bbf7d0;
}
.studio-step-num {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--brand-dark);
  font-size: .78rem;
  font-weight: 900;
  border: 1px solid var(--line);
}
.studio-step strong { color: var(--navy); }
.studio-step small { color: var(--muted); font-weight: 700; line-height: 1.4; }

.theme-field-group {
  min-width: min(100%, 250px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
}
.theme-field-group .eyebrow { grid-column: 1 / -1; margin: 0; }
.theme-save-row {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.theme-preset .theme-preview-btn {
  min-height: 30px;
  padding: 5px 10px;
  justify-content: center;
  text-align: center;
  font-size: .78rem;
  color: var(--brand-dark);
  background: #f8fafc;
}

.block-palette-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.block-palette-groups h3 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: .98rem;
}
.block-palette-groups .block-palette { grid-template-columns: 1fr; }
.launch-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ede9fe;
  color: var(--brand-dark);
  font-size: .78rem;
  font-weight: 900;
}
.studio-editor-grid {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 18px;
}
.stacked-form p { margin: 0 0 12px; }
.block-order-list li[data-block] { cursor: grab; }
.drag-handle { color: var(--muted); margin-right: 6px; }

.event-public-main.site-nav-underline .microsite-nav,
.event-public-main.site-nav-minimal .microsite-nav {
  background: transparent;
  border-top-color: rgba(255, 255, 255, .12);
}
.event-public-main.site-nav-underline .microsite-nav .button,
.event-public-main.site-nav-underline .microsite-nav .button.light {
  border: 0;
  border-bottom: 2px solid rgba(255, 255, 255, .45);
  border-radius: 0;
  background: transparent;
  padding-inline: 2px;
}
.event-public-main.site-nav-minimal .microsite-nav .button,
.event-public-main.site-nav-minimal .microsite-nav .button.light {
  border: 0;
  background: transparent;
  padding-inline: 4px;
}
.event-public-main.site-nav-glass .microsite-nav .button,
.event-public-main.site-nav-glass .microsite-nav .button.light {
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(12px);
}
.event-public-main.site-buttons-soft .button:not(.ghost) {
  background: color-mix(in srgb, var(--site-accent-btn, var(--brand)) 16%, white);
  color: var(--site-accent-ink, var(--brand));
  border: 1px solid color-mix(in srgb, var(--site-accent-ink, var(--brand)) 30%, transparent);
}
.event-public-main.site-buttons-outline .button:not(.ghost) {
  background: transparent;
  color: var(--site-accent-ink, var(--brand));
  border: 1.5px solid var(--site-accent-ink, var(--brand));
}
.event-public-main.site-buttons-outline .event-site-hero .button:not(.ghost),
.event-public-main.site-buttons-outline .event-site-cta .button:not(.ghost) {
  color: var(--white);
  border-color: rgba(255, 255, 255, .7);
}
.event-public-main.site-hero-editorial .event-site-hero {
  min-height: 560px;
  background-color: var(--site-bg);
  background-size: min(52vw, 720px);
  background-repeat: no-repeat;
  background-position: right center;
}
.event-public-main.site-hero-editorial .event-site-hero .event-site-wrap { max-width: var(--site-wrap, 980px); }
.event-public-main.site-hero-editorial .event-site-hero h1 { max-width: 780px; }
.event-public-main.site-hero-poster .event-site-hero {
  text-align: center;
  min-height: 680px;
}
.event-public-main.site-hero-poster .event-site-hero .event-site-wrap {
  display: grid;
  justify-items: center;
}
.event-public-main.site-hero-poster .event-site-hero h1 { max-width: 940px; }
.event-public-main.site-hero-poster .hero-meta,
.event-public-main.site-hero-poster .actions { justify-content: center; }
.event-preview-banner {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  background: #111827;
  color: #f8fafc;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  padding: 10px 16px;
  font-size: .9rem;
}
.event-preview-banner span { color: #cbd5e1; font-weight: 700; }
.event-preview-banner a { color: #c4b5fd; font-weight: 900; }
.event-brand-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--site-surface, #ffffff) 92%, transparent), color-mix(in srgb, var(--site-surface, #ffffff) 84%, var(--site-accent, #6d28d9)));
  border-bottom: 1px solid var(--site-line, var(--line));
  box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
  backdrop-filter: blur(16px);
}
.event-brand-nav-inner {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.event-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  color: var(--site-head, var(--navy));
}
.event-brand-lockup:hover { color: var(--site-head, var(--navy)); }
.event-brand-lockup img,
.event-brand-lockup span {
  width: 42px;
  height: 42px;
  border-radius: var(--site-radius, 12px);
  object-fit: cover;
  flex: 0 0 auto;
}
.event-brand-lockup span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--site-accent-btn, var(--brand));
  color: var(--site-btn-ink, var(--white));
  font-weight: 900;
}
.event-brand-lockup strong {
  color: var(--site-head, var(--navy));
  font-size: .98rem;
  line-height: 1.15;
}
.event-brand-nav nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.event-brand-nav nav a {
  color: var(--site-ink, var(--slate));
  border-radius: 999px;
  padding: 7px 10px;
  font-size: .86rem;
  font-weight: 900;
}
.event-brand-nav nav a:hover {
  background: color-mix(in srgb, var(--site-accent-ink, var(--brand)) 12%, transparent);
  color: var(--site-accent-ink, var(--brand));
}
.event-brand-nav + .event-site-hero .microsite-nav { display: none; }
.event-powered-by {
  background: var(--site-bg, #f6f8fb);
  border-top: 1px solid var(--site-line, var(--line));
  color: var(--site-muted, var(--muted));
  padding: 14px 16px 20px;
  text-align: center;
  font-size: .78rem;
}
.event-powered-by a {
  color: inherit;
  font-weight: 800;
  text-decoration: none;
}
.event-powered-by a:hover { color: var(--site-accent-ink, var(--brand)); }
.event-public-main.site-nav-underline .event-brand-nav nav a {
  border-radius: 0;
  border-bottom: 2px solid transparent;
  padding-inline: 3px;
}
.event-public-main.site-nav-underline .event-brand-nav nav a:hover {
  background: transparent;
  border-bottom-color: var(--site-accent-ink, var(--brand));
}
.event-public-main.site-nav-minimal .event-brand-nav nav a {
  border-radius: 0;
  background: transparent;
}

@media (max-width: 1100px) {
  .dashboard-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .block-palette-groups { grid-template-columns: 1fr; }
  .studio-editor-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app-context-bar { align-items: flex-start; flex-direction: column; }
  .context-actions { justify-content: flex-start; }
  .dashboard-path, .studio-steps { grid-template-columns: 1fr; }
  .theme-field-group { grid-template-columns: 1fr; }
  .event-brand-nav { position: static; }
  .event-brand-nav-inner { align-items: flex-start; flex-direction: column; padding-block: 12px; }
  .event-brand-nav nav { justify-content: flex-start; }
}