/* ============================================================
   Go Events Kenya — ticketing solutions
   White surfaces, near-black type, orange for anything you act on.
   Green and red survive in one place only: the state of a ticket or
   a payment, where the colour is the meaning rather than decoration.
   ============================================================ */

:root{
  /* surfaces, lightest first */
  --bg:#ffffff;
  --bg-2:#faf6f3;          /* alternating sections, a shade warmer than the page */
  --card:#ffffff;          /* panels, cards */
  --card-2:#f6f2ef;        /* inputs, chips, hovers */
  --line:#e9e3de;
  --line-2:#d8d0c9;

  /* type */
  --ink:#17171b;           /* headings and anything that has to shout */
  --text:#2c2c33;
  --text-2:#44444e;
  --muted:#5b5b66;
  --faint:#6b6b76;

  /* orange does the work: every button, link and highlight */
  --orange:#f26a1b;        /* the brand fill — dark type sits on it */
  --orange-ink:#c2470a;    /* orange as text, dark enough to read on white */
  --orange-deep:#c2470a;
  --orange-soft:#fff1e8;
  --on-orange:#17171b;     /* what goes on top of a bright orange fill */

  /* state, not decoration */
  --green:#0f7a3a;
  --green-deep:#0b5c2d;
  --green-soft:#e9f7ee;
  --red:#c62828;
  --red-deep:#a81f1f;
  --red-soft:#fdeaea;
  --amber:#96610a;
  --amber-soft:#fff5e3;

  --radius:16px;
  --radius-sm:11px;
  --shadow-sm:0 1px 2px rgba(23,23,27,.07);
  --shadow:0 14px 34px -16px rgba(23,23,27,.22), 0 2px 6px rgba(23,23,27,.05);
  --shadow-lg:0 34px 70px -26px rgba(23,23,27,.3);
  --glow:0 12px 30px -12px rgba(242,106,27,.55);

  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --display:'Plus Jakarta Sans', var(--sans);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.025em;line-height:1.15;margin:0;color:var(--ink)}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.wrap-sm{max-width:760px;margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.tiny{font-size:.78rem}
.center{text-align:center}
.hidden{display:none !important}
.mono,.code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}

