/* ============================================================
   ARTINO site stylesheet (design system v1.2)
   One file, merged from the former artino*.css, forms.css,
   artino-responsive.css and v12.css, in their original cascade
   order, with rules that match nothing on the page removed.
   Colours and fonts come only from css/tokens.css.
   ============================================================ */

/* ================= from artino.css ================= */
/* ============================================================
   ARTINO — Theatre palette · cinematic art platform
   ============================================================ */

/* ---- Fonts ---- */
/* Self-hosted (Fraunces + Plus Jakarta Sans) via css/tokens.css, generated from the
   design system by tools/build-tokens.mjs. The families below read those tokens. */

:root {
  /* Theatre palette */
  --bg: var(--art-surface-canvas);
  --surface: var(--art-surface-raised);
  --surface-2: var(--art-surface-raised);
  --tungsten: var(--art-action-primary-fill);
  --halo: var(--art-action-primary-text);
  --gold: var(--art-action-primary-text);
  --red: var(--art-danger);
  --cream: var(--art-content-primary);
  --grey: var(--art-content-muted);
  --violet: var(--art-action-secondary-text);

  --gold-line: var(--art-surface-border);
  --gold-faint: var(--art-surface-border);

  /* Type families — from the design tokens. v1.2 has no mono face, so the old
     mono role uses the body family (numerals stay tabular via tokens.css). */
  --display: var(--art-font-display);
  --body: var(--art-font-body);
  --mono: var(--art-font-body);

  --maxw: 1240px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* tweak hooks */
html[data-grain="off"] body::after { opacity: 0; }
html[data-spotlight="off"] .waitlist-spot { opacity: 0; }

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* keep anchored sections clear of the fixed nav when jumping via the menu */
  scroll-padding-top: 88px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---- Film grain overlay across whole page ---- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Real imagery ---- */
.img-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Shared primitives ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

.eyebrow {
  font-family: var(--body);
  text-transform: uppercase;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.display {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: var(--cream);
  text-wrap: balance;
}

.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }

/* gold hairline act-break rule */
.act-rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--gold-line) 18%, var(--gold-line) 82%, transparent);
}

/* soft tungsten spotlight pool */

/* ---- Reveal animation (visible by default; hidden only when JS present) ---- */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  font-family: var(--body); font-weight: 600; font-size: 15px; letter-spacing: 0.01em;
  padding: 15px 30px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
  position: relative; overflow: hidden; white-space: nowrap;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s, border-color 0.3s;
}
.btn-primary {
  background: linear-gradient(135deg, var(--halo) 0%, var(--tungsten) 52%, var(--gold) 100%);
  color: var(--art-action-primary-on);
  box-shadow: 0 4px 18px -6px color-mix(in srgb, var(--art-action-primary-fill) 50%, transparent), inset 0 1px 0 color-mix(in srgb, var(--art-content-onimage-primary) 40%, transparent);
}
.btn-primary:hover {
  box-shadow: 0 14px 46px -8px color-mix(in srgb, var(--art-action-primary-fill) 55%, transparent), inset 0 1px 0 color-mix(in srgb, var(--art-content-onimage-primary) 50%, transparent);
  transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0); }
/* gold shimmer sweep */
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--art-content-onimage-primary) 50%, transparent) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform 0.7s var(--ease);
}
.btn-primary:hover::after { transform: translateX(130%); }
.btn-ghost {
  background: color-mix(in srgb, var(--art-content-primary) 2%, transparent); color: var(--cream);
  border-color: var(--gold-line);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--art-content-onimage-primary) 5%, transparent);
}
.btn-ghost:hover {
  border-color: var(--gold); background: color-mix(in srgb, var(--art-action-primary-fill) 8%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px -12px color-mix(in srgb, var(--art-action-primary-fill) 32%, transparent), inset 0 1px 0 color-mix(in srgb, var(--art-content-onimage-primary) 6%, transparent);
}
.btn-ghost:active { transform: translateY(0); }

/* focus ring */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--tungsten); outline-offset: 3px;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  transition: background 0.5s var(--ease), border-color 0.5s, backdrop-filter 0.5s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--art-surface-canvas) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--gold-faint);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 18px 32px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 25px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--cream); text-decoration: none;
}
.brand .mark {
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--halo), var(--tungsten) 55%, var(--gold));
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--art-action-primary-fill) 60%, transparent);
  flex: none;
}
.nav-links { display: flex; align-items: center; gap: 34px; margin-left: auto; }
.nav-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-links + .nav-tools { margin-left: 22px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nav-links a {
  font-size: 14px; color: var(--grey); text-decoration: none; font-weight: 500;
  transition: color 0.3s; letter-spacing: 0.01em;
}
.nav-links a:hover { color: var(--cream); }
.nav-cta { margin-left: 6px; }
/* The CTA is a primary button living inside .nav-links, whose `a { color: grey }`
   rule outranks .btn-primary and was painting the label grey-on-gold (only legible
   on hover). Keep the button's dark ink in both rest and hover states. */
.nav-links a.nav-cta,
.nav-links a.nav-cta:hover { color: var(--art-action-primary-on); }
.nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-burger span { display: block; width: 24px; height: 1.5px; background: var(--cream); margin: 5px 0; transition: 0.3s; }

/* mobile curtain menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 1500;
  background: linear-gradient(180deg, var(--art-surface-canvas), var(--art-surface-raised));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  transform: translateY(-100%); transition: transform 0.6s var(--ease);
}
.mobile-menu.open { transform: none; }
.mobile-menu a { font-family: var(--display); font-size: 32px; color: var(--cream); text-decoration: none; padding: 12px; }
.mobile-menu .close { position: absolute; top: 22px; right: 26px; font-size: 30px; color: var(--cream); background: none; border: 0; cursor: pointer; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: 7vh; overflow: hidden;
}
.hero-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--art-surface-scrim);
}
.hero-content { position: relative; z-index: 3; width: 100%; }
.hero h1 {
  font-size: clamp(44px, 7vw, 84px);
  margin: 20px 0 0; max-width: none;
}
.hero h1 .ln {
  display: block; overflow: hidden; white-space: nowrap;
  /* overflow:hidden powers the rise-in reveal but clips the italic descender
     (the "g" in "belongs") because line-height is so tight. Pad the box and
     cancel it in layout so glyphs get room without nudging the sub-headline. */
  padding-bottom: 0.18em; margin-bottom: -0.18em;
}
.hero h1 .ln > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero h1 .ln > span { animation: riseIn 1s var(--ease) both; }
  .js .hero h1 .ln:nth-child(3) > span { animation-delay: 0.10s; }
  .js .hero h1 .ln:nth-child(4) > span { animation-delay: 0.20s; }
}
@keyframes riseIn { from { transform: translateY(106%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .hero h1 .ln > span { transform: none !important; } }
.hero .sub { max-width: 52ch; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: var(--cream); margin: 26px 0 0; opacity: 0.92; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero .proof { margin-top: 30px; font-size: 13px; color: var(--grey); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }


/* ============================================================
   PLACEHOLDER FRAMES (Language A — cinematic photo slots)
   ============================================================ */

/* ============================================================
   LIVING UI — fragment card primitives (Language B)
   ============================================================ */
.ui-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ui-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); font-weight: 600; }

/* Role badges (How it works) */
.rc-fan { color: var(--art-action-secondary-text); background: color-mix(in srgb, var(--art-action-secondary-tintbase) 12%, transparent); border: 1px solid color-mix(in srgb, var(--art-action-secondary-tintbase) 16%, transparent); }
.rc-artist { color: var(--halo); background: color-mix(in srgb, var(--art-action-primary-fill) 12%, transparent); border: 1px solid color-mix(in srgb, var(--art-action-primary-fill) 42%, transparent); }
.rc-org { color: var(--gold); background: color-mix(in srgb, var(--art-action-primary-fill) 10%, transparent); border: 1px solid var(--gold-line); }

/* ================= from artino-2.css ================= */
/* ============================================================
   ARTINO — part 2: For Artists, Waitlist, Footer
   ============================================================ */

/* section header (shared by feature sections) */
.sec-head { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.sec-head .eyebrow { position: relative; display: inline-block; padding-bottom: 6px; }
.sec-head .eyebrow::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--gold); transition: width 0.9s var(--ease) 0.2s;
}
.sec-head.is-in .eyebrow::after, .sec-head .eyebrow.is-in::after { width: 100%; }
.sec-head h2 { font-size: clamp(32px, 4.3vw, 52px); margin: 16px 0 0; max-width: 18ch; }

.feature-sec { padding: 110px 0 40px; position: relative; }

/* alternating feature block */
.fblock {
  max-width: var(--maxw); margin: 0 auto; padding: 70px 32px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.fblock.flip .fb-visual { order: 2; }
.fblock.flip .fb-copy { order: 1; }
.fb-copy h3 { font-family: var(--display); font-weight: 500; font-size: clamp(28px, 3.2vw, 40px); margin: 0 0 18px; letter-spacing: -0.012em; line-height: 1.06; }
.fb-copy p { font-size: 17px; color: var(--grey); margin: 0 0 22px; max-width: 46ch; }
.fb-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-tag { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); font-weight: 600; padding: 6px 0; }
.fb-tag:not(:last-child)::after { content: "·"; margin-left: 8px; color: var(--grey); }

/* visual stage holds composited photo + UI fragments */
.fb-visual { position: relative; min-height: 440px; }
.fb-photo {
  position: absolute; inset: 0; border-radius: 16px; overflow: hidden;
}

/* floating fragment positions */
.frag { position: absolute; will-change: transform; }
.frag-tr { top: -22px; right: -26px; }
.frag-br { bottom: -26px; right: -18px; }
.frag-bl { bottom: -30px; left: -28px; }

/* --- specific fragment internals --- */

/* dashboard fragment (hero of section) */
.dash-frag { width: min(560px, 100%); position: relative; margin: 0 auto; }
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.kpi { padding: 14px; border-radius: 11px; background: color-mix(in srgb, var(--art-surface-canvas) 50%, transparent); border: 1px solid var(--art-surface-border); }
.kpi .k-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); }
.kpi .k-val { font-family: var(--mono); font-size: 24px; font-weight: 600; color: var(--cream); margin-top: 4px; }
.kpi .k-val.tung { color: var(--tungsten); }
.chart-card, .donut-card { padding: 16px; border-radius: 11px; background: color-mix(in srgb, var(--art-surface-canvas) 50%, transparent); border: 1px solid var(--art-surface-border); }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 96px; margin-top: 14px; }
.bars .bar { flex: 1; border-radius: 4px 4px 0 0; background: var(--art-action-primary-fill); transition: height 1s var(--ease); }

/* stat chips row (analytics blocks) */

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ============================================================
   WAITLIST CTA
   ============================================================ */
