/* ==========================================================================
   URBAN IN VILNIUS — Vertical Bone Regeneration with Dr. Istvan Urban
   Hand-rebuilt from the Webflow original. No jQuery, no framework.
   ========================================================================== */

/* --- Font ---------------------------------------------------------------- */
@font-face{
  font-family:'TWK Everett';
  src:url('../assets/fonts/twkeverett-regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

/* --- Tokens -------------------------------------------------------------- */
:root{
  --violet:#5200BC;
  --indigo:#483EC1;
  --mint:#69EAB7;
  --lilac:#AF71FF;
  --ink:#18181B;
  --ink-60:#18181B99;
  --gray:#F7F7F7;
  --line:#E4E4E7;
  --white:#fff;

  --shell:90rem;          /* 1440px */
  --gut:25px;

  --sec-s:3rem;
  --sec-m:4.375rem;
  --sec-l:7rem;

  --font:'TWK Everett',Verdana,Geneva,sans-serif;
}

/* --- Reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--font); font-weight:400; font-size:1rem; line-height:1.4;
  letter-spacing:-.01em;
  font-synthesis:none;              /* one weight only — never fake a bold */
  -webkit-font-smoothing:antialiased;
}
img,svg,video{display:block; max-width:100%}
img{height:auto}
h1,h2,h3,h4,h5,h6,p,figure,blockquote{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input,textarea,select{font:inherit; color:inherit}
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--violet); outline-offset:3px;
}
.hero :where(a,button):focus-visible,
.foot :where(a,button):focus-visible,
.contact-card :where(a,button):focus-visible{outline-color:var(--mint)}
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--violet); color:#fff; padding:.75rem 1rem; font-size:.875rem;
  text-transform:uppercase; letter-spacing:-.32px;
}
.skip-link:focus{left:0}

/* --- Layout primitives --------------------------------------------------- */
.pad{padding-left:var(--gut); padding-right:var(--gut)}
.shell{width:100%; max-width:var(--shell); margin-inline:auto}
.sec-s{padding-top:var(--sec-s); padding-bottom:var(--sec-s)}
.sec-m{padding-top:var(--sec-m); padding-bottom:var(--sec-m)}
.sec-l{padding-top:var(--sec-l); padding-bottom:var(--sec-l)}
.sec-m--double{padding-bottom:8.75rem}
.sec-m--nt{padding-top:0}

/* The editorial rail: a small tag chip on the left, content on the right.
   This one pattern carries most of the page. */
.rail{display:grid; grid-template-columns:1fr 1fr; gap:78px}
.rail--narrow{grid-template-columns:min(331px,30%) minmax(0,1fr); gap:16px}
.rail__aside{align-self:start}

/* --- Type ---------------------------------------------------------------- */
.h1,.h2,.h3{color:var(--violet); font-weight:400; letter-spacing:-.02em}
.h1{font-size:4rem; line-height:1; max-width:11em}
.h2{font-size:3rem; line-height:1.1; max-width:11.6em}
.h3{font-size:2rem; line-height:1; max-width:15em}
.body-m{color:var(--ink-60); font-size:1.25rem; line-height:1.3; max-width:62ch}
.body-s{color:var(--ink-60); font-size:1rem; line-height:1.45; letter-spacing:-.5px; max-width:66ch}
.body-m--ink,.body-s--ink{color:var(--ink)}