::selection{background:rgba(242,106,27,.3);color:var(--ink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:.94rem;line-height:1;
  padding:13px 20px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
/* a faded orange reads as a broken button; an off button should look off */
.btn-primary:disabled{
  background:var(--card-2);color:var(--faint);box-shadow:none;opacity:1;
  border:1px solid var(--line);
}
/* The main action is white on black — the sharpest thing on the page, and it keeps
   red and green free to mean something. */
.btn-primary{background:var(--orange);color:var(--on-orange);box-shadow:var(--glow)}
.btn-primary:hover:not(:disabled){background:#e05f12;box-shadow:0 16px 34px -12px rgba(242,106,27,.6)}
.btn-white{background:var(--ink);color:#fff}
.btn-white:hover:not(:disabled){background:#000}
.btn-soft{background:var(--card-2);color:var(--text);border-color:var(--line)}
.btn-soft:hover:not(:disabled){background:var(--card-2);border-color:var(--line-2)}
.btn-green{background:var(--green-deep);color:#fff;box-shadow:0 12px 30px -12px rgba(11,92,45,.5)}
.btn-green:hover:not(:disabled){background:#0c6631}
.btn-red{background:var(--red-deep);color:#fff;box-shadow:0 12px 30px -12px rgba(168,31,31,.5)}
.btn-red:hover:not(:disabled){background:#b9171e}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover:not(:disabled){background:var(--card-2)}
.btn-danger{background:var(--red-soft);color:var(--red);border-color:rgba(198,40,40,.32)}
.btn-danger:hover:not(:disabled){background:#fbdcdc}
.btn-sm{padding:9px 14px;font-size:.84rem}
.btn-lg{padding:16px 28px;font-size:1rem}
.btn-block{width:100%}

/* ---------- site header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex;align-items:center;gap:26px;height:92px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.logo img{height:62px;width:auto}
.nav{display:flex;align-items:center;gap:24px;margin-left:auto}
.nav a{text-decoration:none;font-size:.92rem;font-weight:500;color:var(--muted)}
.nav a:hover{color:var(--ink)}
.nav a.btn{font-size:.88rem;padding:10px 18px;font-weight:600}
.nav a.btn-primary,.nav a.btn-primary:hover{color:var(--on-orange)}
.nav a.btn-red,.nav a.btn-red:hover{color:#fff}
.nav a.btn-soft,.nav a.btn-soft:hover,.nav a.btn-ghost,.nav a.btn-ghost:hover{color:var(--text)}
@media(max-width:860px){ .nav .hide-sm{display:none} .site-head .wrap{gap:14px;height:74px} .logo img{height:46px} }

/* ---------- hero ---------- */
/* No decorative washes. A ticketing product is trusted with money, and a
   clean white banner says that better than a coloured glow does. */
.hero{position:relative;padding:80px 0 72px;border-bottom:1px solid var(--line)}
.hero .wrap{position:relative}
.hero-grid{display:grid;gap:56px;grid-template-columns:1.05fr .95fr;align-items:center}
@media(max-width:940px){ .hero-grid{grid-template-columns:1fr;gap:44px} .hero{padding:52px 0 52px} }

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;background:var(--orange-soft);color:var(--orange-ink);
  border:1px solid rgba(47,211,106,.32);border-radius:999px;padding:7px 15px 7px 8px;
  font-size:.8rem;font-weight:600;margin-bottom:22px;
}
.eyebrow b{background:var(--orange-deep);color:#fff;border-radius:999px;padding:3px 9px;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase}
h1.display{font-size:clamp(2.4rem,5.4vw,4.1rem);letter-spacing:-.04em;margin-bottom:20px}
h1.display .hl{color:var(--orange-ink);white-space:nowrap}
.lede{font-size:1.14rem;color:var(--muted);max-width:30em;margin-bottom:30px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-note{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px;font-size:.85rem;color:var(--muted)}
.hero-note span{display:flex;align-items:center;gap:7px}

/* laptop showing the organiser dashboard */
.laptop-wrap{position:relative;perspective:1600px}
/* Turned three-quarters away, the way a laptop actually sits on a desk when
   somebody shows you their screen. A flat front-on rectangle reads as a
   screenshot; this reads as a machine in a room. */
.laptop{
  position:relative;z-index:1;
  transform:rotateY(-19deg) rotateX(6deg) rotateZ(.6deg);
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.22,.8,.3,1);
}
.laptop-wrap.shown .laptop{transform:rotateY(-13deg) rotateX(4deg)}
.laptop-screen{
  background:#ffffff;border:1px solid var(--line);border-radius:14px 14px 4px 4px;
  padding:11px 11px 13px;
  box-shadow:34px 34px 70px -30px rgba(23,23,27,.45), inset 0 0 0 1px rgba(23,23,27,.04);
}
/* the light falling across a turned screen */
.laptop-screen::after{
  content:"";position:absolute;inset:0;border-radius:14px 14px 4px 4px;pointer-events:none;
  background:linear-gradient(105deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 32%);
}
.laptop-screen{position:relative}
.laptop-base{
  height:17px;margin:0 -9%;border-radius:0 0 7px 7px;
  background:linear-gradient(#f0ebe7,#e3dcd6 40%,#d5cdc6);
  border:1px solid var(--line-2);border-top:none;
  box-shadow:0 26px 40px -22px rgba(23,23,27,.4);position:relative;
}
.laptop-base::after{                       /* the lip you rest a thumb under */
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  border-radius:0 0 7px 7px;background:linear-gradient(#e3dcd6,#cfc6be);
}
.laptop-base span{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:104px;height:6px;border-radius:0 0 7px 7px;background:#bdb3aa;z-index:1;
}
.ui{background:#fff;border-radius:8px;padding:16px 15px;font-size:.78rem;overflow:hidden}
.ui-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.ui-title{font-family:var(--display);font-weight:700;font-size:.92rem;color:var(--ink);line-height:1.25}
.ui-sub{font-size:.7rem;color:var(--faint);margin-top:2px}
.ui-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.ui-kpi{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:9px 10px}
.ui-kpi .k{font-size:.56rem;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:700}
.ui-kpi .v{font-family:var(--display);font-weight:800;font-size:.86rem;color:var(--ink);margin-top:3px;white-space:nowrap}
.ui-kpi:first-child .v{color:var(--orange-ink)}
.ui-chart{
  display:flex;align-items:flex-end;gap:5px;height:56px;margin-bottom:16px;
  padding:0 2px;border-bottom:1px solid var(--line);
}
.ui-chart span{flex:1;background:var(--orange);border-radius:3px 3px 0 0;min-height:4px}

.ui-list-head{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:6px}
.ui-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid var(--line)}
.ui-row:first-of-type{border-top:none}
.ui-av{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;
  font-size:.58rem;font-weight:800;color:#fff;
}
.ui-nm{flex:1;min-width:0;font-weight:600;color:var(--ink);font-size:.74rem;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-nm i{display:block;font-style:normal;font-weight:400;font-size:.66rem;color:var(--muted)}
.ui-amt{font-weight:700;font-size:.74rem;color:var(--ink);white-space:nowrap}

.float-card{
  position:absolute;z-index:2;background:var(--card);border:1px solid var(--line-2);border-radius:14px;
  box-shadow:var(--shadow);padding:12px 15px;display:flex;align-items:center;gap:11px;
  font-size:.84rem;font-weight:600;white-space:nowrap;
}
.float-card.tl{top:-22px;left:-34px}
.float-card.br{bottom:34px;right:-34px}
@media(max-width:1090px){ .float-card.tl{left:-12px} .float-card.br{right:-10px} }
@media(max-width:940px){ .float-card{display:none} }
@media(max-width:520px){
  .ui{padding:12px 11px;font-size:.72rem}
  .ui-kpis{gap:6px}
  .ui-kpi{padding:7px 8px}
  .ui-kpi .v{font-size:.72rem}
  .ui-chart{height:42px}
  .laptop-screen{padding:8px 8px 10px}
}

/* ---------- sections ---------- */
section{padding:84px 0}
section[id]{scroll-margin-top:110px}   /* clear the sticky header when jumped to */
.section-head{max-width:640px;margin:0 auto 52px;text-align:center}
.section-head.left{margin-left:0;text-align:left}
.kicker{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink);margin-bottom:14px}
h2.title{font-size:clamp(1.85rem,3.4vw,2.7rem);margin-bottom:16px}
.section-head p{color:var(--muted);font-size:1.05rem;margin:0}
.tint{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* feature cards */
.cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(262px,1fr))}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  transition:transform .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-3px);border-color:var(--line-2)}
.card .ico{
  width:42px;height:42px;border-radius:12px;background:var(--orange-soft);color:var(--orange-ink);
  display:grid;place-items:center;margin-bottom:16px;
}
/* alternate down the grid so a wall of cards carries both flag colours */

.card h3{font-size:1.06rem;margin-bottom:8px}
.card p{margin:0;color:var(--muted);font-size:.92rem}

/* steps */
.steps{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));counter-reset:s}
.step{position:relative;padding-top:52px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;top:0;left:0;width:38px;height:38px;border-radius:12px;
  background:var(--orange);color:var(--on-orange);display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:1rem;
}

.step h3{font-size:1.06rem;margin-bottom:7px}
.step p{margin:0;color:var(--muted);font-size:.92rem}

/* stats strip */
.stats-strip{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));text-align:center}
.stats-strip .n{font-family:var(--display);font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.03em}
.stats-strip .n{color:var(--ink)}
.stats-strip .l{font-size:.85rem;color:var(--muted);font-weight:500}


/* pricing */
.price-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));align-items:start;max-width:820px;margin:0 auto}
.price-grid.one{max-width:470px}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.plan.best{border:2px solid var(--orange);box-shadow:0 0 40px -16px rgba(242,106,27,.55);position:relative}
.plan.best .tag{
  position:absolute;top:-13px;left:30px;background:var(--orange-deep);color:#fff;
  border-radius:999px;padding:5px 13px;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.plan h3{font-size:1.1rem;margin-bottom:6px}
.plan .fee{font-family:var(--display);font-size:2.6rem;font-weight:800;letter-spacing:-.04em;margin:14px 0 2px;color:var(--ink)}
.plan .fee small{font-size:.95rem;font-weight:600;color:var(--muted);letter-spacing:0}
.plan ul{list-style:none;margin:20px 0 24px;padding:0;display:flex;flex-direction:column;gap:11px}
.plan li{display:flex;gap:10px;font-size:.92rem;color:var(--text-2)}
.plan li svg{flex:none;margin-top:3px;color:var(--orange-ink)}

/* faq */
.faq{max-width:760px;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 0;font-weight:600;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;color:var(--orange-ink);font-weight:400;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 20px;color:var(--muted);font-size:.95rem}

/* cta band */
.band{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:26px;padding:56px 44px;text-align:center;position:relative;overflow:hidden;
}

.band > *{position:relative}
.band h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:14px}
.band p{color:var(--muted);max-width:34em;margin:0 auto 28px}

/* footer */
.site-foot{border-top:1px solid var(--line);padding:52px 0 40px;background:var(--bg-2)}
.foot-grid{display:grid;gap:34px;grid-template-columns:1.6fr 1fr 1fr 1fr}
@media(max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr} }
.foot-grid h4{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:14px;font-family:var(--sans);font-weight:700}
.foot-grid a{display:block;text-decoration:none;color:var(--muted);font-size:.9rem;padding:5px 0}
.foot-grid a:hover{color:var(--ink)}
.foot-bottom{
  border-top:1px solid var(--line);margin-top:36px;padding-top:24px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;color:var(--faint);
}
.secret{cursor:pointer;text-decoration:underline;text-underline-offset:3px;color:var(--muted)}

/* ---------- what's on, on the homepage ----------
   Four real events beat four more paragraphs of promises. */
.live-strip{padding:72px 0;background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:30px;
}
.strip-head .title{font-size:clamp(1.8rem,3.4vw,2.5rem);letter-spacing:-.03em;margin:0}
.live-strip .live-now{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange-ink);margin-bottom:10px;
}
.live-strip .live-now::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 0 rgba(242,106,27,.6);animation:livePulse 2.6s ease-out infinite;
}
.live-strip .ev-card{background:var(--card)}
/* four across on a wide screen, so the row is never left with one orphan */
@media(min-width:1120px){ .live-strip .ev-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (prefers-reduced-motion:reduce){ .live-strip .live-now::before{animation:none} }
@media(max-width:640px){ .live-strip{padding:44px 0} .strip-head{margin-bottom:20px} }

/* ---------- the browse page ----------

   The listing is what people come for, so it opens on a dark band: it
   separates the site's chrome from the events, and posters read better
   against something dark than against more white. */
.browse-top{
  position:relative;overflow:hidden;
  background:var(--ink);color:#fff;
  padding:40px 0 44px;
}
/* a slow, very low-contrast wash — depth without a loud gradient */
.browse-top::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(760px 420px at 12% -10%, rgba(242,106,27,.20), transparent 62%),
    radial-gradient(620px 380px at 88% 116%, rgba(15,122,58,.16), transparent 60%);
  pointer-events:none;
}
.browse-top .wrap{position:relative}
.browse-top .live-now{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.66);margin-bottom:16px;
}
.browse-top .live-now::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 0 rgba(242,106,27,.6);animation:livePulse 2.6s ease-out infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(242,106,27,.6)}
  70%{box-shadow:0 0 0 8px rgba(242,106,27,0)}
  100%{box-shadow:0 0 0 0 rgba(242,106,27,0)}
}
.browse-title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.5rem,6vw,4.2rem);line-height:1.02;letter-spacing:-.035em;
  margin:0 0 14px;color:#fff;
}
.browse-title .dot{color:var(--orange)}
.browse-sub{
  color:rgba(255,255,255,.72);font-size:1rem;line-height:1.55;
  max-width:52ch;margin:0 0 20px;
}
.search-bar.big{
  max-width:520px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);border-radius:14px;
  padding:14px 17px;color:#fff;
  backdrop-filter:blur(10px);
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.search-bar.big:focus-within{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34);
  box-shadow:0 0 0 4px rgba(242,106,27,.22);
}
.search-bar.big svg{color:rgba(255,255,255,.6)}
.search-bar.big input{color:#fff;font-size:1rem}
.search-bar.big input::placeholder{color:rgba(255,255,255,.52)}

/* the filter strip, which follows you down */
.filter-bar{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.88);backdrop-filter:blur(14px) saturate(1.5);
  border-bottom:1px solid var(--line);
}
.filter-row{
  display:flex;align-items:center;gap:16px;
  padding:13px 0;
}
.filter-bar .chip-row{
  margin:0;flex:1;flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.filter-bar .chip-row::-webkit-scrollbar{display:none}
.filter-bar .chip{flex:none}
.result-count{
  flex:none;font-size:.82rem;font-weight:600;color:var(--faint);
  letter-spacing:.02em;font-variant-numeric:tabular-nums;
}
.browse-page{padding:24px 0 90px}
/* the chips scroll under the count on a narrow screen, so fade the edge
   and drop the count where there is no room for it */
.filter-bar .chip-row{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
}
@media(max-width:620px){
  .result-count{display:none}
  .filter-row{padding:10px 0}
  .browse-top{padding:28px 0 30px}
  .browse-title{font-size:2.15rem;margin-bottom:8px}
  .browse-sub{font-size:.9rem;line-height:1.5;margin-bottom:16px}
  .browse-top .live-now{margin-bottom:10px;font-size:.66rem}
  /* a search box the size of a search box, not a hero panel */
  .search-bar.big{max-width:none;padding:10px 13px;border-radius:11px}
  .search-bar.big input{font-size:16px}
  .search-bar.big svg{width:15px;height:15px}
  /* the chips were touching: give them room and a little runway either end */
  .filter-bar .chip-row{gap:8px;padding:2px 16px 2px 0;margin-left:-2px}
  .filter-bar .chip{padding:8px 14px;font-size:.84rem}
}

/* something to look at while the events load */
.grid-skeleton{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(278px,1fr))}
.grid-skeleton i{
  display:block;height:368px;border-radius:var(--radius);
  background:linear-gradient(100deg,var(--card-2) 30%,#efe9e4 45%,var(--card-2) 60%);
  background-size:280% 100%;animation:shimmer 1.5s linear infinite;
}
@keyframes shimmer{to{background-position:-180% 0}}
@media (prefers-reduced-motion:reduce){
  .grid-skeleton i{animation:none}
  .browse-top .live-now::before{animation:none}
}

/* ---------- event cards ----------

   A poster is artwork. Cropping it to a fixed square cut the artist's name
   off half the flyers on this site, so the whole poster is shown, sitting on
   a blurred, enlarged copy of itself — the trick record shops and streaming
   apps use, because it means any shape of art looks deliberate rather than
   stranded in a grey box. The art block is kept short so the card stays a
   card: the poster invites, the words underneath do the work. */
.ev-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(278px,1fr))}
.ev-card{
  position:relative;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(23,23,27,.05);
  transition:transform .26s cubic-bezier(.22,.8,.3,1), box-shadow .26s, border-color .2s;
}
.ev-card:hover{border-color:var(--line-2)}