.waitlist {
  position: relative; overflow: hidden;
  padding: 104px 0 150px;
  text-align: center;
}
.waitlist::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 70% at 50% 38%, color-mix(in srgb, var(--art-action-primary-fill) 22%, transparent), transparent 60%),
    radial-gradient(80% 90% at 50% 50%, color-mix(in srgb, var(--art-action-secondary-tintbase) 50%, transparent), transparent 62%),
    linear-gradient(180deg, var(--bg), var(--art-surface-raised) 50%, var(--bg));
}
.waitlist::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(115deg, color-mix(in srgb, var(--art-action-primary-fill) 5%, transparent) 0 2px, transparent 2px 9px);
  mix-blend-mode: screen; opacity: 0.6;
}
.waitlist-spot {
  position: absolute; z-index: 0; width: 620px; height: 620px;
  left: 50%; top: 38%; margin-left: -310px; margin-top: -310px;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--art-action-primary-fill) 20%, transparent), transparent 70%);
  filter: blur(20px); transition: transform 0.5s var(--ease);
}
.waitlist .inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; padding: 0 28px; }
.waitlist h2 { font-size: clamp(40px, 6vw, 76px); margin: 0; }
.waitlist .sub { color: var(--cream); opacity: 0.9; font-size: 18px; line-height: 1.55; margin: 22px auto 0; max-width: 46ch; }
.role-toggle { display: inline-flex; gap: 6px; margin: 34px auto 0; padding: 5px; border-radius: 100px; border: 1px solid var(--gold-line); background: color-mix(in srgb, var(--art-surface-canvas) 50%, transparent); }
.role-toggle button {
  font-family: var(--body); font-size: 13px; font-weight: 500; color: var(--grey);
  background: transparent; border: 0; padding: 9px 18px; border-radius: 100px; cursor: pointer;
  transition: color 0.3s, background 0.3s;
}
.role-toggle button.active { color: var(--art-action-primary-on); background: var(--tungsten); }
.signup { display: flex; gap: 10px; max-width: 480px; margin: 26px auto 0; }
.signup input {
  flex: 1; font-family: var(--body); font-size: 15px; color: var(--cream);
  background: color-mix(in srgb, var(--art-surface-canvas) 70%, transparent); border: 1px solid var(--gold-line); border-radius: 14px;
  padding: 15px 20px; outline: none; box-shadow: 0 0 30px -8px color-mix(in srgb, var(--art-action-primary-fill) 40%, transparent) inset;
  transition: border-color 0.3s;
}
.signup input::placeholder { color: var(--grey); }
.signup input:focus { border-color: var(--tungsten); }
.signup input.err { border-color: var(--art-danger); }
.signup-done {
  display: none; margin: 26px auto 0; max-width: 480px;
  padding: 18px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--art-action-primary-fill) 50%, transparent);
  background: color-mix(in srgb, var(--art-action-primary-fill) 10%, transparent); color: var(--halo); font-size: 16px; font-weight: 500;
  position: relative; overflow: hidden;
}
.signup-done.show { display: block; }
.signup-done::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 35%, color-mix(in srgb, var(--art-content-onimage-primary) 50%, transparent) 50%, transparent 65%);
  transform: translateX(-130%); animation: shimmer 1.1s var(--ease) 0.1s;
}
@keyframes shimmer { to { transform: translateX(130%); } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--gold-faint); padding: 56px 0 48px; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; align-items: start; }
.footer .brand { margin-bottom: 14px; }
.footer .mission { font-size: 14px; color: var(--grey); max-width: 34ch; }
.footer .fcol h2 { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; font-weight: 600; }
.footer .fcol a { display: block; color: var(--grey); text-decoration: none; font-size: 14px; margin-bottom: 11px; transition: color 0.3s; }
.footer .fcol a:hover { color: var(--cream); }
.footer-base { max-width: var(--maxw); margin: 44px auto 0; padding: 26px 32px 0; border-top: 1px solid var(--gold-faint); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.footer-base .tag { font-size: 13px; color: var(--gold); }
.footer-base .copy { font-size: 13px; color: var(--grey); }

@media (max-width: 700px) {
  .signup { flex-direction: column; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer .fbrandcol { grid-column: 1 / -1; }
}

/* ================= from artino-3.css ================= */
/* ============================================================
   ARTINO — part 3: Problem, Solution, Organisers extras,
   Shared Benefits, How It Works, Testimonials
   ============================================================ */

/* line-icon primitive: thin gold stroke */
.licon { width: 30px; height: 30px; stroke: var(--gold); stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   MANIFESTO BAND (intermission)
   ============================================================ */
.manifesto { position: relative; padding: 120px 0 132px; text-align: center; overflow: hidden; }
.manifesto-spot {
  position: absolute; left: 50%; top: 38%; width: 980px; height: 620px;
  transform: translate(-50%,-50%); pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--art-action-primary-fill) 12%, transparent), transparent 72%);
  filter: blur(34px);
}
.manifesto .wrap { position: relative; z-index: 1; max-width: 940px; }
.manifesto blockquote {
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(28px, 4vw, 50px); line-height: 1.15; letter-spacing: -0.01em;
  color: var(--cream); margin: 26px auto 16px; max-width: 20ch;
}
.manifesto cite {
  display: block; font-style: normal; font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 48px;
}
.manifesto .mtext { max-width: 62ch; margin: 0 auto; }
.manifesto .mtext p { font-size: 18px; line-height: 1.72; color: var(--grey); margin: 0 0 20px; }
.manifesto .m-cta { margin-top: 40px; }
@media (max-width: 640px) {
  .manifesto { padding: 86px 0 92px; }
  .manifesto .mtext p { font-size: 16px; }
}

/* ============================================================
   ORGANISERS — extra Living UI fragments
   ============================================================ */

.evan-frag { width: min(560px, 100%); margin: 0 auto; }

/* ============================================================
   SHARED BENEFITS
   ============================================================ */
.benefits { padding: 130px 0 90px; }
.benefits .head { text-align: center; margin-bottom: 60px; }
.benefits .head h2 { font-size: clamp(34px, 4.6vw, 58px); margin: 14px auto 0; max-width: 18ch; }
.ben-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bcard {
  padding: 30px 26px; border-radius: 15px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--art-surface-border);
  transition: transform 0.65s var(--ease), box-shadow 0.65s var(--ease), border-color 0.65s var(--ease);
}
.bcard:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--art-action-primary-fill) 40%, transparent); }
.bcard .licon { width: 26px; height: 26px; margin-bottom: 18px; }
.bcard h3 { font-family: var(--display); font-weight: 500; font-size: 20px; line-height: 1.16; margin: 0 0 10px; letter-spacing: -0.01em; }
.bcard p { margin: 0; font-size: 14px; color: var(--grey); line-height: 1.58; }
.bcard.feature { grid-column: span 2; background: linear-gradient(135deg, color-mix(in srgb, var(--art-action-primary-fill) 16%, transparent), color-mix(in srgb, var(--art-action-secondary-tintbase) 18%, transparent)); border-color: color-mix(in srgb, var(--art-action-primary-fill) 40%, transparent); }
.bcard.feature::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--art-action-primary-fill) 25%, transparent), transparent 70%); }
.bcard.feature .licon { stroke: var(--halo); }
.bcard.feature h3 { font-size: 24px; color: var(--cream); }
.bcard.feature p { color: color-mix(in srgb, var(--art-content-primary) 82%, transparent); }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how { padding: 120px 0 48px; }
.how .head { text-align: center; margin-bottom: 64px; }
.how .head h2 { font-size: clamp(34px, 4.6vw, 58px); margin: 0; }
.track { margin-bottom: 70px; }
.track:last-child { margin-bottom: 0; }
.track-label { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 30px; }
.track-label .tl-badge { padding: 5px 11px; border-radius: 100px; border: 1px solid var(--gold-line); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; position: relative; }
.steps::before { content: ""; position: absolute; left: 8%; right: 8%; top: 30px; height: 1px; background: color-mix(in srgb, var(--art-content-primary) 8%, transparent); z-index: 0; }
.steps .line-draw { position: absolute; left: 8%; top: 30px; height: 1px; width: 84%; transform-origin: left; background: linear-gradient(90deg, var(--tungsten), var(--gold)); z-index: 1; }
.js .steps .line-draw { transform: scaleX(0); transition: transform 1.4s var(--ease); }
.js .track.in .line-draw { transform: scaleX(1); }
.step { position: relative; z-index: 2; }
.step .num { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 26px; color: var(--tungsten); background: var(--surface); border: 1px solid var(--gold-line); margin-bottom: 22px; }
.step h3 { font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.14; margin: 0 0 10px; }
.step p { margin: 0; color: var(--grey); font-size: 15px; line-height: 1.58; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */

@media (max-width: 900px) {
  .ben-grid { grid-template-columns: 1fr 1fr; }
  .bcard.feature { grid-column: span 2; }
  .steps { grid-template-columns: 1fr; gap: 36px; }
  .steps::before, .steps .line-draw { display: none; }
}
@media (max-width: 600px) {
  .ben-grid { grid-template-columns: 1fr; }
  .bcard.feature { grid-column: span 1; }
}

/* ================= from artino-4.css ================= */
/* ============================================================
   ARTINO — part 4: App-screen fragments (Theater theme)
   Tokens + primitives lifted from the ArtistConnect app source:
   curtain black, tungsten text, gold-leaf filament light.
   ============================================================ */

.app {
  --ac-bg: var(--art-surface-canvas);
  --ac-bg2: var(--art-surface-raised);
  --ac-bg3: var(--art-surface-sunken);
  --ac-bg4: var(--art-surface-sunken);
  --ac-gold: var(--art-action-primary-fill);
  --ac-text: var(--art-content-primary);
  --ac-text2: var(--art-content-muted);
  --ac-text3: var(--art-content-muted);
  --ac-border: var(--art-surface-border);
  --ac-border2: var(--art-surface-border);
  --ac-red: var(--art-action-primary-fill);
  --ac-green: var(--art-status-confirmed-text);

  position: relative;
  background: linear-gradient(170deg, var(--ac-bg2), var(--ac-bg));
  border: 1px solid var(--ac-border2);
  border-radius: 24px;
  color: var(--ac-text);
  font-family: var(--display);
  overflow: hidden;
}

/* status-bar hint — sells "this is a phone screen" */
.ac-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 0;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  color: var(--ac-text2); letter-spacing: 0.02em;
}
.ac-status .sig { display: flex; gap: 3px; align-items: flex-end; height: 8px; }
.ac-status .sig i { width: 2.5px; background: var(--ac-text2); border-radius: 1px; display: block; }
.ac-status .sig i:nth-child(1) { height: 3px; }
.ac-status .sig i:nth-child(2) { height: 5px; }
.ac-status .sig i:nth-child(3) { height: 7px; }
.ac-status .sig i:nth-child(4) { height: 8px; opacity: 0.45; }


/* mono kicker (timestamps, tags) */
.ac-kicker {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ac-text3);
}
.ac-row .ac-kicker { white-space: nowrap; }
.ac-kicker.gold { color: var(--ac-gold); }
.ac-kicker.dim2 { color: var(--ac-text2); }

/* serif display inside app */
.ac-serif { font-family: var(--display); color: var(--ac-text); letter-spacing: -0.01em; line-height: 1.05; }

/* Spotlight — the app's signature button: no rectangle, a pool of warm
   light + a 1px gold filament under italic serif text */
.ac-spot {
  position: relative; isolation: isolate;
  display: inline-block; padding: 9px 18px; text-align: center;
  font-family: var(--display); font-style: italic; font-size: 13.5px;
  color: var(--ac-text); letter-spacing: -0.01em; white-space: nowrap;
}
.ac-spot::before {
  content: ""; position: absolute; inset: -55% -14%; z-index: -1;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--art-action-primary-fill) 42%, transparent) 0%, color-mix(in srgb, var(--art-action-primary-fill) 15%, transparent) 30%, transparent 64%);
  transition: opacity 0.4s;
}
.ac-spot::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ac-gold); opacity: 0.65;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--art-action-primary-fill) 16%, transparent);
  transition: opacity 0.4s, box-shadow 0.4s;
}
.ac-spot.quiet { color: var(--ac-text2); font-style: italic; }
.ac-spot.quiet::before { opacity: 0; }
.ac-spot.quiet::after { opacity: 0.18; box-shadow: none; }

