/* Product mocks on /pro: the dashboard drawn in HTML instead of screenshots.
   Structure and labels follow dashboard.imin.wtf; numbers are one example night, marked as such. */
.mo{
  --mo-bg:#0B0A14;--mo-panel:#12101C;--mo-panel-2:#1A1727;--mo-line:#2A2639;--mo-line-2:#3A3550;
  --mo-fg:#F4EFE7;--mo-fg-2:#A9A2BD;--mo-fg-3:#6F6884;
  --mo-blue:#3D63FF;--mo-green:#16B877;--mo-haze:#9C8CFF;--mo-red:#F06A6A;
  --mo-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* prod tints an event's bars, tabs and tier shades from its poster: pickTint on the example poster (p-dj.jpg) */
  --mo-tint:#2DB1FB;
  position:relative;display:block;width:100%;container-type:inline-size;overflow:hidden;isolation:isolate;
  background:var(--mo-bg);color:var(--mo-fg);font-family:'DM Sans','Onest',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;line-height:1.3;text-align:left
}
.mo *,.mo *::before,.mo *::after{box-sizing:border-box}
.mo-example{position:absolute;z-index:3;top:10px;right:10px;padding:4px 9px;border-radius:999px;
  background:rgba(11,10,20,.82);border:1px solid var(--mo-line-2);color:var(--mo-fg-2);
  font:600 11px/1 'DM Sans','Onest',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
@media (prefers-reduced-motion:reduce){.mo *,.mo *::before,.mo *::after{animation:none!important;transition:none!important}}

/* === M1: overview (hero, six-tabs end state) and analytics === */
/* The event tint: the dashboard paints bars, the chart and the active tab in a colour it samples from the poster. */
.m1-ov,.m1-an{--m1-tint:var(--mo-tint);isolation:isolate}
.m1-sprite{position:absolute;width:0;height:0;overflow:hidden}
.m1-sprite stop{stop-color:var(--m1-tint)}
.m1-i{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* lit by the hero's thoughts (pro.js) */
.m1-ring{position:absolute;inset:-5px;z-index:2;border:2px solid var(--mo-haze);border-radius:10px;box-shadow:0 0 0 4px rgba(156,140,255,.18),0 0 24px rgba(156,140,255,.35);opacity:0;visibility:hidden;pointer-events:none}
.m1-lit{position:relative}
.m1-bar{display:block;height:6px;border-radius:999px;background:var(--mo-panel-2);overflow:hidden}
.m1-bar i{display:block;height:100%;border-radius:inherit;background:var(--m1-tint);transform:scaleX(var(--v,0));transform-origin:0 50%}
.m1-w,.m1-ks,.m1-note{font-size:max(10px,.86em);font-weight:400;letter-spacing:0;color:var(--mo-fg-2)}
.m1-btn{display:inline-flex;align-items:center;gap:.45em;height:2.2em;padding:0 .8em;border:1px solid var(--mo-line-2);border-radius:6px;background:var(--mo-panel);color:var(--mo-fg);font-size:max(10px,.88em);font-weight:600;white-space:nowrap}
.m1-btn--go{border-color:var(--mo-blue);background:var(--mo-blue);color:#fff}
.m1-card{min-width:0;padding:.85em 1em;border:1px solid var(--mo-line);border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 40%),var(--mo-panel)}
.m1-ch{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25em .8em;margin-bottom:.75em}
.m1-ch b{font-weight:600}
.m1-ch > span{font-size:max(10px,.86em);color:var(--mo-fg-2)}
.m1-kl{font-size:max(10px,.9em);color:var(--mo-fg-2)}
.m1-kv{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2em .55em}
.m1-kv b{font-size:1.6em;font-weight:700;letter-spacing:-.03em;line-height:1.05;color:var(--mo-fg);white-space:nowrap}
.m1-table{width:100%;border-collapse:collapse;font-size:max(10px,.88em)}
.m1-table th{padding:0 0 .45em;font-weight:500;text-align:right;color:var(--mo-fg-2)}
.m1-table td{padding:.42em 0;border-top:1px solid var(--mo-line);text-align:right;font-family:var(--mo-mono);white-space:nowrap}
.m1-table :is(th,td):first-child{text-align:left;font-family:inherit}
.m1-table :is(th,td) + :is(th,td){padding-left:.8em}

/* ---- Overview: the event page, compact like the dashboard on a narrow screen ---- */
.m1-ov{height:100%}
.m1-o{display:grid;align-content:start;gap:.7em;padding:.85em .9em;font-size:clamp(10px,2.3cqi,13px)}
/* the compact page leaves out what the wide one has room for: the sidebar, card footnotes, quick actions */
.m1-side,.m1-k .m1-ks,.m1-quick,.m1-note{display:none}
.m1-main{display:flex;flex-direction:column;gap:.75em;min-width:0}
.m1-crumbs{display:flex;align-items:center;gap:.5em;min-height:1.6em;font-size:max(10px,.9em);color:var(--mo-fg-2)}
.m1-crumbs i{font-style:normal}
.m1-crumbs b{font-weight:500;color:var(--mo-fg)}
.m1-hero{display:grid;grid-template-columns:5.6em minmax(0,1fr);grid-template-areas:"p tb" "p acts" "p meta" "figs figs";align-items:start;gap:.6em 1em;padding:1em 1.1em;border:1px solid color-mix(in srgb,var(--m1-tint) 30%,var(--mo-line-2));border-radius:14px;background:linear-gradient(115deg,color-mix(in srgb,var(--m1-tint) 22%,var(--mo-bg)),var(--mo-bg) 70%)}
/* the poster: the same picture and name as the guest's poster */
.m1-poster{grid-area:p;position:relative;display:block;aspect-ratio:4/5;border-radius:8px;background:var(--mo-bg);box-shadow:0 8px 22px rgba(0,0,0,.55),0 0 0 1px color-mix(in srgb,var(--m1-tint) 40%,transparent)}
.m1-poster::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(rgba(11,10,20,.55),rgba(11,10,20,0) 28%,rgba(11,10,20,0) 42%,rgba(11,10,20,.92) 84%)}
.m1-ov .m1-poster img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:72% 50%;border-radius:inherit}
.m1-poster svg{position:absolute;z-index:1;top:8%;left:9%;width:auto;height:15%;color:var(--mo-fg)}
.m1-poster b{position:absolute;z-index:1;left:9%;right:5%;bottom:8%;font:800 max(10px,1.05em)/.88 'Barlow Condensed','Fira Sans Condensed','Arial Narrow',sans-serif;text-transform:uppercase;color:var(--mo-fg)}
.m1-tb{grid-area:tb;display:flex;flex-direction:column;align-items:flex-start;gap:.45em;min-width:0}
.m1-chip{display:inline-flex;align-items:center;gap:.45em;padding:.25em .65em;border:1px solid rgba(22,184,119,.32);border-radius:4px;background:rgba(22,184,119,.14);color:var(--mo-green);font:700 max(10px,.78em)/1.1 var(--mo-mono);letter-spacing:.08em;text-transform:uppercase}
.m1-chip i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.m1-ov.is-in .m1-chip i{animation:m1-pulse 2s infinite}
.bv-imin:not(.is-on) .m1-chip i{animation:none}
@keyframes m1-pulse{50%{opacity:.4}}
.m1-title{font-size:1.7em;font-weight:700;line-height:1.08;letter-spacing:-.025em;overflow-wrap:anywhere}
.m1-acts{grid-area:acts;display:flex;flex-wrap:wrap;gap:.45em}
.m1-acts .m1-lit{display:flex;gap:.45em}
.m1-meta{grid-area:meta;display:flex;flex-wrap:wrap;gap:.3em 1.2em;font-size:max(10px,.9em);color:var(--mo-fg-2)}
.m1-meta span{display:inline-flex;align-items:center;gap:.4em;white-space:nowrap}
.m1-figs{grid-area:figs;display:flex;flex-wrap:wrap;align-items:flex-start;gap:.5em 1.6em;font-size:max(10px,.9em);color:var(--mo-fg-2)}
.m1-sold{flex:1 1 100%;display:flex;flex-direction:column;gap:.45em}
.m1-sold .m1-bar{height:8px}
.m1-fl{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25em .7em}
.m1-fl .m1-lit{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.25em .7em}
.m1-fl b{font-weight:700;color:var(--mo-fg)}
.m1-fl .m1-fv{font-size:1.4em}
.m1-fl em{font-style:normal;font-family:var(--mo-mono);color:var(--mo-fg)}
.m1-tabs{display:flex;gap:2px;border-bottom:1px solid var(--mo-line);white-space:nowrap;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
.m1-tabs span{flex:none;display:inline-flex;align-items:center;gap:.45em;margin-bottom:-1px;padding:.6em 1em;border-bottom:2px solid transparent;font-size:max(10px,.92em);font-weight:500;color:var(--mo-fg-2)}
.m1-tabs .is-on{border-bottom-color:var(--m1-tint);font-weight:600;color:var(--mo-fg)}
.m1-tabs i{padding:1px 5px;border:1px solid var(--mo-line-2);border-radius:4px;background:var(--mo-panel-2);font:normal max(10px,.82em)/1.2 var(--mo-mono);color:var(--mo-fg-2)}
.m1-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6em}
.m1-k{display:flex;flex-direction:column;gap:.45em;min-width:0;padding:.8em .85em;border:1px solid var(--mo-line);border-radius:10px;background:var(--mo-panel)}
.m1-k .m1-kv b{font-size:1.5em}
.m1-k .m1-w{flex-basis:100%}
.m1-row{display:grid;gap:.75em}
.m1-range{display:inline-flex;gap:3px;padding:2px;border:1px solid var(--mo-line);border-radius:8px;background:var(--mo-panel-2)}
.m1-range i{padding:.3em .6em;border-radius:6px;font:normal max(10px,.78em)/1.2 var(--mo-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--mo-fg-2)}
.m1-range .is-on{background:var(--mo-bg);color:var(--mo-fg)}
.m1-plot{position:relative;height:5.4em;margin:0 1.6em}
.m1-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.m1-area{fill:url(#m1-area)}
.m1-line{fill:none;stroke:var(--m1-tint);stroke-width:2;vector-effect:non-scaling-stroke}
.m1-base{fill:none;stroke:var(--mo-line-2);stroke-width:1;vector-effect:non-scaling-stroke}
.m1-dot{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border:1.5px solid var(--m1-tint);border-radius:50%;background:var(--mo-bg)}
.m1-dot:last-of-type{background:color-mix(in srgb,var(--m1-tint) 40%,var(--mo-bg))}
.m1-days{position:relative;height:1.3em;margin:.6em 1.6em 0;font:normal max(10px,.76em)/1.3 var(--mo-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--mo-fg-2)}
.m1-days > *{position:absolute;left:calc(var(--x) * 1%);translate:-50% 0;white-space:nowrap}
.m1-days b{color:var(--mo-fg)}
.m1-act{display:grid;grid-template-columns:2.6em minmax(0,1fr);align-items:center;gap:.8em;padding:.55em .8em;border:1px solid var(--mo-line);border-radius:6px;background:var(--mo-panel-2)}
.m1-act + .m1-act{margin-top:.55em}
.m1-ai{display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:6px;background:rgba(61,99,255,.18);color:#9DB0FF}
.m1-act b{display:block;font-weight:500}
.m1-act small{display:block;font-size:max(10px,.86em);color:var(--mo-fg-2)}
/* the six-tabs scene shows the same page in the browser frame */
.bv-imin > .m1-ov{position:absolute;inset:0}
/* phones: the essentials, legible at 10 px */
@container (max-width:419px){
  .m1-o{padding:.65em;gap:.55em}
  .m1-crumbs,.m1-k .m1-bar{display:none}
  .m1-hero{grid-template-columns:5.2em minmax(0,1fr);grid-template-areas:"p tb" "p meta" "acts acts" "figs figs";padding:.75em;gap:.55em .8em}
  .m1-title{font-size:1.5em}
  .m1-acts .m1-lit + .m1-btn{display:none}
  .m1-acts .m1-lit{flex-wrap:wrap;gap:.35em}
  .m1-acts .m1-btn{padding:0 .6em;gap:.35em}
  .m1-figs{gap:.4em 1.2em}
  .m1-kpis{grid-template-columns:1fr 1fr;gap:.5em}
  .m1-k{padding:.6em .7em;gap:.3em}
  .m1-tabs span{padding:.55em .8em}
  .m1-row{display:none}
  .m1-ov.is-tab .m1-row{display:grid}
  .m1-plot{height:5em;margin:0 1.4em}
  .m1-days{margin:.5em 1.4em 0}
  .m1-days > :nth-child(even){display:none}
  /* the end labels sit inside the card: a long month name would hang over its edge */
  .m1-days > :first-child{translate:0 0}
  .m1-days > :last-child{translate:-100% 0}
  /* Ukrainian month names are long: the narrow card keeps the first and the last day, on a lower plot so they stay in frame */
  :lang(uk) .m1-days > :not(:first-child):not(:last-child){display:none}
  :lang(uk) .m1-plot{height:4em}
}
/* the whole app, when there is room for it (the six-tabs scene on a wide screen) */
@container (min-width:880px){
  .m1-o{grid-template-columns:13.5em minmax(0,1fr);gap:0;padding:0;height:100%;font-size:clamp(10px,1.15cqi,14px)}
  .m1-side{display:flex;flex-direction:column;gap:.35em;padding:1.2em .9em;border-right:1px solid var(--mo-line)}
  .m1-new{justify-content:center;height:2.6em;margin-bottom:1em;font-size:max(10px,.95em)}
  .m1-nav li{display:flex;align-items:center;gap:.7em;padding:.55em .75em;border-radius:6px;font-size:max(10px,.95em);color:var(--mo-fg-2)}
  .m1-nav .is-on{background:var(--mo-panel-2);color:var(--mo-fg);font-weight:600}
  .m1-tools{margin:1.1em 0 .2em;padding:1em .75em 0;border-top:1px solid var(--mo-line);font-size:max(10px,.88em);color:var(--mo-fg-2)}
  .m1-main{padding:1.2em 1.6em;gap:1em;overflow:hidden}
  .m1-k .m1-ks{display:block}
  .m1-hero{grid-template-columns:8em minmax(0,1fr) auto;grid-template-areas:"p tb acts" "p meta meta" "p figs figs";gap:.7em 1.5em;padding:1.1em 1.4em}
  .m1-title{font-size:2.2em}
  .m1-sold{flex:1 1 15em}
  .m1-note{display:block;flex-basis:100%}
  .m1-row{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}
  .m1-quick{display:block}
  .m1-k .m1-kv b{font-size:1.75em}
}

/* ---- Analytics: how it sold, and which links worked ---- */
.m1-a{display:flex;flex-direction:column;gap:.85em;padding:1em 1.05em;font-size:clamp(10px,2.1cqi,13px)}
.m1-ah{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6em 1em;padding-right:84px}
.m1-at{font-size:1.45em;font-weight:700;letter-spacing:-.02em}
.m1-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6em}
.m1-t{display:flex;flex-direction:column;gap:.5em;min-width:0;padding:.8em .85em;border:1px solid var(--mo-line);border-radius:10px;background:var(--mo-panel)}
.m1-t .m1-w{line-height:1.3}
.m1-t .m1-kv b{font-size:1.55em}
.m1-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6em;align-items:stretch}
.m1-sr + .m1-sr{margin-top:.7em}
.m1-sr p,.m1-total{display:flex;justify-content:space-between;align-items:baseline;gap:.6em;margin-bottom:.4em}
.m1-sr b{font-weight:600}
.m1-sr b span{font-weight:400;font-size:max(10px,.88em);color:var(--mo-fg-2)}
.m1-sr em,.m1-total em{font:normal max(10px,.86em) var(--mo-mono);white-space:nowrap}
.m1-sr .m1-bar{height:8px}
.m1-total{margin:.75em 0 0;padding-top:.65em;border-top:1px solid var(--mo-line);color:var(--mo-fg-2)}
/* the Analytics page sits beside the event's tab, framed as its own page */
.m1-page{min-width:0;padding:.85em 1em;border:1px solid color-mix(in srgb,var(--mo-haze) 34%,var(--mo-line));border-radius:10px;background:var(--mo-panel-2)}
.m1-ph{display:flex;flex-direction:column;gap:.2em;margin-bottom:.8em;padding-bottom:.7em;border-bottom:1px solid var(--mo-line-2)}
.m1-ph b{font-size:1.15em;font-weight:700}
.m1-ph span{font-size:max(10px,.86em);line-height:1.35;color:var(--mo-fg-2)}
.m1-page .m1-ch{margin-bottom:.4em}
.m1-page .m1-table td{border-top-color:var(--mo-line-2)}
/* phones: the four figures, then sell-through, then the links (a narrow step card on a laptop keeps the two columns) */
@media (max-width:959.98px){
  @container (max-width:479px){
    .m1-a{padding:.75em;gap:.65em}
    .m1-ah{padding-right:0}
    .m1-ah .m1-acts{width:100%}
    .m1-tiles{grid-template-columns:1fr 1fr;gap:.5em}
    .m1-t{padding:.65em .7em}
    .m1-cols{grid-template-columns:1fr}
  }
}
.m-after .shot:has(> .m1-an){width:100%}
/* stacked step cards keep their height, like the screenshot did: the width gives way when the screen is short */
@media (min-width:960px){.m-after .shot:has(> .m1-an){width:min(100%,calc(var(--shot-max) * 1.22))}}
/* === end M1 === */



/* === M2: create, studio, tickets === */
/* Step 01 builder, step 02 concepts to posters, step 03 tiers. Each board is drawn in em at 58em wide
   (base = 1/58 of the board), so it scales like the screenshot did; under 500px it reflows for phones. */
.m-page > .shot,.m-poster > .shot,.m-tix > .shot{width:100%}
@media (min-width:960px){
  /* cap the width so the board's height (plus the 1px frame) stays inside --shot-max */
  .m-page > .shot{width:min(100%,calc((var(--shot-max) - 2px) * 58 / 48 + 2px))}
  .m-poster > .shot{width:min(100%,calc((var(--shot-max) - 2px) * 58 / 51 + 2px))}
  .m-tix > .shot{width:min(100%,calc((var(--shot-max) - 2px) * 58 / 45.4 + 2px))}
}
.mo.m2{
  --m2-s:var(--mo-panel);--m2-s2:var(--mo-panel-2);--m2-l:var(--mo-line);--m2-l2:var(--mo-line-2);
  --m2-li:color-mix(in srgb,var(--mo-fg-3) 62%,var(--mo-panel));
  --m2-t:var(--mo-fg);--m2-t2:var(--mo-fg-2);--m2-t3:var(--mo-fg-3);
  --m2-a:var(--mo-blue);--m2-a2:color-mix(in srgb,var(--mo-blue) 42%,#fff);--m2-abg:color-mix(in srgb,var(--mo-blue) 18%,transparent);
  --m2-glow:0 0 2.4em color-mix(in srgb,var(--mo-blue) 40%,transparent);
  --m2-ease:cubic-bezier(.2,.7,.2,1);--m2-out:cubic-bezier(.33,1,.68,1);
  isolation:isolate;user-select:none
}
:where(.m2) p{margin:0}
.m2-b{position:relative;height:48em;overflow:hidden;font-size:calc(100cqw / 58)}
.m2-card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0) 40%),var(--m2-s);border:1px solid var(--m2-l);border-radius:1em;padding:1.3em}
.m2-ct{font-size:1.4em;font-weight:600;line-height:1.3;color:var(--m2-t)}
.m2-l{font:700 max(1.1em,10px)/1.2 var(--mo-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--m2-t2);white-space:nowrap}
.m2-l i{font-style:normal;color:var(--mo-red)}
.m2-mono{font-family:var(--mo-mono)}
.m2-i{width:1.2em;height:1.2em;flex:none;fill:currentColor}
.m2-is{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.m2-btn{display:inline-flex;align-items:center;gap:.45em;height:2.6em;padding:0 1em;border:1px solid var(--m2-l2);border-radius:.48em;background:var(--m2-s);color:var(--m2-t);font-size:1.25em;font-weight:600;white-space:nowrap;transition:scale .14s,filter .14s,opacity .3s}
.m2-btn.m2-pri{background:var(--m2-a);border-color:transparent;color:#fff}
.m2-btn.m2-ghost{background:transparent;border-color:transparent}
.m2-btn.m2-sm{height:2.3em;padding:0 .85em;font-size:max(1.15em,10px);font-weight:500}
.m2 .is-press{scale:.95;filter:brightness(1.2)}
.m2.m2-still *,.m2.m2-still *::before,.m2.m2-still *::after{transition:none!important;animation:none!important}
/* states the scripts toggle; without them every board shows its final state */
.mo.m2 .is-off{display:none}
.m2 .m2-a,.m2 .is-a .m2-z{display:none}
.m2 .is-a .m2-a{display:inline}
.m2 .m2-ph{display:none;color:var(--m2-t3)}
.m2 .is-empty > .m2-ph{display:inline}
.m2 .is-empty > .m2-v{display:none}
.m2-pv .m2-ph{color:inherit}
.m2-x{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s var(--m2-ease),opacity .4s}
.m2-x > *{min-height:0;overflow:hidden}
.m2-x.is-shut{grid-template-rows:0fr;opacity:0}
.m2-spin{display:none;width:1.2em;height:1.2em;border-radius:50%;border:2px solid color-mix(in srgb,currentColor 28%,transparent);border-top-color:currentColor;animation:m2-spin .8s linear infinite}
@keyframes m2-spin{to{rotate:1turn}}
@keyframes m2-pop{from{opacity:0;translate:0 .6em;scale:.97}}
@keyframes m2-caret{50%{opacity:0}}
.m2 .is-typing.is-empty::before,.m2 .is-typing:not(.is-empty) > .m2-v::after{content:"";display:inline-block;flex:none;width:1px;height:1.15em;margin:0 1px;vertical-align:-.2em;background:var(--m2-t);animation:m2-caret 1s steps(1) infinite}

/* ---- 01 the page: the create-event form and its live preview ---- */
.m2-page .m2-b{display:grid;grid-template-columns:28em 24em;column-gap:2em;padding:0 2em}
.m2-form{position:relative;height:48em;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 1.6em,#000 calc(100% - 1.6em),transparent);mask-image:linear-gradient(transparent,#000 1.6em,#000 calc(100% - 1.6em),transparent)}
/* final: scrolled to the end of the form, as after filling it in */
.m2-fi{display:flex;flex-direction:column;gap:1.2em;padding:1.6em 0;translate:0 min(0px,calc(48em - 100%));transition:translate 1s var(--m2-ease)}
.m2-fi.is-top{translate:0 0}
.m2-page .m2-card{display:flex;flex-direction:column}
.m2-page .m2-ct{margin-bottom:.55em}
.m2-page .m2-l{margin-bottom:.5em}
.m2-page .m2-in + .m2-l{margin-top:1.1em}
.m2-in{display:flex;align-items:center;gap:.45em;height:2.6em;padding:0 .8em;border:1px solid var(--m2-li);border-radius:.46em;background:var(--m2-s);font-size:1.3em;color:var(--m2-t);white-space:nowrap;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.m2-in > span{overflow:hidden;text-overflow:ellipsis}
.m2-in.is-focus{border-color:var(--m2-a);box-shadow:0 0 0 .3em var(--m2-abg)}
.m2-in.is-dis{opacity:.55}
.m2-sel .m2-i{margin-left:auto;width:1em;height:1em;color:var(--m2-t3)}
.m2-in.m2-dt{font-size:max(1.2em,10px);height:2.817em;padding:0 .7em;gap:.4em}
.m2-dt .m2-is{width:1.15em;height:1.15em;color:var(--m2-t3)}
.m2-chips{display:flex;flex-wrap:wrap;gap:.6em}
.m2-chips span{font-size:max(1.15em,10px);line-height:1;padding:.5em .9em;border:1px solid var(--m2-li);border-radius:99em;color:var(--m2-t2);transition:background-color .3s,border-color .3s,color .3s}
.m2-chips span.is-on{background:var(--m2-abg);border-color:var(--m2-a);color:var(--m2-a2);font-weight:600}
.m2-row{display:grid;grid-template-columns:1fr 1fr;gap:1em}
.m2-row > div{display:flex;flex-direction:column;min-width:0}
.m2-aside{display:flex;flex-direction:column;gap:1.1em;padding-top:1.6em;min-width:0}
.m2-ah{display:flex;flex-direction:column;gap:.2em}
.m2-ah b{font-size:1.5em;font-weight:600;line-height:1.25}
.m2-ah span{font-size:1.25em;line-height:1.3;color:var(--m2-t2)}
.m2-pv{border:1px solid var(--m2-l);border-radius:1em;overflow:hidden;background:color-mix(in srgb,var(--m2-a) 16%,var(--m2-s))}
.m2-pv-img{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;height:17em;padding:1.6em;text-align:center;background:var(--m2-a);color:#fff;border-bottom:1px solid var(--m2-l)}
/* Ukrainian wraps two more lines in this card: the empty poster gives way and the footer tightens, so the footer stays
   on the board (phones set their own poster height) */
:where(:lang(uk)) .m2-pv-img{height:11em}
:lang(uk) .m2-pv-foot{gap:.7em}
:lang(uk) .m2-cta{padding:0 .75em}
.m2-pv-img b{font-size:1.6em;font-weight:600}
.m2-pv-img span{font-size:1.3em}
.m2-pv-b{display:flex;flex-direction:column;padding:1.6em 1.5em 1.5em}
.m2-pv-chips{display:flex;flex-wrap:wrap;gap:.5em;padding-bottom:1.2em}
.m2-pv-chips span{font-size:max(1.15em,10px);line-height:1.2;padding:.3em .85em;border:1px solid var(--m2-l);border-radius:99em;background:var(--m2-s);color:var(--m2-t2);animation:m2-pop .45s var(--m2-ease) both}
.m2-pv-name{font-size:2em;font-weight:800;letter-spacing:-.02em;line-height:1.12;margin-bottom:.6em;overflow-wrap:anywhere;color:var(--m2-t)}
.m2-pv-rows{display:flex;flex-direction:column;font-size:1.3em;color:var(--m2-t2);margin-bottom:.6em}
.m2-pv-rows p{padding-bottom:.55em}
.m2-pv-rows b{font-weight:400;color:var(--m2-t)}
.m2-pv-rows .m2-mono{font-size:max(.88em,10px);margin-left:.5em}
.m2-pv-foot{display:flex;align-items:center;gap:1em;padding-top:1.1em;border-top:1px solid var(--m2-l)}
.m2-from{display:flex;flex-direction:column;align-items:flex-start;gap:.25em}
.m2-from small{font-size:max(1.2em,10px);color:var(--m2-t2)}
.m2-unset{font-size:max(1.15em,10px);white-space:normal;padding:.1em .6em;border:1px dashed var(--m2-li);border-radius:.45em;color:var(--m2-t2)}
.m2-cta{margin-left:auto;display:inline-flex;align-items:center;height:2.9em;padding:0 .95em;border-radius:.46em;background:var(--m2-a);color:#fff;font-size:1.3em;font-weight:600;white-space:nowrap}

/* ---- 02 the poster: AI Studio's three concepts, then Poster Studio ---- */
.m2-poster .m2-b{height:51em}
.m2-sc{position:absolute;inset:0;transition:translate .75s var(--m2-ease),opacity .6s var(--m2-ease)}
.m2-ai{translate:-100% 0;opacity:0}
.m2-poster.is-ai .m2-ai{translate:0 0;opacity:1}
.m2-poster.is-ai .m2-ps{translate:100% 0;opacity:0}
.m2-ai-in{display:grid;grid-template-columns:20.5em 31.5em;gap:2em;align-items:start;padding:1.6em 2em;transition:translate .8s var(--m2-ease)}
.m2-ai-l{position:relative;display:flex;flex-direction:column;gap:1.2em;padding:1.6em;border:1px solid color-mix(in srgb,var(--m2-a) 25%,var(--m2-l));border-radius:1em;background:var(--m2-s2);overflow:hidden}
.m2-ai-l::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,color-mix(in srgb,var(--m2-a) 30%,transparent),transparent 55%),radial-gradient(circle at bottom left,color-mix(in srgb,var(--mo-haze) 20%,transparent),transparent 60%);opacity:.5;pointer-events:none}
.m2-ai-l > *{position:relative}
.m2-h{font-size:2em;font-weight:600;letter-spacing:-.015em;line-height:1.15}
.m2-sub{font-size:1.25em;line-height:1.45;color:var(--m2-t2);margin-top:-.5em}
.m2-brl{display:flex;justify-content:space-between;align-items:baseline;gap:.8em;margin-bottom:-.5em}
.m2-brl b{font-size:1.4em;font-weight:600}
.m2-brl .m2-mono{font-size:max(1.15em,10px);color:var(--m2-t2)}
.m2-brief{height:7.4em;overflow:hidden;padding:.85em 1em;border:1px solid var(--m2-l);border-radius:.46em;background:var(--m2-s);font-size:1.3em;line-height:1.5;color:var(--m2-t);transition:border-color .25s,box-shadow .25s}
.m2-brief.is-focus{border-color:transparent;box-shadow:0 0 0 2px var(--m2-a)}
.m2-refine{padding:.95em 1.1em;border:1px solid var(--m2-l);border-radius:.55em;font:700 max(1.1em,10px)/1.2 var(--mo-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--m2-t2)}
.m2-refine::before{content:"▸ "}
.m2-btns{display:flex;flex-wrap:wrap;align-items:center;gap:.8em;margin-top:.2em}
.m2-gen{display:inline-flex;align-items:center;gap:.5em;height:3.2em;padding:0 .9em;border-radius:.46em;background:var(--m2-a);color:#fff;font-size:max(1.2em,10px);font-weight:700;white-space:nowrap;transition:opacity .3s,scale .14s,filter .14s}
.m2-gen.is-dim{opacity:.6}
.m2-gen.is-a .m2-i{display:none}
.m2-gen.is-a .m2-spin{display:block}
.m2-pill{font:max(1.1em,10px)/1 var(--mo-mono);letter-spacing:.05em;padding:.55em .9em;border:1px solid var(--m2-l);border-radius:99em;background:var(--m2-s);color:var(--m2-t2)}
.m2-hint{font-size:max(1.2em,10px);line-height:1.4;color:var(--m2-t2)}
.m2-ai-l .m2-hint{margin-top:-.4em}
.m2-ai-r{display:flex;flex-direction:column;gap:1.3em;min-width:0}
.m2-rh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.2em 1em;padding-right:7.5em}
.m2-rh b{font-size:1.9em;font-weight:700;line-height:1.2}
.m2-rh > span{font-size:1.25em;color:var(--m2-t2)}
.m2-rh .m2-s0,.m2-rh .m2-s1,.m2-rh [data-s] .m2-s2{display:none}
.m2-rh [data-s="0"] .m2-s0,.m2-rh [data-s="1"] .m2-s1{display:inline}
.m2-empty{display:none;flex-direction:column;align-items:center;justify-content:center;gap:.5em;padding:4.4em 2em;text-align:center;border:1px dashed var(--m2-l2);border-radius:.55em;background:var(--m2-s2)}
.m2-empty.is-on{display:flex}
.m2-empty > span:not(.m2-ei){display:flex;flex-direction:column;gap:.3em;font-size:max(1.2em,10px);line-height:1.4;color:var(--m2-t2)}
.m2-empty > span.m2-a,.m2-empty.is-a > span.m2-z{display:none}
.m2-empty.is-a > span.m2-a{display:flex}
.m2-empty b{font-size:max(1.17em,10px);font-weight:600;color:var(--m2-t)}
.m2-ei{display:grid;place-items:center;width:3.6em;height:3.6em;margin-bottom:.5em;border-radius:50%;background:var(--m2-abg);color:var(--m2-a2)}
.m2-ei .m2-i{width:1.6em;height:1.6em}
.m2-empty.is-a .m2-ei .m2-i{display:none}
.m2-empty.is-a .m2-ei .m2-spin{display:block;width:1.6em;height:1.6em}
.m2-cc{display:flex;flex-direction:column;gap:.5em;padding:1em 1.3em;border:1px solid var(--m2-l);border-radius:.55em;background:var(--m2-s);animation:m2-pop .5s var(--m2-ease) both}
.m2-cc + .m2-cc{animation-delay:.1s}
.m2-cch{display:flex;justify-content:space-between;align-items:center;gap:.6em}
.m2-eb{font:700 max(1.1em,10px)/1 var(--mo-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--m2-t2);white-space:nowrap}
.m2-ail{display:inline-flex;align-items:center;gap:.35em;padding:.2em .65em;border:1px dashed var(--m2-li);border-radius:.4em;font-size:max(1.15em,10px);line-height:1.2;color:var(--m2-t2);white-space:nowrap}
.m2-ail .m2-i{width:1em;height:1em}
.m2-tag{padding:.3em .65em;border:1px solid var(--m2-l);border-radius:.35em;background:var(--m2-s2);font:700 max(1.05em,10px)/1 var(--mo-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--m2-t2)}
.m2-cn{font-size:1.65em;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.m2-cd{height:calc(3 * 1.5em + 1.2em + 2px);padding:.6em .8em;border:1px solid var(--m2-l);border-radius:.32em;background:var(--m2-s2);font-size:1.25em;line-height:1.5;color:var(--m2-t2);overflow:hidden}
.m2-cd.is-run > span::after{content:"";display:inline-block;width:.6em;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--m2-a)}
.m2-cap{padding-top:.6em;border-top:1px solid var(--m2-l);font-size:1.3em;font-weight:600;color:var(--m2-t2)}
.m2-cap::before{content:"▸ ";font-size:max(.8em,10px)}
.m2-sug{display:flex;flex-direction:column;padding:.7em 1em;border-radius:.55em;background:var(--m2-s2);font-size:max(1.2em,10px);line-height:1.4;color:var(--m2-t2)}
.m2-sug b{font-weight:700;color:var(--m2-t)}
.m2-use{margin-top:.2em}
.m2-ps{display:flex;flex-direction:column;background:var(--m2-s)}
.m2-psh{display:flex;justify-content:space-between;align-items:flex-end;gap:1.6em;padding:1.6em 2em 1.4em;border-bottom:1px solid var(--m2-l)}
.m2-pst{min-width:0}
.m2-pst p:first-child{display:flex;align-items:center;gap:.45em;font-size:1.9em;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.m2-pst .m2-i{color:var(--m2-a2)}
.m2-pss{margin-top:.35em;font-size:1.25em;line-height:1.4;color:var(--m2-t2)}
.m2-stp{display:flex;align-items:flex-start;flex:none;margin-top:3.1em}
.m2-stp > span{display:flex;flex-direction:column;align-items:center;gap:.55em;font:600 max(1.05em,10px)/1 var(--mo-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--m2-t)}
.m2-stp i{display:grid;place-items:center;width:2.5em;height:2.5em;border-radius:50%;border:2px solid var(--m2-l2);background:var(--m2-s);color:var(--m2-t3);font:700 max(1em,10px)/1 var(--mo-mono);font-style:normal;transition:background-color .3s,border-color .3s,color .3s,box-shadow .3s}
.m2-stp i .m2-i{width:1.15em;height:1.15em}
.m2-stp b{width:3.4em;height:2px;margin-top:1.25em;background:var(--m2-a);transition:background-color .3s}
/* final: Vibe done, Variants current */
.m2-st1 i{border-color:var(--m2-a);background:var(--m2-abg);color:var(--m2-a2)}
.m2-st2 i,.m2-poster.is-v1 .m2-st1 i{border-color:var(--m2-a);background:var(--m2-a);color:#fff;box-shadow:0 0 0 .3em var(--m2-abg)}
.m2-poster.is-v1 .m2-st2 i{border-color:var(--m2-l2);background:var(--m2-s);color:var(--m2-t3);box-shadow:none}
.m2-poster.is-v1 .m2-st2{color:var(--m2-t3)}
.m2-poster.is-v1 .m2-stp b{background:var(--m2-l2)}
.m2-psb{position:relative;flex:1;min-height:0}
.m2-pane{position:absolute;left:2em;right:2em;top:1.6em;transition:opacity .45s var(--m2-ease),translate .45s var(--m2-ease)}
.m2-vibes{opacity:0;translate:0 .8em}
.m2-poster.is-v1 .m2-vibes{opacity:1;translate:0 0}
.m2-poster.is-v1 .m2-vars{opacity:0;translate:0 .8em}
.m2-poster:not(.is-v1) .m2-vars{transition-delay:.2s}
.m2-pane .m2-ct{margin-bottom:.3em}
.m2-vg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2em;margin-top:1.1em}
.m2-vc{display:flex;flex-direction:column;border:1.5px solid var(--m2-l);border-radius:.6em;overflow:hidden;background:var(--m2-s2);transition:border-color .3s,box-shadow .3s}
.m2-vc.is-on{border-color:var(--m2-a);box-shadow:var(--m2-glow)}
.m2-vt{position:relative;display:block;aspect-ratio:4/5}
.m2-vt::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,6,13,.88),rgba(7,6,13,.34) 40%,rgba(7,6,13,0) 66%)}
.m2-vt b{position:absolute;z-index:1;left:.8em;right:.8em;bottom:.65em;font-size:1.4em;font-weight:700;letter-spacing:-.02em;line-height:1.12;color:#fff}
.m2-vt i{position:absolute;z-index:1;top:.7em;right:.7em;display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;background:var(--m2-a);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.45);opacity:0;scale:.4;transition:opacity .25s,scale .35s var(--m2-ease)}
.m2-vt i .m2-i{width:1.25em;height:1.25em}
.m2-vc.is-on .m2-vt i{opacity:1;scale:1}
.m2-vgn{padding:.95em .9em 1.1em;font:max(1.05em,10px)/1.4 var(--mo-mono);letter-spacing:.02em;color:var(--m2-t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m2-vh{display:flex;align-items:center;justify-content:space-between;gap:1em}
.m2-live{display:inline-flex;align-items:center;gap:.5em;padding:.35em .65em;border:1px solid color-mix(in srgb,var(--mo-green) 30%,transparent);border-radius:.35em;background:color-mix(in srgb,var(--mo-green) 15%,transparent);color:var(--mo-green);font:700 max(1.05em,10px)/1 var(--mo-mono);letter-spacing:.08em;text-transform:uppercase}
.m2-live i{width:.6em;height:.6em;border-radius:50%;background:currentColor}
.m2-vars.is-a .m2-live{border-color:color-mix(in srgb,var(--m2-a) 35%,transparent);background:var(--m2-abg);color:var(--m2-a2)}
.m2-pg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4em;margin-top:1.2em}
.m2-pc{display:flex;flex-direction:column;border:2px solid transparent;border-radius:.6em;overflow:hidden;background:var(--m2-s2);transition:border-color .3s,box-shadow .3s}
.m2-pc.is-sel{border-color:var(--m2-a);box-shadow:var(--m2-glow)}
.m2-art{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#060509;color:var(--mo-fg)}
.m2-art::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(11,10,20,.6),rgba(11,10,20,0) 26%,rgba(11,10,20,0) 40%,rgba(11,10,20,.94) 80%);transition:opacity .6s}
.m2-art > *{transition:opacity .6s}
/* pro.css sizes every .shot img like a screenshot; these photos fill their poster instead */
.mo.m2 .m2-photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;filter:grayscale(1) contrast(1.18) brightness(.88)}
/* object: the deck's platter; people: the DJ, both lifted above the title */
.mo.m2 .m2-art-o .m2-photo{object-position:0 50%;transform:scale(2);transform-origin:18% 100%}
.mo.m2 .m2-art-p .m2-photo{object-position:50% 75%;transform:scale(1.4);transform-origin:50% 100%}
.m2-art-t::before{content:"";position:absolute;left:1em;right:1em;top:38%;height:1px;background:rgba(244,239,231,.35);transition:opacity .6s}
.m2-pw{position:absolute;z-index:2;top:.9em;right:.9em;text-align:right}
.m2-pw b{display:block;font:800 1.65em/.92 var(--display);text-transform:uppercase}
.m2-pw small{display:block;margin-top:.3em;font:800 max(1.15em,10px)/1 var(--display);color:rgba(244,239,231,.9)}
.m2-pb{position:absolute;z-index:2;left:.9em;right:.9em;bottom:1em;display:grid;gap:.5em}
.m2-pb b{font:800 2.6em/.86 var(--display);text-transform:uppercase;text-wrap:balance}
.m2-art-t .m2-pb b{font-size:3.5em;letter-spacing:.01em}
.m2-pb small{font:600 max(1.02em,10px)/1.35 var(--text);letter-spacing:.12em;text-transform:uppercase;color:rgba(244,239,231,.9)}
.m2-art .m2-spin{position:absolute;inset:0;margin:auto;width:2.4em;height:2.4em;color:var(--m2-t2)}
.m2-vars.is-a .m2-art > :not(.m2-spin),.m2-vars.is-a .m2-art::before,.m2-vars.is-a .m2-art::after{opacity:0}
.m2-vars.is-a .m2-art{background:var(--m2-s2)}
.m2-vars.is-a .m2-art .m2-spin{display:block}
.m2-vars.is-a .m2-pf{visibility:hidden}
.m2-pc:nth-child(2) .m2-art > *,.m2-pc:nth-child(2) .m2-art::after{transition-delay:.12s}
.m2-pc:nth-child(3) .m2-art > *,.m2-pc:nth-child(3) .m2-art::after{transition-delay:.24s}
.m2-pf{flex:1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5em;padding:.75em .85em;border-top:1px solid var(--m2-l);background:var(--m2-s)}
.m2-pf > span:first-child{font:max(1.05em,10px)/1 var(--mo-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--m2-t2)}
.m2-pfa{display:flex;align-items:center;gap:.45em;margin-left:auto}
.m2-tagsel{padding:.3em .5em;border:1px solid color-mix(in srgb,var(--m2-a) 35%,transparent);border-radius:.3em;background:var(--m2-abg);color:var(--m2-a2);font:700 max(1.05em,10px)/1 var(--mo-mono);letter-spacing:.06em;text-transform:uppercase}
.m2-png{display:inline-flex;align-items:center;gap:.3em;padding:.35em .55em;border:1px solid var(--m2-l);border-radius:.45em;background:var(--m2-s2);font:max(1.05em,10px)/1 var(--mo-mono);letter-spacing:.06em;color:var(--m2-t2)}
.m2-png .m2-is{width:1.05em;height:1.05em}
.m2-psf{display:flex;justify-content:space-between;align-items:center;gap:1.4em;margin-top:auto;padding:1.2em 2em;border-top:1px solid var(--m2-l);background:var(--m2-s2)}
.m2-pfl{font:max(1.05em,10px)/1.2 var(--mo-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--m2-t2);white-space:nowrap}
.m2-pfb{display:flex;align-items:center;gap:.8em}
.m2-poster .m2-f1,.m2-poster.is-v1 .m2-f2{display:none}
.m2-poster.is-v1 .m2-pfb.m2-f1{display:flex}
.m2-poster.is-v1 .m2-pfl .m2-f1{display:inline}
.m2-poster.is-gen .m2-pfl{visibility:hidden}
.m2-poster.is-gen .m2-pfb.m2-f2 .m2-btn{opacity:.5}

/* ---- 03 tickets: capacity by tier, then the tiers ---- */
.m2-tix{--m2-tint:var(--mo-tint)}
.m2-tix .m2-b{display:flex;flex-direction:column;gap:1.3em;height:45.4em;padding:1.6em 2em}
.m2-t0{--m2-sh:var(--m2-tint)}
.m2-t1{--m2-sh:color-mix(in srgb,var(--m2-tint) 70%,var(--m2-s))}
.m2-t2{--m2-sh:color-mix(in srgb,var(--m2-tint) 45%,var(--m2-s))}
.m2-cbar{display:grid;gap:3px;height:2.8em;margin:1.1em 0 1em}
.m2-cbar > span{display:block;overflow:hidden;background:color-mix(in srgb,var(--m2-sh) 25%,var(--m2-s))}
.m2-cbar > span:first-child{border-radius:.6em 0 0 .6em}
.m2-cbar > span:last-child{border-radius:0 .6em .6em 0}
.m2-cbar i,.m2-grow i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--f,0));transition:transform 1.6s var(--m2-out)}
.m2-cbar i{background:var(--m2-sh)}
.m2-tix .m2-t1 [data-m2="fill"]{transition-delay:.12s}
.m2-tix .m2-t2 [data-m2="fill"]{transition-delay:.24s}
.m2-tix.is-zero [data-m2="fill"]{transform:scaleX(0)}
.m2-leg{display:grid;gap:3px;margin-bottom:1em;font-size:1.3em;color:var(--m2-t2)}
.m2-leg > span{display:flex;flex-direction:column;gap:.2em;min-width:0}
.m2-leg b{display:inline-flex;align-items:center;gap:.45em;font-weight:400;color:var(--m2-t);white-space:nowrap}
.m2-leg b i,.m2-tn b i{width:.62em;height:.62em;flex:none;border-radius:2px;background:var(--m2-sh)}
.m2-leg .m2-mono{font-size:max(.92em,10px)}
.m2-note{font-size:1.3em;color:var(--m2-t2)}
.m2-th{display:flex;justify-content:space-between;align-items:flex-start;gap:1em;margin-bottom:.5em}
.m2-th .m2-ct{display:flex;flex-direction:column;gap:.1em}
.m2-th .m2-ct > span{font-size:max(.93em,10px);font-weight:400;color:var(--m2-t2)}
.m2-tr{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1.4fr) 9.4em minmax(0,.3fr) auto;gap:1.3em;align-items:center;min-height:5.6em;padding:1em 0;border-top:1px solid var(--m2-l)}
.m2-tn{display:flex;flex-direction:column;gap:.3em;min-width:0}
.m2-tn b{display:inline-flex;align-items:center;gap:.5em;font-size:1.45em;font-weight:600;color:var(--m2-t);white-space:nowrap}
.m2-tn .m2-mono{font-size:1.25em;color:var(--m2-t2)}
.m2-sold{white-space:nowrap}
.m2-sold b{font-size:2.2em;font-weight:700;color:var(--m2-t)}
.m2-sold small{font-size:1.4em;font-weight:600;color:var(--m2-t2)}
.m2-grow{height:.6em;border-radius:99em;background:var(--m2-s2);overflow:hidden}
.m2-grow i{border-radius:inherit;background:var(--m2-tint)}
.m2-st{justify-self:start;padding:.3em .75em;border-radius:99em;background:color-mix(in srgb,var(--mo-green) 16%,transparent);color:var(--m2-t);font:700 max(1.1em,10px)/1.15 var(--mo-mono);text-transform:uppercase;white-space:nowrap;transition:background-color .35s}
.m2-st .m2-out,.m2-st.is-out .m2-left{display:none}
.m2-st.is-out .m2-out{display:inline;animation:m2-pop .45s var(--m2-ease) both}
.m2-st.is-out{background:color-mix(in srgb,var(--m2-tint) 24%,transparent)}
.m2-st b{font-weight:700}
.m2-act{display:flex;align-items:center;gap:.4em}
.m2-del{display:grid;place-items:center;width:2.6em;height:2.6em;color:var(--mo-red)}
.m2-del .m2-is{width:1.4em;height:1.4em}