/* the artwork block */
.ev-art{
  position:relative;height:196px;overflow:hidden;
  display:grid;place-items:center;isolation:isolate;
  background:var(--card-2);
}
.ev-art-bg{
  position:absolute;inset:-28px;z-index:0;
  background-size:cover;background-position:center;
  filter:blur(26px) saturate(1.5) brightness(.82);
  transform:scale(1.15);
  transition:transform .5s cubic-bezier(.22,.8,.3,1);
}
.ev-art-bg::after{content:"";position:absolute;inset:0;background:rgba(10,10,14,.22)}
.ev-art img{
  position:relative;z-index:1;
  max-width:78%;max-height:164px;width:auto;height:auto;object-fit:contain;
  border-radius:8px;
  box-shadow:0 10px 26px rgba(10,10,14,.34), 0 1px 0 rgba(255,255,255,.22);
  transition:transform .4s cubic-bezier(.22,.8,.3,1);
}
/* no poster: generated art fills the block, as it is meant to */
.ev-art.is-ph{background-size:cover}
.ev-art.is-ph .ph{
  position:relative;z-index:1;
  font-family:var(--display);font-weight:800;font-size:2.4rem;color:#fff;
  text-shadow:0 2px 18px rgba(23,23,27,.5);letter-spacing:-.02em;
}

.ev-date{
  position:absolute;z-index:2;top:12px;left:12px;
  background:rgba(12,12,16,.62);backdrop-filter:blur(10px) saturate(1.4);
  border:1px solid rgba(255,255,255,.18);border-radius:12px;
  padding:6px 11px;text-align:center;line-height:1.05;
  box-shadow:0 4px 14px rgba(10,10,14,.28);
}
.ev-date .d{font-family:var(--display);font-weight:800;font-size:1.06rem;color:#fff}
.ev-date .m{font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.76);font-weight:600}

/* the category, floated over the art rather than competing below it */
.ev-tag{
  position:absolute;z-index:2;top:13px;right:12px;
  background:rgba(12,12,16,.58);backdrop-filter:blur(10px) saturate(1.4);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:5px 11px;font-size:.68rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#fff;
}
.ev-tag.hot{background:rgba(242,106,27,.92);border-color:rgba(255,255,255,.28)}

.ev-body{padding:16px 17px 17px;display:flex;flex-direction:column;gap:6px;flex:1}
.ev-org{
  font-size:.72rem;color:var(--muted);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
}
.ev-card h3{
  font-size:1.09rem;line-height:1.25;letter-spacing:-.015em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ev-meta{font-size:.845rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.ev-meta svg{flex:none;opacity:.7}
.ev-foot{
  margin-top:auto;padding-top:13px;margin-top:13px;border-top:1px solid var(--line);
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
}
.ev-price{font-family:var(--display);font-weight:800;color:var(--ink);font-size:1.02rem;letter-spacing:-.01em}
.ev-price small{
  display:block;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);font-weight:700;margin-bottom:1px;
}
/* how close it is to selling out, read at a glance */
.ev-left{font-size:.76rem;font-weight:700;color:var(--muted);text-align:right;line-height:1.3}
.ev-left b{display:block;color:var(--orange-ink)}
.ev-bar{width:56px;height:4px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:5px;margin-left:auto}
.ev-bar span{display:block;height:100%;border-radius:99px;background:var(--orange)}
.ev-bar.low span{background:var(--red)}

.chip-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:26px}
.chip{
  background:var(--card);border:1px solid var(--line);color:var(--text);border-radius:999px;
  padding:8px 15px;font-size:.86rem;font-weight:500;cursor:pointer;transition:all .15s;
}
.chip:hover{border-color:var(--line-2)}
.chip.on{background:var(--orange);color:var(--on-orange);border-color:var(--orange)}

.search-bar{
  display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:11px 18px;max-width:420px;
}
.search-bar input{border:none;outline:none;flex:1;font-size:16px;font-family:var(--sans);background:transparent;color:var(--text);padding:0}
.search-bar input::placeholder{color:var(--faint)}
.search-bar svg{color:var(--faint);flex:none}

/* ---------- forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:.83rem;font-weight:600;margin-bottom:7px;color:var(--text-2)}
input,select,textarea{
  font-size:16px;                       /* under 16px and iOS zooms the page on focus */
  width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--radius-sm);
  font-family:var(--sans);background:var(--card-2);color:var(--text);outline:none;
  transition:border-color .15s, box-shadow .15s;
}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,106,27,.24)}
textarea{resize:vertical;min-height:92px}
select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a2a2ad' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:36px}
select option{background:#111114;color:var(--text)}
input[type=color]{padding:4px;height:44px;background:var(--card-2)}
input[type=checkbox]{width:auto}
input[type=date],input[type=time]{color-scheme:dark}
.row-2{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media(max-width:560px){ .row-2{grid-template-columns:1fr} }

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.panel + .panel{margin-top:18px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.panel-head h3{font-size:1.05rem}

.badge{
  display:inline-block;border-radius:999px;padding:4px 10px;font-size:.72rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;background:var(--card-2);color:var(--muted);white-space:nowrap;
}
.badge.ok{background:var(--green-soft);color:var(--green)}
.badge.warn{background:var(--amber-soft);color:var(--amber)}
.badge.bad{background:var(--red-soft);color:var(--red)}
.badge.live{background:var(--green-soft);color:var(--green)}

.empty{text-align:center;padding:56px 24px;border:1px dashed var(--line-2);border-radius:var(--radius);background:var(--bg-2)}
.empty h3{font-size:1.1rem;margin-bottom:8px}
.empty p{color:var(--muted);margin:0 auto 18px;max-width:34em;font-size:.93rem}

.spinner{
  display:inline-block;width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;margin:0 -24px;padding:0 24px}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:620px}
th{
  text-align:left;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  font-weight:700;padding:0 14px 10px;white-space:nowrap;
}
td{padding:14px;border-top:1px solid var(--line);vertical-align:middle}
tbody tr:hover{background:var(--card-2)}

/* ---------- organiser shell ---------- */
.app{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}
@media(max-width:900px){ .app{grid-template-columns:minmax(0,1fr)} }
.side{
  background:var(--bg-2);border-right:1px solid var(--line);padding:22px 16px;
  display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh;
}
@media(max-width:900px){ .side{position:static;height:auto} }
.side .logo img{height:54px}
.org-pill{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:11px 13px}
.org-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.85rem;flex:none}
.org-pill .nm{font-weight:700;font-size:.9rem;line-height:1.25;color:var(--ink)}
.org-pill .sb{font-size:.74rem;color:var(--faint)}

.side-nav{display:flex;flex-direction:column;gap:3px}
.side-nav button{
  display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;
  padding:10px 12px;border-radius:10px;font-family:var(--sans);font-size:.92rem;font-weight:500;
  color:var(--muted);cursor:pointer;text-align:left;transition:background .15s,color .15s;
}
.side-nav button svg{width:18px;height:18px;flex:none}
.side-nav button:hover{background:var(--card);color:var(--ink)}
.side-nav button.active{background:var(--orange);color:var(--on-orange);font-weight:600}
.side-nav button.hidden{display:none}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}