/* avatar — initials in italic serif, gold filament ring + halo */
.ac-av {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ac-bg3), var(--ac-bg4));
  border: 1px solid color-mix(in srgb, var(--art-action-primary-fill) 40%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--art-action-primary-fill) 20%, transparent);
  font-family: var(--display); font-style: italic; font-size: 13px; color: var(--ac-text);
  overflow: hidden;
}
.ac-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* divider + rows */
.ac-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }


/* generic media chip over photos */
.ac-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 100px;
  background: rgba(0,0,0,0.62); backdrop-filter: blur(4px);
  font-family: var(--mono); font-size: 8px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ac-text); white-space: nowrap;
}

/* status pill (NEW / CONFIRMED) */
.ac-state {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 100px; white-space: nowrap;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--ac-border2); color: var(--ac-text2);
}
.ac-state.gold { color: var(--ac-gold); border-color: color-mix(in srgb, var(--art-action-primary-fill) 45%, transparent); background: color-mix(in srgb, var(--art-action-primary-fill) 8%, transparent); }

/* ============================================================
   Feed post (the Art Lover "Discover" mockup)
   ============================================================ */
/* frag fragments keep their absolute anchors despite .app */
.frag.app { position: absolute; }
.feed-media { position: relative; height: 158px; border-radius: 14px; overflow: hidden; }
.feed-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feed-media .grad { position: absolute; inset: 0; background: var(--art-surface-scrim); }
.feed-id { position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; align-items: center; gap: 8px; }
.feed-id .nm { font-size: 12px; font-weight: 500; color: var(--art-content-onimage-primary); font-family: var(--body); }
.feed-id .sb { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--art-content-onimage-muted); margin-top: 1px; }
.feed-actions { display: flex; align-items: center; gap: 14px; padding: 9px 4px 0; font-family: var(--body); font-size: 10.5px; color: var(--ac-text2); }


/* ============================================================
   PORTFOLIO — talent tabs switch on hover
   ============================================================ */
.pf-frag { width: 330px; }
.pf-tabs { display: flex; gap: 0; position: relative; margin-top: 10px; border-bottom: 1px solid var(--ac-border); }
.pf-tabs .t { flex: 1; text-align: center; padding: 8px 0; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ac-text3); transition: color 1s var(--ease); }
.pf-ind { position: absolute; bottom: -1px; left: 0; width: 50%; height: 1.5px; background: var(--ac-gold); box-shadow: 0 4px 12px color-mix(in srgb, var(--art-action-primary-fill) 40%, transparent); transition: transform 1.1s var(--ease); }
.pf-frag .t1 { color: var(--ac-text); }
.pf-frag.play .t1 { color: var(--ac-text3); }
.pf-frag.play .t2 { color: var(--ac-text); }
.pf-frag.play .pf-ind { transform: translateX(100%); }
.pf-panels { position: relative; margin-top: 12px; height: 158px; }
.pf-panel { position: absolute; inset: 0; transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.pf-panel .pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pf-panel .pgrid .c { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
.pf-panel .pgrid .c.big { grid-column: span 2; grid-row: span 2; }
.pf-panel .pgrid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-panel .meta { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.pf-a { opacity: 1; transform: none; }
.pf-b { opacity: 0; transform: translateX(14px); pointer-events: none; }
.pf-frag.play .pf-a { opacity: 0; transform: translateX(-14px); }
.pf-frag.play .pf-b { opacity: 1; transform: none; }

/* ============================================================
   PRICING — add-talent step; second talent crossfades in on hover
   ============================================================ */
.pr-frag { width: 320px; }
.pr-steps { display: flex; gap: 5px; margin: 4px 0 10px; }
.pr-steps i { flex: 1; height: 3px; border-radius: 2px; background: var(--ac-bg3); }
.pr-steps i.on { background: var(--ac-gold); }
.pr-panels { position: relative; height: 196px; margin-top: 10px; }
.pr-panel { position: absolute; inset: 0; transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.pr-a { opacity: 1; }
.pr-b { opacity: 0; transform: translateY(10px); pointer-events: none; }
.pr-frag.play .pr-a { opacity: 0; transform: translateY(-10px); }
.pr-frag.play .pr-b { opacity: 1; transform: none; }
.pr-row { display: flex; align-items: center; justify-content: space-between; padding: 8.5px 0; font-family: var(--body); font-size: 12.5px; color: var(--ac-text); }
.pr-row .sub { color: var(--ac-text2); font-size: 11px; }
.pr-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--ac-border2); }
.pr-total .amt { font-family: var(--display); font-style: italic; font-size: 26px; color: var(--ac-gold); }
.ac-toggle { width: 32px; height: 18px; border-radius: 100px; background: color-mix(in srgb, var(--art-content-primary) 12%, transparent); position: relative; flex: none; }
.ac-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ac-text); transition: transform 0.3s var(--ease), background 0.3s; }
.ac-toggle.on { background: var(--ac-gold); }
.ac-toggle.on::after { transform: translateX(14px); background: var(--art-surface-raised); }
.pr-talent-chip { position: relative; height: 16px; width: 92px; }
.pr-talent-chip .ac-kicker { position: absolute; right: 0; top: 0; transition: opacity 1s; white-space: nowrap; }
.pr-talent-chip .k2 { opacity: 0; }
.pr-frag.play .k1 { opacity: 0; }
.pr-frag.play .k2 { opacity: 1; }

/* ============================================================
   BOOKING — counter-quote plays out on hover
   ============================================================ */
.bk-frag { width: 300px; }
.bk-quote { margin-top: 10px; border: 1px solid color-mix(in srgb, var(--art-action-primary-fill) 35%, transparent); border-radius: 14px; overflow: hidden; }
.bk-quote .qhead { padding: 6px 12px; background: color-mix(in srgb, var(--art-action-primary-fill) 10%, transparent); }
.bk-quote .qbody { padding: 10px 12px 12px; }
.bk-amt { font-family: var(--display); font-style: italic; font-size: 24px; color: var(--ac-text); }
.bk-btns { display: flex; gap: 8px; margin-top: 10px; }
.bk-btns .b { flex: 1; text-align: center; padding: 8px 0; border-radius: 10px; background: var(--ac-bg3); font-family: var(--body); font-size: 11px; font-weight: 600; color: var(--ac-text2); transition: background 0.7s var(--ease), color 0.7s var(--ease), box-shadow 0.7s var(--ease); }
.bk-btns .b.accept { background: color-mix(in srgb, var(--art-action-primary-fill) 14%, transparent); color: var(--ac-gold); }
.bk-frag.play .b.counter { background: color-mix(in srgb, var(--art-action-primary-fill) 18%, transparent); color: var(--ac-gold); box-shadow: 0 0 0 1px color-mix(in srgb, var(--art-action-primary-fill) 45%, transparent) inset; }
.bk-frag.play .b.accept { opacity: 0.45; }

/* counter-quote editor — slides open on hover instead of chat */
.bk-counter {
  margin-top: 10px; border-radius: 14px;
  background: color-mix(in srgb, var(--art-action-primary-fill) 6%, transparent); border: 0 solid color-mix(in srgb, var(--art-action-primary-fill) 30%, transparent);
  opacity: 0; transform: translateY(10px); max-height: 0; padding: 0 12px; overflow: hidden;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), max-height 0.8s var(--ease), padding 0.7s var(--ease), border-width 0.7s var(--ease);
}
.bk-frag.play .bk-counter {
  opacity: 1; transform: none; max-height: 230px; padding: 11px 12px 12px; border-width: 1px;
  transition-delay: 0.55s;
}
.bkc-head { display: flex; align-items: center; justify-content: space-between; }
.bkc-amt-row { display: flex; align-items: center; gap: 10px; margin: 9px 0 5px; }
.bkc-step { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--ac-bg3); border: 1px solid var(--ac-border2); color: var(--ac-text2); font-size: 15px; line-height: 1; font-family: var(--body); }
.bkc-step.on { color: var(--ac-gold); border-color: color-mix(in srgb, var(--art-action-primary-fill) 50%, transparent); background: color-mix(in srgb, var(--art-action-primary-fill) 12%, transparent); }
.bkc-amt { position: relative; flex: 1; text-align: center; height: 30px; }
.bkc-amt b { position: absolute; left: 0; right: 0; top: 0; font-family: var(--display); font-style: italic; font-size: 25px; font-weight: 500; transition: opacity 0.6s var(--ease); }
.bkc-amt .a1 { color: var(--ac-text2); }
.bkc-amt .a2 { color: var(--ac-gold); opacity: 0; }
.bk-frag.play .bkc-amt .a1 { opacity: 0; transition-delay: 1.1s; }
.bk-frag.play .bkc-amt .a2 { opacity: 1; transition-delay: 1.1s; }
.bkc-line { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; font-family: var(--body); font-size: 11.5px; color: var(--ac-text2); border-top: 1px solid var(--ac-border); }
.bkc-line .v { color: var(--ac-text); }
.bkc-send { text-align: center; margin-top: 9px; }

