/* ==========================================================================
   Event Networks | bespoke landing page (eventnetworks.com.au)
   Identity: "pop-up networks that just work": energetic, event-grade.
   Electric festival palette (violet/magenta + cyan signal + lime capacity)
   on a clean base. Space Grotesk display on a contrast axis with Inter.
   Scroll-driven centrepiece: a venue's network comes alive as you scroll.
   Self-contained. Distinct from the rural-site framework and from fall.css.
   ========================================================================== */
:root{
  /* base */
  --bg:        oklch(0.985 0.006 280);
  --bg-2:      oklch(0.965 0.012 285);
  --paper:     oklch(1 0 0);
  --ink:       oklch(0.24 0.05 285);
  --ink-soft:  oklch(0.40 0.04 285);
  --muted:     oklch(0.52 0.03 285);
  --line:      oklch(0.90 0.012 285);

  /* festival energy */
  --brand:     oklch(0.52 0.24 300);   /* electric violet */
  --brand-ink: oklch(0.44 0.23 300);
  --brand-deep:oklch(0.30 0.14 295);
  --magenta:   oklch(0.62 0.27 348);   /* hot pink-magenta */
  --cyan:      oklch(0.74 0.16 200);   /* bright signal cyan */
  --cyan-ink:  oklch(0.52 0.13 215);
  --lime:      oklch(0.86 0.21 128);   /* capacity / "online" green */
  --lime-ink:  oklch(0.62 0.18 142);
  --amber:     oklch(0.80 0.16 70);

  /* night sections (the venue at night) */
  --night:     oklch(0.20 0.06 290);
  --night-2:   oklch(0.26 0.08 295);
  --on-dark:   oklch(0.97 0.012 290);
  --on-dark-soft: oklch(0.82 0.03 290);

  --accent:    var(--magenta);
  --accent-ink:oklch(0.50 0.24 350);

  --display:"Syne", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans:"Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --maxw:1200px;
  --gutter:clamp(1.15rem,5vw,5rem);
  --radius:16px; --radius-lg:26px; --radius-sm:11px;
  --shadow:0 2px 6px oklch(0.3 0.06 290 / .06), 0 26px 64px -28px oklch(0.3 0.1 290 / .30);
  --shadow-sm:0 1px 3px oklch(0.3 0.06 290 / .07), 0 12px 26px -18px oklch(0.3 0.08 290 / .26);
  --z-nav:200;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:clamp(1.02rem,.99rem + .18vw,1.13rem); line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--brand-ink); }
::selection{ background:oklch(0.74 0.16 200 / .45); }

h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.05;
  letter-spacing:-0.02em; text-wrap:balance; margin:0; color:var(--ink); }
h1{ font-size:clamp(2.5rem,1.6rem + 4vw,4.7rem); letter-spacing:-0.03em; }
h2{ font-size:clamp(1.95rem,1.4rem + 2.4vw,3.25rem); }
h3{ font-size:clamp(1.22rem,1.05rem + .8vw,1.6rem); }
p{ margin:0; text-wrap:pretty; }
.lead{ font-size:clamp(1.16rem,1.04rem + .6vw,1.48rem); line-height:1.5; color:var(--ink-soft); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.measure{ max-width:62ch; }
.skip{ position:absolute; left:-999px; }
.skip:focus{ left:1rem; top:1rem; z-index:999; background:var(--ink); color:#fff; padding:.7rem 1rem; border-radius:8px; }
:where(a,button,summary,input,textarea):focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; border-radius:6px; }

/* kicker */
.kicker{ font-family:var(--display); font-weight:600; font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand-ink); margin:0 0 1rem;
  display:inline-flex; align-items:center; gap:.55rem; overflow-wrap:anywhere; }
.kicker::before{ content:""; width:26px; height:2px; background:linear-gradient(90deg,var(--magenta),var(--cyan)); flex:none; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans); font-weight:600; white-space:nowrap;
  font-size:1rem; line-height:1; padding:.92rem 1.5rem; border-radius:999px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .35s var(--ease), box-shadow .35s, background-color .25s, border-color .25s, color .25s; }