/* --- Tag chips ----------------------------------------------------------- */
.tag{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--gray); color:var(--ink);
  padding:.5rem .75rem; font-size:.7rem; line-height:1.3;
  text-transform:uppercase; letter-spacing:-.32px;
}
.tag::after{content:''; width:8px; height:8px; background:#848484; flex:none}
.tag--card{
  background:var(--gray); color:var(--ink);
  font-size:.75rem; padding:.5rem .75rem;
}
.tag--card::after{display:none}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--violet); color:var(--white); border:1px solid var(--indigo);
  padding:.5rem .75rem; font-size:.875rem; line-height:1.3;
  text-transform:uppercase; letter-spacing:-.32px;
  transition:background-color .2s ease, color .2s ease;
}
.btn:hover{background:var(--indigo)}
.btn--mint{background:var(--mint); color:var(--ink); border-color:var(--mint)}
.btn--mint:hover{background:#4fd7a0; color:var(--ink)}
.btn--ghost{background:transparent; color:var(--white); border-color:var(--white)}
.btn--ghost:hover{background:var(--white); color:var(--violet)}
.btn--block{width:100%}

/* --- Header / nav -------------------------------------------------------- */
.nav{
  position:absolute; inset:0 0 auto; z-index:60;
  padding-top:17px; padding-bottom:17px;
}
.nav__in{display:flex; align-items:center; justify-content:space-between; gap:2rem}
.nav__brand{display:block; flex:none}
.nav__brand svg,.nav__brand img{width:99px; height:auto}
.nav__links{display:flex; align-items:center; gap:2rem}
.nav__links a{
  color:var(--white); font-size:1rem; text-decoration:underline;
  text-underline-offset:4px; text-decoration-thickness:1px;
}
.nav__links a:hover{color:var(--mint)}
.nav__burger{display:none}

/* Solid-ground variant for the inner pages (no hero behind it) */
.nav--solid{position:relative; background:var(--violet)}

/* --- Mobile menu --------------------------------------------------------- */
.menu[hidden]{display:none}
.menu{
  position:fixed; inset:0; z-index:100; background:var(--violet);
  display:flex; flex-direction:column; padding:1.5rem var(--gut) 2rem;
}
.menu__top{display:flex; align-items:center; justify-content:space-between}
.menu__close{color:var(--white); font-size:2rem; line-height:1; padding:.25rem .5rem}
.menu__links{
  display:flex; flex-direction:column; gap:1.25rem;
  margin-top:auto; margin-bottom:auto;
}
.menu__links a{color:var(--white); font-size:2rem; letter-spacing:-.02em}
.menu__links a:hover{color:var(--mint)}
.menu__cta{margin-top:2rem}

/* --- Hero ---------------------------------------------------------------- */
.hero{
  position:relative; background-color:var(--violet); color:var(--white);
  background-image:linear-gradient(#5200bcf2,#5200bcf2),url('../assets/img/mimicrybonetissue.avif');
  background-repeat:repeat,no-repeat;
  background-position:0 0,50% 50%;
  background-size:auto,cover;
}
.hero__in{padding-top:clamp(6.5rem,8.96vw,129px); padding-bottom:23px}
.hero__title{
  font-size:clamp(1.75rem,3.056vw,44px); line-height:1.18; letter-spacing:-.02em;
  color:var(--white); font-weight:400; max-width:24ch;
}
.hero__title span{display:block}
.hero__title .is-lilac{color:var(--lilac)}
.hero__meta{
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.6fr) minmax(0,1fr);
  gap:1.5rem; align-items:end; margin-top:clamp(2.5rem,5.5vw,74px);
}
.hero__meta p{font-size:1rem; line-height:1.4}
.hero__meta-end{display:flex; justify-content:flex-end; align-items:flex-start; gap:2.4rem}
/* Nudge the button down by the first line's half-leading so its top sits on the
   meta text's cap line rather than on the text's box top. */
.hero__meta-end .btn{margin-top:5px}

/* --- Media band (full-bleed image / video) ------------------------------- */
.band{position:relative; background:#000}
.band img{width:100%; aspect-ratio:16/9; height:auto; object-fit:cover}
.band--tall img{aspect-ratio:16/9}
.band__play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:transparent; width:100%; cursor:pointer;
}
.band__play span{
  display:grid; place-items:center; width:72px; height:72px; border-radius:50%;
  background:#ffffffd9; transition:transform .2s ease, background-color .2s ease;
}
.band__play:hover span{transform:scale(1.06); background:#fff}
.band__play svg{width:24px; height:24px; margin-left:3px; fill:var(--ink)}

/* --- Classes (Lectures / Hands-On) --------------------------------------- */
.classes{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.card{position:relative; overflow:hidden; background:var(--gray)}
.card img{width:100%; aspect-ratio:1/1; height:auto; object-fit:cover}
.card__tag{position:absolute; top:0; right:0}
.card__heading{
  position:absolute; inset:auto 0 0; z-index:1;
  color:var(--white); text-align:center; font-size:clamp(2.5rem,6.67vw,6rem);
  line-height:1.2; margin-bottom:1.5rem; letter-spacing:-.02em; font-weight:400;
  transform:translate3d(0,150px,0); transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.card.is-in .card__heading{transform:translate3d(0,0,0)}

/* --- Why attend ---------------------------------------------------------- */
.why__grid{display:grid; grid-template-columns:1fr 1fr; gap:64px 144px}
.why__item h3{margin-bottom:8px}
.why__item p{max-width:425px}

/* --- Speaker ------------------------------------------------------------- */
.speaker{background:var(--gray)}
.speaker__card{display:grid; grid-template-columns:1fr 1fr; gap:24px; background:var(--mint);
  max-width:1344px; margin-inline:auto}
.speaker__card img{width:100%; aspect-ratio:1/1; height:100%; object-fit:cover}
.speaker__body{padding:clamp(1.5rem,3vw,2.5rem); display:flex; flex-direction:column}
.speaker__body h2{color:var(--violet); font-size:2.75rem; line-height:1; max-width:12em}
.speaker__body h2 span{display:block}
.speaker__bio{margin-top:auto; padding-top:clamp(2rem,6vw,5rem)}
.speaker__label{
  border-top:1px solid var(--violet); padding-top:.5rem; margin-bottom:1rem;
  font-size:.75rem; text-transform:uppercase; letter-spacing:-.32px; color:var(--violet);
}
.speaker__bio p{color:var(--violet); font-size:1rem; line-height:1.35; letter-spacing:-.5px}
.speaker__bio p + p{margin-top:1rem}

/* --- Agenda -------------------------------------------------------------- */
.agenda__h{max-width:323px; margin-bottom:32px}
.agenda__days{display:grid; grid-template-columns:1fr 1fr; gap:38px; margin-top:32px}
.day__title{color:var(--violet); font-size:2rem; line-height:1; letter-spacing:-.02em; white-space:nowrap}
.day{display:grid; grid-template-columns:88px 1fr; gap:128px; padding:20px 0}
.day__rows{border-top:1px solid var(--line)}
.day__row{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:1rem;
  padding:17px 0; border-bottom:1px solid var(--line);
}
.day__time{font-size:1rem; line-height:1.45; letter-spacing:-.5px; color:var(--ink)}
.day__what{font-size:1rem; color:var(--ink); line-height:1.45; letter-spacing:-.5px}

/* --- Tickets ------------------------------------------------------------- */
.ticket{border:1px solid var(--line); background:var(--white); padding:clamp(1.25rem,2.5vw,2rem); max-width:41rem}
.ticket__h{color:var(--violet); font-size:2rem; line-height:1; letter-spacing:-.02em}
.ticket__h span{display:block}
.ticket hr{border:0; border-top:1px solid var(--line); margin:32px 0}
.ticket__venue{font-size:1rem; line-height:1.5}
.ticket__price{display:flex; align-items:baseline; justify-content:space-between; margin:16px 0 24px}
.ticket__price .lbl{font-size:1rem}
.ticket__price .amt{font-size:1.75rem; line-height:1.3; letter-spacing:-.02em}
.ticket__list{display:flex; flex-direction:column; gap:0; margin-bottom:40px}
.ticket__list li{display:flex; align-items:center; gap:1rem; font-size:1rem; line-height:1.5}
.ticket__list svg{width:18px; height:18px; flex:none; stroke:var(--ink)}

/* --- Partners ------------------------------------------------------------ */
.partners__row{display:grid; grid-template-columns:200px 1fr; gap:0; align-items:start;
  border-top:1px solid var(--line); padding-top:32px; margin-top:32px}
/* the original leaves more air under the single premium tile than between rows */
.partners__row + .partners__row{margin-top:89px}
.partners__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:4px}
.logo-tile{
  background:var(--violet); color:#fff;      /* the marks are fill:currentColor */
  display:grid; place-items:center; aspect-ratio:1.58; padding:1.5rem;
  transition:background-color .15s linear, color .15s linear;
}
.logo-tile:hover{background:var(--indigo); color:#fff}
.logo-tile svg{width:auto; max-width:66%; max-height:44%; height:auto}

/* --- FAQ ----------------------------------------------------------------- */
.faq{display:grid; grid-template-columns:1fr 2fr; gap:128px}
.faq > div:first-child .h2{font-size:4rem; line-height:1; max-width:421px}
.faq__list{border-top:1px solid var(--line)}
.acc{border-bottom:1px solid var(--line)}
.acc__q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding:24px 0; text-align:left; font-size:1.125rem; line-height:1.35;
}
.acc__icon{position:relative; width:20px; height:20px; flex:none}
.acc__icon::before,.acc__icon::after{
  content:''; position:absolute; background:var(--ink); transition:transform .25s ease;
}
.acc__icon::before{inset:9px 0 auto; height:2px}
.acc__icon::after{inset:0 9px; width:2px; }
.acc[open] .acc__icon::after,.acc.is-open .acc__icon::after{transform:scaleY(0)}
.acc__a{overflow:hidden; height:0; transition:height .3s ease}
.acc__a p{padding-bottom:1.25rem; color:var(--ink-60); font-size:1rem; line-height:1.45; white-space:pre-line}

/* --- Contact ------------------------------------------------------------- */
.contact{
  position:relative; background-color:var(--mint);
  background-image:linear-gradient(#69eab799,#69eab799),url('../assets/img/mimicrybone.avif');
  background-repeat:repeat,no-repeat;
  background-position:0 0,50% 50%;
  background-size:auto,cover;
}
.contact__in{padding-top:112px; padding-bottom:112px}
.contact-card{
  max-width:560px; padding:24px 24px 56px;
  background:linear-gradient(115deg,#ffffff5c,#ffffff1f);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.contact-card h2{color:var(--violet); font-size:3rem; line-height:1.1; letter-spacing:-.02em; margin-bottom:24px}
.contact-card h2 span{display:block}
.contact-card p{margin:0 0 24px; color:var(--ink-60); font-size:1rem; line-height:1.45; letter-spacing:-.5px}

/* --- Footer -------------------------------------------------------------- */
.foot{background:var(--violet); color:var(--mint); overflow:hidden}
.foot__in{padding-top:137px; padding-bottom:0}
.foot__grid{display:grid; grid-template-columns:1.676fr 1.042fr 1fr; gap:24px}
.foot__mark svg{width:343px; height:auto; max-width:100%}
.foot__mark svg{color:var(--mint)}
.foot__cols{display:grid; grid-template-columns:1fr 1fr; gap:2rem 3rem}
.foot h2{
  font-size:.75rem; text-transform:uppercase; letter-spacing:-.32px;
  border-top:1px solid var(--mint); padding-top:.5rem; margin-bottom:.75rem; font-weight:400;
}
.foot p,.foot a{font-size:.875rem; line-height:1.5; color:var(--mint)}
.foot a:hover{color:var(--white); text-decoration:underline; text-underline-offset:3px}
.foot__pair{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.5rem 1rem}
.foot__legal{
  margin-top:195px; padding-top:1.5rem; border-top:1px solid #69eab74d;
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  font-size:.8125rem;
}

/* --- Marquee ------------------------------------------------------------- */
.marquee{background:var(--violet); overflow:hidden; padding-bottom:2rem}
.marquee__track{display:flex; width:max-content; animation:slide 40s linear infinite}
.marquee__track span{
  color:var(--mint); font-size:clamp(2.25rem,6.67vw,6rem); line-height:1.2;
  letter-spacing:-.02em; padding-right:1.5rem; white-space:nowrap;
}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* --- Scroll reveal ------------------------------------------------------- */
.reveal{opacity:0; transform:translate3d(0,30px,0);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.is-in{opacity:1; transform:none}

/* --- Modal --------------------------------------------------------------- */
.modal[hidden]{display:none}
.modal{position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:var(--gut)}
.modal__overlay{position:absolute; inset:0; background:#18181bb8}
.modal__box{
  position:relative; width:100%; max-width:820px; background:var(--white);
  max-height:88vh; overflow:auto; padding:clamp(1.5rem,3vw,2.5rem);
}
.modal__close{position:absolute; top:.75rem; right:1rem; font-size:1.75rem; line-height:1}
.modal__grid{display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:1.5rem}
.modal h2{color:var(--violet); font-size:2rem; line-height:1.1; letter-spacing:-.02em}
.modal dt{font-size:.75rem; text-transform:uppercase; letter-spacing:-.32px; color:var(--ink-60); margin-bottom:.25rem}
.modal dd{margin:0 0 1rem; font-size:1.0625rem}
.modal dd a:hover{color:var(--violet); text-decoration:underline}

/* Lightbox */
.lightbox[hidden]{display:none}
.lightbox{position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:var(--gut)}
.lightbox__overlay{position:absolute; inset:0; background:#000000e0}
.lightbox__inner{position:relative; width:min(100%,420px); aspect-ratio:9/16; max-height:86vh}
.lightbox iframe,.lightbox video{width:100%; height:100%; border:0; display:block; background:#000}
.lightbox video[hidden]{display:none}
.lightbox__close{position:absolute; top:-2.5rem; right:0; color:#fff; font-size:2rem; line-height:1}

/* --- Cookie banner ------------------------------------------------------- */
.cookie[hidden]{display:none}
.cookie{
  position:fixed; left:var(--gut); bottom:var(--gut); z-index:110;
  width:min(420px,calc(100% - var(--gut)*2));
  background:var(--white); border:1px solid var(--line); padding:1.25rem;
}
.cookie p{font-size:.875rem; line-height:1.45; color:var(--ink-60)}
.cookie a{text-decoration:underline; text-underline-offset:2px}
.cookie__row{display:flex; gap:.5rem; margin-top:1rem; flex-wrap:wrap}

/* --- Legal / rich text --------------------------------------------------- */
.legal{max-width:70ch}
.legal h1{color:var(--violet); font-size:3rem; line-height:1.1; letter-spacing:-.02em; margin-bottom:2rem}
.legal h2{color:var(--violet); font-size:1.75rem; line-height:1.15; margin:2.5rem 0 .75rem; letter-spacing:-.02em}
.legal h3{color:var(--violet); font-size:1.375rem; margin:2rem 0 .5rem; letter-spacing:-.02em}
.legal p{color:var(--ink-60); font-size:1rem; line-height:1.6; margin-bottom:1rem}
.legal ul{list-style:disc; padding-left:1.25rem; margin-bottom:1rem}
.legal li{color:var(--ink-60); font-size:1rem; line-height:1.6; margin-bottom:.375rem}
.legal a{color:var(--violet); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere}

/* --- Anchors clear the fixed chrome -------------------------------------- */
section[id],div[id].anchor{scroll-margin-top:90px}

/* ==========================================================================
   Breakpoints — phone block LAST so it wins on the shared selectors
   ========================================================================== */
@media (max-width:1200px){
  .day{grid-template-columns:auto 1fr; gap:48px}
  .faq{gap:64px}
}
@media (max-width:991px){
  :root{--sec-l:6rem; --sec-m:3.5rem; --sec-s:2.5rem}
  .h1{font-size:3.25rem}
  .h2{font-size:2.75rem}
  .h3{font-size:2.25rem}
  .nav__links{display:none}
  .nav__burger{display:block; color:var(--white); padding:.25rem}
  .nav__burger svg{width:28px; height:28px; stroke:currentColor}
  .rail,.rail--narrow{grid-template-columns:1fr; gap:1.5rem}
  .why__grid{grid-template-columns:1fr}
  .agenda__days{grid-template-columns:1fr}
  .day{grid-template-columns:1fr; gap:1rem}
  .why__grid{gap:2.5rem}
  .faq{grid-template-columns:1fr}
  .partners__row{grid-template-columns:1fr}
  .partners__grid{grid-template-columns:repeat(3,1fr)}
  .speaker__card{grid-template-columns:1fr}
  .speaker__card img{min-height:0; aspect-ratio:1/1}
  .foot__grid{grid-template-columns:1fr; gap:2.5rem}
  .modal__grid{grid-template-columns:1fr}
  .hero__meta{grid-template-columns:1fr 1fr; gap:1.5rem}
  .hero__meta-end{grid-column:1/-1; justify-content:space-between}
}
@media (max-width:767px){
  .classes{grid-template-columns:1fr}
  .partners__grid{grid-template-columns:repeat(2,1fr)}
  .foot__cols{grid-template-columns:1fr}
  .foot__legal{flex-direction:column}
}
@media (max-width:479px){
  :root{--gut:18px}
  .h1{font-size:2.5rem}
  .h2{font-size:2.25rem}
  .h3{font-size:2rem}
  .body-m{font-size:1rem}
  .hero__meta{grid-template-columns:1fr}
  .hero__in{padding-top:7rem}
  .partners__grid{grid-template-columns:repeat(2,1fr)}
  .foot__pair{grid-template-columns:1fr}
  .legal h1{font-size:2.25rem}
  .ticket__price{flex-direction:column; align-items:flex-start; gap:.25rem}
}

/* --- Motion preference --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  .reveal{opacity:1; transform:none}
  .card__heading{transform:none}
}

/* --- No-JS fallback: never hide content behind a dead reveal ------------- */
.no-js .reveal{opacity:1; transform:none}
.no-js .card__heading{transform:none}
.no-js .acc__a{height:auto}

/* ==========================================================================
   Registration — multi-step form
   ========================================================================== */
.reg{min-height:60vh}
.reg__head{margin-bottom:2.5rem}
.reg__head h1{color:var(--violet); font-size:clamp(2rem,4vw,3rem); line-height:1.1; letter-spacing:-.02em}
.reg__head p{color:var(--ink-60); font-size:1.0625rem; margin-top:.75rem; max-width:52ch}

.steps{display:flex; gap:.5rem; margin-bottom:2rem; flex-wrap:wrap}
.steps li{
  width:2rem; height:2rem; display:grid; place-items:center;
  border:1px solid var(--line); font-size:.875rem; color:var(--ink-60);
}
.steps li[aria-current="step"]{background:var(--violet); border-color:var(--violet); color:#fff}
.steps li.is-done{background:var(--mint); border-color:var(--mint); color:var(--ink)}

.step[hidden]{display:none}
.step h2{color:var(--violet); font-size:1.75rem; line-height:1.15; letter-spacing:-.02em; margin-bottom:.5rem}
.step > p.hint{color:var(--ink-60); font-size:.9375rem; margin-bottom:1.5rem}

.field{margin-bottom:1.25rem; max-width:36rem}
.field label{display:block; font-size:.875rem; margin-bottom:.375rem}
.field input[type=text],.field input[type=email],.field input[type=tel]{
  width:100%; padding:.75rem; background:var(--white);
  border:1px solid var(--line); border-radius:0;
}
.field input:focus{outline:2px solid var(--violet); outline-offset:0; border-color:var(--violet)}
.field .err{display:none; color:#b42318; font-size:.8125rem; margin-top:.375rem}
.field.is-invalid .err{display:block}
.field.is-invalid input{border-color:#b42318}

.choices{display:flex; flex-direction:column; gap:.25rem; max-width:36rem; margin-bottom:1.25rem}
.choice{
  display:flex; align-items:center; gap:.75rem; padding:.75rem;
  border:1px solid var(--line); cursor:pointer; transition:border-color .15s ease, background-color .15s ease;
}
.choice:hover{border-color:var(--violet)}
.choice input{accent-color:var(--violet); width:1.05rem; height:1.05rem; flex:none; margin:0}
.choice:has(input:checked){border-color:var(--violet); background:#5200bc0a}
.choice .key{
  width:1.5rem; height:1.5rem; display:grid; place-items:center; flex:none;
  background:var(--gray); font-size:.75rem; text-transform:uppercase;
}
.choice span.txt{font-size:1rem}

.step__nav{display:flex; gap:.75rem; margin-top:2rem; flex-wrap:wrap}

.summary{border:1px solid var(--line); padding:1.25rem; margin-bottom:1.5rem; max-width:36rem}
.summary dt{font-size:.75rem; text-transform:uppercase; letter-spacing:-.32px; color:var(--ink-60); margin-top:.75rem}
.summary dt:first-child{margin-top:0}
.summary dd{margin:.125rem 0 0; font-size:1rem}

.reg__done[hidden]{display:none}
.reg__done{border:1px solid var(--mint); background:#69eab71f; padding:clamp(1.5rem,3vw,2.5rem); max-width:44rem}
.reg__done h2{color:var(--violet); font-size:1.75rem; letter-spacing:-.02em; margin-bottom:.75rem}
.reg__done p{color:var(--ink); font-size:1rem; line-height:1.5; margin-bottom:.75rem}
.reg__note{
  margin-top:2rem; padding:1rem; border-left:3px solid var(--indigo);
  background:var(--gray); font-size:.875rem; color:var(--ink-60); max-width:44rem;
}

/* --- Legal: cookie table -------------------------------------------------- */
.table-wrap{overflow-x:auto; margin:1.5rem 0}
.legal table{border-collapse:collapse; width:100%; min-width:34rem}
.legal th,.legal td{
  border:1px solid var(--line); padding:.625rem .75rem; text-align:left;
  font-size:.9375rem; line-height:1.45; vertical-align:top;
}
.legal th{background:var(--gray); font-weight:400; color:var(--ink)}
.legal td{color:var(--ink-60)}
.legal td code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink)}
.legal__updated{
  font-size:.8125rem; color:var(--ink-60); border-top:1px solid var(--line);
  margin-top:3rem; padding-top:1rem;
}

/* --- Block rhythm: the original's "margin-medium" is 32px ---------------- */
.rail .h2 + .body-m,
.rail .h2 + .body-s,
.rail .h1 + .body-m{margin-top:32px}

/* ==========================================================================
   Event-concluded notice — the course ran 20-21 Nov 2025
   ========================================================================== */
.passed[hidden]{display:none}
.passed{
  position:fixed; inset:0; z-index:140; display:grid; place-items:center; padding:var(--gut);
}
.passed__overlay{position:absolute; inset:0; background:#18181bcc}
.passed__box{
  position:relative; width:100%; max-width:560px; background:var(--white);
  padding:40px; text-align:left;
}
.passed__box h2{
  color:var(--violet); font-size:2rem; line-height:1.1; letter-spacing:-.02em;
  font-weight:400; margin:16px 0 0;
}
.passed__box p{
  color:var(--ink-60); font-size:1rem; line-height:1.45; letter-spacing:-.5px; margin-top:16px;
}
.passed__box p a{color:var(--violet); text-decoration:underline; text-underline-offset:2px}
.passed__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.passed__close{
  position:absolute; top:12px; right:16px; font-size:1.75rem; line-height:1; color:var(--ink);
}

/* A status label where a live CTA used to sit */
.status-closed{color:var(--mint)}
.ticket__closed{
  display:block; text-align:center; border:1px solid var(--line); background:var(--gray);
  color:var(--ink-60); padding:.5rem .75rem; font-size:.875rem; line-height:1.3;
  text-transform:uppercase; letter-spacing:-.32px;
}

@media (max-width:479px){
  .passed__box{padding:28px 20px}
  .passed__box h2{font-size:1.625rem}
}