/* shared chat bubbles (used by inbox fragment) */
.bk-bubble { max-width: 86%; padding: 8px 11px; border-radius: 12px; font-family: var(--body); font-size: 11.5px; line-height: 1.45; margin-top: 8px; opacity: 0; transform: translateY(8px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.bk-bubble.me { margin-left: auto; background: color-mix(in srgb, var(--art-action-primary-fill) 14%, transparent); border: 1px solid color-mix(in srgb, var(--art-action-primary-fill) 30%, transparent); color: var(--ac-text); border-bottom-right-radius: 3px; }
.bk-bubble.them { background: var(--ac-bg3); border: 1px solid var(--ac-border); color: var(--ac-text); border-bottom-left-radius: 3px; }
.bk-state { position: relative; min-width: 104px; height: 22px; }
.bk-state .ac-state { position: absolute; right: 0; top: 0; transition: opacity 0.5s var(--ease); }
.bk-state .st2 { opacity: 0; }
.bk-frag.play .bk-state .st1 { opacity: 0; transition-delay: 1.8s; }
.bk-frag.play .bk-state .st2 { opacity: 1; transition-delay: 1.8s; }

/* tickets mini-card (kept tiny) */
.tk-frag { width: 236px; }
.tk-bar { height: 5px; border-radius: 100px; background: color-mix(in srgb, var(--art-content-primary) 10%, transparent); overflow: hidden; margin: 8px 0 7px; }
.tk-bar i { display: block; height: 100%; width: 64%; border-radius: 100px; background: var(--art-action-primary-fill); transition: width 1.4s var(--ease) 0.2s; }
.tk-frag.play .tk-bar i { width: 89%; }
.tk-count { position: relative; height: 16px; font-family: var(--mono); font-size: 11px; color: var(--ac-text); white-space: nowrap; }
.tk-count b { position: absolute; left: 0; top: 0; font-weight: 500; transition: opacity 0.5s 0.7s; }
.tk-count .n2 { opacity: 0; }
.tk-frag.play .n1 { opacity: 0; }
.tk-frag.play .n2 { opacity: 1; }

/* ============================================================
   CHAT — typing dots resolve into confirmation on hover
   ============================================================ */
.ch-frag { width: 312px; }
.ch-pin { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 12px; background: color-mix(in srgb, var(--art-action-primary-fill) 8%, transparent); border: 1px solid color-mix(in srgb, var(--art-action-primary-fill) 25%, transparent); }
.ch-pin .bar { width: 3px; align-self: stretch; border-radius: 2px; background: var(--ac-gold); }
.ch-reply { position: relative; min-height: 38px; margin-top: 8px; }
.ch-reply .ch-typing, .ch-reply .ch-final { position: absolute; left: 0; top: 0; margin-top: 0; }
.ch-typing { display: inline-flex; gap: 4px; padding: 9px 12px; border-radius: 12px; border-bottom-left-radius: 3px; background: var(--ac-bg3); border: 1px solid var(--ac-border); opacity: 0; transform: translateY(6px); }
.ch-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ac-text2); }
.ch-frag.play .ch-typing i { animation: chDot 1s infinite; }
.ch-frag.play .ch-typing i:nth-child(2) { animation-delay: 0.15s; }
.ch-frag.play .ch-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chDot { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.ch-frag.play .ch-typing { animation: chReveal 2.7s var(--ease) forwards; }
@keyframes chReveal { 0% { opacity: 0; transform: translateY(6px); } 16% { opacity: 1; transform: none; } 64% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateY(-4px); } }
.ch-final { opacity: 0; transform: translateY(8px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.ch-frag.play .ch-final { opacity: 1; transform: none; transition-delay: 2.05s; }

/* ============================================================
   PUBLISH EVENT — goes live on hover
   ============================================================ */
.pub-frag { width: 330px; }
.pub-field { margin-top: 10px; }
.pub-field .lbl { display: block; font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ac-text3); margin-bottom: 4px; }
.pub-field .box { position: relative; display: block; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--art-surface-canvas) 65%, transparent); border: 1px solid var(--ac-border2); min-height: 35px; transition: border-color 0.7s var(--ease); }
.pub-field .ph { display: block; font-family: var(--body); font-size: 12px; color: var(--ac-text3); transition: opacity 0.55s var(--ease); }
.pub-field .val { position: absolute; left: 12px; top: 9px; right: 12px; font-family: var(--body); font-size: 12px; color: var(--ac-text); opacity: 0; transform: translateY(3px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.pub-field .val .caret { display: inline-block; width: 1.5px; height: 12px; background: var(--ac-gold); margin-left: 2px; vertical-align: -1px; }
.pub-frag.play .pub-field .val .caret { animation: pubCaret 0.85s steps(2, jump-none) infinite; }
@keyframes pubCaret { 50% { opacity: 0; } }
.pub-frag.play .pub-field .box { border-color: color-mix(in srgb, var(--art-action-primary-fill) 40%, transparent); }
.pub-frag.play .pub-field .ph { opacity: 0; }
.pub-frag.play .pub-field .val { opacity: 1; transform: none; }
.pub-frag.play .f1 .val, .pub-frag.play .f1 .ph, .pub-frag.play .f1 .box { transition-delay: 0.25s; }
.pub-frag.play .f2 .val, .pub-frag.play .f2 .ph, .pub-frag.play .f2 .box { transition-delay: 0.9s; }
.pub-frag.play .f3 .val, .pub-frag.play .f3 .ph, .pub-frag.play .f3 .box { transition-delay: 1.55s; }
.pub-tiers-lbl { opacity: 0.5; transition: opacity 0.6s var(--ease); }
.pub-frag.play .pub-tiers-lbl { opacity: 1; transition-delay: 1.95s; }
.pub-tiers { margin-top: 4px; }
.pub-tier { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-family: var(--body); font-size: 12px; color: var(--ac-text); opacity: 0; transform: translateY(6px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.pub-tier .d { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.pub-tier .v { font-family: var(--mono); font-size: 11.5px; }
.pub-frag.play .pub-tier.g1 { opacity: 1; transform: none; transition-delay: 2.1s; }
.pub-frag.play .pub-tier.g2 { opacity: 1; transform: none; transition-delay: 2.3s; }
.pub-frag.play .pub-tier.g3 { opacity: 1; transform: none; transition-delay: 2.5s; }
.pub-go { position: relative; margin-top: 13px; text-align: center; opacity: 0.35; transition: opacity 0.7s var(--ease); }
.pub-frag.play .pub-go { opacity: 1; transition-delay: 2.75s; }
.pub-state { position: relative; min-width: 64px; height: 22px; }
.pub-state .ac-state { position: absolute; right: 0; top: 0; transition: opacity 0.5s var(--ease); }
.pub-state .ready { opacity: 0; }
.pub-frag.play .pub-state .draft { opacity: 0; transition-delay: 2.6s; }
.pub-frag.play .pub-state .ready { opacity: 1; transition-delay: 2.6s; }

/* ============================================================
   POSTER — generates on hover
   ============================================================ */
.po-frag { width: 360px; }
.po-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; margin-top: 12px; }
.po-form { display: flex; flex-direction: column; justify-content: space-between; padding: 12px; border-radius: 12px; border: 1px solid var(--ac-border2); background: var(--ac-bg2); }
.po-fields { display: flex; flex-direction: column; gap: 4px; }
.po-form .ttl { font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ac-text3); margin-bottom: 1px; }
.po-det { font-family: var(--body); font-size: 11px; color: var(--ac-text); line-height: 1.4; }
.po-det b { font-family: var(--display); font-style: italic; font-size: 16px; font-weight: 500; color: var(--ac-text); }
.po-det.dim { font-size: 10px; color: var(--ac-text2); }
.po-vibe { font-family: var(--body); font-size: 10px; line-height: 1.5; color: var(--ac-text2); }
.po-gen { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ac-border2); }
.po-gen .g { display: block; position: relative; height: 34px; }
.po-gen .s { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; transition: opacity 0.6s var(--ease); white-space: nowrap; }
.po-gen .s2 { opacity: 0; }
.po-frag.play .po-gen .s1 { opacity: 0; transition-delay: 1.3s; }
.po-frag.play .po-gen .s2 { opacity: 1; transition-delay: 1.3s; }
.po-cell { max-width: 100%; }
.po-out { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; border: 1px solid var(--ac-border2); background: linear-gradient(135deg, var(--ac-bg3), var(--ac-bg2)); width: 100%; }
.po-out img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); filter: blur(7px); transition: opacity 0.9s 0.5s var(--ease), transform 1s 0.5s var(--ease), filter 1s 0.5s var(--ease); }
.po-out .cap { position: absolute; left: 11px; bottom: 11px; right: 11px; z-index: 2; opacity: 0; transform: translateY(6px); transition: opacity 0.6s 1.25s var(--ease), transform 0.6s 1.25s var(--ease); }
.po-out .cap .kk { display: block; font-family: var(--mono); font-size: 6.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--art-content-onimage-primary); margin-bottom: 5px; }
.po-out .cap .l1 { display: block; font-family: var(--display); font-style: italic; font-size: 21px; font-weight: 500; color: var(--art-content-onimage-primary); line-height: 0.96; letter-spacing: -0.01em; }
.po-out .cap .l1 .amp { font-size: 15px; opacity: 0.7; }
.po-out .cap .rule { display: block; width: 26px; height: 1px; background: var(--ac-gold); opacity: 0.85; margin: 7px 0 6px; }
.po-out .cap .l2 { display: block; font-family: var(--mono); font-size: 7px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--art-content-onimage-primary); }
.po-out::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--art-surface-scrim); opacity: 0; transition: opacity 0.9s 0.55s; }
.po-out .shimmer { position: absolute; inset: 0; z-index: 3; background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--art-content-onimage-primary) 35%, transparent) 50%, transparent 62%); transform: translateX(-120%); }
.po-frag.play .po-out img { opacity: 1; transform: none; filter: none; }
.po-frag.play .po-out::before { opacity: 1; }
.po-frag.play .po-out .cap { opacity: 1; transform: none; }
.po-frag.play .po-out .shimmer { transition: transform 1s 0.3s var(--ease); transform: translateX(120%); }

/* ============================================================
   SEARCH — third result slides in on hover
   ============================================================ */