.btn--primary{ background:linear-gradient(115deg,var(--brand),var(--magenta)); color:oklch(0.99 0.01 320);
  box-shadow:0 10px 28px -12px oklch(0.55 0.25 320 / .7); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 38px -12px oklch(0.55 0.25 320 / .8); }
.btn--ghost{ background:transparent; color:var(--brand-ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--brand); color:var(--brand-ink); transform:translateY(-2px); }
.btn--lg{ padding:1.08rem 1.9rem; font-size:1.06rem; }
.btn--on-dark{ background:var(--on-dark); color:var(--brand-deep); }
.btn--on-dark:hover{ background:#fff; transform:translateY(-2px); }
@media (prefers-reduced-motion: reduce){ .btn:hover{ transform:none; } }

/* ---------- header ---------- */
.site{ position:sticky; top:0; z-index:var(--z-nav);
  background:oklch(0.985 0.006 280 / .82); backdrop-filter:blur(13px) saturate(1.4);
  border-bottom:1px solid transparent; transition:border-color .3s, background-color .3s; }
.site.is-stuck{ border-color:var(--line); }
.site__in{ display:flex; align-items:center; justify-content:space-between; min-height:70px; gap:1rem; flex-wrap:wrap; }
.brand{ display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--ink);
  font-family:var(--display); font-weight:600; font-size:1.22rem; letter-spacing:-0.02em; }
.brand__mark{ width:30px; height:30px; flex:none; }
.nav{ display:flex; align-items:center; gap:1.5rem; }
.nav a:not(.btn){ color:var(--ink-soft); text-decoration:none; font-weight:500; font-size:.96rem; }
.nav a:not(.btn):hover{ color:var(--brand-ink); }
.nav a[aria-current="page"]{ color:var(--brand-ink); }
.nav__toggle{ display:none; font-family:var(--sans); font-weight:600; font-size:.95rem; background:transparent;
  border:1.5px solid var(--line); border-radius:999px; padding:.5rem 1rem; color:var(--ink); cursor:pointer; }
@media (max-width:760px){
  .nav__toggle{ display:inline-block; }
  .nav{ display:none; width:100%; flex-direction:column; align-items:flex-start; gap:.9rem; padding:.4rem 0 1rem; }
  .nav[data-open="true"]{ display:flex; }
  .nav .btn{ width:100%; justify-content:center; }
}

/* ---------- hero ---------- */
.hero{ position:relative; padding:clamp(3rem,2.5rem + 5vw,7rem) 0 clamp(2.5rem,2rem + 4vw,5rem); overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:-25% -15% auto -15%; height:95%; z-index:-1;
  background:radial-gradient(55% 65% at 78% 12%, oklch(0.62 0.27 348 / .26), transparent 70%),
             radial-gradient(50% 60% at 10% 0%, oklch(0.74 0.16 200 / .30), transparent 66%),
             radial-gradient(45% 55% at 50% 110%, oklch(0.52 0.24 300 / .18), transparent 70%); }
.hero__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,4vw,4.5rem); align-items:center; }
@media (max-width:920px){ .hero__grid{ grid-template-columns:1fr; } }
.hero h1{ margin-bottom:1.25rem; }
/* gradient-clip text: display sizes >=24px/700 ONLY (clears AA-large 3:1 at ~3.93:1). NEVER reuse inline at body size — it fails 4.5:1. */
.hero h1 em{ font-style:normal; background:linear-gradient(115deg,var(--magenta),var(--brand) 60%,var(--cyan-ink));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero .lead{ max-width:46ch; margin-bottom:1.9rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }
.hero__note{ margin-top:1.9rem; max-width:48ch; color:var(--muted); font-size:.97rem;
  padding-left:1rem; border-left:3px solid; border-image:linear-gradient(var(--magenta),var(--cyan)) 1; }

/* hero figure: the live event panel (preserves the dashboard facts) */
.hero__fig{ position:relative; justify-self:center; width:min(100%,460px); }
.dash{ position:relative; background:var(--night); color:var(--on-dark); border-radius:var(--radius-lg);
  padding:clamp(1.1rem,1rem + 1vw,1.5rem); box-shadow:var(--shadow); overflow:hidden;
  border:1px solid oklch(1 0 0 / .08); }
.dash::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 50% at 85% 0%, oklch(0.62 0.27 348 / .28), transparent 70%),
             radial-gradient(55% 45% at 0% 100%, oklch(0.74 0.16 200 / .22), transparent 70%); }
