/* The organisers' page (/organisers): "box office after dark". The paper-ticket identity under stage
   light: night sections where the event happens (hero, festival, finale), paper where the reading is,
   and the six raffle tints as the lights. Tokens and type come from style.css and site.css. */
body.pitch { --night: #0d0a24; --night-2: #17123a; --night-line: rgb(255 255 255 / 0.12); --lilac: #b9b2ff; --gutter: max(20px, calc((100% - 1160px) / 2)); }
body.site.pitch main { max-width: none; padding: 0; gap: 0; }
.pitch main > section { padding: clamp(64px, 9vw, 120px) var(--gutter); gap: 32px; justify-items: stretch; }
.pitch main > section + section:not(.fest):not(.finale):not(.phero) { border-top: 1.5px solid var(--line); }
.pitch .sec-head { display: grid; gap: 14px; max-width: 1160px; }
.pitch .sec-head h2 { font-size: clamp(28px, 4.6vw, 48px); line-height: 1.02; letter-spacing: -0.045em; max-width: 20ch; }
.pitch .sec-head p { color: var(--muted); font-size: clamp(17px, 2vw, 19px); max-width: 56ch; }
@media (min-width: 960px) {
  .pitch .sec-head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 56px; align-items: end; }
  .pitch .sec-head p { padding-bottom: 6px; }
}
.pitch .eyebrow { font: 700 12.5px/1.2 var(--body); letter-spacing: 0.12em; text-transform: uppercase; }
.pitch .ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.pitch .ctas .button { width: auto; min-height: 58px; padding: 14px 28px; display: inline-grid; place-items: center; font-size: 17px; border-radius: 16px; }
.pitch .ctas .button.ghost { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 35%, transparent); }
.pitch .ctas .button.ghost:hover { border-color: currentColor; }

/* ---------- hero: the headline beside three screens of one sample event ---------- */
.pitch .phero { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: #fff; padding-top: clamp(40px, 6vw, 88px);
  display: grid; gap: 48px; align-items: center; }
/* stage light: two soft raffle-coloured pools and faint beams from above */
.phero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 55% at 82% 38%, rgb(91 75 255 / 0.55), transparent 70%), radial-gradient(40% 40% at 64% 92%, rgb(224 67 42 / 0.32), transparent 70%),
    radial-gradient(30% 35% at 100% 100%, rgb(255 196 31 / 0.22), transparent 70%),
    repeating-conic-gradient(from 172deg at 70% -10%, rgb(255 255 255 / 0.05) 0 3deg, transparent 3deg 11deg); }