.se-frag { width: 332px; }
.se-seg { display: flex; padding: 3px; border-radius: 100px; background: var(--ac-bg3); border: 1px solid var(--ac-border); margin-top: 10px; }
.se-seg span { flex: 1; text-align: center; padding: 6px 0; border-radius: 100px; font-family: var(--body); font-size: 11px; font-weight: 600; color: var(--ac-text2); }
.se-seg span.on { background: var(--art-action-primary-fill); color: var(--art-action-primary-on); }
.se-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.se-res { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--ac-bg2); border: 1px solid var(--ac-border); margin-top: 8px; }
.se-res .nm { font-family: var(--body); font-size: 12.5px; font-weight: 600; color: var(--ac-text); }
.se-res .sb { font-family: var(--body); font-size: 10.5px; color: var(--ac-text2); margin-top: 1px; }
.se-res .rate { font-family: var(--mono); font-size: 11px; color: var(--ac-gold); white-space: nowrap; }
.se-res.r3 { opacity: 0; transform: translateY(10px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.se-frag.play .se-res.r3 { opacity: 1; transform: none; transition-delay: 0.3s; }
.se-more { text-align: center; margin-top: 9px; transition: opacity 0.6s var(--ease); }
.se-frag.play .se-more { opacity: 0; }
.se-wrap3 { height: 0; overflow: visible; }

/* ============================================================
   ROLE SWITCH — knob slides on hover
   ============================================================ */
.sw-frag { width: 296px; text-align: center; }
.sw-seg { position: relative; display: inline-flex; padding: 4px; border-radius: 100px; background: color-mix(in srgb, var(--art-surface-canvas) 70%, transparent); border: 1px solid var(--ac-border2); margin: 10px 0 14px; }
.sw-seg .knob { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 100px; background: color-mix(in srgb, var(--art-action-primary-fill) 18%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--art-action-primary-fill) 45%, transparent) inset, 0 0 18px color-mix(in srgb, var(--art-action-primary-fill) 25%, transparent); transition: transform 0.55s var(--ease); }
.sw-seg span { position: relative; padding: 8px 18px; font-family: var(--display); font-style: italic; font-size: 13px; color: var(--ac-text2); transition: color 0.45s; }
.sw-seg .o1 { color: var(--ac-text); }
.sw-frag.play .knob { transform: translateX(100%); }
.sw-frag.play .o1 { color: var(--ac-text2); }
.sw-frag.play .o2 { color: var(--ac-text); }
.sw-badge { transition: color 0.45s 0.3s, border-color 0.45s 0.3s, background 0.45s 0.3s; }
.sw-frag.play .sw-badge { color: var(--ac-gold); border-color: color-mix(in srgb, var(--art-action-primary-fill) 50%, transparent); background: color-mix(in srgb, var(--art-action-primary-fill) 10%, transparent); }

/* ============================================================
   DASHBOARD hover life
   ============================================================ */
.dash-frag.play .bars .bar { animation: barBreathe 1.6s var(--ease); }
.dash-frag .bars .bar:nth-child(2) { animation-delay: 0.06s; }
.dash-frag .bars .bar:nth-child(4) { animation-delay: 0.12s; }
.dash-frag .bars .bar:nth-child(6) { animation-delay: 0.18s; }
@keyframes barBreathe { 0% { transform: scaleY(0.55); } 60% { transform: scaleY(1.05); } 100% { transform: scaleY(1); } }
.dash-frag .bars .bar { transform-origin: bottom; }

/* ---- extra analytics charts (artist + event dashboards) ---- */
.dash-reels { display: flex; flex-direction: column; gap: 7px; }
.dash-reels .rl { display: flex; align-items: center; gap: 9px; font-family: var(--body); font-size: 12px; color: var(--cream); }
.dash-reels .rk { width: 18px; height: 18px; flex: none; border-radius: 5px; display: grid; place-items: center; font-family: var(--mono); font-size: 10px; color: var(--tungsten); background: color-mix(in srgb, var(--art-action-primary-fill) 12%, transparent); border: 1px solid var(--gold-faint); }
.dash-reels .rn { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-reels .rv { font-family: var(--mono); font-size: 11px; color: var(--grey); white-space: nowrap; }
.hbars { display: flex; flex-direction: column; gap: 11px; }
.hbars .hb { display: flex; align-items: center; gap: 9px; }
.hbars .hl { width: 64px; flex: none; font-family: var(--body); font-size: 11px; color: var(--grey); }
.hbars .ht { flex: 1; height: 8px; border-radius: 100px; background: color-mix(in srgb, var(--art-content-primary) 8%, transparent); overflow: hidden; }
.hbars .ht i { display: block; height: 100%; width: 0; border-radius: 100px; background: var(--art-content-muted); transition: width 1.1s var(--ease) 0.1s; }
.evan-frag.is-in .hbars .ht i, .dash-frag.is-in .hbars .ht i { width: var(--w, 100%); }
.hbars .hv { width: 26px; flex: none; text-align: right; font-size: 11px; color: var(--cream); }

/* ============================================================
   HERO headline accent
   ============================================================ */
.hero .display em { font-style: italic; color: var(--halo); }

/* parallax-free fragments still get gentle float */
@media (prefers-reduced-motion: reduce) {
  .pf-panel, .pr-panel, .bk-bubble, .ch-typing, .ch-final,
  .po-out img, .tk-bar i, .sw-seg .knob, .pub-progress i { transition: none !important; }
  .ch-typing i, .dash-frag .bars .bar { animation: none !important; }
}

/* ================= from forms.css ================= */
/* ============================================================
   ARTINO — waitlist form additions (name, consent, honeypot,
   Turnstile, error + loading states). Loaded after the base
   stylesheets so it can extend .signup / .signup-done.
   ============================================================ */

/* Two inputs (name + email) share the row; button drops below. */
#signupWrap .signup { flex-wrap: wrap; }

/* Role-specific field groups — only the active role's block shows. */
.role-fields { margin-top: 10px; }
.role-fields[hidden] { display: none; }
.role-fields .signup { margin-top: 0; }

/* Searchable dropdown (Indian states) */
.combo { position: relative; flex: 1; min-width: 0; }
.combo .combo-input {
  width: 100%; font-family: var(--body); font-size: 15px; color: var(--cream);
  background: color-mix(in srgb, var(--art-surface-canvas) 70%, transparent); border: 1px solid var(--gold-line); border-radius: 14px;
  padding: 15px 20px; outline: none; box-shadow: 0 0 30px -8px color-mix(in srgb, var(--art-action-primary-fill) 40%, transparent) inset;
  transition: border-color 0.3s;
}
.combo .combo-input::placeholder { color: var(--grey); }
.combo .combo-input:focus { border-color: var(--tungsten); }
.combo .combo-input.err { border-color: var(--art-danger); }
.combo-list {
  list-style: none; margin: 6px 0 0; padding: 5px;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
  max-height: 240px; overflow-y: auto;
  /* Warm elevated surface + amber glow so it reads as part of the theme,
     not a flat black box. Mirrors the inputs' warm tone. */
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--gold-line); border-radius: 8px;
  /* themed (warm) scrollbar instead of the stark default */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--art-action-primary-fill) 50%, transparent) transparent;
}
.combo-list::-webkit-scrollbar { width: 10px; }
.combo-list::-webkit-scrollbar-track { background: transparent; }
.combo-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--art-action-primary-fill) 45%, transparent); border-radius: 10px;
  border: 2px solid transparent; background-clip: padding-box;
}
.combo-list::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--art-action-primary-fill) 70%, transparent); background-clip: padding-box;
}
.combo-list[hidden] { display: none; }
.combo-list li {
  padding: 10px 14px; border-radius: 5px; font-family: var(--body); font-size: 14px;
  color: var(--cream); cursor: pointer; text-align: left;
  transition: background 0.15s, color 0.15s;
}
.combo-list li.active,
.combo-list li:hover { background: color-mix(in srgb, var(--art-action-primary-fill) 14%, transparent); color: var(--halo); }
.combo-list li.empty { color: var(--grey); cursor: default; background: none; }

/* Honeypot — visually and from-AT hidden, still submitted by bots. */
.hp-wrap {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Consent checkbox row */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 480px;
  margin: 16px auto 0;
  text-align: left;
  font-family: var(--body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--grey);
  cursor: pointer;
}
.consent input[type="checkbox"] {
  flex: none;
  width: 16px; height: 16px;
  margin-top: 1px;
  accent-color: var(--tungsten);
  cursor: pointer;
}
.consent a { color: var(--halo); text-decoration: underline; }
.consent.err span { color: var(--art-danger); }

/* Turnstile widget spacing */
.turnstile-wrap {
  display: flex;
  justify-content: center;
  margin: 16px auto 0;
  min-height: 65px;          /* reserve space → no layout shift */
}

/* Submit row */
.signup-actions {
  max-width: 480px;
  margin: 16px auto 0;
}
.signup-actions .btn { width: 100%; }