.dash > *{ position:relative; z-index:1; }
.dash__bar{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--display); font-weight:600;
  font-size:.78rem; letter-spacing:.04em; color:var(--on-dark-soft); margin-bottom:1.1rem; overflow-wrap:anywhere; }
.dash__dot{ width:9px; height:9px; border-radius:50%; background:var(--lime); flex:none;
  box-shadow:0 0 0 0 oklch(0.86 0.21 128 / .7); animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 oklch(0.86 0.21 128 / .6); } 70%{ box-shadow:0 0 0 9px oklch(0.86 0.21 128 / 0); } 100%{ box-shadow:0 0 0 0 oklch(0.86 0.21 128 / 0); } }
.dash__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; margin-bottom:1.1rem; }
.tankcard{ background:oklch(1 0 0 / .07); border:1px solid oklch(1 0 0 / .12); border-radius:var(--radius-sm);
  padding:.7rem .7rem .8rem; min-width:0; }
.tankcard .lvl{ font-family:var(--display); font-weight:700; font-size:1.45rem; line-height:1; color:var(--on-dark); }
.tankcard .nm{ font-size:.72rem; color:var(--on-dark-soft); margin:.3rem 0 .55rem; overflow-wrap:anywhere; }
.tankcard .meter{ height:5px; border-radius:99px; background:oklch(1 0 0 / .14); overflow:hidden; }
.tankcard .meter i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--cyan),var(--lime)); }
.tankcard.low .meter i{ background:linear-gradient(90deg,var(--amber),var(--magenta)); }
.dash__chart{ background:oklch(1 0 0 / .05); border:1px solid oklch(1 0 0 / .1); border-radius:var(--radius-sm); padding:.8rem; margin-bottom:.9rem; }
.dash__chart .cap{ display:flex; justify-content:space-between; gap:.5rem; font-size:.72rem; color:var(--on-dark-soft); margin-bottom:.4rem; flex-wrap:wrap; }
.dash__alert{ display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:600;
  color:oklch(0.92 0.04 350); background:oklch(0.62 0.27 348 / .18); border:1px solid oklch(0.62 0.27 348 / .35);
  border-radius:999px; padding:.45rem .85rem; overflow-wrap:anywhere; }
.dash__alert svg{ width:16px; height:16px; flex:none; }

/* ---------- section rhythm ---------- */
.section{ padding:clamp(3.5rem,2.5rem + 4vw,7rem) 0; }
.panel{ background:var(--bg-2); }
.section__head{ max-width:46ch; margin-bottom:clamp(2rem,3vw,3rem); }
.section__head h2{ margin-bottom:.85rem; }
.section__head p{ color:var(--ink-soft); font-size:1.14rem; }

/* ---------- pains ---------- */
.pains{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:clamp(1rem,2vw,1.6rem); }
.pain{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem 1.5rem 1.6rem;
  min-width:0; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), border-color .25s; }
.pain:hover{ transform:translateY(-3px); border-color:oklch(0.62 0.27 348 / .4); }
.pain h3{ font-size:1.18rem; margin-bottom:.5rem; display:flex; align-items:flex-start; gap:.6rem; overflow-wrap:break-word; }
.pain h3 .x{ flex:none; width:26px; height:26px; border-radius:50%; background:oklch(0.62 0.27 348 / .14);
  color:var(--accent-ink); font-family:var(--display); font-weight:700; font-size:1rem; display:grid; place-items:center; }