@media (min-width: 1000px) { .pitch .phero { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); column-gap: 40px; padding-bottom: 96px; } }
.phero-text { display: grid; gap: 22px; justify-items: start; min-width: 0; }
.phero .eyebrow { color: var(--sun); display: inline-flex; gap: 10px; align-items: center; }
.phero .eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.pitch .phero h1 { font-size: clamp(42px, 6.3vw, 92px); line-height: 0.92; letter-spacing: -0.055em; text-wrap: balance; hyphens: manual; }
.phero h1 span { display: block; }
.phero .h-light { font-weight: 300; color: var(--lilac); }
.phero .h-heavy { font-weight: 800; }
.phero .lead { font-size: clamp(18px, 1.8vw, 21px); line-height: 1.5; color: rgb(255 255 255 / 0.82); max-width: 50ch; }
.phero .ctas .button:not(.ghost) { background: var(--sun); border-color: var(--sun); color: #17123a; }
.phero .fine-note { font-size: 15px; color: rgb(255 255 255 / 0.66); max-width: 54ch; }
.phero .links-note { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; color: rgb(255 255 255 / 0.66); }
.phero a:not(.button) { color: #fff; }
.phero :focus-visible { outline-color: var(--sun); }

/* The stage: three small screens, drawn in HTML so they stay sharp and follow the language. Sizes in em. */
.stage { margin: 0; display: grid; gap: 14px; justify-items: center; min-width: 0; }
.stage figcaption { font-size: 13px; color: rgb(255 255 255 / 0.55); text-align: center; }
.stage-in { position: relative; width: 100%; max-width: 600px; font-size: clamp(8.4px, 2.35vw, 13px); height: 44em; }
.mk { position: absolute; background: #fff; color: #17123a; border-radius: 1.6em; box-shadow: 0 2.4em 5em rgb(0 0 0 / 0.45), 0 0 0 1px rgb(255 255 255 / 0.06); overflow: hidden; }
.mk small { font-size: 0.85em; color: #625e82; }
.mk-phone { left: 0; top: 0; width: 20em; padding: 0.8em; border-radius: 2.4em; display: grid; gap: 0.7em; background: #faf9ff; transform: rotate(-3deg); animation: rise 0.8s 0.05s cubic-bezier(.2, .9, .25, 1.1) both; }
.mk-cover { position: relative; border-radius: 1.6em; padding: 5.2em 1.1em 1.6em; color: #fff; display: grid; gap: 0.2em; overflow: hidden;
  background: radial-gradient(70% 90% at 80% 0%, #7a6bff, transparent 70%), radial-gradient(60% 80% at 0% 100%, #d62f7c, transparent 70%), #2b1d7a; }
.mk-cover::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.7em; height: 1.4em; background: radial-gradient(circle at 0.9em 0.7em, #faf9ff 0.6em, transparent 0.65em) 0 0 / 1.8em 1.4em repeat-x; }
.mk-num { position: absolute; right: -0.05em; top: -0.2em; font: 800 8em/1 var(--display); letter-spacing: -0.06em; opacity: 0.22; }
.mk-cover b { font: 800 1.9em/1 var(--display); letter-spacing: -0.04em; }
.mk-cover small { color: rgb(255 255 255 / 0.85); }
.mk-tiers { display: grid; gap: 0.5em; }
.mk-tier { --band: #1c7ed6; display: grid; grid-template-columns: minmax(0, 1fr) auto 1.8em; gap: 0.5em; align-items: center; padding: 0.7em 0.7em 0.7em 1.1em; min-width: 0; border: 1.5px solid #e3e0f2; border-radius: 1em; background: #fff; position: relative; font-size: 1em; }
.mk-tier::before { content: ""; position: absolute; left: 0; top: 0.5em; bottom: 0.5em; width: 0.32em; border-radius: 0 0.3em 0.3em 0; background: var(--band); }
.mk-tier[data-band="purple"] { --band: #7048e8; border-color: #17123a; }
.mk-tier[data-band="gold"] { --band: #d4a017; }
.mk-tier span { font-weight: 700; }
.mk-tier i { font-style: normal; font-weight: 800; text-align: center; border-radius: 0.6em; background: #f0eefc; padding: 0.2em 0; }
.mk-tier[data-band="purple"] i { background: #17123a; color: #fff; }
.mk-buy { text-align: center; font-weight: 700; background: #5b4bff; color: #fff; border-radius: 1em; padding: 0.95em; font-size: 1.05em; }

.mk-door { right: 0; top: 1.4em; width: 18.5em; background: #110d2b; color: #fff; padding: 1em; display: grid; gap: 0.8em; transform: rotate(2.5deg); animation: rise 0.8s 0.18s cubic-bezier(.2, .9, .25, 1.1) both; }
.mk-doorhead { display: flex; justify-content: space-between; align-items: baseline; font-size: 1em; }
.mk-doorhead b { font: 700 1.1em/1 var(--display); }
.mk-doorhead span { color: rgb(255 255 255 / 0.7); font-size: 0.9em; }
.mk-doorhead span b { font: 800 1.1em/1 var(--display); color: #fff; }
.mk-view { position: relative; height: 9em; border-radius: 1em; background: radial-gradient(circle at 50% 45%, #2a2259, #0a0820); overflow: hidden; display: grid; place-items: center; }
.mk-qr { width: 5.6em; height: 5.6em; border-radius: 0.4em; background: #fff; padding: 0.35em; display: block; }
.mk-view::before { content: ""; position: absolute; inset: 1.2em 3.6em; border: 0.2em solid #4fd3a5; border-radius: 0.8em; -webkit-mask: linear-gradient(#000 0 0) top left / 1.6em 1.6em no-repeat, linear-gradient(#000 0 0) top right / 1.6em 1.6em no-repeat, linear-gradient(#000 0 0) bottom left / 1.6em 1.6em no-repeat, linear-gradient(#000 0 0) bottom right / 1.6em 1.6em no-repeat; mask: linear-gradient(#000 0 0) top left / 1.6em 1.6em no-repeat, linear-gradient(#000 0 0) top right / 1.6em 1.6em no-repeat, linear-gradient(#000 0 0) bottom left / 1.6em 1.6em no-repeat, linear-gradient(#000 0 0) bottom right / 1.6em 1.6em no-repeat; }
.mk-scan { position: absolute; left: 3.8em; right: 3.8em; height: 0.18em; background: #4fd3a5; box-shadow: 0 0 1em #4fd3a5; top: 1.4em; animation: scan 3s ease-in-out infinite alternate; }
@keyframes scan { to { top: calc(100% - 1.6em); } }
.mk-flash { position: relative; height: 4.6em; }
.mk-flash > div { position: absolute; inset: 0; display: grid; align-content: center; gap: 0.1em; padding: 0 1em; border-radius: 1em; background: #0b7f5f; opacity: 0; animation: admit 9s calc(var(--i) * 3s) infinite; }
.mk-flash > div:first-child { opacity: 1; }
.mk-flash small { color: rgb(255 255 255 / 0.85); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.75em; }
.mk-flash b { font: 700 1.25em/1.1 var(--display); }
.mk-flash span { font-size: 0.9em; color: rgb(255 255 255 / 0.9); }
@keyframes admit { 0%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-0.4em); } }

.mk-dash { right: 2em; top: 23em; width: 21em; padding: 1.2em; display: grid; gap: 0.55em; transform: rotate(-1deg); animation: rise 0.8s 0.3s cubic-bezier(.2, .9, .25, 1.1) both; }
.mk-big { font: 800 2.4em/1 var(--display); letter-spacing: -0.05em; }
.mk-big span { font: 600 0.4em/1 var(--body); letter-spacing: 0; color: #625e82; }
.mk-meter { height: 0.6em; border-radius: 1em; background: #f0eefc; overflow: hidden; }
.mk-meter i { display: block; height: 100%; width: 60%; border-radius: inherit; background: linear-gradient(90deg, #5b4bff, #d62f7c); }
.mk-bars { display: flex; align-items: end; gap: 0.3em; height: 4.4em; padding: 0.3em 0 0.2em; }
.mk-bars i { flex: 1; height: var(--h); border-radius: 0.25em 0.25em 0 0; background: #c9c3ff; transform-origin: bottom; animation: grow 0.9s 0.5s cubic-bezier(.2, .9, .25, 1) both; }
.mk-bars i:last-child { background: #5b4bff; }
@keyframes grow { from { transform: scaleY(0); } }
.mk-dash ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35em; font-size: 0.95em; }
.mk-dash li { display: flex; justify-content: space-between; gap: 1em; padding-top: 0.35em; border-top: 1px solid #ece9f8; }
@keyframes rise { from { opacity: 0; transform: translateY(2.4em) rotate(0deg); } }
@media (max-width: 520px) {
  .stage-in { height: 46em; font-size: clamp(8px, 2.75vw, 12px); }
  .mk-phone { width: 19em; }
  .mk-door { top: 2em; width: 16.5em; }
  .mk-dash { right: 0; top: 24em; width: 20em; }
}
@media (prefers-reduced-motion: reduce) {
  .mk, .mk-bars i, .mk-scan, .mk-flash > div { animation: none; }
  .mk-flash > div:not(:first-child) { display: none; }
}

/* ---------- ribbon of facts ---------- */
.pitch .ribbon { display: flex; overflow: hidden; background: var(--sun); color: #17123a; font: 700 15px/1 var(--display); letter-spacing: -0.01em; text-transform: uppercase; }
.ribbon > div { display: flex; flex: none; padding: 17px 0; animation: ticker 70s linear infinite; }
.ribbon span { white-space: nowrap; padding: 0 20px; }
.ribbon span::after { content: "✦"; margin-left: 40px; color: #e0432a; }
@keyframes ticker { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .ribbon > div { animation: none; flex: 1; flex-wrap: wrap; row-gap: 12px; } .ribbon > div + div, .ribbon span:nth-child(n + 7) { display: none; } }

/* ---------- the jobs: four tall tickets, the verb on the stub ---------- */
.jobgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.job { --notch: 11px; display: grid; grid-template-rows: auto 1fr; background: var(--card); border-radius: 22px; box-shadow: 0 1px 0 var(--line), 0 18px 40px rgb(23 18 58 / 0.08);
  -webkit-mask: radial-gradient(circle var(--notch) at 0 var(--cut, 164px), #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% var(--cut, 164px), #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--notch) at 0 var(--cut, 164px), #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% var(--cut, 164px), #0000 98%, #000) right / 51% 100% no-repeat;
  transition: transform 0.2s ease; }
.job:hover { transform: translateY(-4px); }
.job header { height: 164px; padding: 22px 22px 18px; background: var(--accent); color: var(--on-accent); display: grid; align-content: space-between; border-bottom: 2px dashed color-mix(in srgb, var(--on-accent) 45%, transparent); }
.pitch .job h3 { font: 800 clamp(24px, 2vw, 30px)/1 var(--display); letter-spacing: -0.05em; overflow-wrap: normal; hyphens: manual; }
.job header p { font-weight: 600; font-size: 16px; line-height: 1.3; opacity: 0.92; }
.job ul { list-style: none; margin: 0; padding: 20px 22px 24px; display: grid; gap: 12px; align-content: start; font-size: 16px; line-height: 1.4; }
.job li { padding-left: 22px; position: relative; }
.job li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .job { transition: none; } .job:hover { transform: none; } }

/* ---------- the size dial and its receipt ---------- */
.dial { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .dial { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; } }
.dial-controls { display: grid; gap: 22px; min-width: 0; }
.sizes { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 620px) { .sizes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sizes legend { font: 700 12.5px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 0 0 12px; }
.size { display: block; position: relative; color: var(--ink); cursor: pointer; }
.size input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; min-height: 0; }
.size span { display: grid; gap: 6px; padding: 16px 16px 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--card); transition: background 0.15s, color 0.15s, border-color 0.15s; }
.size b { font: 700 14px/1.2 var(--body); }
.size small { font: 800 clamp(20px, 2.1vw, 27px)/1 var(--display); letter-spacing: -0.05em; color: inherit; }
.size input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.size input:focus-visible + span { outline: 3px solid var(--link); outline-offset: 3px; }
.size:hover span { border-color: var(--ink); }
.pricein { max-width: 260px; color: var(--muted); font: 700 12.5px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; gap: 10px; }
.money-in { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); padding-left: 16px; }
.money-in span { font: 800 24px/1 var(--display); color: var(--ink); letter-spacing: 0; }
.money-in input { border: 0; background: none; font: 800 24px/1 var(--display); letter-spacing: -0.03em; min-height: 60px; text-transform: none; }
.money-in:focus-within { border-color: var(--link); }
.turns { display: grid; gap: 12px; }
.turns small { font: 700 12.5px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; }
.turns ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.turns li { padding: 7px 13px; border-radius: 99px; font-size: 14.5px; font-weight: 600; border: 1.5px dashed var(--line); color: var(--muted); transition: all 0.2s; }
.turns li.on { border-style: solid; border-color: transparent; background: color-mix(in srgb, var(--ok) 14%, var(--card)); color: var(--ink); }
.turns li.on::before { content: "✓ "; color: var(--ok); font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .size span, .turns li { transition: none; } }
/* a till receipt: mono figures, dashed rules, a torn bottom edge */
.receipt { position: relative; background: var(--card); border-radius: 18px 18px 0 0; padding: 26px 24px 30px; display: grid; gap: 0; font-family: var(--mono); box-shadow: 0 22px 50px rgb(23 18 58 / 0.12); margin-bottom: 12px; }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: linear-gradient(-45deg, transparent 8px, var(--card) 0) 0 0 / 16px 12px repeat-x, linear-gradient(45deg, transparent 8px, var(--card) 0) 0 0 / 16px 12px repeat-x; }
.r-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 0; border-bottom: 1.5px dashed var(--line); font-size: 15px; }
.r-row span { color: var(--muted); font-family: var(--body); }
.r-row b { font-size: 20px; text-align: right; font-variant-numeric: tabular-nums; }
.r-row small { grid-column: 2; text-align: right; font-size: 12.5px; }
.r-total { display: grid; gap: 6px; padding: 22px 0 6px; }
.r-total span { font: 700 12.5px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.r-total b { font: 800 clamp(36px, 5vw, 56px)/1 var(--display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.r-total small { font-size: 14px; }
.r-note { margin-top: 14px !important; font: 14px/1.5 var(--body); color: var(--muted); }

/* ---------- festivals: night again, with a weekend pass ---------- */
.pitch .fest { position: relative; isolation: isolate; background: var(--night); color: #fff; overflow: hidden; }
.fest::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 60% at 10% 0%, rgb(43 99 230 / 0.4), transparent 70%), radial-gradient(45% 50% at 95% 70%, rgb(214 47 124 / 0.32), transparent 70%),
    repeating-conic-gradient(from 188deg at 20% -10%, rgb(255 255 255 / 0.045) 0 3deg, transparent 3deg 12deg); }
.fest-in { display: grid; gap: 44px; max-width: 1160px; width: 100%; justify-self: center; }
@media (min-width: 960px) { .fest-in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 56px; align-items: center; } .fest-grid, .talk { grid-column: 1 / -1; } }
.fest-head { display: grid; gap: 16px; justify-items: start; }
.fest-head .eyebrow { color: var(--sun); }
.fest-head h2 { font-size: clamp(30px, 5.4vw, 60px); line-height: 1; letter-spacing: -0.05em; color: #fff; }
.fest-head p { color: rgb(255 255 255 / 0.78); font-size: clamp(17px, 2vw, 19px); max-width: 52ch; }
.pass { --notch: 13px; justify-self: center; width: min(100%, 440px); display: grid; grid-template-columns: 18px minmax(0, 1fr) 84px; min-height: 210px; background: #fff; color: #17123a; border-radius: 22px; transform: rotate(-4deg);
  box-shadow: 0 30px 70px rgb(0 0 0 / 0.5); overflow: hidden;
  -webkit-mask: radial-gradient(circle var(--notch) at calc(100% - 84px) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at calc(100% - 84px) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--notch) at calc(100% - 84px) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at calc(100% - 84px) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.pass-band { background: repeating-linear-gradient(180deg, #7048e8 0 14px, #8a68f0 14px 16px); }
.pass-main { padding: 22px 20px; display: grid; align-content: center; gap: 4px; }
.pass-main small { font: 700 12px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: #7048e8; }
.pass-main b { font: 800 clamp(26px, 4vw, 34px)/1 var(--display); letter-spacing: -0.05em; margin: 4px 0 6px; }
.pass-main span { font-size: 15px; }
.pass-meta { color: #625e82; font-size: 13.5px !important; }
.pass-days { border-left: 2px dashed #e3e0f2; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 12px 0; }
.pass-days span { width: 50px; height: 34px; border-radius: 99px; display: grid; place-items: center; font: 700 13px/1 var(--body); border: 1.5px solid #17123a; }
/* a used day is punched through */
.pass-days span.used { position: relative; color: #b0abc9; border-color: #d9d5ea; text-decoration: line-through; }
.pass-days span.used::after { content: ""; position: absolute; right: -8px; top: -8px; width: 18px; height: 18px; border-radius: 50%; background: var(--night); }
.fest-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); background: var(--night-line); border: 1px solid var(--night-line); border-radius: 22px; overflow: hidden; }
.fest-grid li { background: var(--night); padding: 24px 22px; display: grid; gap: 8px; align-content: start; }
.fest-grid b { font: 700 18px/1.2 var(--display); letter-spacing: -0.03em; display: flex; gap: 10px; align-items: center; }
.fest-grid b::before { content: ""; width: 12px; height: 12px; border-radius: 3px; flex: none; background: var(--c, #ffc41f); }
.fest-grid li:nth-child(8n + 1) { --c: #ffc41f; } .fest-grid li:nth-child(8n + 2) { --c: #7048e8; } .fest-grid li:nth-child(8n + 3) { --c: #2b63e6; } .fest-grid li:nth-child(8n + 4) { --c: #e0432a; }
.fest-grid li:nth-child(8n + 5) { --c: #4fd3a5; } .fest-grid li:nth-child(8n + 6) { --c: #d62f7c; } .fest-grid li:nth-child(8n + 7) { --c: #ffc41f; } .fest-grid li:nth-child(8n + 8) { --c: #a99cff; }
.fest-grid span { color: rgb(255 255 255 / 0.72); font-size: 15.5px; line-height: 1.45; }
.talk { display: grid; gap: 24px; padding: clamp(22px, 4vw, 40px); border-radius: 26px; background: linear-gradient(135deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.03)); border: 1px solid var(--night-line); }
@media (min-width: 900px) { .talk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; } }
.pitch .talk h3 { font: 800 clamp(24px, 3.4vw, 36px)/1.05 var(--display); letter-spacing: -0.045em; margin-bottom: 12px; }
.talk p { color: rgb(255 255 255 / 0.78); font-size: 17px; }
.talk .invite label { color: rgb(255 255 255 / 0.75); }
.talk .invite input { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.2); color: #fff; }
.talk .invite input::placeholder { color: rgb(255 255 255 / 0.45); }
.talk .invite input:focus { border-color: var(--sun); }
.talk .invite button { background: var(--sun); border-color: var(--sun); color: #17123a; }
.talk .invite small, .talk .invite small a { color: rgb(255 255 255 / 0.6); }
.talk .note { background: rgb(255 255 255 / 0.08); color: #fff; }
.fest :focus-visible { outline-color: var(--sun); }

/* ---------- the matched statement, the pictures, the three questions ---------- */
.pitch .split .match { max-width: none; }
@media (min-width: 960px) { .pitch section.split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: 56px; align-items: center; }
  .pitch section.split .sec-head { grid-template-columns: minmax(0, 1fr); } }
.pitch .shots { padding-bottom: 40px; }
.asklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.asklist li { padding: 26px 24px; border-radius: 22px; background: var(--card); border: 1.5px solid var(--line); display: grid; gap: 12px; align-content: start; position: relative; }
.asklist li::before { content: "?"; position: absolute; top: 18px; right: 20px; font: 800 44px/1 var(--display); color: color-mix(in srgb, var(--accent) 22%, transparent); }
.asklist b { font: 700 clamp(19px, 2.2vw, 23px)/1.2 var(--display); letter-spacing: -0.03em; padding-right: 36px; }
.asklist p { color: var(--muted); font-size: 16.5px; }
.fine { max-width: 820px; }
.fine summary { cursor: pointer; font-weight: 700; font-size: 17px; }
.fine .items { margin-top: 12px; color: var(--muted); }
.pitch .qs .faq { max-width: 900px; }

/* ---------- the last word ---------- */
.pitch .finale { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: #fff; justify-items: center; text-align: center; padding-block: clamp(84px, 12vw, 160px); }
.finale::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 70% at 50% 120%, rgb(91 75 255 / 0.6), transparent 70%), radial-gradient(30% 40% at 15% 0%, rgb(255 196 31 / 0.18), transparent 70%); }
.pitch .finale h2 { font-size: clamp(34px, 6.8vw, 88px); line-height: 0.96; letter-spacing: -0.055em; max-width: 16ch; color: #fff; }
.pitch .finale > p { color: rgb(255 255 255 / 0.75); font-size: 19px; }
.finale .ctas { justify-content: center; }
.finale .ctas .button:not(.ghost) { background: var(--sun); border-color: var(--sun); color: #17123a; }
.finale :focus-visible { outline-color: var(--sun); }

/* The site's top bar sits on the night of the hero here. */
.pitch .topbar { background: var(--night); border-bottom-color: var(--night-line); }
.pitch .topbar .brand { color: #fff; }
.pitch .topbar nav > a { color: rgb(255 255 255 / 0.7); }
.pitch .topbar nav > a:hover, .pitch .topbar nav > a[aria-current] { color: #fff; }
.pitch .topbar nav > a[aria-current] { box-shadow: inset 0 -2px 0 var(--sun); }
.pitch .topbar nav > a.pillbtn { background: #fff; color: #17123a; }
.pitch .topbar :focus-visible { outline-color: var(--sun); }

/* The dial and the three questions on /pricing, inside the narrower site column. */
body.site:not(.pitch) .scale > *, body.site:not(.pitch) .ask > * { justify-self: stretch; width: 100%; }
body.site:not(.pitch) .scale .sec-head h2, body.site:not(.pitch) .ask .sec-head h2 { font-size: clamp(24px, 4vw, 38px); letter-spacing: -0.04em; }
@media (min-width: 960px) { body.site:not(.pitch) .sec-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 48px; align-items: end; } }
body.site:not(.pitch) .size small { font-size: clamp(18px, 1.8vw, 24px); }