/* Loading / disabled state */
.btn.is-loading {
  opacity: 0.65;
  pointer-events: none;
  position: relative;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  right: 16px; top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  border: 2px solid color-mix(in srgb, var(--art-action-primary-on) 35%, transparent);
  border-top-color: var(--art-action-primary-on);
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Inline error message */
.form-error {
  max-width: 480px;
  margin: 14px auto 0;
  font-family: var(--body);
  font-size: 13px;
  color: var(--art-danger);
}
.form-error[hidden] { display: none; }

/* On mobile the inputs already stack via the base .signup rule. */
@media (max-width: 560px) {
  .consent, .signup-actions, .turnstile-wrap, .form-error { max-width: 100%; }
}

/* ================= from artino-responsive.css ================= */
/* ============================================================
   ARTINO — part 5: RESPONSIVE LAYER
   Loaded last so equal-specificity rules win by source order.
   Breakpoints:
     980px — large tablet / small laptop trims
     860px — primary stacking point (nav burger, 1-col layouts,
             hero phone hidden, app fragments re-flowed)
     560px — phone fine-tuning (type scale, CTA stacking, toggles)
     (hover:none) — touch devices get "resolved" demo states since
             the hover-driven product shots can't be triggered.
   ============================================================ */

/* ============================================================
   980px — gentle trims before the full stack
   ============================================================ */
@media (max-width: 980px) {
  .fblock { gap: 44px; }
  .nav-links { gap: 24px; }
  .feature-sec { padding: 90px 0 30px; }
}

/* ============================================================
   860px — PRIMARY MOBILE BREAKPOINT
   ============================================================ */
@media (max-width: 860px) {

  /* ---- use small-viewport height so the URL bar doesn't cause jumps ---- */
  @supports (min-height: 100svh) { .hero { min-height: 100svh; } }

  /* the mobile bar is shorter than the desktop nav — tighten the anchor offset */
  html { scroll-padding-top: 70px; }

  /* ---- NAV: swap the inline links for the burger + curtain menu ---- */
  .nav-inner { padding: 15px 22px; }
  .nav-links { display: none; }
  .nav-burger { display: block; }

  /* ---- HERO ---- */
  .hero { padding-bottom: 9vh; }
  .hero h1 { line-height: 1.06; }
  .hero h1 .ln { white-space: normal; }              /* allow the longer copy to wrap instead of clipping */
  .hero .sub { margin-top: 20px; }
  .hero .cta-row { margin-top: 26px; }

  /* ---- shared section rhythm (tighten the generous desktop padding) ---- */
  .wrap { padding: 0 24px; }
  .sec-head { padding: 0 24px; }
  .manifesto { padding: 80px 0 84px; }
  .manifesto cite { margin-bottom: 34px; }
  .feature-sec { padding: 60px 0 16px; }
  .benefits { padding: 80px 0 56px; }
  .benefits .head { margin-bottom: 40px; }
  .how { padding: 80px 0 32px; }
  .how .head { margin-bottom: 44px; }
  .track { margin-bottom: 48px; }
  .waitlist { padding: 72px 0 96px; }
  .footer { padding: 48px 0 40px; }


  /* ---- FEATURE BLOCKS: single column, visual first everywhere ---- */
  .fblock { grid-template-columns: 1fr; gap: 28px; padding: 46px 24px; }
  .fblock.flip .fb-visual,
  .fblock.flip .fb-copy { order: 0; }                /* normalise to DOM order (image, then copy) */
  .fb-copy { text-align: left; }
  .fb-copy p { max-width: none; }

  /* photo becomes a contained banner instead of a full-bleed absolute layer */
  .fb-visual { min-height: 0; }
  .fblock .fb-photo {
    position: relative; inset: auto;
    height: clamp(190px, 46vw, 250px);
    border-radius: 14px;
  }

  /* app fragments: pull out of the absolute corners, centre them, cap width,
     and overlap the photo's lower edge so they still read as "floating UI".
     !important is needed to beat .frag.app{position:absolute} and the inline
     transform the parallax script writes. */
  .fblock .frag {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: min(330px, 86vw) !important;
    margin: -42px auto 0 !important;
    z-index: 2;
  }
  .fblock .frag ~ .frag { margin: 16px auto 0 !important; }   /* 2nd fragment (bookings) sits below */

  /* ---- analytics dashboards (full-width, not .frag) ---- */
  .dash-frag, .evan-frag { width: 100%; }


  /* ---- TESTIMONIALS: cards that fit the viewport with a peek ---- */
    
  /* ---- FOOTER ---- */
  .footer-inner { padding: 0 24px; gap: 32px; }
  .footer-base { padding: 24px 24px 0; }
}

/* ============================================================
   560px — PHONE FINE-TUNING
   ============================================================ */
@media (max-width: 560px) {

  /* tighter gutters on small phones */
  .wrap,
  .sec-head,
  .footer-inner { padding-left: 20px; padding-right: 20px; }
  .nav-inner { padding-left: 20px; padding-right: 20px; }
  .footer-base { padding-left: 20px; padding-right: 20px; }
  .fblock { padding: 40px 20px; }

  /* type scale — bring the big display sizes down so headings don't crowd */
  .hero h1 { font-size: clamp(32px, 8.6vw, 44px); }
  .hero .sub { font-size: 17px; }
  .roles3d .head .display,
  .benefits .head h2,
  .how .head h2 { font-size: clamp(28px, 7.4vw, 38px); }
  .sec-head h2 { font-size: clamp(28px, 7.2vw, 37px); }
  .waitlist h2 { font-size: clamp(32px, 9vw, 48px); }
  .manifesto blockquote { font-size: clamp(25px, 7vw, 34px); }

  /* HERO CTAs: full-width stacked for thumb-friendly targets */
  .hero .cta-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero .cta-row .btn { width: 100%; justify-content: center; }

  /* WAITLIST role toggle: stack the 3 pills full-width (clean tap targets)
     instead of the cramped 2-then-1 wrap the inline row produces. */
  .role-toggle { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; max-width: 320px; border-radius: 14px; }
  .role-toggle button { width: 100%; white-space: nowrap; padding: 11px 14px; }

  /* MANIFESTO CTA + analytics blocks stack their inner grids */
  .kpi-row { gap: 8px; }
  .kpi { padding: 11px; }
  .kpi .k-val { font-size: 18px; }
    
  /* poster fragment: keep its 2-up studio layout but a touch tighter */
  .po-stage { gap: 9px; }
}

/* ============================================================
   LIVING DEMOS — JS-driven play
   The product mockups used to animate only on :hover (so they froze
   on touch). Their triggers in artino-4.css are now a .play class that
   JS adds when the fragment scrolls into view (auto-play) and re-adds
   on hover / tap (replay). Works on every device, touch included.
   ============================================================ */
.pf-frag, .pr-frag, .bk-frag, .tk-frag, .ch-frag,
.pub-frag, .po-frag, .se-frag, .sw-frag, .dash-frag { cursor: pointer; }
/* used for an instant reset between replays (snap to start, then animate) */
.no-trans, .no-trans * { transition: none !important; animation: none !important; }

/* ============================================================
   FEATURE CAROUSELS (For Artists / For Event Organisers)
   Desktop: the .fcarousel wrapper is transparent — the feature blocks
   stack exactly as before. Mobile: it becomes a horizontal scroll-snap
   carousel with pagination dots, so the page is far shorter.
   ============================================================ */
.fcarousel { display: contents; }
.fcarousel-dots { display: none; }

@media (max-width: 860px) {
  .fcarousel {
    display: flex;
    align-items: flex-start;          /* slides keep their natural height… */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;   /* keep the swipe inside the carousel — no overshoot / back-nav */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transition: height 0.35s var(--ease);   /* …carousel resizes to the active slide (set by JS) */
  }
  .fcarousel::-webkit-scrollbar { display: none; }
  .fcarousel > .fblock {
    flex: 0 0 100%;
    width: 100%;
    margin: 0;
    padding: 30px 20px 36px;
    scroll-snap-align: start;          /* one full slide per page — matches the JS clientWidth*i math */
    scroll-snap-stop: always;
  }

  .fcarousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    padding: 0 20px;
  }
  .fcarousel-dots .fc-dot {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
    background: var(--gold-line); cursor: pointer; flex: none;
    transition: background 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .fcarousel-dots .fc-dot.on { background: var(--tungsten); transform: scale(1.3); }

  /* Prev / next arrows pinned to the row edges; the auto margins keep the
     dots centred between them. They make the swipe affordance obvious. */
  .fc-arrow {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; flex: none;
    border: 1px solid var(--gold-line); border-radius: 50%;
    background: color-mix(in srgb, var(--art-action-primary-fill) 6%, transparent); color: var(--tungsten);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
  }
  .fc-arrow svg { width: 17px; height: 17px; }
  .fc-arrow:active { background: color-mix(in srgb, var(--art-action-primary-fill) 16%, transparent); border-color: var(--tungsten); }
  .fc-arrow:disabled { opacity: 0.28; cursor: default; }
  .fc-prev { margin-right: auto; }
  .fc-next { margin-left: auto; }
}

/* ============================================================
   ANALYTICS as a compact feature fragment
   The two analytics blocks are now standard photo + app-fragment +
   copy features (like the others), so every carousel slide is the
   same size. This shrinks the old full-width dashboard to a ~330px
   phone fragment. Selectors are specific enough to beat the generic
   .kpi / .k-val sizes (incl. the 560px phone rules above).
   ============================================================ */
.dash-frag, .evan-frag { width: 330px; }
.an-body { padding: 8px 14px 14px; }
.dash-frag .kpi-row, .evan-frag .kpi-row { gap: 7px; margin: 9px 0 11px; }
.dash-frag .kpi, .evan-frag .kpi { padding: 8px 9px; }
.dash-frag .kpi .k-label, .evan-frag .kpi .k-label { font-size: 8px; }
.dash-frag .kpi .k-val, .evan-frag .kpi .k-val { font-size: 14px; margin-top: 3px; }
.dash-frag .chart-card, .evan-frag .chart-card { padding: 10px 12px; }
.dash-frag .chart-card .ui-label, .evan-frag .chart-card .ui-label { font-size: 9px; }
.dash-frag .bars { height: 56px; gap: 5px; margin-top: 9px; }
.dash-frag .dash-reels { margin-top: 11px; gap: 6px; }
.dash-frag .dash-reels .rl { font-size: 11px; }
.evan-frag .hbars { gap: 9px; }
.evan-frag .hbars .hl { width: 56px; font-size: 10px; }
.evan-frag .hbars .hv { font-size: 10px; width: 24px; }
/* tickets-by-tier bars grow when the demo plays */
.evan-frag .hbars .ht i { width: 0; }
.evan-frag.play .hbars .ht i { width: var(--w, 100%); }

/* ================= from v12.css ================= */
/* ============================================================
   ARTINO — design system v1.2 component layer (Phase 2)
   Reads tokens only (css/tokens.css); never a literal colour or font.
   Loaded after the legacy stylesheets, whose colours were moved onto
   the same tokens by tools/retoken-css.py. This file applies the
   v1.2 roles: solid primary action, raised surfaces with hairlines,
   no decorative gradients or shadows, one radial glow, image scrim.
   The waitlist form's markup, names and behaviour are untouched.
   ============================================================ */

/* ---------- Base ---------- */
body {
  background: var(--art-surface-canvas);
  color: var(--art-content-primary);
  font-size: var(--art-type-body-lg-size);
  line-height: var(--art-type-body-lg-lineheight);
}
body::after { display: none; }                       /* film grain retired (no v1.2 token) */
::selection { background: var(--art-action-primary-subtle); color: var(--art-content-primary); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .fcarousel:focus-visible {
  outline: 2px solid var(--art-action-primary-fill);
  outline-offset: 3px;
}

/* ---------- Type roles ---------- */
.display {
  font-family: var(--art-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variation-settings: var(--art-font-display-variation);
  color: var(--art-content-primary);
}
.display em { font-style: normal; }                 /* D6: no faux italics */
.eyebrow,
.sec-head .eyebrow,
.track-label,
.footer .fcol h2 {
  font-family: var(--art-type-overline-family);
  font-size: var(--art-type-overline-size);
  font-weight: var(--art-type-overline-weight);
  letter-spacing: var(--art-type-overline-letterspacing);
  text-transform: var(--art-type-overline-transform);
  line-height: var(--art-type-overline-lineheight);
  color: var(--art-content-muted);
}
.sec-head .eyebrow::after { display: none; }
.act-rule { background: var(--art-surface-border); }

/* ---------- Buttons: button.primary 52px / 12px, one solid fill ---------- */
.btn {
  min-height: var(--art-component-button-primary-height);
  padding: 0 26px;
  border-radius: var(--art-component-button-primary-radius);
  font-family: var(--art-type-label-family);
  font-size: var(--art-type-body-size);
  font-weight: var(--art-component-button-primary-weight);
  letter-spacing: var(--art-type-label-letterspacing);
  box-shadow: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover, .btn:active { transform: none; box-shadow: none; }
.btn-primary {
  background: var(--art-component-button-primary-fill);
  color: var(--art-component-button-primary-label);
}
.btn-primary:hover { background: var(--art-action-primary-hover); }
.btn-primary:active { background: var(--art-action-primary-pressed); }
.btn-primary::after { display: none; }              /* shimmer sweep retired */
.btn-ghost {
  background: transparent;
  color: var(--art-content-primary);
  border: 1px solid var(--art-surface-borderstrong);
}
.btn-ghost:hover { background: var(--art-action-primary-selectedsurface); border-color: var(--art-action-primary-fill); }

/* ---------- Nav: surface.raised + hairline ---------- */
.nav, .nav.scrolled {
  background: var(--art-surface-raised);
  border-bottom: 1px solid var(--art-surface-border);
  backdrop-filter: none;
}
.nav-inner { padding-top: 12px; padding-bottom: 12px; }
.brand { color: var(--art-content-primary); font-variation-settings: var(--art-font-display-variation); }
.brand .mark { background: var(--art-action-primary-fill); box-shadow: none; }
.nav-links a { color: var(--art-content-primary); font-size: var(--art-type-label-size); font-weight: 600; }
.nav-links a:hover { color: var(--art-action-primary-text); }
/* One accent-filled button per viewport: over the hero the nav CTA is quiet;
   it fills once the page scrolls (the nav gets .scrolled at 40px). */
.nav .nav-links a.nav-cta { min-height: 44px; padding: 0 18px; font-size: var(--art-type-label-size); }
.nav:not(.scrolled) .nav-links a.nav-cta {
  background: transparent; color: var(--art-content-primary);
  border: 1px solid var(--art-surface-borderstrong);
}
.nav.scrolled .nav-links a.nav-cta,
.nav.scrolled .nav-links a.nav-cta:hover { color: var(--art-action-primary-on); }
.nav-burger { width: 44px; height: 44px; display: none; align-items: center; justify-content: center; flex-direction: column; }
.nav-burger span { background: var(--art-content-primary); margin: 3px 0; }

.mobile-menu { background: var(--art-surface-canvas); }
.mobile-menu a {
  font-family: var(--art-font-body); font-weight: 600;
  font-size: var(--art-type-title-size); color: var(--art-content-primary);
  min-height: 44px;
}
.mobile-menu .close {
  font-family: var(--art-font-body); color: var(--art-content-primary);
  width: 44px; height: 44px; display: grid; place-items: center;
}

/* ---------- Hero: photograph under the v1.2 scrim; text uses content.onImage ---------- */
.hero-content {
  --hero-ink: var(--art-content-onimage-primary);
  --hero-ink-muted: var(--art-content-onimage-muted);
}
.hero-vignette { background: var(--art-surface-scrim); }
.hero h1 {
  font-size: var(--art-type-display-xl-size);
  line-height: var(--art-type-display-xl-lineheight);
  letter-spacing: var(--art-type-display-xl-letterspacing);
  color: var(--hero-ink);
}
.hero .display em, .hero h1 em { color: var(--hero-ink); font-style: normal; }
.hero .sub {
  color: var(--hero-ink); opacity: 1;
  font-size: var(--art-type-body-lg-size); line-height: var(--art-type-body-lg-lineheight);
}
.hero .proof { color: var(--hero-ink-muted); font-size: var(--art-type-caption-size); }
.hero .btn-ghost { color: var(--hero-ink); border-color: var(--hero-ink-muted); }
.hero .btn-ghost:hover { background: color-mix(in srgb, var(--art-content-onimage-primary) 12%, transparent); border-color: var(--hero-ink); }

/* ---------- Section headings ---------- */
.sec-head h2, .benefits .head h2, .how .head h2, .roles3d .head .display {
  font-size: var(--art-type-display-md-size);
  line-height: 1.08;
  font-weight: 600;
}
.waitlist h2 { font-size: var(--art-type-display-lg-size); line-height: 1.04; }

/* ---------- Cards: surface.raised + hairline, 12px, no shadow or gradient ---------- */
.bcard, .tcard {
  background: var(--art-surface-raised);
  border: 1px solid var(--art-surface-border);
  border-radius: var(--art-component-card-radius);
  box-shadow: none;
}
.bcard:hover, .tcard:hover {
  background: var(--art-surface-raised); box-shadow: none; transform: none;
  border-color: var(--art-surface-borderstrong);
}
.bcard h3, .bcard.feature h3, .step h3 {
  font-family: var(--art-type-title-sm-family);
  font-size: var(--art-type-title-sm-size);
  line-height: var(--art-type-title-sm-lineheight);
  font-weight: var(--art-type-title-sm-weight);
  font-variation-settings: var(--art-font-display-variation);
  color: var(--art-content-primary);
}
.bcard p, .step p {
  font-size: var(--art-type-body-size); line-height: var(--art-type-body-lineheight); color: var(--art-content-muted);
}
.licon, .bcard.feature .licon { stroke: var(--art-action-primary-text); }

/* Role identity + feature tags: action.secondary chips, never solid (D5) */
.rc-fan, .rc-artist, .rc-org, .track-label .tl-badge, .fb-tag {
  display: inline-flex; align-items: center;
  font-family: var(--art-type-label-family);
  font-size: var(--art-type-label-size); font-weight: var(--art-type-label-weight);
  letter-spacing: var(--art-type-label-letterspacing); text-transform: none;
  color: var(--art-action-secondary-text); background: var(--art-action-secondary-subtle);
  border: 0; border-radius: var(--art-radius-pill); padding: 6px 12px;
}
.fb-tags { gap: 8px; }
.fb-tag:not(:last-child)::after { display: none; }

/* ---------- Manifesto ---------- */
.manifesto-spot { display: none; }
.manifesto { background: var(--art-surface-sunken); }   /* wells, quote blocks: surface.sunken */
.manifesto blockquote { font-style: normal; font-weight: 600; font-variation-settings: var(--art-font-display-variation); color: var(--art-content-primary); }
.manifesto cite { font-family: var(--art-font-body); color: var(--art-content-muted); }
.manifesto .mtext p { color: var(--art-content-primary); }

/* ---------- Feature sections ---------- */
.fb-photo { border-radius: var(--art-component-card-radius); box-shadow: none; }
.fb-copy h3 {
  font-size: var(--art-type-title-size); line-height: var(--art-type-title-lineheight);
  font-weight: 600; font-variation-settings: var(--art-font-display-variation);
}
.fb-copy p { color: var(--art-content-primary); font-size: var(--art-type-body-lg-size); line-height: var(--art-type-body-lg-lineheight); }
.app, .frag.app { box-shadow: none; border: 1px solid var(--art-surface-border); }

/* ---------- Shared benefits ---------- */
.bcard.feature { background: var(--art-surface-sunken); border-color: var(--art-surface-border); }
.bcard.feature::after { display: none; }
.bcard.feature p { color: var(--art-content-primary); }

/* ---------- How it works ---------- */
.steps::before { background: var(--art-surface-border); }
.steps .line-draw { background: var(--art-action-primary-fill); }
.step .num {
  background: var(--art-surface-raised); border: 1px solid var(--art-surface-border);
  color: var(--art-action-primary-text); font-weight: 600; font-variation-settings: var(--art-font-display-variation);
}

/* ---------- Waitlist: canvas + the single radial glow (echoes the app's auth hero) ---------- */
.waitlist::before {
  background:
    radial-gradient(42% 36% at 50% 34%, var(--art-action-primary-glow), transparent 100%),
    var(--art-surface-canvas);
}
.waitlist::after, .waitlist-spot { display: none; }
.waitlist .sub { color: var(--art-content-primary); opacity: 1; font-size: var(--art-type-body-lg-size); }

/* Role toggle = segmented control (track surface.sunken, thumb action.primary) */
.role-toggle {
  background: var(--art-component-segmentedcontrol-trackfill);
  border: 0; padding: var(--art-component-segmentedcontrol-trackpadding);
  border-radius: var(--art-radius-pill);
}
.role-toggle button {
  min-height: 44px; color: var(--art-content-primary);
  font-family: var(--art-type-label-family); font-size: var(--art-type-label-size); font-weight: 600;
}
.role-toggle button.active {
  background: var(--art-component-segmentedcontrol-thumbfill);
  color: var(--art-component-segmentedcontrol-thumblabel);
}

/* Inputs: 46px / 10px, surface.raised; boundary uses the proposed borderStrong (3:1) */
.signup input, .combo .combo-input {
  min-height: var(--art-component-input-height);
  padding: 0 var(--art-component-input-padding);
  background: var(--art-component-input-fill);
  border: 1px solid var(--art-surface-borderstrong);
  border-radius: var(--art-component-input-radius);
  color: var(--art-content-primary);
  font-family: var(--art-font-body); font-size: var(--art-type-body-size);
  box-shadow: none;
}
.signup input::placeholder, .combo .combo-input::placeholder { color: var(--art-content-muted); }
.signup input:focus, .combo .combo-input:focus {
  border-color: var(--art-action-primary-fill);
  outline: 2px solid var(--art-action-primary-fill); outline-offset: 2px;
}
.signup input.err, .combo .combo-input.err { border-color: var(--art-danger); }
.combo-list {
  background: var(--art-surface-raised); border: 1px solid var(--art-surface-border);
  border-radius: var(--art-radius-md); box-shadow: none;
  scrollbar-color: var(--art-surface-borderstrong) transparent;
}
.combo-list::-webkit-scrollbar-thumb, .combo-list::-webkit-scrollbar-thumb:hover { background: var(--art-surface-borderstrong); background-clip: padding-box; }
.combo-list li { color: var(--art-content-primary); }
.combo-list li.active, .combo-list li:hover { background: var(--art-action-primary-selectedsurface); color: var(--art-content-primary); }
.consent { color: var(--art-content-muted); }
.consent input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--art-action-primary-fill); }
.consent a { color: var(--art-action-primary-text); }
.consent.err span { color: var(--art-danger); }
.form-error { color: var(--art-danger); }
.form-error:not([hidden]) {
  background: var(--art-status-cancelled-subtlefill);
  border-radius: var(--art-radius-md); padding: 10px 14px;
}
.signup-done {
  background: var(--art-status-confirmed-subtlefill); color: var(--art-status-confirmed-text);
  border: 0; border-radius: var(--art-component-card-radius);
}
.signup-done::after { display: none; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--art-surface-border); }
.footer .mission, .footer-base .tag, .footer-base .copy { color: var(--art-content-muted); }
.footer .fcol a { color: var(--art-content-primary); }
.footer .fcol a:hover { color: var(--art-action-primary-text); }
.footer-base { border-top-color: var(--art-surface-border); }

/* ---------- ≤860px: stack the hero so its text sits on the canvas, not the photo ---------- */
@media (max-width: 860px) {
  .nav-burger { display: flex; }
  .hero {
    min-height: 0; justify-content: flex-start;
    padding-top: var(--hero-band); padding-bottom: 44px;
  }
  .hero-vignette { inset: 0 0 auto 0; height: var(--hero-band); }
  .hero-content {
    --hero-ink: var(--art-content-primary);
    --hero-ink-muted: var(--art-content-muted);
  }
  .hero .btn-ghost { border-color: var(--art-surface-borderstrong); }
  .hero .btn-ghost:hover { background: var(--art-action-primary-selectedsurface); border-color: var(--art-action-primary-fill); }
}

/* ---------- Mobile feature carousels: controls sized for touch (WCAG 2.5.8, v1.2 44px) ---------- */
@media (max-width: 860px) {
  .fcarousel-dots { gap: 0; }
  .fcarousel-dots .fc-dot {
    width: 24px; height: 44px; background: transparent; border-radius: 0; position: relative; transform: none;
  }
  .fcarousel-dots .fc-dot::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
    border-radius: 50%; background: var(--art-surface-borderstrong);
    transition: background-color 0.3s, transform 0.3s;
  }
  .fcarousel-dots .fc-dot.on { background: transparent; transform: none; }
  .fcarousel-dots .fc-dot.on::before { background: var(--art-action-primary-fill); transform: scale(1.3); }
  .fc-arrow {
    width: 44px; height: 44px;
    border: 1px solid var(--art-surface-borderstrong); background: transparent; color: var(--art-content-primary);
  }
  .fc-arrow:active { background: var(--art-action-primary-selectedsurface); border-color: var(--art-action-primary-fill); }
}