.pain p{ color:var(--ink-soft); }

/* ---------- feats ---------- */
.feats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:clamp(1.1rem,2.2vw,1.9rem); }
.feat{ display:flex; gap:1rem; align-items:flex-start; min-width:0; }
.feat__ic{ flex:none; width:46px; height:46px; padding:11px; border-radius:13px; color:var(--brand-ink);
  background:linear-gradient(140deg, oklch(0.52 0.24 300 / .12), oklch(0.74 0.16 200 / .14));
  border:1px solid oklch(0.52 0.24 300 / .18); }
.feat h3{ font-size:1.18rem; margin-bottom:.4rem; overflow-wrap:break-word; }
.feat p{ color:var(--ink-soft); }
.feat > div{ min-width:0; }

/* ---------- compare / year-on-year ---------- */
.compare{ display:grid; grid-template-columns:1fr .9fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
@media (max-width:840px){ .compare{ grid-template-columns:1fr; } }
.compare h2{ margin-bottom:1rem; }
.yoy{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.4rem,2vw,2rem); box-shadow:var(--shadow-sm); }
.yoy__row{ display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:center; margin-bottom:.9rem; }
.yoy__yr{ font-family:var(--display); font-weight:600; font-size:.92rem; color:var(--muted); min-width:3ch; }
.yoy__track{ height:14px; border-radius:99px; background:var(--bg-2); overflow:hidden; }
.yoy__track i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--cyan),var(--brand)); }
.yoy__track.now i{ background:linear-gradient(90deg,var(--magenta),var(--brand)); }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:clamp(1.4rem,3vw,2.6rem); counter-reset:s; }
.step{ counter-increment:s; position:relative; padding-top:2.4rem; min-width:0; }
.step::before{ content:none; position:absolute; top:0; left:0;
  font-family:var(--display); font-weight:700; font-size:1.6rem;
  background:linear-gradient(115deg,var(--magenta),var(--cyan-ink)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.step::after{ content:""; position:absolute; top:1.05rem; left:2.6rem; right:0; height:2px;
  background:linear-gradient(90deg,oklch(0.62 0.27 348 / .4), oklch(0.74 0.16 200 / .05)); }
.step:last-child::after{ display:none; }
.step h3{ font-size:1.22rem; margin-bottom:.45rem; overflow-wrap:break-word; }
.step p{ color:var(--ink-soft); }

/* ---------- proof / stats ---------- */
.proof{ max-width:62ch; }
.proof h2{ margin-bottom:1rem; }
.proof > p{ color:var(--ink-soft); font-size:1.12rem; }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:1rem; margin-top:2rem; }
.stat{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem 1.4rem; min-width:0; box-shadow:var(--shadow-sm); }
.stat b{ font-family:var(--display); font-weight:700; font-size:1.5rem; display:block; color:var(--brand-ink); }
.stat span{ color:var(--muted); font-size:.93rem; overflow-wrap:break-word; }

/* ---------- centrepiece: the venue comes alive ---------- */
.alive{ background:var(--night); color:var(--on-dark); position:relative; overflow:hidden; }
.alive::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(40% 30% at 82% 6%, oklch(0.62 0.27 348 / .25), transparent 70%),
             radial-gradient(45% 35% at 8% 96%, oklch(0.74 0.16 200 / .22), transparent 70%); }
.alive .wrap{ position:relative; z-index:1; }
.alive__intro{ max-width:42ch; padding-bottom:clamp(1rem,2vw,2rem); }
.alive__intro .tag{ font-family:var(--display); font-weight:600; letter-spacing:.04em; font-size:.85rem;
  color:var(--cyan); margin-bottom:.9rem; display:inline-flex; align-items:center; gap:.5rem; text-transform:uppercase; }