.app-main{padding:34px 32px 64px;max-width:1080px}
@media(max-width:600px){ .app-main{padding:22px 18px 48px} .table-wrap{margin:0 -18px;padding:0 18px} }
.app-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.app-head h1{font-size:1.7rem;margin-bottom:5px}
.app-head p{margin:0;color:var(--muted);font-size:.92rem}

.kpis{display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));margin-bottom:26px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.kpi .k{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:700}
.kpi .v{
  font-family:var(--display);font-size:clamp(1.1rem,1.65vw,1.5rem);font-weight:800;
  letter-spacing:-.03em;margin-top:5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kpi.green .v{color:var(--green)}
.kpi.rose .v{color:var(--red)}

.bar-row{display:flex;align-items:center;gap:12px;padding:9px 0}
.bar-row .nm{width:118px;font-size:.87rem;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{flex:1;height:9px;border-radius:99px;background:var(--card-2);overflow:hidden;display:block}
.bar-fill{display:block;height:100%;border-radius:99px;background:var(--orange);min-width:2px}
.bar-row .vl{width:92px;text-align:right;font-size:.85rem;font-weight:600;flex:none}

[hidden]{display:none !important}

.ev-title{font-size:clamp(1.8rem,3.6vw,2.6rem);margin-bottom:10px}
.ev-tagline{font-size:1.05rem;margin:0 0 26px}
.buy-head{font-size:1.05rem;margin-bottom:10px}
.panel-title{font-size:1.25rem;margin-bottom:5px}
.ph-lg{font-size:4rem}

/* the inner pages share one wrapper, so the phone rules can reach it */
.page{padding:44px 0 84px}
.ev-facts{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

.ev-cols{display:grid;gap:34px;grid-template-columns:1.25fr .95fr;align-items:start}
/* The poster on an event's own page.

   Posters arrive in every shape — tall A4 flyers, square Instagram tiles,
   wide banners. Cropping them to one fixed shape cut the artwork and often
   the text with it, so the whole image is shown at its own proportions,
   capped in height so it stays a poster and not a billboard. The frame
   around it keeps the page tidy whatever shape turns up. */
.ev-hero{
  position:relative;isolation:isolate;
  aspect-ratio:auto;
  min-height:300px;
  background:var(--card-2);
  border-radius:var(--radius);
  padding:26px;
  margin:0 0 26px;
  display:grid;place-items:center;
  overflow:hidden;
}
.ev-hero img{
  position:relative;z-index:1;
  width:auto;height:auto;
  max-width:100%;max-height:340px;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 18px 44px rgba(10,10,14,.42), 0 1px 0 rgba(255,255,255,.26);
}
/* no poster: generated art, which does want a fixed shape */
.ev-hero.is-ph{aspect-ratio:16/9;min-height:0;padding:0}
.ev-chips{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px}

/* the bar that follows a thumb up the page */
.buy-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;
  align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);box-shadow:0 -8px 24px -14px rgba(23,23,27,.3);
}
.buy-bar .bb-price{flex:1;min-width:0;font-weight:700;font-size:.95rem;color:var(--ink)}
.buy-bar .btn{flex:none;min-height:46px}

/* ============================================================
   Motion

   Everything moves in the same two ways: it rises a little as it
   arrives, and it lifts a little when you point at it. Distances
   are small and the timing is short, because on a page about money
   movement should feel like responsiveness, not decoration.
   ============================================================ */
[data-reveal]{
  opacity:0;
  transition:opacity .55s cubic-bezier(.22,.8,.3,1), transform .55s cubic-bezier(.22,.8,.3,1);
  will-change:opacity, transform;
}
[data-reveal="up"]   {transform:translateY(18px)}
/* a sideways start can push a wide element past the page edge, so it only
   applies where there is room for it to come from */
[data-reveal="left"] {transform:translateX(-22px)}
[data-reveal="right"]{transform:translateX(22px)}
@media(max-width:900px){
  [data-reveal="left"],[data-reveal="right"]{transform:translateY(18px)}
}
[data-reveal="in"]   {transform:scale(.96)}
[data-reveal].shown  {opacity:1;transform:none}

/* hover: a card notices the cursor */
.card,.plan,.ev-card,.float-card{
  transition:transform .25s cubic-bezier(.22,.8,.3,1), box-shadow .25s, border-color .2s;
}
@media(hover:hover){
  .card:hover,.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2)}
  .ev-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(23,23,27,.15)}
  .ev-card:hover .ev-art img{transform:scale(1.045) translateY(-2px)}
  .ev-card:hover .ev-art-bg{transform:scale(1.22)}
  .btn-primary:hover:not(:disabled){transform:translateY(-1px)}
  .side-nav button:hover{transform:translateX(2px)}
  .logo:hover img{transform:scale(1.03)}
}
.logo img{transition:transform .4s cubic-bezier(.22,.8,.3,1)}
.btn{transition:background .18s, color .18s, border-color .18s, box-shadow .22s, transform .12s}
.btn:active:not(:disabled){transform:translateY(1px) scale(.99)}
.chip,.seg button,.qty button{transition:all .18s}

/* the step numbers draw a line between themselves */
.step{position:relative}
.step::after{
  content:"";position:absolute;left:44px;top:19px;height:2px;width:0;background:var(--line);
  transition:width .6s .25s cubic-bezier(.22,.8,.3,1);
}
.step.shown::after{width:calc(100% - 52px)}
.steps .step:last-child::after{display:none}
@media(max-width:640px){ .step::after{display:none} }

/* the mock dashboard comes alive as it scrolls in */
.ui-chart span{transform-origin:bottom;transform:scaleY(0);transition:transform .6s cubic-bezier(.22,.8,.3,1)}
.laptop-wrap.shown .ui-chart span{transform:scaleY(1)}
.laptop-wrap.shown .ui-chart span:nth-child(1){transition-delay:.05s}
.laptop-wrap.shown .ui-chart span:nth-child(2){transition-delay:.1s}
.laptop-wrap.shown .ui-chart span:nth-child(3){transition-delay:.15s}
.laptop-wrap.shown .ui-chart span:nth-child(4){transition-delay:.2s}
.laptop-wrap.shown .ui-chart span:nth-child(5){transition-delay:.25s}
.laptop-wrap.shown .ui-chart span:nth-child(6){transition-delay:.3s}
.laptop-wrap.shown .ui-chart span:nth-child(7){transition-delay:.35s}
.laptop-wrap.shown .ui-chart span:nth-child(8){transition-delay:.4s}
.laptop-wrap.shown .ui-chart span:nth-child(9){transition-delay:.45s}
.laptop-wrap.shown .ui-chart span:nth-child(10){transition-delay:.5s}

.ui-row{opacity:0;transform:translateY(8px);transition:opacity .45s, transform .45s}
.laptop-wrap.shown .ui-row{opacity:1;transform:none}
.laptop-wrap.shown .ui-row:nth-of-type(1){transition-delay:.45s}
.laptop-wrap.shown .ui-row:nth-of-type(2){transition-delay:.58s}
.laptop-wrap.shown .ui-row:nth-of-type(3){transition-delay:.71s}

/* the two cards that float beside it drift in last, then breathe */
.float-card{opacity:0;transform:translateY(10px) scale(.96);transition:opacity .5s, transform .5s}
.laptop-wrap.shown .float-card{opacity:1;transform:none}
.laptop-wrap.shown .float-card.tl{transition-delay:.7s;animation:drift 5.5s 1.3s ease-in-out infinite}
.laptop-wrap.shown .float-card.br{transition-delay:.85s;animation:drift 6.5s 1.7s ease-in-out infinite reverse}
@keyframes drift{0%,100%{translate:0 0}50%{translate:0 -7px}}

/* the badge on a live event has a slow pulse, so "on sale" reads as now */
.badge.live::before{
  content:"";width:6px;height:6px;border-radius:99px;background:currentColor;
  display:inline-block;margin-right:6px;vertical-align:middle;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* spinners, toasts and modals */
#toast{transition:transform .32s cubic-bezier(.2,.9,.3,1), opacity .2s}
.backdrop{animation:fade .18s ease-out both}
.modal{animation:riseIn .28s cubic-bezier(.22,.9,.3,1) both}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:640px){
  .modal{animation:riseIn .26s cubic-bezier(.22,.9,.3,1) both}
}

/* the FAQ opens rather than snaps */
.faq summary::after{transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] > *:not(summary){animation:fadeDown .3s ease-out both}
@keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* nothing above happens if the machine was asked to keep still */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important}
  .ui-chart span{transform:scaleY(1) !important}
  .ui-row,.float-card{opacity:1 !important;transform:none !important}
}