/* ---------- Skip link, landmarks, mobile menu (keyboard + screen readers) ---------- */
.skip-link {
  position: absolute; left: 16px; top: -120px; z-index: 3000;
  padding: 12px 18px; border-radius: var(--art-radius-md);
  background: var(--art-surface-raised); color: var(--art-content-primary);
  border: 1px solid var(--art-surface-borderstrong);
  font-family: var(--art-type-label-family); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }
main:focus { outline: none; }
/* Closed menu: hidden from AT and the Tab order, but still slides out visually. */
.mobile-menu { visibility: hidden; transition: transform 0.6s var(--ease), visibility 0s linear 0.6s; }
.mobile-menu.open { visibility: visible; transition: transform 0.6s var(--ease), visibility 0s; }
.signup-done:focus { outline: 2px solid var(--art-action-primary-fill); outline-offset: 3px; }
.btn[aria-disabled="true"] { cursor: progress; }

/* ---------- Motion budget (AUDIT D12) ----------
   One orchestrated moment: the hero headline's entrance. Everything else moves
   only in response to the visitor (scroll reveals, app demos that play once as
   they come into view, hovers). Nothing loops on its own: the demo caret stops.
   (The hero's 3D hall is the owner-approved exception; see NOTES 30.) */
.pub-frag.play .pub-field .val .caret { animation-iteration-count: 3; }

/* Reduced motion: honoured everywhere, not just where a rule remembered it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- App mockups (Phase 3, route A: live HTML screens) ----------
   Each fragment pins a scheme with data-scheme so the carousels alternate dark
   and light screens whatever the page mode (AUDIT D14). Legacy page variables are
   re-resolved inside a pinned subtree, otherwise they would carry the page's mode
   into it. Fraunces is kept for screen titles, names and money; everything else
   uses the body family, and nothing is set in (faux) italic. */
[data-scheme] {
  --bg: var(--art-surface-canvas); --surface: var(--art-surface-raised); --surface-2: var(--art-surface-raised);
  --tungsten: var(--art-action-primary-fill); --halo: var(--art-action-primary-text); --gold: var(--art-action-primary-text);
  --red: var(--art-danger); --cream: var(--art-content-primary); --grey: var(--art-content-muted);
  --violet: var(--art-action-secondary-text); --gold-line: var(--art-surface-border); --gold-faint: var(--art-surface-border);
  color: var(--art-content-primary);
}
.app { font-family: var(--art-font-body); background: var(--art-surface-canvas); }
.app .ac-serif, .app .amt, .app .bk-amt, .app .bkc-amt b, .app .po-out .cap .l1,
.app .kpi .k-val, .app .tk-count b {
  font-family: var(--art-font-display); font-variation-settings: var(--art-font-display-variation);
}
.app * { font-style: normal !important; }

/* ============================================================
   Review fixes (Phase 2 review, 2026-09-25)
   ============================================================ */
/* Phones: the stacked role toggle keeps a card radius, not a pill. */
@media (max-width: 560px) {
  .role-toggle { border-radius: var(--art-radius-xl); }
  .role-toggle button { border-radius: var(--art-radius-md); }
}