.alive__intro h2{ color:var(--on-dark); margin-bottom:.85rem; }
.alive__intro p{ color:var(--on-dark-soft); font-size:1.14rem; }

.alive__cols{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
@media (max-width:900px){ .alive__cols{ grid-template-columns:1fr; } }
.alive__stage{ position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; }
@media (max-width:900px){ .alive__stage{ height:auto; top:64px; padding:1.2rem 0; } }

/* the venue map / stage device */
.venue{ width:min(420px,86vw); aspect-ratio:4/5; position:relative; background:var(--night-2);
  border-radius:var(--radius-lg); border:1px solid oklch(1 0 0 / .12); padding:1.1rem;
  box-shadow:0 40px 90px -40px #000; display:flex; flex-direction:column; }
.venue__top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.8rem; flex-wrap:wrap; }
.venue__title{ font-family:var(--display); font-weight:600; font-size:.95rem; color:var(--on-dark); }
.venue__phase{ font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--night); background:var(--cyan); border-radius:999px; padding:.28rem .7rem; transition:background-color .5s, color .5s; }
.venue.is-peak .venue__phase{ background:var(--magenta); color:oklch(0.99 0.02 350); }
.venue__map{ position:relative; flex:1; border-radius:var(--radius); overflow:hidden;
  background:radial-gradient(120% 90% at 50% 120%, oklch(0.30 0.1 295), oklch(0.18 0.05 290));
  border:1px solid oklch(1 0 0 / .08); }
/* zones light up as the network powers on */
.zone{ position:absolute; border-radius:12px; border:1px solid oklch(1 0 0 / .14);
  background:oklch(1 0 0 / .04); display:flex; flex-direction:column; justify-content:flex-end;
  padding:.5rem .55rem; transition:background-color .6s var(--ease), border-color .6s, box-shadow .6s; overflow:hidden; }
.zone b{ font-family:var(--display); font-weight:600; font-size:.7rem; color:var(--on-dark-soft); transition:color .6s; overflow-wrap:anywhere; }
.zone .bar{ height:4px; border-radius:99px; background:oklch(1 0 0 / .14); margin-top:.35rem; overflow:hidden; }
.zone .bar i{ display:block; height:100%; width:0%; border-radius:99px; background:linear-gradient(90deg,var(--cyan),var(--lime)); transition:width 1s var(--ease); }
.zone.lit{ background:oklch(0.52 0.24 300 / .26); border-color:oklch(0.74 0.16 200 / .5); box-shadow:0 0 22px -4px oklch(0.74 0.16 200 / .4) inset; }
.zone.lit b{ color:var(--on-dark); }
.zone.lit .bar i{ width:var(--fill,80%); }
.zone.pay.lit{ background:oklch(0.86 0.21 128 / .22); border-color:oklch(0.86 0.21 128 / .55); box-shadow:0 0 22px -4px oklch(0.86 0.21 128 / .45) inset; }
.zone.pay.lit .bar i{ background:linear-gradient(90deg,var(--lime),var(--cyan)); }
.zone.stage{ left:30%; right:30%; top:6%; height:18%; align-items:center; justify-content:center; }
.zone.stage b{ font-size:.74rem; }
.zone.gate{ left:6%; top:32%; width:24%; height:24%; }
.zone.vendor{ right:6%; top:30%; width:30%; height:30%; }
.zone.bar1{ left:8%; bottom:8%; width:30%; height:26%; }
.zone.crowd{ left:38%; bottom:6%; right:8%; height:30%; }
/* terminal dots connecting */
.venue__pos{ position:absolute; inset:auto 0 0 0; display:flex; gap:5px; justify-content:center; padding:0 0 .4rem; flex-wrap:wrap; }
.pos-dot{ width:7px; height:7px; border-radius:50%; background:oklch(1 0 0 / .18); transition:background-color .4s, box-shadow .4s; }
.pos-dot.on{ background:var(--lime); box-shadow:0 0 8px oklch(0.86 0.21 128 / .8); }
/* readout under the map */
.venue__read{ display:flex; gap:.5rem; margin-top:.8rem; }
.venue__read .rd{ flex:1; min-width:0; background:oklch(1 0 0 / .06); border:1px solid oklch(1 0 0 / .1); border-radius:var(--radius-sm); padding:.5rem .6rem; }
.venue__read .rd .v{ font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--on-dark); line-height:1; }
.venue__read .rd .k{ font-size:.64rem; color:var(--on-dark-soft); margin-top:.25rem; overflow-wrap:anywhere; }