/* the "we're looking at it" mark on the waiting screen */
.await-mark{display:grid;place-items:center;margin:0 0 14px}
.await-mark > span{
  width:54px;height:54px;border-radius:999px;background:var(--orange-soft);
  border:2px solid var(--orange);position:relative;display:block;
}
.await-mark > span::after{
  content:"";position:absolute;inset:-2px;border-radius:999px;
  border:2px solid var(--orange);opacity:.55;
  animation:ripple 2s ease-out infinite;
}
@keyframes ripple{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.55);opacity:0}}
@media(prefers-reduced-motion:reduce){ .await-mark > span::after{animation:none;opacity:0} }

/* ---------- the sign-in name ---------- */
.handle-field{display:flex;align-items:center}
.handle-field input{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;letter-spacing:.02em}

/* ---------- the platform owner's view ---------- */
body.platform .side{background:var(--ink)}
body.platform .side .org-pill{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
body.platform .side .org-pill .nm{color:#fff}
body.platform .side .org-pill .sb{color:rgba(255,255,255,.6)}
body.platform .side-nav button{color:rgba(255,255,255,.72)}
body.platform .side-nav button:hover{background:rgba(255,255,255,.08);color:#fff}
body.platform .side-nav button.active{background:var(--orange);color:var(--on-orange)}
body.platform .side-foot .btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
body.platform .side-foot .btn:hover{background:rgba(255,255,255,.16)}

/* ---------- looking at an organiser as a guest ----------
   A band the owner cannot miss, pushing the whole app down so it
   can never be scrolled out of sight. */
.guest-bar{
  position:fixed;inset:0 0 auto 0;z-index:80;
  display:flex;align-items:center;gap:12px;
  padding:9px 18px;background:var(--ink);color:#fff;
  font-size:.9rem;line-height:1.35;
  box-shadow:0 1px 0 rgba(0,0,0,.2)
}
.guest-bar b{color:var(--orange)}
.guest-note{color:rgba(255,255,255,.62)}
.guest-bar .btn{
  margin-left:auto;flex:none;
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff
}
.guest-bar .btn:hover{background:rgba(255,255,255,.22)}
.guest-eye{
  flex:none;width:9px;height:9px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 0 rgba(242,106,27,.55);
  animation:guestPulse 2.4s ease-out infinite
}
@keyframes guestPulse{
  0%{box-shadow:0 0 0 0 rgba(242,106,27,.55)}
  70%{box-shadow:0 0 0 9px rgba(242,106,27,0)}
  100%{box-shadow:0 0 0 0 rgba(242,106,27,0)}
}
body.guest{padding-top:42px}
body.guest .side{top:42px;height:calc(100vh - 42px)}
@media (max-width:820px){
  .guest-bar{padding:8px 14px;font-size:.84rem;gap:9px}
  .guest-note{display:none}
  body.guest{padding-top:38px}
  body.guest .side{top:auto;height:auto}
}
@media (prefers-reduced-motion:reduce){ .guest-eye{animation:none} }

/* ---------- the organiser table ----------
   One line each, so twenty organisations can be compared without
   scrolling. A panel each looked tidy with three and fell apart with ten. */
.tbl-tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.search-bar.sm{flex:1;min-width:190px;padding:8px 13px;border-radius:11px}
.search-bar.sm input{font-size:.9rem}
.seg{
  display:flex;gap:2px;background:var(--card-2);border:1px solid var(--line);
  border-radius:11px;padding:3px;flex:none;overflow-x:auto;scrollbar-width:none;
}
.seg::-webkit-scrollbar{display:none}
.seg button{
  border:none;background:transparent;border-radius:8px;padding:7px 13px;
  font-size:.83rem;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;
  transition:background .16s, color .16s;
}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(23,23,27,.1)}

.tbl-wrap{padding:0;overflow-x:auto}
.org-tbl{width:100%;border-collapse:collapse;min-width:620px}
.org-tbl th{
  text-align:left;padding:12px 16px;font-size:.7rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.org-tbl th.num,.org-tbl td.num{text-align:right}
.org-tbl td{padding:13px 16px;border-bottom:1px solid var(--line);font-size:.9rem;vertical-align:middle}
.org-tbl tbody tr:last-child td{border-bottom:none}
.org-tbl tbody tr{cursor:pointer;transition:background .14s}
.org-tbl tbody tr:hover{background:var(--card-2)}
.org-tbl td.strong{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.org-tbl td.green{color:var(--green-deep);font-weight:600;font-variant-numeric:tabular-nums}
.org-tbl td.num{font-variant-numeric:tabular-nums}
.org-cell{display:flex;align-items:center;gap:11px;min-width:0}
.org-mark.sm{width:34px;height:34px;border-radius:10px;font-size:.78rem;flex:none}
.org-nm{font-weight:650;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.org-sub{font-size:.76rem;color:var(--faint);margin-top:1px}
.share{display:inline-block;font-size:.8rem;font-weight:600;color:var(--muted);min-width:52px}
.share span{display:block;height:4px;border-radius:99px;background:var(--line);margin-top:4px;overflow:hidden}
.share i{display:block;height:100%;border-radius:99px;background:var(--orange)}
.row-go{color:var(--faint);font-size:1.3rem;line-height:1}
.org-tbl tbody tr:hover .row-go{color:var(--orange-ink)}
@media(max-width:700px){
  .org-tbl{min-width:0}
  .hide-sm{display:none}
  .org-tbl th,.org-tbl td{padding:11px 12px}
  .tbl-tools{gap:9px}
}

/* one organisation, opened from its row */
.sheet-head{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.sheet-nm{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em}

.warn-box{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--orange-soft);border:1px solid rgba(242,106,27,.35);
  border-radius:11px;padding:12px 14px;font-size:.87rem;color:var(--orange-ink);font-weight:600;
}

/* a password shown once and never again */
.cred{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cred > div{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 15px;border-bottom:1px solid var(--line);
}
.cred > div:last-child{border-bottom:none;background:var(--orange-soft)}
.cred span{font-size:.78rem;color:var(--muted);font-weight:600}
.cred b{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.95rem;color:var(--ink)}
.cred b.pw{font-size:1.06rem;letter-spacing:.06em;user-select:all}

/* where the money splits */
.split-bar{display:flex;height:14px;border-radius:99px;overflow:hidden;margin-bottom:16px;gap:2px}
.split-bar span{display:block}
table.plain{width:100%;border-collapse:collapse}
table.plain td{padding:7px 0;font-size:.92rem;border-bottom:1px solid var(--line)}
table.plain td.num{text-align:right;font-variant-numeric:tabular-nums}
table.plain tr.total td{border-bottom:none;padding-top:11px;font-size:1rem}
.sw{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:8px;vertical-align:middle}

/* the activity feed */
.feed-row{display:flex;gap:12px;align-items:flex-start;padding:12px 18px;border-bottom:1px solid var(--line)}
.feed-row:last-child{border-bottom:none}
.feed-what{font-size:.92rem;font-weight:600;color:var(--ink);line-height:1.4}
.feed-dot{width:8px;height:8px;border-radius:99px;background:var(--line-2);flex:none;margin-top:7px}
.feed-dot.order{background:var(--green)}
.feed-dot.event{background:var(--orange)}
.feed-dot.organiser{background:var(--orange-ink)}
.feed-dot.ticket{background:var(--green-deep)}
.feed-dot.platform{background:var(--ink)}
@media(max-width:640px){ .feed-row{padding:11px 15px} }

/* ---------- checkout steps ---------- */
.steps-dots{display:flex;gap:6px;margin-top:7px}
.steps-dots i{width:22px;height:4px;border-radius:99px;background:var(--line-2);transition:background .2s}
.steps-dots i.on{background:var(--orange)}

.sent-note{
  display:flex;gap:12px;align-items:center;background:var(--orange-soft);border:1px solid #f6cdb0;
  border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:20px;color:var(--ink);
  font-size:.92rem;line-height:1.45;
}
.sent-note svg{color:var(--orange-ink)}
.sent-note b{word-break:break-all}

.otp-input{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:1.6rem !important;font-weight:700;letter-spacing:.42em;text-align:center;
  padding:14px 10px 14px 20px;          /* the extra left pad centres the tracked text */
}
.otp-input::placeholder{color:var(--line-2);letter-spacing:.42em}

/* ---------- you're all set ---------- */
.all-set{
  text-align:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 24px;margin-bottom:22px;box-shadow:var(--shadow);
}
.all-set .tick{
  width:62px;height:62px;border-radius:999px;background:var(--green-soft);color:var(--green);
  display:grid;place-items:center;margin:0 auto 14px;
  animation:pop .45s cubic-bezier(.2,1.5,.4,1) both;
}
.all-set h2{font-size:1.6rem;margin-bottom:6px}
.all-set p{margin:0;color:var(--text-2);font-size:.96rem;line-height:1.55}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){ .all-set .tick{animation:none} }

/* ---------- picture upload ---------- */
.upload{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.upload-pv{
  width:104px;height:104px;flex:none;border-radius:var(--radius-sm);overflow:hidden;
  background:var(--card-2);border:1px dashed var(--line-2);
  display:grid;place-items:center;text-align:center;
}
.upload-pv span{padding:10px}
.upload.round .upload-pv{border-radius:999px}
.upload-pv img{width:100%;height:100%;object-fit:cover;display:block}
.upload-act{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.upload-act .tiny{flex-basis:100%}

/* an avatar that is a real picture rather than initials */
.org-mark.has-img{background:var(--card-2);overflow:hidden;padding:0}
.org-mark.has-img img{width:100%;height:100%;object-fit:cover;display:block}

/* "by <organiser>" on an event page */
.by-org{
  display:inline-flex;align-items:center;gap:8px;background:var(--card-2);border:1px solid var(--line);
  border-radius:999px;padding:4px 12px 4px 4px;font-size:.8rem;font-weight:600;color:var(--text-2);
}
.by-org img,.by-org i{
  width:24px;height:24px;border-radius:999px;object-fit:cover;display:grid;place-items:center;
  font-style:normal;font-size:.63rem;font-weight:800;flex:none;
}

/* ---------- modal ---------- */
.backdrop{
  position:fixed;inset:0;background:rgba(23,23,27,.45);backdrop-filter:blur(4px);z-index:200;
  display:flex;align-items:center;justify-content:center;   /* centred, not pinned to the top */
  padding:24px 16px;overflow-y:auto;
}
.modal{
  background:var(--card);border:1px solid var(--line-2);border-radius:20px;
  width:100%;max-width:560px;box-shadow:var(--shadow-lg);
  margin:auto;                       /* stays centred, and scrolls when it is taller than the screen */
  max-height:calc(100dvh - 48px);display:flex;flex-direction:column;
}
.modal-body{overflow-y:auto;-webkit-overflow-scrolling:touch}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:1.1rem}
.modal-body{padding:24px}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:18px 24px;border-top:1px solid var(--line);background:var(--bg-2);border-radius:0 0 20px 20px}
.x{background:none;border:none;font-size:1.5rem;line-height:1;color:var(--faint);cursor:pointer;padding:0 4px}
.x:hover{color:var(--ink)}

/* the poster, on the ticket itself */
.stub-art{
  position:relative;isolation:isolate;overflow:hidden;
  height:168px;display:grid;place-items:center;background:var(--card-2);
}
.stub-art img{
  position:relative;z-index:1;max-width:72%;max-height:140px;width:auto;height:auto;
  object-fit:contain;border-radius:7px;box-shadow:0 8px 22px rgba(10,10,14,.34);
}
@media print{
  .stub-art{height:150px;background:#fff}
  .stub-art .ev-art-bg{display:none}
  .stub-art img{box-shadow:none;max-height:140px}
}

/* the hero laptop on a phone: turned less, and small enough to leave room
   for the words that do the selling */
@media(max-width:900px){
  .laptop{transform:rotateY(-12deg) rotateX(4deg)}
  .laptop-wrap.shown .laptop{transform:rotateY(-8deg) rotateX(3deg)}
}
@media(max-width:640px){
  .laptop-wrap{max-width:420px;margin:0 auto;perspective:900px}
  .laptop{transform:rotateY(-14deg) rotateX(5deg) scale(.97)}
  .laptop-wrap.shown .laptop{transform:rotateY(-10deg) rotateX(3deg) scale(.97)}
  .laptop-screen{border-radius:11px 11px 3px 3px;padding:8px 8px 10px}
  .laptop-screen::after{border-radius:11px 11px 3px 3px}
  .ui{padding:12px 11px;font-size:.72rem}
  .ui-kpis{gap:6px}
  .float-card{font-size:.72rem;padding:8px 11px}
  .float-card.tl{top:-10px;left:-6px}
  .float-card.br{bottom:-10px;right:-6px}
}

/* ---------- the door scanner ---------- */
.scan-stage{
  position:relative;border-radius:16px;overflow:hidden;background:#000;
  aspect-ratio:4/3;max-height:420px;
}
.scan-stage video{width:100%;height:100%;object-fit:cover;display:block}
.scan-frame{position:absolute;inset:14%;pointer-events:none}
.scan-frame i{position:absolute;width:30px;height:30px;border:3px solid rgba(255,255,255,.92);border-radius:4px}
.scan-frame i:nth-child(1){top:0;left:0;border-right:none;border-bottom:none}
.scan-frame i:nth-child(2){top:0;right:0;border-left:none;border-bottom:none}
.scan-frame i:nth-child(3){bottom:0;left:0;border-right:none;border-top:none}
.scan-frame i:nth-child(4){bottom:0;right:0;border-left:none;border-top:none}
.scan-flash{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .16s}
.scan-flash.ok{background:rgba(15,122,58,.55);opacity:1}
.scan-flash.bad{background:rgba(200,32,32,.55);opacity:1}
.scan-stop{position:absolute;right:12px;bottom:12px;background:rgba(255,255,255,.92)}
.scan-say{
  display:flex;flex-direction:column;gap:3px;
  border-radius:13px;padding:14px 16px;border:1px solid var(--line);background:var(--card-2);
}
.scan-say b{font-size:1.05rem;letter-spacing:-.01em}
.scan-say span{font-size:.86rem;color:var(--muted)}
.scan-say.ok{background:var(--green-soft);border-color:rgba(15,122,58,.34)}
.scan-say.ok b{color:var(--green-deep)}
.scan-say.warn{background:#fff6e6;border-color:rgba(200,140,20,.34)}
.scan-say.bad{background:#fdecec;border-color:rgba(200,32,32,.3)}
.scan-say.bad b{color:var(--red)}
.scan-tally{display:flex;gap:18px;margin-top:12px;font-size:.85rem;color:var(--muted)}
.scan-tally b{color:var(--ink);font-size:1.05rem;font-family:var(--display)}

/* ---------- the team ---------- */
.team-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.team-nm{font-weight:600}
.role-pick{display:flex;flex-direction:column;gap:9px}
.role-opt{
  display:block;border:1px solid var(--line);border-radius:13px;padding:12px 14px;cursor:pointer;
  transition:border-color .16s, background .16s, box-shadow .16s;
}
.role-opt input{position:absolute;opacity:0;pointer-events:none}
.role-opt.on{border-color:var(--orange);background:var(--orange-soft);box-shadow:0 0 0 3px rgba(242,106,27,.14)}
.role-nm{display:block;font-weight:700;font-size:.95rem}
.role-sub{display:block;font-size:.8rem;color:var(--muted);margin-top:2px}

/* ---------- no double-tap zoom ----------

   On iOS a second tap within ~300ms zooms the page. It fires on anything
   tappable, so a quick tap-tap on a button, a chip or a ticket stub throws
   the layout about. touch-action:manipulation tells the browser there is no
   double-tap gesture to wait for, which removes the zoom AND the 300ms delay
   before a tap registers. Pinch-to-zoom is untouched — that one is the
   reader's own choice and must never be taken away. */
html{touch-action:manipulation}
button, .btn, a, .chip, .tt, .ev-card, .seg button, .qty button,
label, summary, input[type="button"], input[type="submit"], .x{
  touch-action:manipulation;
}

/* ---------- toast ---------- */
#toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(150%);
  background:var(--card);border:1px solid var(--line-2);color:var(--text);border-radius:13px;
  padding:13px 20px;font-size:.9rem;box-shadow:var(--shadow-lg);z-index:400;max-width:90vw;
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast.ok{border-color:rgba(15,122,58,.45)}
#toast.err{border-color:rgba(198,40,40,.45)}

/* ---------- ticket ---------- */
.stub{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-bottom:18px}
.stub-top{padding:22px 24px;background:linear-gradient(120deg,var(--orange-soft),#ffffff);border-bottom:1px solid var(--line)}
.stub-top .ev{font-family:var(--display);font-size:1.15rem;font-weight:700;color:var(--ink)}
.stub-top .mt{font-size:.85rem;color:var(--muted);margin-top:3px}
.stub-mid{display:flex;gap:22px;padding:24px;align-items:center;flex-wrap:wrap}
.qr{width:168px;height:168px;background:#fff;border-radius:12px;padding:8px;flex:none}
.qr svg{width:100%;height:100%;display:block}
.qr-fallback{display:grid;place-items:center;text-align:center;padding:14px;color:#0a0a0c}
.stub-info{flex:1;min-width:170px;display:flex;flex-direction:column;gap:9px}
.stub-info .lbl{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:700}
.stub-info .val{font-weight:600;color:var(--ink)}
.code{letter-spacing:.07em;background:var(--card-2);border:1px solid var(--line);border-radius:7px;padding:4px 9px;display:inline-block;font-size:.85rem;color:var(--orange-ink)}
.perf{border-top:2px dashed var(--line-2);position:relative}
.perf::before,.perf::after{content:"";position:absolute;top:-11px;width:20px;height:20px;border-radius:50%;background:var(--bg)}
.perf::before{left:-11px}
.perf::after{right:-11px}

/* ---------- the gate ---------- */
.verify-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.verify-card{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);padding:30px;width:100%;max-width:430px;border-top:5px solid var(--line-2)}
.verify-card.ok{border-top-color:var(--green)}
.verify-card.warn{border-top-color:var(--amber)}
.verify-card.bad{border-top-color:var(--red)}
.verify-icon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:16px}
.verify-card.ok .verify-icon{background:var(--green-soft);color:var(--green)}
.verify-card.warn .verify-icon{background:var(--amber-soft);color:var(--amber)}
.verify-card.bad .verify-icon{background:var(--red-soft);color:var(--red)}
.verify-icon svg{width:28px;height:28px}
.verify-card h2{font-size:1.4rem;margin-bottom:6px}
.rows{margin:20px 0}
.rows > div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--line);font-size:.92rem}
.rows .k{color:var(--muted)}
.rows .v{font-weight:600;text-align:right;color:var(--ink)}

/* ---------- misc ---------- */
.seg{display:flex;background:var(--card-2);border-radius:11px;padding:4px;gap:4px}
.seg button{flex:1;background:none;border:none;padding:9px;border-radius:8px;cursor:pointer;font-family:var(--sans);font-size:.87rem;font-weight:600;color:var(--muted)}
.seg button.on{background:var(--orange);color:var(--on-orange)}
.seg button:disabled{opacity:.4;cursor:not-allowed}

/* ---------- checkout ----------

   Three short steps, each one named. People abandon a checkout when they
   cannot tell how much is left, so the steps are spelled out and the order
   stays on screen the whole way through. */
.ck-steps{display:flex;align-items:center;gap:7px;margin-top:7px;flex-wrap:wrap}
.ck-step{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.76rem;font-weight:600;color:var(--faint);
}
.ck-step i{
  display:grid;place-items:center;width:19px;height:19px;border-radius:50%;
  background:var(--card-2);border:1px solid var(--line);
  font-size:.68rem;font-style:normal;font-weight:700;color:var(--faint);
}
.ck-step + .ck-step::before{
  content:"";width:14px;height:1px;background:var(--line-2);margin-right:1px;
}
.ck-step.now{color:var(--ink)}
.ck-step.now i{background:var(--orange);border-color:var(--orange);color:var(--on-orange)}
.ck-step.done{color:var(--green-deep)}
.ck-step.done i{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.ck-step.done i svg{width:10px;height:10px}

.ck-order{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--card);margin-bottom:20px;
}
.ck-order-top{
  display:flex;gap:13px;align-items:center;padding:14px 15px;
  background:var(--bg-2);border-bottom:1px dashed var(--line-2);
}
.ck-when{
  flex:none;width:46px;padding:6px 0;border-radius:11px;text-align:center;line-height:1.05;
  background:var(--ink);color:#fff;
}
.ck-when .d{font-family:var(--display);font-weight:800;font-size:1.06rem}
.ck-when .m{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72);font-weight:600}
.ck-ev{
  font-weight:700;font-size:.98rem;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ck-where{font-size:.8rem;color:var(--muted);margin-top:2px}
.ck-lines{padding:11px 15px 3px}
.ck-line{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:.91rem}
.ck-line i{
  font-style:normal;font-weight:700;color:var(--orange-ink);
  font-variant-numeric:tabular-nums;margin-right:2px;
}
.ck-total{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:11px 15px 14px;margin-top:5px;border-top:1px solid var(--line);
}
.ck-total span{font-size:.88rem;color:var(--muted)}
.ck-total b{font-family:var(--display);font-size:1.28rem;color:var(--ink);letter-spacing:-.02em}

/* ---------- choosing tickets ----------

   This is the moment the whole site exists for, so it is built to feel
   like picking a ticket rather than filling in a form: each type is a
   stub with a torn edge, choosing one lights it up, and the total is
   always in view with the amount written on the button itself. */
.buy-panel{padding:0;overflow:hidden}
.buy-top{
  padding:18px 20px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-2),var(--card));
}
.buy-top h3{font-size:1.08rem;letter-spacing:-.015em;margin:0 0 3px}
.buy-top .from{font-size:.84rem;color:var(--muted)}
.buy-list{padding:14px 16px 4px;display:flex;flex-direction:column;gap:10px}

.tt{
  position:relative;
  border:1px solid var(--line);border-radius:14px;
  padding:14px 15px 14px 22px;background:var(--card);
  cursor:pointer;
  transition:border-color .2s, box-shadow .22s, background .2s, transform .18s cubic-bezier(.22,.8,.3,1);
}
/* the torn edge of a stub */
.tt::before{
  content:"";position:absolute;left:9px;top:12px;bottom:12px;width:2px;
  background-image:radial-gradient(circle at 1px 2px, var(--line-2) 1px, transparent 1.4px);
  background-size:2px 7px;
  transition:background-image .2s;
}
.tt:hover{border-color:var(--line-2);box-shadow:0 4px 14px rgba(23,23,27,.07)}
.tt.picked{
  border-color:var(--orange);background:var(--orange-soft);
  box-shadow:0 0 0 3px rgba(242,106,27,.15), 0 6px 18px rgba(242,106,27,.14);
}
.tt.picked::before{background-image:radial-gradient(circle at 1px 2px, var(--orange) 1px, transparent 1.4px)}
.tt.sold{opacity:.55;cursor:default}
.tt.sold:hover{border-color:var(--line);box-shadow:none}
.tt-top{display:flex;justify-content:space-between;gap:14px;align-items:center}
.tt h4{font-size:.97rem;margin-bottom:2px;letter-spacing:-.01em}
.tt-price{
  font-family:var(--display);font-weight:800;font-size:1.12rem;
  color:var(--ink);letter-spacing:-.015em;margin-top:5px;
}
.tt-price.free{color:var(--green-deep)}
.tt-left{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.74rem;font-weight:700;color:var(--orange-ink);margin-top:5px;
}
.tt-left::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange)}

.qty{display:flex;align-items:center;gap:4px;flex:none;background:var(--card-2);border-radius:11px;padding:3px}
.tt.picked .qty{background:rgba(255,255,255,.72)}
.qty button{
  width:40px;height:40px;border-radius:10px;border:1px solid transparent;background:transparent;
  font-size:1.15rem;line-height:1;cursor:pointer;color:var(--text);
  transition:background .15s, color .15s, transform .12s;
}
.qty button:hover:not(:disabled){background:var(--card);border-color:var(--line-2);color:var(--orange-ink)}
.qty button:active:not(:disabled){transform:scale(.92)}
.qty button:disabled{opacity:.34;cursor:default}
.qty b{min-width:22px;text-align:center;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700}
/* an empty type shows one clear button instead of a zero */
.tt-add{
  flex:none;border:1px solid var(--line-2);background:var(--card);color:var(--text);
  border-radius:11px;padding:0 18px;min-height:44px;min-width:72px;   /* a thumb, not a cursor */
  font-size:.9rem;font-weight:600;cursor:pointer;
  transition:all .16s;
}
.tt:hover .tt-add{border-color:var(--orange);color:var(--orange-ink);background:var(--orange-soft)}

.buy-foot{padding:4px 16px 16px}
.total-line{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:14px 0 13px;border-top:1px solid var(--line);margin-bottom:12px;
}
.total-line .lbl{font-size:.88rem;color:var(--muted)}
.total-line .lbl small{display:block;font-size:.74rem;color:var(--faint)}
.total-line b{
  font-family:var(--display);font-size:1.5rem;color:var(--ink);letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}
/* a small nudge each time the total changes, so it is clearly live */
.total-line b.bump{animation:totalBump .32s cubic-bezier(.22,.8,.3,1)}
@keyframes totalBump{
  0%{transform:scale(1)} 42%{transform:scale(1.09);color:var(--orange-ink)} 100%{transform:scale(1)}
}
/* the reassurances, small and factual */
.buy-trust{
  display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:13px;
  font-size:.76rem;color:var(--faint);
}
.buy-trust span{display:inline-flex;align-items:center;gap:5px}
.buy-trust svg{flex:none;color:var(--green-deep)}
@media (prefers-reduced-motion:reduce){
  .total-line b.bump{animation:none}
  .tt,.qty button{transition:none}
}

.mpesa-note{
  display:flex;gap:11px;align-items:flex-start;background:var(--green-soft);
  border:1px solid rgba(46,204,113,.3);border-radius:var(--radius-sm);padding:13px 15px;font-size:.87rem;
}
.mpesa-note svg{flex:none;margin-top:2px;color:var(--green)}

.setup li{margin-bottom:10px;color:var(--text-2);font-size:.93rem}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.icon-btn{
  background:var(--card-2);border:1px solid var(--line);color:var(--muted);border-radius:9px;
  padding:6px 7px;cursor:pointer;display:inline-flex;line-height:0;transition:all .15s;
}
.icon-btn:hover{color:var(--ink);border-color:var(--line-2)}
.icon-btn.danger:hover{color:var(--red);border-color:rgba(198,40,40,.4)}

.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg);position:relative;overflow:hidden}
.auth-wrap::before{
  content:"";position:absolute;inset:-30% 30% auto -20%;height:700px;
  background:none;
}
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);padding:34px;width:100%;max-width:420px;position:relative}
.auth-card h2{font-size:1.5rem;margin-bottom:6px}
.auth-switch{text-align:center;font-size:.89rem;color:var(--muted);margin:18px 0 0}
.auth-switch a{color:var(--green);font-weight:600;text-decoration:none;cursor:pointer}