/* Carousel region: focus ring drawn inside the scroller so it is visible at 360px. */
.fcarousel:focus-visible { outline-offset: -3px; }
.fcarousel { scroll-margin-top: 96px; }

/* Touch targets: v1.2 hard rule 44x44 (inline links inside sentences are the documented exception). */
.brand { min-height: 44px; }
.nav-links a:not(.nav-cta) { display: inline-flex; align-items: center; min-height: 44px; }
.footer .fcol a { display: flex; align-items: center; min-height: 44px; margin-bottom: 0; }
.consent { min-height: 44px; }
.combo-list li { display: flex; align-items: center; min-height: 44px; }
@media (max-width: 860px) {
  .fcarousel-dots .fc-dot { width: 44px; }
}

/* Spacing, button type and the compact button from the tokens. */
.btn { padding: 0 var(--art-spacing-9); font-size: var(--art-type-label-size); }
.nav .nav-links a.nav-cta {
  min-height: var(--art-component-button-primary-compact-height);
  border-radius: var(--art-component-button-primary-compact-radius);
  padding: 0 var(--art-spacing-7);
}
.skip-link { padding: var(--art-spacing-5) var(--art-spacing-7); }

/* Type roles on the scale. */
.manifesto blockquote { font-size: var(--art-type-display-md-size); line-height: 1.12; }
.manifesto .mtext p { font-size: var(--art-type-body-lg-size); line-height: var(--art-type-body-lg-lineheight); }
.manifesto cite {
  font-size: var(--art-type-overline-size); font-weight: var(--art-type-overline-weight);
  letter-spacing: var(--art-type-overline-letterspacing);
}
.step .num { font-size: var(--art-type-title-size); }

/* Hero on shorter desktop screens: keep the text block inside the scrim's bottom 43%. */
@media (min-width: 861px) and (max-height: 920px) {
  .hero { padding-bottom: 4vh; }
  .hero h1 { font-size: min(var(--art-type-display-xl-size), 8vh); }
  .hero .sub { margin-top: var(--art-spacing-7); }
  .hero .cta-row { margin-top: var(--art-spacing-9); }
  .hero .proof { margin-top: var(--art-spacing-8); }
}

/* App mockups: v1.2 components, not the retired Theatre treatments. */
.app .ac-spot {
  font-family: var(--art-font-body); font-weight: 700; letter-spacing: 0;
  color: var(--art-action-primary-text); padding: 0; background: none;
}
.app .ac-spot::before, .app .ac-spot::after { display: none; }
.app .ac-spot.quiet { color: var(--art-content-muted); }
.app .feed-id .ac-spot { color: var(--art-content-onimage-primary); }      /* text over the photo */
.app .ac-chip { color: var(--art-content-onimage-primary); }
.app .ac-av { box-shadow: none; border-color: var(--art-surface-border); background: var(--art-surface-sunken); }
.app .sw-seg span { font-family: var(--art-font-body); font-weight: 600; }
.app .sw-seg .knob { background: var(--art-action-primary-fill); box-shadow: none; }
.app .sw-seg .o1 { color: var(--art-action-primary-on); }
.app .sw-frag.play .sw-seg .o1, .sw-frag.play .sw-seg .o1 { color: var(--art-content-muted); }
.sw-frag.play .sw-seg .o2 { color: var(--art-action-primary-on); }
/* Status pills: status tint + text + the word (badge type) */
.app .ac-state {
  font-family: var(--art-font-body); font-weight: 700; letter-spacing: 0.06em; border: 0;
  background: var(--art-status-pending-subtlefill); color: var(--art-status-pending-text);
}
.app .ac-state.gold, .app .sw-badge { background: var(--art-status-confirmed-subtlefill); color: var(--art-status-confirmed-text); }
.app .bk-state .ac-state.gold { background: var(--art-status-pending-subtlefill); color: var(--art-status-pending-text); }
.app .ac-state.draft { background: transparent; border: 1px dashed var(--art-status-draft-text); color: var(--art-status-draft-text); }
/* Filter chips: rest = hairline outline, selected = secondary tint */
.app .se-chips .ac-state { background: transparent; border: 1px solid var(--art-surface-border); color: var(--art-content-primary); letter-spacing: 0; text-transform: none; font-weight: 600; }
.app .se-chips .ac-state.gold { background: var(--art-action-secondary-subtle); color: var(--art-action-secondary-text); border-color: transparent; }
/* Booking pinned in chat: confirmed */
.app .ch-pin { background: var(--art-status-confirmed-subtlefill); border-color: transparent; }
.app .ch-pin .ac-kicker.gold { color: var(--art-status-confirmed-text); }
/* Publish demo: legible at rest too (it still fades the fields in) */
.pub-tiers-lbl { opacity: 1; }
.pub-go { opacity: 1; }

/* ============================================================
   HERO + ROLES. The 3D hall (js/hall.js) is the hero: it fills the
   first screen under the nav, with the headline on the scrim at the
   bottom left (the .hero rules above). The role tabs, the app's
   segmented control, float over the top of the hall, then stick under
   the 69px nav on a solid band while the features scroll.
   Without JS there are no tabs: the hero shows its photo and every
   role's features show.
   ============================================================ */
.roles3d { position: relative; padding-top: 69px; }          /* clears the fixed nav */

.role-bar { display: none; }
.js .role-bar {
  display: block; position: sticky; top: 69px; z-index: 40;
  height: 78px; padding: 12px 0;
  transition: background-color 0.3s;
}
.js .role-bar.is-solid { background: var(--art-surface-canvas); }   /* set by js/artino.js once the hall has scrolled away */
.role-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  width: min(560px, calc(100% - 40px)); margin: 0 auto;
  padding: var(--art-component-segmentedcontrol-trackpadding);
  background: var(--art-component-segmentedcontrol-trackfill);
  border: 1px solid var(--art-surface-border);
  border-radius: var(--art-radius-pill);
}
.role-tab {
  min-height: var(--art-component-segmentedcontrol-height); padding: 6px 14px;
  border: 0; border-radius: var(--art-radius-pill); background: transparent; cursor: pointer;
  color: var(--art-content-primary);
  font-family: var(--art-type-label-family); font-size: var(--art-type-label-size); font-weight: 600;
  letter-spacing: var(--art-type-label-letterspacing); line-height: 1.2;
  transition: background-color 0.25s, color 0.25s;
}
.role-tab:hover { color: var(--art-action-primary-text); }
.role-tab[aria-selected="true"] {
  background: var(--art-component-segmentedcontrol-thumbfill);
  color: var(--art-component-segmentedcontrol-thumblabel);
}

/* The hero fills the first screen; with JS it slides up under the floating tabs */
.hero3d { min-height: calc(100vh - 69px); }
@supports (min-height: 100svh) { .hero3d { min-height: calc(100svh - 69px); } }
.js .hero3d { margin-top: -78px; }

/* The hall: a canvas the scene paints, behind the headline. Its fog fades
   to surface.canvas. The focus point is where the person in the light is
   framed (here clear of the headline); the safe top keeps the label clear
   of the tabs. */
.hall {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: var(--art-surface-canvas);
  --hall-focus-x: 0.7; --hall-focus-y: 0.45; --hall-safe-top: 78px;
}
.hall canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.9s var(--ease); }
.hall.hall-live canvas { opacity: 1; }
.hall-fallback { display: none; }
html:not(.js) .hall canvas, .hall.hall-static canvas { display: none; }
html:not(.js) .hall-fallback,
.hall.hall-static .hall-fallback { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The label that follows whoever is in the light (positioned by js/hall.js) */
.hall-tag {
  position: absolute; left: 0; top: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px;
  background: var(--art-surface-raised); border: 1px solid var(--art-surface-border); border-radius: var(--art-radius-pill);
  color: var(--art-content-primary); white-space: nowrap;
  font-family: var(--art-type-label-family); font-size: var(--art-type-label-size); font-weight: 600;
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.hall-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--art-action-primary-fill); }
.hall-tag::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 1px; height: 22px; background: var(--art-surface-borderstrong);
}
.hall-tag.on { opacity: 1; }

/* "Roles that stack": introduces the tabbed features below the hero */
.roles-intro { text-align: center; padding-top: 104px; }
.roles-intro .display { margin: 14px auto 0; max-width: 20ch; }
.roles-intro .finep { margin: 18px auto 0; font-size: var(--art-type-body-lg-size); color: var(--art-content-muted); }
.roles-intro .finep b { color: var(--art-content-primary); font-weight: 600; }

/* Panels: the old For Artists / For Event Organisers sections, plus Art Lovers */
.role-panel { padding: 64px 0 40px; }
.role-panel[hidden] { display: none; }
.role-panel:focus-visible { outline-offset: -2px; }
.rp-lead {
  margin: 18px 0 0; max-width: 56ch; color: var(--art-content-muted);
  font-size: var(--art-type-body-lg-size); line-height: var(--art-type-body-lg-lineheight);
}
@media (prefers-reduced-motion: no-preference) {
  .js .role-panel:not([hidden]) { animation: rp-in 0.6s var(--ease) both; }
}
@keyframes rp-in { from { opacity: 0; transform: translateY(14px); } }

/* Art Lover mockups (static: ticket choice, a feed post, a profile) */
.fan-frag { width: 272px; }
.fan-pad { padding: 8px 14px 14px; }
.fan-media { height: 136px; margin-top: 9px; }
.fan-chip { position: absolute; top: 8px; left: 8px; }
.fan-grow { flex: 1; }
.fan-push { margin-left: auto; }
.fan-title { font-size: 19px; margin-top: 6px; }
.fan-rows { display: grid; gap: 6px; margin-top: 12px; }
.fan-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-radius: var(--art-radius-md);
  border: 1px solid var(--art-surface-border); background: var(--art-surface-raised);
  font-family: var(--art-font-body); font-size: 12px; font-weight: 600; color: var(--art-content-primary);
}
.fan-row .v { color: var(--art-content-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.fan-row.on { border-color: var(--art-action-primary-fill); background: var(--art-action-primary-selectedsurface); }
.fan-row.on .v { color: var(--art-action-primary-text); }
.fan-go { display: flex; justify-content: flex-end; margin-top: 12px; font-size: 12px; }
.fan-who { display: flex; align-items: center; gap: 11px; margin-top: 4px; }
.fan-who .ac-av { width: 44px; height: 44px; }
.fan-name { display: block; font-size: 18px; margin-bottom: 3px; }

@media (max-width: 860px) {
  /* the hero stacks: the hall is a band under the tabs, the headline sits below it on the canvas */
  .hero3d { min-height: 0; --hero-band: calc(78px + 40vh); }
  @supports (height: 100svh) { .hero3d { --hero-band: calc(78px + 40svh); } }
  .hero3d .hall { inset: 0 0 auto 0; height: var(--hero-band); --hall-focus-x: 0.5; --hall-focus-y: 0.62; }
  /* the headline isn't on the hall here, so the scrim only softens the band's bottom edge */
  .hero3d .hero-vignette { inset: auto 0 auto 0; top: calc(var(--hero-band) * 0.6); height: calc(var(--hero-band) * 0.4); }
  .roles-intro { padding-top: 64px; }
  .role-panel { padding: 40px 0 16px; }
}
@media (max-width: 560px) {
  .role-tabs { width: calc(100% - 40px); }
  .role-tab { padding: 6px 8px; }
  .rp-lead { font-size: var(--art-type-body-size); }
}