/* scrolling beats */
.beats{ padding:5vh 0 8vh; }
.beat{ min-height:70vh; display:flex; flex-direction:column; justify-content:center; max-width:34ch; }
@media (max-width:900px){ .beat{ min-height:54vh; } }
.beat__time{ font-family:var(--display); font-weight:700; font-size:.85rem; letter-spacing:.05em;
  color:var(--cyan); margin-bottom:.7rem; }
.beat.is-peak .beat__time{ color:var(--magenta); }
.beat h3{ color:var(--on-dark); font-size:clamp(1.5rem,1.2rem + 1.6vw,2.4rem); margin-bottom:.7rem; }
.beat p{ color:var(--on-dark-soft); font-size:1.08rem; }

/* ---------- faq ---------- */
.faq{ max-width:780px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:1.35rem 2.5rem 1.35rem 0; position:relative;
  font-family:var(--display); font-weight:600; font-size:1.18rem; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:.35rem; top:50%; width:12px; height:12px; margin-top:-7px;
  border-right:2px solid var(--magenta); border-bottom:2px solid var(--magenta); transform:rotate(45deg); transition:transform .3s var(--ease); }
.faq details[open] summary::after{ transform:rotate(225deg); }
.faq p{ color:var(--ink-soft); padding-bottom:1.35rem; max-width:66ch; }

/* ---------- cta band ---------- */
.cta{ position:relative; overflow:hidden; }
.cta .wrap{ position:relative; background:linear-gradient(125deg,var(--brand-deep),var(--brand) 55%,var(--magenta));
  border-radius:var(--radius-lg); padding:clamp(2.4rem,2rem + 4vw,4.5rem); color:var(--on-dark); text-align:center;
  max-width:var(--maxw); }
.cta .wrap::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(40% 60% at 88% 10%, oklch(0.74 0.16 200 / .35), transparent 70%); border-radius:inherit; }
.cta h2,.cta p,.cta a{ position:relative; z-index:1; }
.cta h2{ color:var(--on-dark); max-width:22ch; margin:0 auto 1rem; }
/* on-dark (not -soft): soft variant fell to ~3.57:1 over the bright magenta band of the gradient — below AA 4.5:1 for body text */
.cta p{ color:var(--on-dark); max-width:52ch; margin:0 auto 1.8rem; font-size:1.14rem; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2rem,4vw,4rem); align-items:start; }
@media (max-width:840px){ .contact-grid{ grid-template-columns:1fr; } }
.form{ display:grid; gap:1.1rem; margin-top:1.2rem; }
.form__honey{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.field{ display:grid; gap:.4rem; }
.field label{ font-family:var(--display); font-weight:600; font-size:.92rem; color:var(--ink); }
.field .opt{ font-family:var(--sans); font-weight:400; color:var(--muted); font-size:.85rem; }
.field input,.field textarea{ font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--paper);
  border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:.8rem .9rem; width:100%; transition:border-color .2s; }