/* ---- phones: each board reflows into one column (desktop keeps the drawing, only smaller) ---- */
@media (max-width:959.98px){@container (max-width:499.98px){
  .m2-b{font-size:clamp(10px,100cqw / 31,12px)}
  .m2-page .m2-b{display:flex;flex-direction:column;gap:1.4em;height:43.6em;padding:1.5em 1.4em}
  .m2-form{flex:none;height:5.4em;-webkit-mask-image:none;mask-image:none}
  .m2-fi{gap:1.2em;padding:0;translate:0 min(0px,calc(5.4em - 100%))}
  .m2-fi.is-mid{translate:0 -6.4em}
  .m2-page .m2-card{display:contents}
  .m2-page .m2-ct,.m2-page .m2-c2{display:none}
  .m2-page .m2-card > *{flex:none}
  .m2-aside{padding-top:0;gap:1em}
  .m2-pv-img{height:6.6em;padding:1em;gap:.25em}
  .m2-pv-img b{font-size:1.4em}
  .m2-pv-img span{font-size:max(1.2em,10px)}
  .m2-pv-b{padding:1.3em 1.4em 1.4em}
  .m2-pv-chips{padding-bottom:1em}
  .m2-pv-name{font-size:2.1em;margin-bottom:.5em}
  .m2-pv-rows{font-size:1.25em;margin-bottom:.5em}
  .m2-pv-foot{padding-top:1em}

  .m2-poster .m2-b{height:45em}
  .m2-ai-in{grid-template-columns:minmax(0,1fr);gap:1.6em;padding:1.4em}
  .m2-ai-l{padding:1.5em;gap:1.1em}
  .m2-h{font-size:1.8em}
  .m2-brief{height:5.6em}
  .m2-cc{padding:1.2em}
  .m2-cch{flex-wrap:wrap}
  .m2-psh{flex-direction:column;align-items:stretch;gap:1.1em;padding:1.4em 1.4em 1.2em}
  .m2-pst p:first-child{font-size:1.7em}
  .m2-pss{font-size:max(1.15em,10px)}
  .m2-stp{margin-top:0}
  .m2-stp b{flex:1;max-width:6em}
  .m2-pane{left:1.4em;right:1.4em;top:1.2em}
  .m2-vg{grid-template-columns:repeat(3,minmax(0,1fr));gap:.8em;margin-top:.9em}
  .m2-vc:nth-child(4){display:none}
  .m2-vt b{font-size:max(1.2em,10px);left:.6em;right:.6em;bottom:.5em}
  .m2-vgn{font-size:max(1em,10px);padding:.7em .6em .8em}
  .m2-pane .m2-hint{font-size:max(1.1em,10px)}
  .m2-pg{gap:.8em;margin-top:1em}
  .m2-pw{top:.6em;right:.6em}
  .m2-pw b{font-size:max(1.2em,10px)}
  .m2-pw small{font-size:max(1em,10px)}
  .m2-pb{left:.6em;right:.6em;bottom:.7em}
  .m2-pb b,.m2-art-t .m2-pb b{font-size:1.8em}
  .m2-pb small,.m2-png{display:none}
  .m2-pf{padding:.6em}
  .m2-pf > span:first-child{font-size:max(1em,10px);letter-spacing:0}
  .m2-pfa{margin-left:0}
  .m2-tagsel{font-size:max(1em,10px)}
  .m2-psf{flex-direction:column;align-items:stretch;gap:.7em;padding:1em 1.4em}
  .m2-pfb{justify-content:flex-end;gap:.5em}
  /* Ukrainian button labels run longer: on phones the studio footer keeps the buttons one row can hold */
  :lang(uk) .m2-psf .m2-ghost{display:none}
  /* and the titles in the Example chip's corner wrap before it */
  :lang(uk) .m2-capc .m2-ct,:lang(uk) .m2-pst > p:first-child{padding-right:7em}
  .m2-psf .m2-btn{font-size:max(1.05em,10px);padding:0 .75em}

  .m2-tix .m2-b{height:auto;gap:1.1em;padding:1.4em}
  .m2-tix .m2-card{padding:1.2em}
  .m2-cbar{height:2.4em;margin:.9em 0 .8em}
  .m2-leg{font-size:max(1.15em,10px)}
  .m2-note{font-size:max(1.15em,10px)}
  .m2-tr{grid-template-columns:minmax(0,1fr) auto;gap:.7em 1em;min-height:0;padding:.9em 0}
  .m2-cl,.m2-act{display:none}
  .m2-th .m2-btn{font-size:max(1.15em,10px)}
}}
/* small phones, Ukrainian: the builder board grows for the longer preview and starts below the Example chip; the narrowest
   keep the studio's main button, let the preview's button take two lines and put Add tier under its title */