/* ============================================================
   Phones

   A 390px screen is not a small desktop. Desktop spacing and type
   here means three swipes to reach a button. So on a phone the
   scale comes DOWN — tighter sections, smaller headings, less
   padding — while the things a thumb has to hit stay big.
   ============================================================ */
@media(max-width:640px){
  body{font-size:15px;line-height:1.55}
  .wrap,.wrap-sm{padding:0 18px}

  /* type: one step down across the board */
  h1{font-size:1.65rem;line-height:1.2}
  h2{font-size:1.3rem}
  h3{font-size:1.05rem}
  h4{font-size:.95rem}
  .ev-title{font-size:1.5rem;margin-bottom:6px}
  .ev-tagline{font-size:.95rem;margin:0 0 18px}
  .buy-head,.panel-title{font-size:1.05rem}
  .ph-lg{font-size:2.6rem}
  .small{font-size:.85rem}
  .tiny{font-size:.76rem}

  /* space: roughly half of the desktop rhythm */
  section{padding:40px 0}
  .hero{padding:30px 0 34px}
  .section-head{margin-bottom:24px}
  .section-head p{font-size:.95rem}
  .panel{padding:16px 15px;border-radius:14px}
  .panel + .panel{margin-top:12px}
  .panel-head{margin-bottom:12px}

  /* header: a logo and one action, not a banner */
  .site-head .wrap{height:60px;gap:12px}
  .logo img,.site-head .logo img{height:34px}
  .nav{gap:8px}
  .nav a.btn{font-size:.82rem;padding:10px 15px;min-height:42px}

  /* thumbs still get big targets */
  .btn{min-height:46px;padding:12px 18px;font-size:.9rem}
  .btn-sm{min-height:40px;padding:9px 14px;font-size:.82rem}
  .btn-lg{font-size:.95rem;padding:14px 20px}
  .btn-block,.btn-lg{width:100%}
  .icon-btn{width:40px;height:40px}
  input,select,textarea{min-height:46px;padding:11px 13px}
  .field{margin-bottom:13px}
  .field label{font-size:.8rem;margin-bottom:5px}
  .chip{min-height:40px;padding:9px 14px;display:inline-flex;align-items:center;font-size:.82rem}
  .qty button{width:42px;height:42px;font-size:1.15rem}
  .search-bar{padding:6px 14px;min-height:46px}
  .search-bar input{font-size:16px}
  .back-link{display:inline-flex;align-items:center;min-height:40px}

  /* one column everywhere it matters */
  .hero-cta,.band > div{flex-direction:column;align-items:stretch}
  .hero-cta .btn,.band .btn{width:100%}
  .app-head{flex-direction:column;align-items:stretch;gap:10px}
  .app-head .btn{width:100%}
  .app-head h1{font-size:1.45rem}
  .steps,.cards,.price-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .stats-strip{gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .row-2{grid-template-columns:minmax(0,1fr);gap:0}

  /* the event page */
  .page{padding:16px 0 36px}
  .ev-cols{grid-template-columns:minmax(0,1fr) !important;gap:16px}
  #buyBox{position:static !important;top:auto !important}
  /* less room on a phone, but still the whole poster */
  .ev-hero{border-radius:16px;margin-bottom:16px;padding:16px;min-height:220px}
  .ev-hero img{max-height:240px}
  .ev-hero.is-ph{aspect-ratio:2.1/1;min-height:0;padding:0}
  .ph-lg{font-size:2.2rem}
  .ev-chips{gap:7px;margin-bottom:10px}
  .badge,.by-org{font-size:.72rem;padding:4px 9px}
  .by-org{padding:3px 10px 3px 3px}
  .by-org img,.by-org i{width:20px;height:20px}
  .ev-facts{gap:11px}
  .back-link{margin-bottom:8px !important}

  .buy-bar{display:flex}
  body.has-buy-bar{padding-bottom:78px}

  /* the dashboard: tabs across the top, one column below */
  .app-main,.side{min-width:0}
  .side{
    flex-direction:row;flex-wrap:wrap;gap:10px;padding:10px 16px 8px;align-items:center;
    position:sticky;top:0;z-index:60;background:var(--bg-2);border-bottom:1px solid var(--line);
  }
  .side > *{min-width:0}
  .side .logo{flex:none;margin-right:auto}
  /* who you are is already in the page heading — the row is worth more */
  .side .org-pill{display:none}
  .side .logo img{height:32px}
  .side-nav{
    flex-direction:row;order:3;width:100%;gap:6px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:2px 16px 4px;margin:0 -16px;
    /* a soft edge, so it reads as "there is more this way" */
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
            mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .side-nav::-webkit-scrollbar{display:none}
  /* the base rule stretches each button to the sidebar width; across the top
     they size to their own label instead, and the strip scrolls */
  .side-nav button{
    flex:none;width:auto;white-space:nowrap;padding:10px 14px;
    font-size:.86rem;min-height:42px;border-radius:99px;
  }
  .side-nav button svg{display:none}
  .side-foot{margin:0;flex-direction:row;gap:8px;order:1;flex:none}
  .side-foot .btn{width:auto;min-height:42px;padding:9px 13px;font-size:.78rem}
  .org-pill .nm,.org-pill .sb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .app-main{padding:18px 16px 44px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}
  .kpi{padding:13px 14px}
  .kpi .v{font-size:1.1rem}
  .kpi .k{font-size:.66rem}

  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -15px;padding:0 15px}
  .panel > div[style*="align-items:flex-end"]{min-width:0}
  .bar-row .nm{width:84px}
  .bar-row .vl{width:78px}
  .table-wrap table{min-width:560px}

  /* modals sit at the bottom, the way a phone expects */
  .backdrop{padding:0;align-items:flex-end}
  .modal{
    max-width:100%;border-radius:20px 20px 0 0;margin:0;
    max-height:92vh;display:flex;flex-direction:column;
  }
  .modal-head{padding:16px 18px 14px}
  .modal-head h3{font-size:1.15rem}
  .modal-body{padding:16px 18px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .modal-foot{
    padding:12px 18px calc(12px + env(safe-area-inset-bottom));
    flex-direction:column-reverse;gap:8px;border-radius:0;
  }
  .modal-foot .btn{width:100%}
  .modal-foot .btn-soft{background:none;border:none;min-height:40px}

  .sent-note{padding:12px 14px;margin-bottom:16px;font-size:.88rem;gap:10px}
  .otp-input{font-size:1.4rem !important;letter-spacing:.34em;padding:12px 8px 12px 16px}
  .upload{gap:12px}
  .upload-pv{width:80px;height:80px}

  /* the ticket */
  .all-set{padding:22px 18px;margin-bottom:16px}
  .all-set .tick{width:52px;height:52px;margin-bottom:10px}
  .all-set h2{font-size:1.35rem}
  .all-set p{font-size:.9rem}
  .qr{width:min(70vw,240px);height:min(70vw,240px)}
  .stub-mid{flex-direction:column;align-items:center;text-align:center;gap:14px;padding:18px}
  .stub-top{padding:16px 18px}
  .stub-info{width:100%}

  #toast{left:16px;right:16px;bottom:16px;transform:translateY(160%);max-width:none}
  #toast.show{transform:translateY(0)}
}

@media(max-width:380px){
  .stats-strip,.kpis{grid-template-columns:minmax(0,1fr)}
  .wrap,.wrap-sm{padding:0 14px}
}

/* a phone held sideways at the gate */
@media(max-height:520px) and (orientation:landscape){
  .hero{padding:24px 0}
  .side{position:static;height:auto}
  .modal{max-height:96vh}
}

@media print{
  .site-head,.site-foot,.no-print{display:none !important}
  body,html{background:#fff;color:#000}
  .stub{border:1px solid #ccc;break-inside:avoid;page-break-inside:avoid;background:#fff}
  .stub + .stub{break-before:page;page-break-before:always}
  .stub-top{background:#f2f2f2}
  .stub-top .ev,.stub-info .val,.total-line b{color:#000}
}