.field input:focus,.field textarea:focus{ border-color:var(--brand); outline:none; }
.field textarea{ min-height:140px; resize:vertical; }
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{ border-color:var(--accent-ink); }
.field__err{ display:none; color:var(--accent-ink); font-family:var(--sans); font-size:.85rem; font-weight:500; }
.field__err:not(:empty){ display:block; }
.form__note{ color:var(--muted); font-size:.88rem; }
.btn[aria-busy="true"]{ cursor:progress; opacity:.85; }
.aside{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.5rem,2vw,2rem); }
.aside h2{ font-size:1.4rem; margin-bottom:1rem; }
.aside dl{ margin:0; }
.aside dt{ font-family:var(--display); font-weight:600; color:var(--ink); margin-top:1rem; }
.aside dd{ margin:.2rem 0 0; color:var(--ink-soft); font-size:.97rem; }

/* ---------- guide article ---------- */
.article{ max-width:760px; }
.article table{ width:100%; border-collapse:collapse; font-size:.98rem; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.article th{ text-align:left; padding:.85rem 1rem; font-family:var(--display); font-weight:600; border-bottom:2px solid var(--line); background:var(--bg-2); }
.article td{ padding:.8rem 1rem; border-bottom:1px solid var(--line); }

/* ---------- footer ---------- */
.foot{ background:var(--brand-deep); color:var(--on-dark-soft); padding:clamp(3rem,2rem + 3vw,4.5rem) 0 2.4rem; }
.foot a{ color:oklch(0.9 0.03 290); text-decoration:none; }
.foot a:hover{ color:#fff; }
.foot__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2.2rem; }
.foot__promise{ font-family:var(--display); font-weight:600; font-size:1.25rem; color:var(--on-dark); max-width:18ch; }
.foot__cols{ display:flex; flex-wrap:wrap; gap:2rem 3rem; }
.foot__col h4{ font-family:var(--display); font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--cyan); margin:0 0 .85rem; }
.foot__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.foot__col li{ font-size:.95rem; color:var(--on-dark-soft); overflow-wrap:anywhere; }
.foot__bottom{ border-top:1px solid oklch(1 0 0 / .12); margin-top:2.6rem; padding-top:1.5rem;
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; color:oklch(0.72 0.03 290); font-size:.85rem; }
.foot__bottom a{ color:oklch(0.82 0.03 290); }

/* ---------- reveal motion (visible by default; JS hides only below-fold) ---------- */
.reveal{ transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-pending{ opacity:0; transform:translateY(22px); }
@media (prefers-reduced-motion: reduce){
  .reveal.is-pending{ opacity:1; transform:none; }
  .zone, .zone .bar i, .pos-dot, .venue__phase{ transition:none; }
  .dash__dot{ animation:none; }
}

/* ==========================================================================
   .prose — reusable long-form layer for article pages.
   Scoped: every rule lives under .prose so it never touches nav/hero/footer.
   Uses ONLY existing brand tokens + fonts — no new colours.
   Contrast verified vs --bg (oklch .985): ink 15.9:1, ink-soft 8.9:1,
   brand-ink links/markers 8.5:1 — all well past WCAG AA 4.5:1.
   ========================================================================== */
.prose{
  max-width:68ch;            /* readable measure */
  margin-inline:auto;        /* centred */
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.7;           /* comfortable long-form leading */
  text-wrap:pretty;
}

/* paragraph rhythm */
.prose p{ margin:0 0 1.1em; max-width:none; }
.prose > :last-child{ margin-bottom:0; }

/* lead / first-paragraph treatment — slightly larger, muted, contrast-safe */
.prose > .lead,
.prose > p:first-of-type{
  font-size:clamp(1.16rem,1.04rem + .55vw,1.42rem);
  line-height:1.55;
  color:var(--ink-soft);     /* 8.9:1 over --bg */
  margin-bottom:1.6em;
}

/* heading rhythm — display font, generous top, tighter bottom, balanced */
.prose h2,.prose h3,.prose h4{
  font-family:var(--display); font-weight:600; color:var(--ink);
  letter-spacing:-0.02em; line-height:1.12; text-wrap:balance;
}
.prose h2{ font-size:clamp(1.6rem,1.3rem + 1.3vw,2.25rem); margin:2.4em 0 .55em; letter-spacing:-0.025em; }
.prose h3{ font-size:clamp(1.18rem,1.05rem + .6vw,1.45rem); margin:2em 0 .5em; }
.prose h4{ font-size:1.1rem; margin:1.7em 0 .45em; }
.prose h2:first-child,.prose h3:first-child{ margin-top:0; }
/* the page H1 sits inside .prose — keep its native scale, give it breathing room */
.prose h1{ margin:0 0 .6em; }

/* links — visible accent + offset underline, accessible contrast (8.5:1) */
.prose a{
  color:var(--brand-ink);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:.18em;
  text-decoration-color:oklch(0.44 0.23 300 / .45);
  transition:color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.prose a:hover{ color:var(--accent-ink); text-decoration-color:currentColor; }

/* lists — proper indent, accent markers, comfortable li spacing */
.prose ul,.prose ol{ margin:0 0 1.1em; padding-left:1.5em; }
.prose li{ margin:0 0 .55em; padding-left:.2em; }
.prose li::marker{ color:var(--brand-ink); font-weight:600; }  /* 8.5:1 */
.prose li > ul,.prose li > ol{ margin:.55em 0 .2em; }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose strong{ color:var(--ink); font-weight:600; }

/* blockquote */
.prose blockquote{
  margin:1.6em 0; padding:.3em 0 .3em 1.3em;
  border-left:3px solid var(--accent);
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.12rem,1.02rem + .5vw,1.35rem); line-height:1.45;
  color:var(--ink-soft); text-wrap:balance;
}
.prose blockquote p{ margin:0; }
.prose cite{ display:block; margin-top:.6em; font-family:var(--sans); font-style:normal;
  font-size:.92rem; font-weight:600; color:var(--muted); }

/* inline + block code */
.prose code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:.12em .42em; }
.prose pre{ margin:1.4em 0; padding:1.1rem 1.25rem; background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--radius); overflow-x:auto;
  font-size:.92rem; line-height:1.55; }