@media (max-width:959.98px){@container (max-width:299.98px){:lang(uk) .m2-page .m2-b{height:48.5em;padding-top:3.5em}}}
@media (max-width:959.98px){@container (max-width:269.98px){
  :lang(uk) .m2-psf .m2-btn:not(.m2-pri){display:none}
  :lang(uk) .m2-cta{white-space:normal;text-align:center;line-height:1.15}
  :lang(uk) .m2-th{flex-wrap:wrap}
}}
/* === end M2 === */



/* === M3: door and crowd === */

/* ---- 04 The door: the phone opens the scanner from the dashboard's Tonight view (t.imin.wtf), and
   the night's Checked in card on the dashboard ticks with each valid scan. The markup is the final state. */
.m-door{container-type:inline-size}
.mo-door{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}
.m-door .shot--phone{position:relative;flex:none}
@media (min-width:960px){.m-door .shot--phone{height:min(500px,calc(var(--shot-max) - 92px))}}
@media (min-width:960px){@container (min-width:520px){.m-door .shot--phone{height:min(500px,var(--shot-max))}}}

/* the phone's screen is drawn at 265 units wide; one unit is one pixel at the frame's full size */
.mo-door-ph{height:100%;--u:calc(100cqw / 265);background:#07060d;isolation:isolate}
.mo-door-ph .mo-example{z-index:6;top:calc(50 * var(--u));right:calc(10 * var(--u))}
.mo-door-scr{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden}
.mo-door-ph svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mo-m3-tap{position:absolute;left:50%;top:50%;width:calc(34 * var(--u));height:calc(34 * var(--u));margin:calc(-17 * var(--u)) 0 0 calc(-17 * var(--u));border-radius:50%;background:rgba(244,239,231,.75);opacity:0;pointer-events:none}

/* dashboard, dark theme, phone width */
.mo-tonight{background:var(--mo-bg);--tint:var(--mo-tint);visibility:hidden}
.mo-tonight-top{display:flex;align-items:center;gap:calc(10 * var(--u));flex:none;height:calc(40 * var(--u));padding:0 calc(12 * var(--u));border-bottom:1px solid var(--mo-line)}
.mo-tonight-ib{display:grid;place-items:center;width:calc(24 * var(--u));height:calc(24 * var(--u));border:1px solid var(--mo-line);border-radius:4px;background:var(--mo-panel)}
.mo-tonight-ib svg{width:calc(13 * var(--u));height:calc(13 * var(--u))}
.mo-door-ph .mo-tonight-logo{height:calc(19 * var(--u));width:auto;stroke:none}
.mo-tonight-bell{margin-left:auto;width:calc(16 * var(--u));height:calc(16 * var(--u));color:var(--mo-fg-2)}
.mo-tonight-main{flex:1;min-height:0;display:flex;flex-direction:column;gap:calc(10 * var(--u));padding:calc(12 * var(--u)) calc(12 * var(--u)) 0}
.mo-tonight-h{font-size:calc(20 * var(--u));font-weight:700;letter-spacing:-.015em;line-height:1.1}
.mo-tonight-sub{margin-top:calc(-7 * var(--u));font-size:max(10px,calc(11.5 * var(--u)));color:var(--mo-fg-2)}
.mo-tonight-hero{display:grid;grid-template-columns:minmax(0,1fr) calc(60 * var(--u));gap:calc(10 * var(--u));padding:calc(12 * var(--u));border:1px solid var(--mo-line);border-radius:10px;background:#0f1424;background:color-mix(in srgb,var(--tint) 13%,var(--mo-bg))}
.mo-tonight-hb{display:flex;flex-direction:column;min-width:0}
.mo-tonight-eye{display:flex;align-items:center;gap:calc(6 * var(--u));font-size:max(10px,calc(10.5 * var(--u)));font-weight:600;color:var(--mo-fg-2)}
.mo-tonight-dot{width:calc(7 * var(--u));height:calc(7 * var(--u));border-radius:50%;background:var(--mo-green);box-shadow:0 0 0 calc(3 * var(--u)) rgba(22,184,119,.18)}
.mo-tonight-name{margin-top:calc(6 * var(--u));font-size:calc(15 * var(--u));font-weight:700;line-height:1.15}
.mo-tonight-meta{margin-top:calc(4 * var(--u));font-size:max(10px,calc(10 * var(--u)));line-height:1.35;color:var(--mo-fg-2)}
.mo-tonight-fl{margin-top:calc(10 * var(--u));font-size:max(10px,calc(10.5 * var(--u)));color:var(--mo-fg-2)}
.mo-tonight-fv{margin-top:calc(2 * var(--u));font-size:calc(27 * var(--u));font-weight:700;letter-spacing:-.04em;line-height:1.05}
.mo-tonight-fs{margin-top:calc(2 * var(--u));font-size:max(10px,calc(10 * var(--u)));color:var(--mo-fg-2)}
.mo-tonight-bar{display:block;height:calc(5 * var(--u));margin-top:calc(7 * var(--u));border-radius:9px;background:var(--mo-panel-2);overflow:hidden}
.mo-tonight-bar i{display:block;height:100%;border-radius:inherit;background:var(--tint);transform-origin:0 50%;transform:scaleX(.7)}
.mo-tonight-poster{align-self:start;aspect-ratio:3/4;border-radius:6px;background:var(--tint) url(/assets/img/photos/p-dj-540.webp) 58% 40%/cover}
.mo-tonight-acts{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:calc(6 * var(--u))}
.mo-tonight-acts span,.mo-tonight-pa span{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--mo-line-2);border-radius:6px;font-weight:600;white-space:nowrap}
.mo-tonight-acts span{min-height:calc(24 * var(--u));padding:0 calc(8 * var(--u));font-size:max(10px,calc(10 * var(--u)))}
.mo-tonight-acts .is-fill,.mo-tonight-pa .is-fill{border-color:var(--mo-blue);background:var(--mo-blue);color:#fff}
.mo-tonight-pa{display:flex;gap:calc(8 * var(--u))}
.mo-tonight-pa span{position:relative;flex:1;min-height:calc(34 * var(--u));padding:0 calc(6 * var(--u));background:var(--mo-panel);font-size:max(10px,calc(11.5 * var(--u)))}
.mo-tonight-pa .is-fill{flex:1.25}
.mo-tonight-tabs{display:flex;flex:none;height:calc(50 * var(--u));margin-top:auto;border-top:1px solid var(--mo-line);background:var(--mo-bg)}
.mo-tonight-tabs > span{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2 * var(--u));font-size:max(10px,calc(9.5 * var(--u)));font-weight:500;color:var(--mo-fg-3);white-space:nowrap;overflow:hidden}
.mo-tonight-tabs > .is-on{color:var(--mo-fg)}
.mo-tonight-tabs svg{width:calc(16 * var(--u));height:calc(16 * var(--u))}
.mo-tonight-plus i{display:grid;place-items:center;width:calc(34 * var(--u));height:calc(34 * var(--u));border-radius:calc(11 * var(--u));background:var(--mo-blue);color:#fff}

/* the door scanner: camera, finder, the guest's ticket, then a full-screen verdict */
.mo-gate{background:#000;color:#fff}
.mo-gate-cam{position:absolute;inset:-6%;background:#120d1f url(/assets/img/photos/people-club.jpg) 46% 40%/cover;filter:blur(3px) brightness(.4) saturate(.8)}
.mo-gate-find{position:absolute;left:15%;top:50%;width:70%;aspect-ratio:1;margin-top:-35%;border:2px dashed rgba(239,68,68,.4);border-radius:8px}
.mo-gate-find i{position:absolute;width:15%;height:15%;border:calc(3.5 * var(--u)) solid #ef4444}
.mo-gate-find i:nth-child(1){top:0;left:0;border-right-color:transparent;border-bottom-color:transparent;border-top-left-radius:8px}
.mo-gate-find i:nth-child(2){top:0;right:0;border-left-color:transparent;border-bottom-color:transparent;border-top-right-radius:8px}
.mo-gate-find i:nth-child(3){bottom:0;left:0;border-right-color:transparent;border-top-color:transparent;border-bottom-left-radius:8px}
.mo-gate-find i:nth-child(4){bottom:0;right:0;border-left-color:transparent;border-top-color:transparent;border-bottom-right-radius:8px}
.mo-gate-tix{position:absolute;left:50%;top:50%;width:44%;margin:-22% 0 0 -22%;padding:calc(7 * var(--u));border-radius:calc(12 * var(--u));background:#1b1a22;box-shadow:0 12px 30px -8px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.08);rotate:-3deg}
.mo-door-ph .mo-gate-tix svg{display:block;width:100%;height:auto;fill:#0b0a14;stroke:none;border-radius:calc(4 * var(--u))}
.mo-gate-tix [data-door-qr]{visibility:hidden}
.mo-gate-tix [data-door-qr="admit"]{visibility:visible}
.mo-gate-head{position:absolute;inset:0 0 auto;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:calc(4 * var(--u));min-height:calc(42 * var(--u));padding:calc(6 * var(--u)) calc(10 * var(--u));background:rgba(0,0,0,.6);font-size:max(10px,calc(10.5 * var(--u)));font-weight:500;white-space:nowrap}
.mo-gate-head > span:nth-child(2){font-size:max(10px,calc(9.5 * var(--u)));font-weight:400;color:rgba(255,255,255,.8)}
.mo-gate-head b{font-weight:400}
.mo-gate-chk{position:absolute;left:50%;bottom:calc(22 * var(--u));z-index:2;translate:-50% 0;padding:calc(6 * var(--u)) calc(12 * var(--u));border-radius:999px;background:rgba(0,0,0,.75);font-size:max(10px,calc(11 * var(--u)));font-weight:500;white-space:nowrap;visibility:hidden}
.mo-gate-v{position:absolute;inset:-2px;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 calc(14 * var(--u)) calc(18 * var(--u));color:#000;text-align:center;visibility:hidden}
.mo-gate-v.is-admit{background:#2DD4A0;visibility:visible}
.mo-gate-v.is-check{background:#FBBF24}
.mo-gate-v.is-stop{background:#EF5B5B}
.mo-gate-v b{display:grid;place-items:center;height:calc(132 * var(--u));font-size:calc(108 * var(--u));font-weight:900;line-height:1}
.mo-door-ph .mo-gate-v svg{width:calc(108 * var(--u));height:calc(108 * var(--u));stroke-width:3.4}
.mo-gate-v strong{margin-top:calc(2 * var(--u));font-size:calc(28 * var(--u));font-weight:800;letter-spacing:-.025em;line-height:1.05}
.mo-gate-v span{margin-top:calc(10 * var(--u));font-size:max(10px,calc(13.5 * var(--u)));font-weight:500}

/* the night's Overview in the dashboard: one key card */
.mo-door .mo-door-card{position:relative;z-index:2;width:min(220px,86%);margin-top:-16px;padding:12px 14px 13px;border:1px solid var(--mo-line-2);border-radius:10px;background:var(--mo-panel);box-shadow:0 26px 50px -22px rgba(0,0,0,.95)}
.mo-door-card-l{font-size:12px;color:var(--mo-fg-2)}
.mo-door-card-v{display:flex;align-items:baseline;gap:9px;margin-top:5px}
.mo-door-tick{display:inline-grid;overflow:hidden;font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1}
.mo-door-tick > *{grid-area:1 / 1}
.mo-door-tick b{font-weight:700}
.mo-door-card-v > span:last-child{font-size:12px;color:var(--mo-fg-2)}
.mo-door-card-s{margin-top:7px;font-size:12px;line-height:1.35;color:var(--mo-fg-2)}
/* a wide column: the card sits beside the phone and overlaps its edge, like the hero's poster */
@container (min-width:520px){
  .mo-door{flex-direction:row;justify-content:center;align-items:flex-end}
  .mo-door .mo-door-card{order:-1;width:196px;margin:0 -22px 44px 0}
}

/* ---- 05 Your crowd: Audience › Overview, then Start a campaign → the campaign's review step.
   Both screens share one grid cell, so the window takes the taller one's height. The markup is the final state. */
.m-crowd .shot{width:100%;overflow:hidden}
.mo-crowd{display:flex;flex-direction:column;font-size:12px}
@media (min-width:960px){.mo-crowd{max-height:calc(var(--shot-max) - 2px)}}
.mo-crowd svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mo-crowd-bar{display:flex;align-items:center;gap:10px;flex:none;height:34px;padding:0 106px 0 12px;border-bottom:1px solid var(--mo-line)}
.mo-crowd-dots{display:flex;gap:5px}
.mo-crowd-dots i{width:8px;height:8px;border-radius:50%;background:var(--mo-line-2)}
.mo-crowd-url{position:relative;flex:1;min-width:0;max-width:320px;height:20px;border-radius:4px;background:rgba(244,239,231,.06);font-size:11px;color:var(--mo-fg-2)}
.mo-crowd-url > span{position:absolute;inset:0;padding:0 9px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo-crowd-url > [data-crowd-url="aud"]{visibility:hidden}
.mo-crowd > .mo-example{top:6px}
.mo-crowd-stage{display:grid;flex:1;min-height:0}
.mo-crowd-stage > div{grid-area:1 / 1;min-width:0;padding:16px 18px 18px}
.mo-aud{visibility:hidden}
.mo-crowd .mo-m3-tap{width:30px;height:30px;margin:-15px 0 0 -15px}

.mo-aud-h{font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.15}
.mo-aud-sub{margin-top:3px;color:var(--mo-fg-2)}
.mo-crowd-cta{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border-radius:6px;background:var(--mo-blue);color:#fff;font-weight:600;white-space:nowrap}
.mo-crowd-cta svg{width:13px;height:13px}
.mo-aud-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.mo-aud-tabs{display:flex;gap:16px;margin-top:12px;border-bottom:1px solid var(--mo-line);white-space:nowrap;overflow:hidden;color:var(--mo-fg-2);font-weight:500;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.mo-aud-tabs span{padding:7px 0 8px}
.mo-aud-tabs .is-on{color:var(--mo-fg);box-shadow:inset 0 -2px var(--mo-blue)}
.mo-aud-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.mo-aud-stat{display:flex;flex-direction:column;gap:5px;min-width:0;padding:10px 12px;border:1px solid var(--mo-line);border-radius:10px;background:var(--mo-panel)}
.mo-aud-stat.is-accent{border-color:var(--mo-blue)}
.mo-aud-stat-l{color:var(--mo-fg-2);line-height:1.25}
.mo-aud-stat-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 7px}
.mo-aud-stat-v b{font-size:26px;font-weight:700;letter-spacing:-.035em;line-height:1}
.mo-aud-stat-v small{font-size:11px;color:var(--mo-fg-2)}
.mo-aud-stat-s{font-size:11px;line-height:1.35;color:var(--mo-fg-2)}
.mo-aud-mem{margin-top:12px;padding:10px 12px 4px;border:1px solid var(--mo-line);border-radius:10px;background:var(--mo-panel)}
.mo-aud-mem-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px;color:var(--mo-fg-2)}
.mo-aud-mem-h > span:first-child{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px}
.mo-aud-mem-h b{font-weight:600;color:var(--mo-fg)}
.mo-aud-link{color:var(--mo-haze);font-weight:600;white-space:nowrap}
.mo-aud-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.35fr) minmax(0,.95fr);gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--mo-line);white-space:nowrap}
.mo-aud-row > *{overflow:hidden;text-overflow:ellipsis}
.mo-aud-row.is-head{border-top:0;color:var(--mo-fg-2);font-weight:500}
.mo-aud-row b{font-weight:600}
.mo-aud-row > :nth-child(3){color:var(--mo-fg-2)}
.mo-aud-row > :last-child{justify-self:start;margin-left:-6px;padding:1px 6px;border-radius:999px}

/* the campaign composer, review step */
.mo-camp-top{display:flex;align-items:center;gap:14px;min-width:0}
.mo-camp-back{flex:none;font-size:11px;color:var(--mo-fg-3)}
.mo-camp-top b{min-width:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mo-camp-body{display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;margin-top:12px}
.mo-camp-rail{display:flex;flex-direction:column;gap:9px;min-width:0}
.mo-camp-step{display:flex;align-items:flex-start;gap:8px;color:var(--mo-fg-2)}
.mo-camp-step i{flex:none;display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--mo-line-2);border-radius:50%;font-size:11px;font-style:normal;font-weight:700}
.mo-camp-step.is-done i{border-color:var(--mo-green);color:var(--mo-green)}
.mo-camp-step.is-on{color:var(--mo-fg)}
.mo-camp-step.is-on i{border-color:var(--mo-blue);background:var(--mo-blue);color:#fff}
.mo-camp-step span{display:flex;flex-direction:column;font-weight:600;line-height:1.25}
.mo-camp-step small{font-size:10.5px;font-weight:400;color:var(--mo-fg-3)}
.mo-camp-rail-l{margin-top:6px;padding-top:10px;border-top:1px solid var(--mo-line);font:600 10px/1.2 var(--mo-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mo-fg-3)}
.mo-camp-chan{display:inline-flex;padding:2px 8px;border:1px solid rgba(61,99,255,.5);border-radius:999px;background:rgba(61,99,255,.16);color:#AEBBFF;font-size:11px;font-weight:600}
.mo-camp-pane{display:flex;flex-direction:column;gap:9px;min-width:0}
.mo-camp-eyebrow{font:600 10px/1.2 var(--mo-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mo-fg-3)}
.mo-camp-title{margin-top:-5px;font-size:17px;font-weight:600;letter-spacing:-.015em}
.mo-camp-card{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--mo-line);border-radius:10px;background:var(--mo-panel)}
.mo-camp-card-t{font-weight:600}
.mo-camp-def{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px}
.mo-camp-def > span{color:var(--mo-fg-2)}
.mo-camp-def b{min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mo-camp-sg{display:flex;align-items:center;gap:14px;margin-top:2px;padding:9px 12px;border:1px solid var(--mo-line);border-radius:6px;background:var(--mo-panel-2)}
.mo-camp-sg-big{display:flex;flex-direction:column;gap:3px;padding-right:14px;border-right:1px solid var(--mo-line)}
.mo-camp-sg-big b{font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1}
.mo-camp-sg-big small{font:700 10px/1.2 var(--mo-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mo-fg-3);white-space:nowrap}
.mo-camp-sg-meta{min-width:0;color:var(--mo-fg-2)}
.mo-camp-sg-meta b{font-family:var(--mo-mono);color:#FBBF24}
.mo-camp-sg-row{display:flex;align-items:center;gap:8px;padding:6px 9px;border:1px solid var(--mo-line);border-radius:4px;background:var(--mo-panel-2)}
.mo-camp-sg-chip{display:inline-flex;align-items:center;gap:4px;flex:none;padding:2px 7px;border:1px solid rgba(169,162,189,.38);border-radius:999px;background:rgba(169,162,189,.15);color:var(--mo-fg-2);font-size:10.5px;font-weight:600}
.mo-camp-sg-chip svg{width:11px;height:11px}
.mo-camp-sg-d{flex:1;min-width:0;font-size:11px;color:var(--mo-fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mo-camp-sg-row > b{font-family:var(--mo-mono)}
.mo-camp-radio{display:flex;align-items:center;gap:8px}
.mo-camp-radio i{width:13px;height:13px;border:1.5px solid var(--mo-line-2);border-radius:50%}
.mo-camp-radio.is-on i{border:4px solid var(--mo-blue)}
.mo-camp-quiet{display:flex;gap:8px;align-items:flex-start;margin-top:2px;padding:7px 9px;border:1px solid var(--mo-line);border-radius:6px;background:var(--mo-panel-2);font-size:11px;line-height:1.45;color:var(--mo-fg-2)}
.mo-camp-quiet svg{width:13px;height:13px;margin-top:1px}
.mo-camp-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:9px;border-top:1px solid var(--mo-line)}
.mo-camp-ghost{padding:6px 4px;color:var(--mo-fg-2);font-weight:600}
.mo-camp-send{box-shadow:0 0 0 4px rgba(61,99,255,.22)}

/* the window narrows with the page: the step rail goes first, then the columns that don't fit */
@container (max-width:560px){
  .mo-camp-body{grid-template-columns:minmax(0,1fr)}
  .mo-camp-rail{display:none}
  .mo-aud-row{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)}
  .mo-aud-row > :nth-child(3){display:none}
}
@container (max-width:420px){
  .mo-crowd-stage > div{padding:14px 14px 16px}
  .mo-aud-head{flex-direction:column;gap:10px}
  .mo-aud-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mo-aud-stats > :last-child{grid-column:1 / -1}
  .mo-aud-row{grid-template-columns:minmax(0,1fr) auto}
  .mo-aud-row > :nth-child(2){display:none}
  .mo-camp-sg{flex-direction:column;align-items:stretch;gap:8px}
  .mo-camp-sg-big{flex-direction:row;align-items:baseline;gap:8px;padding-right:0;border-right:0}
  .mo-camp-sg-meta{padding-top:7px;border-top:1px solid var(--mo-line)}
  .mo-camp-sg-row{flex-wrap:wrap}
  .mo-camp-sg-row > b{margin-left:auto}
  .mo-camp-sg-d{flex-basis:100%;order:3;white-space:normal}
  .mo-camp-def{grid-template-columns:72px minmax(0,1fr)}
}
/* the sticky card caps the window at --shot-max: shorter screens drop the rows that repeat or can go first */
@media (min-width:960px) and (max-height:900px){
  .mo-aud-sub,.mo-camp-eyebrow,.mo-camp-def.is-will{display:none}
}
@media (min-width:960px) and (max-height:800px){
  .mo-camp-rail,.mo-camp-card-t,.mo-aud-stat-s,.mo-aud-row:last-child,.mo-camp-radio:not(.is-on){display:none}
  .mo-camp-body{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:960px) and (max-height:720px){
  .mo-camp-def.is-aud,.mo-aud-row:nth-last-child(2){display:none}
  .mo-crowd-stage > div{padding:12px 16px 14px}
  .mo-camp-body{margin-top:8px}
}
@media (min-width:960px) and (max-height:660px){
  .mo-camp-def.is-subject,.mo-aud-row:nth-last-child(3){display:none}
  .mo-camp-pane{gap:7px}
  .mo-camp-foot{padding-top:6px}
  .mo-crowd-stage > div{padding:10px 16px 10px}
}

/* === end M3 === */