.prose pre code{ background:none; border:0; padding:0; }

/* FAQ — styled <details>/<summary>: rounded, hairline token border, pointer */
.prose details{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper); margin:0 0 .75rem; overflow:hidden;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.prose details:hover{ border-color:oklch(0.52 0.24 300 / .35); }
.prose details[open]{ border-color:var(--brand-ink); box-shadow:var(--shadow-sm); }
.prose summary{
  cursor:pointer; list-style:none;
  font-family:var(--display); font-weight:600; color:var(--ink);
  font-size:clamp(1.02rem,.98rem + .3vw,1.18rem); line-height:1.3;
  padding:1rem 3rem 1rem 1.15rem; position:relative;
  text-wrap:balance;
}
.prose summary::-webkit-details-marker{ display:none; }
.prose summary::after{
  content:""; position:absolute; right:1.15rem; top:1.25em;
  width:.7em; height:.7em; border-right:2px solid var(--brand-ink);
  border-bottom:2px solid var(--brand-ink); transform:translateY(-25%) rotate(45deg);
  transition:transform .25s var(--ease);
}
.prose details[open] summary::after{ transform:translateY(10%) rotate(-135deg); }
.prose summary:focus-visible{ outline:3px solid var(--cyan); outline-offset:-3px; border-radius:6px; }
.prose details > :not(summary){ margin-inline:1.15rem; }
.prose details > p:last-child{ margin-bottom:1.05rem; }
.prose details > p:first-of-type{ margin-top:-.15rem; }
.prose details p{ color:var(--ink-soft); }

/* generous section spacing + horizontal rule */
.prose hr{ border:0; border-top:1px solid var(--line); margin:2.6em 0; }

/* trailing call-to-action paragraph reads as a calm closing note, not chrome */
.prose p.cta{
  margin-top:2.2em; padding-top:1.6em; border-top:1px solid var(--line);
  color:var(--ink-soft); font-size:1.05rem;
}

@media (prefers-reduced-motion: reduce){
  .prose a,.prose details,.prose summary::after{ transition:none; }
}