/* ============================================================================
   Master Classes — invitation page, archive shelf, and the multi-step
   registration modal. Faithful to the Vespers system; the phone dial-code
   field + commitment checkbox reuse the Believers' Academy components
   (academy.css is loaded alongside this file — see vmm_context_assets()).
   ========================================================================== */

.mc .dev-eyebrow{display:inline-flex; align-items:center; gap:8px; font:700 .68rem/1 var(--font-body);
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent-strong);}
.mc .dev-eyebrow vm-icon{color:var(--gilt-500);}
.mc .prq-opt{font:600 .72rem/1 var(--font-body); letter-spacing:.04em; text-transform:uppercase; color:var(--fg3);}
/* Honeypot — the .prq-hp rule lives in prayer.css, which this page does not
   load, so the trap must be hidden here or it renders as a real field. */
.mc .prq-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.mc-hero, .mc-arch-hero{position:relative; isolation:isolate; overflow:hidden; background:var(--ink-900);
  padding:clamp(116px,17vh,196px) 0 clamp(52px,8vh,88px); text-align:center;}
.mc-hero-bg{position:absolute; inset:0; z-index:0;}
.mc-hero-bg img{width:100%; height:100%; object-fit:cover; opacity:.32; filter:saturate(.92);}
.mc-hero-scrim{position:absolute; inset:0; z-index:1;
  background:radial-gradient(120% 92% at 50% 6%, rgba(198,164,92,.2), transparent 60%),
    linear-gradient(180deg, rgba(20,22,46,.62), rgba(20,22,46,.94));}
.mc-hero .hero-arch, .mc-arch-hero .hero-arch{z-index:1;}
.mc-hero-inner{position:relative; z-index:2; max-width:860px; margin:0 auto;}
.mc-hero-inner .eyebrow{margin-bottom:18px;}
.mc-hero-inner h1{color:var(--on-dark-1); font-size:clamp(2.1rem,5vw,3.6rem); line-height:1.07;}
.mc-hero-inner h1 em{font-style:italic; color:var(--gilt-300);}
.mc-hero-inner .lead{color:var(--on-dark-2); margin:18px auto 0; max-width:60ch;}
.mc-hero-sub{color:var(--on-dark-2); font:italic 500 clamp(1.05rem,2vw,1.3rem)/1.5 var(--font-display);
  margin:16px auto 0; max-width:52ch;}
.mc-hero-host{display:inline-flex; align-items:center; gap:9px; margin:18px 0 0;
  font:400 .92rem/1 var(--font-body); color:var(--on-dark-2);}
.mc-hero-host vm-icon{color:var(--gilt-300);}
.mc-hero-host b{color:var(--on-dark-1); font-weight:600;}

/* Schedule facts */
.mc-facts{list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:26px 0 0; padding:0;}
.mc-fact{display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px;
  border:1px solid var(--border-on-dark); background:rgba(251,248,240,.05); text-align:left;}
.mc-fact-ic{display:inline-flex; color:var(--gilt-300); flex:none;}
.mc-fact-k{display:block; font:700 .6rem/1 var(--font-body); letter-spacing:.16em; text-transform:uppercase; color:var(--gilt-300);}
.mc-fact-v{display:block; font:500 .9rem/1.3 var(--font-body); color:var(--on-dark-1); margin-top:4px;}
.mc-hero-cta{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:30px;}
.mc-closed-pill{display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:999px;
  border:1px dashed var(--border-on-dark); color:var(--on-dark-2); font:600 .88rem/1 var(--font-body);}

/* ── Invitation — two picture-led movements ───────────────────────────────── */
.mc-mv-grid{display:grid; grid-template-columns:1fr; gap:clamp(28px,5vw,64px); align-items:center;}
@media (min-width:900px){
  .mc-mv-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);}
  .mc-mv-grid--rev{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);}
}
.mc-mv--b{background:var(--surface-warm); border-block:1px solid var(--border-soft);}
.mc-mv-text h2{margin-top:12px;}
.mc-mv-text > .btn{margin-top:26px;}

/* Figure: an arch crown behind the photograph and a gilt rule stepping out of
   it — the sanctuary motif, not a plain rectangle. */
.mc-mv-fig{position:relative; margin:0; isolation:isolate;}
.mc-mv-ph{display:block; width:100%; aspect-ratio:4/5; overflow:hidden;
  border-radius:210px 210px 20px 20px; box-shadow:var(--shadow-lg);}
.mc-mv-fig--wide .mc-mv-ph{aspect-ratio:4/3; border-radius:20px;}
.mc-mv-ph img{width:100%; height:100%; object-fit:cover;}
.mc-mv-arch{position:absolute; z-index:-1; left:50%; top:-16px; transform:translateX(-50%);
  width:calc(100% + 26px); aspect-ratio:4/5; border:1px solid var(--hairline-gold);
  border-radius:224px 224px 24px 24px; pointer-events:none;}
.mc-mv-rule{position:absolute; z-index:-1; left:-14px; bottom:-14px; width:46%; height:1px;
  background:linear-gradient(90deg, var(--gilt-500), transparent);}
.mc-mv-seal{position:absolute; right:-14px; bottom:-14px; width:60px; height:60px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--accent-strong); border:1px solid var(--hairline-gold);
  box-shadow:var(--shadow-sm);}
@media (max-width:560px){
  .mc-mv-ph{border-radius:150px 150px 18px 18px;}
  .mc-mv-arch{border-radius:162px 162px 22px 22px; width:calc(100% + 18px);}
  .mc-mv-seal{width:50px; height:50px; right:-6px; bottom:-10px;}
}

.mc-body{margin-top:18px; color:var(--fg2); max-width:62ch;}
.mc-body--plain p:first-of-type::first-letter{float:none; font:inherit; color:inherit; margin:0;}
.mc-body p{margin:0 0 15px; font:400 1.01rem/1.72 var(--font-body); color:var(--fg2);}
.mc-body p:first-of-type::first-letter{float:left; font:600 3.1rem/.86 var(--font-display); color:var(--accent-strong);
  margin:5px 11px 0 0;}
.mc-body h2, .mc-body h3{font-family:var(--font-display); color:var(--fg1); margin:26px 0 10px;}
.mc-body ul, .mc-body ol{margin:0 0 16px; padding-left:1.15rem; color:var(--fg2);}
.mc-body li{margin:0 0 8px; font:400 1rem/1.68 var(--font-body);}
.mc-about-text > .btn{margin-top:24px;}

.mc-aside-ic{width:50px; height:50px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--parchment-200); color:var(--accent-strong); box-shadow:0 0 0 6px rgba(198,164,92,.13); margin-bottom:14px;}

/* ── Clarity — its own movement, on a softly lit photograph ──────────────── */
.mc-clarity{position:relative; isolation:isolate; overflow:hidden; background:var(--surface-warm);}
.mc-clarity-bg{position:absolute; inset:0; z-index:0;}
.mc-clarity-bg img{width:100%; height:100%; object-fit:cover; opacity:.16; filter:saturate(.85);}
.mc-clarity-veil{position:absolute; inset:0; z-index:1;
  background:radial-gradient(90% 70% at 50% 0%, rgba(198,164,92,.14), transparent 64%),
    linear-gradient(180deg, rgba(251,248,240,.9), rgba(251,248,240,.96));}
.mc-clarity > .wrap{position:relative; z-index:2;}
.mc-clarity-head{text-align:center; max-width:54ch; margin:0 auto;}
.mc-clarity-head .kicker{margin-top:4px;}
.mc-clarity-grid{list-style:none; margin:clamp(26px,4vw,40px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:clamp(12px,1.8vw,16px);}
.mc-clarity-card{display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:14px;
  border:1px solid var(--hairline-gold); background:var(--surface); box-shadow:var(--shadow-sm);
  font:500 .96rem/1.35 var(--font-body); color:var(--fg1);
  transition:transform .35s var(--ease-veil), box-shadow .35s var(--ease-veil);}
@media (hover:hover){ .mc-clarity-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg);} }
.mc-clarity-tick{width:30px; height:30px; flex:none; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; background:var(--parchment-200); color:var(--accent-strong);}
.mc-clarity-facts{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px;
  margin:clamp(22px,3vw,30px) 0 0; font:500 .9rem/1.4 var(--font-body); color:var(--fg2);}
.mc-clarity-facts span{display:inline-flex; align-items:center; gap:8px;}
.mc-clarity-facts vm-icon{color:var(--gilt-700);}

/* ── Closing call — split band: the promise on ink, the room in a photograph ── */
.mc-call{background:var(--surface);}
.mc-call-band{display:grid; grid-template-columns:1fr; overflow:hidden; border-radius:24px;
  background:var(--ink-900); box-shadow:var(--shadow-lg);}
@media (min-width:900px){ .mc-call-band{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);} }
.mc-call-panel{position:relative; padding:clamp(30px,4vw,54px);
  background:radial-gradient(120% 90% at 0% 0%, rgba(198,164,92,.18), transparent 60%);}
.mc-call-seal{width:56px; height:56px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(198,164,92,.16); color:var(--gilt-300); box-shadow:0 0 0 6px rgba(198,164,92,.08); margin-bottom:16px;}
.mc-call-panel h2{font:600 clamp(1.7rem,3.4vw,2.5rem)/1.12 var(--font-display); color:var(--on-dark-1); margin:0;}
.mc-call-panel h2 em{font-style:italic; color:var(--gilt-300);}
.mc-call-panel > p{margin:14px 0 0; max-width:46ch; font:400 1rem/1.68 var(--font-body); color:var(--on-dark-2);}
.mc-call-list{list-style:none; margin:clamp(22px,3vw,30px) 0 0; padding:0; display:flex; flex-direction:column; gap:14px;}
.mc-call-list li{display:flex; align-items:center; gap:14px;}
.mc-call-ic{width:44px; height:44px; flex:none; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(198,164,92,.16); color:var(--gilt-300); border:1px solid var(--border-on-dark);}
.mc-call-txt{display:flex; flex-direction:column; gap:2px; min-width:0;}
.mc-call-txt b{font:600 1.02rem/1.2 var(--font-body); color:var(--on-dark-1);}
.mc-call-txt small{font:400 .86rem/1.35 var(--font-body); color:var(--on-dark-3, var(--on-dark-2));}
.mc-call-panel .btn{margin-top:clamp(24px,3vw,32px);}
.mc-call-photo{position:relative; min-height:280px; order:-1;}
@media (min-width:900px){ .mc-call-photo{order:0; min-height:100%;} }
.mc-call-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 22%;}

/* ── Archive shelf ───────────────────────────────────────────────────────── */
.mc-cards{display:grid; grid-template-columns:1fr; gap:clamp(20px,3vw,30px);}
@media (min-width:720px){ .mc-cards{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:1080px){ .mc-cards{grid-template-columns:repeat(3,minmax(0,1fr));} }
.mc-card{display:flex; flex-direction:column; overflow:hidden; border-radius:18px; border:1px solid var(--border);
  background:var(--surface); box-shadow:var(--shadow-sm); transition:transform .4s var(--ease-veil), box-shadow .4s var(--ease-veil);}
@media (hover:hover){ .mc-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg);} }
.mc-card-ph{display:block; width:100%; aspect-ratio:16/10; padding:0; border:0;}
.mc-card-ph img{width:100%; height:100%; object-fit:cover;}
.mc-card-body{display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:22px 22px 24px;}
.mc-card-tag{display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px;
  background:var(--parchment-200); color:var(--accent-strong); font:700 .62rem/1 var(--font-body);
  letter-spacing:.14em; text-transform:uppercase;}
.mc-card-body h3{font:600 1.3rem/1.24 var(--font-display); color:var(--fg1); margin:0;}
.mc-card-body h3 a{color:inherit;}
@media (hover:hover){ .mc-card-body h3 a:hover{color:var(--accent-strong);} }
.mc-card-sub{margin:0; font:italic 500 .98rem/1.5 var(--font-display); color:var(--accent-strong);}
.mc-card-when{display:flex; flex-wrap:wrap; gap:6px 16px; margin:0; font:500 .84rem/1.4 var(--font-body); color:var(--fg2);}
.mc-card-when span{display:inline-flex; align-items:center; gap:7px;}
.mc-card-when vm-icon{color:var(--gilt-700);}
.mc-card-ex{margin:0; font:400 .94rem/1.62 var(--font-body); color:var(--fg2);}
.mc-card-body .btn{margin-top:6px;}
.mc-empty{text-align:center; max-width:52ch; margin:0 auto;}
.mc-empty .lead{margin:12px auto 22px;}

/* ── How it works ─────────────────────────────────────────────────────────
   A full-bleed photographic band. The photo carries the room; the copy sits on
   a deep indigo veil so every line clears AA on the busiest part of the image. */
.mc-how{position:relative; isolation:isolate; overflow:hidden; background:var(--ink-900);}
.mc-how-bg{position:absolute; inset:0; z-index:0;}
.mc-how-bg img{width:100%; height:100%; object-fit:cover; opacity:.34; filter:saturate(.9);}
.mc-how-scrim{position:absolute; inset:0; z-index:1;
  background:radial-gradient(110% 80% at 50% 0%, rgba(198,164,92,.16), transparent 62%),
    linear-gradient(180deg, rgba(20,22,46,.86), rgba(20,22,46,.94));}
.mc-how > .wrap{position:relative; z-index:2;}
.mc-how-head{text-align:center; max-width:58ch; margin:0 auto;}
.mc-how-head .dev-eyebrow{color:var(--gilt-300);}
.mc-how-head .dev-eyebrow vm-icon{color:var(--gilt-300);}
.mc-how-head .kicker{margin-top:12px; color:var(--on-dark-1);}
.mc-how-head .kicker em{color:var(--gilt-300);}
.mc-how-head .lead{margin:14px auto 0; color:var(--on-dark-2);}
.mc-how-steps{list-style:none; margin:clamp(28px,4vw,44px) 0 0; padding:0;
  display:grid; grid-template-columns:1fr; gap:clamp(16px,2.4vw,22px);}
@media (min-width:640px){ .mc-how-steps{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:1080px){ .mc-how-steps{grid-template-columns:repeat(4,minmax(0,1fr));} }
.mc-how-step{position:relative; padding:26px 22px 24px; border-radius:18px;
  border:1px solid var(--border-on-dark); background:rgba(251,248,240,.06);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);}
.mc-how-n{position:absolute; top:18px; right:20px; font:600 1.5rem/1 var(--font-display); color:rgba(198,164,92,.4);}
.mc-how-ic{width:46px; height:46px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(198,164,92,.16); color:var(--gilt-300); box-shadow:0 0 0 6px rgba(198,164,92,.08); margin-bottom:14px;}
.mc-how-step h3{font:600 1.08rem/1.3 var(--font-display); color:var(--on-dark-1); margin:0 0 8px;}
.mc-how-step p{margin:0; font:400 .93rem/1.62 var(--font-body); color:var(--on-dark-2);}

/* ── Voices ──────────────────────────────────────────────────────────────── */
.mc-voices-head{text-align:center; max-width:52ch; margin:0 auto;}
.mc-voices-head .kicker{margin-top:12px;}
.mc-voice-grid{display:grid; grid-template-columns:1fr; gap:clamp(18px,2.6vw,26px); margin-top:clamp(26px,4vw,40px);}
@media (min-width:760px){ .mc-voice-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
.mc-voice{position:relative; margin:0; padding:28px 24px 24px; border-radius:18px; border:1px solid var(--border);
  background:var(--surface-warm); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:16px;}
.mc-voice-mark{position:absolute; top:16px; right:18px; color:var(--parchment-200);}
.mc-voice blockquote{margin:0; font:italic 400 1rem/1.66 var(--font-display); color:var(--fg1);}
.mc-voice-who{display:flex; align-items:center; gap:12px; margin-top:auto;}
.mc-voice-ph{display:block; width:48px; height:58px; flex:none; border-radius:10px; overflow:hidden;}
.mc-voice-ph img{width:100%; height:100%; object-fit:cover;}
.mc-voice-txt{display:flex; flex-direction:column; gap:3px; min-width:0;}
.mc-voice-name{font:600 .96rem/1.2 var(--font-body); color:var(--fg1);}
.mc-voice-loc{font:400 .84rem/1.2 var(--font-body); color:var(--fg3);}
.mc-voices-more{text-align:center; margin:clamp(22px,3vw,32px) 0 0;}

/* ── Registration modal ──────────────────────────────────────────────────── */
/* z-index 1260 sits above the cookie-consent bar (1200) — which is injected at
   wp_footer and would otherwise paint over the dialog's action row — while
   staying below the consent preferences dialog (1300). */
.mcreg{position:fixed; inset:0; z-index:1260; display:none; align-items:center; justify-content:center; padding:24px;}
/* :target is the JavaScript-DISABLED fallback only. With JS the script owns the
   open state, and it must: history.replaceState does not re-resolve the
   document's target element, so a live :target rule keeps the dialog painted
   after close() — which is why the close button appeared dead and the success
   confirmation was hidden behind it. */
.mcreg.is-open{display:flex;}
html:not(.js) .mcreg:target{display:flex;}
.mcreg-backdrop{position:absolute; inset:0; background:rgba(20,22,46,.6);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); border:0; cursor:pointer;}
.mcreg-card{position:relative; width:100%; max-width:620px; max-height:calc(100dvh - 48px); overflow:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  box-shadow:0 30px 80px -20px rgba(20,22,46,.5); padding:34px 30px 26px;
  animation:mcreg-in .42s var(--ease-veil) both; -webkit-overflow-scrolling:touch;}
@keyframes mcreg-in{from{opacity:0; transform:translateY(16px) scale(.985);} to{opacity:1; transform:none;}}
.mcreg-close{position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:50%; border:0; z-index:3;
  display:inline-flex; align-items:center; justify-content:center; color:var(--fg2); background:var(--surface); cursor:pointer;
  text-decoration:none; transition:background-color .2s, color .2s;}
.mcreg-close:hover{background:var(--surface-sunken); color:var(--fg1);}
.mcreg-close:focus-visible{outline:2px solid var(--gilt-700); outline-offset:2px;}

.mcreg-head{text-align:center; margin-bottom:20px;}
.mcreg-seal{width:58px; height:58px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--parchment-200); color:var(--accent-strong); box-shadow:0 0 0 6px rgba(198,164,92,.14); margin-bottom:12px;}
.mcreg-kicker{margin:0 0 6px; font:700 .64rem/1 var(--font-body); letter-spacing:.2em; text-transform:uppercase; color:var(--accent-strong);}
.mcreg-head h2{font:600 1.62rem/1.16 var(--font-display); color:var(--fg1); margin:0 0 10px;}
.mcreg-welcome{margin:0 auto; max-width:46ch; font:400 .96rem/1.62 var(--font-body); color:var(--fg2);}

/* progress */
.mcreg-progress{margin:0 0 20px;}
.mcreg-progress[hidden]{display:none !important;}
.mcreg-bar{height:4px; border-radius:999px; background:var(--parchment-200); overflow:hidden;}
.mcreg-bar-fill{display:block; height:100%; width:25%; border-radius:999px;
  background:linear-gradient(90deg, var(--gilt-700), var(--gilt-500));
  transition:width .5s var(--ease-veil);}
.mcreg-steplabel{margin:9px 0 0; font:600 .74rem/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:var(--fg3);}

/* steps */
.mcreg-step{border:0; margin:0; padding:0; min-width:0;}
.mcreg-step + .mcreg-step{margin-top:26px;}
.mcreg-form.is-wizard .mcreg-step{display:none; margin-top:0;}
.mcreg-form.is-wizard .mcreg-step.is-active{display:block; animation:mcreg-step-in .42s var(--ease-veil) both;}
@keyframes mcreg-step-in{from{opacity:0; transform:translateX(14px);} to{opacity:1; transform:none;}}
.mcreg-form.is-wizard.is-back .mcreg-step.is-active{animation-name:mcreg-step-back;}
@keyframes mcreg-step-back{from{opacity:0; transform:translateX(-14px);} to{opacity:1; transform:none;}}
.mcreg-step > legend{display:flex; align-items:center; gap:10px; padding:0; margin:0 0 16px;
  font:600 1.06rem/1.2 var(--font-display); color:var(--fg1);}
.mcreg-form.is-wizard .mcreg-step > legend{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.mcreg-step-n{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; flex:none;
  border-radius:50%; background:var(--parchment-200); color:var(--accent-strong);
  font:700 .78rem/1 var(--font-body);}
.mcreg-grid2{display:grid; grid-template-columns:1fr; gap:14px;}
@media (min-width:540px){ .mcreg-grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} }
.mcreg-step .vmm-field{margin:0;}
/* Direct children only. As a descendant selector this also matched the SECOND
   field inside .mcreg-grid2, pushing the right-hand column of every pair 14px
   below the left (Full name/Email, Country/City). The grid's own gap already
   spaces the pair; the row rhythm belongs to the step's own children. */
.mcreg-step > .vmm-field + .vmm-field,
.mcreg-step > .mcreg-grid2 + .vmm-field,
.mcreg-step > .vmm-field + .mcreg-grid2{margin-top:14px;}
/* Bottom-align the controls in a pair so they stay level even when one label
   wraps to two lines and the other does not. */
@media (min-width:540px){
  .mcreg-grid2 > .vmm-field{display:flex; flex-direction:column;}
  .mcreg-grid2 > .vmm-field > .vmm-input,
  .mcreg-grid2 > .vmm-field > .vmm-textarea,
  .mcreg-grid2 > .vmm-field > .acad-phone{margin-top:auto;}
}
.mcreg-note{display:flex; align-items:center; gap:8px; margin:16px 0 0; font:400 .84rem/1.5 var(--font-body); color:var(--fg3);}
.mcreg-note vm-icon{color:var(--gilt-700); flex:none;}

/* selectable chips (clarity areas + the updates choice) */
.mcreg-chips, .mcreg-radios{border:0; margin:0; padding:0; min-width:0;}
/* Step 4 stacks three unlike blocks — the commitment box, the updates choice,
   the accuracy box. .acad-commit carries its own 22px bottom margin from
   academy.css, which left the chip row sitting tight against the box below it.
   Neutralise it here and give the whole group one rhythm. */
.mcreg-step .acad-commit{margin:0;}
.mcreg-radios{margin:24px 0;}
.mcreg-step > .mcreg-radios:last-child{margin-bottom:0;}
.mcreg-chips-legend, .mcreg-radios > legend{padding:0; margin:0 0 12px; font:500 .92rem/1.45 var(--font-body); color:var(--fg1);}
.mcreg-chip-row{display:flex; flex-wrap:wrap; gap:9px;}
.mcreg-chip{position:relative; display:inline-flex;}
.mcreg-chip input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;}
.mcreg-chip-face{display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface); color:var(--fg2);
  font:500 .88rem/1 var(--font-body); cursor:pointer;
  transition:background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease);}
.mcreg-chip-face vm-icon{opacity:0; width:0; transition:opacity .22s var(--ease), width .22s var(--ease); overflow:hidden;}
.mcreg-chip input:checked + .mcreg-chip-face{background:var(--parchment-200); border-color:var(--gilt-500); color:var(--accent-strong);}
.mcreg-chip input:checked + .mcreg-chip-face vm-icon{opacity:1; width:14px;}
.mcreg-chip input:focus-visible + .mcreg-chip-face{outline:2px solid var(--gilt-700); outline-offset:2px;}
@media (hover:hover){ .mcreg-chip:hover .mcreg-chip-face{border-color:var(--gilt-500); transform:translateY(-1px);} }
.mcreg-other{margin-top:12px; animation:mcreg-other-in .32s var(--ease-veil) both;}
.mcreg-other[hidden]{display:none !important;}
@keyframes mcreg-other-in{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}

/* actions */
/* The forward action (Continue / Reserve my seat) always sits at the right edge;
   Back pushes itself to the left. Holds at every step and every width. */
.mcreg-actions{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:12px; margin-top:24px;}
.mcreg-actions .btn{margin:0;}
.mcreg-actions .btn[hidden]{display:none !important;}
.mcreg-back{margin-right:auto !important;}
.mcreg-actions .form-status{flex:1 0 100%; min-height:0;}
.mcreg-actions .form-status:empty{display:none;}
/* NOT display:flex — a flex container makes the inline <a> its own flex item, so
   the Privacy Policy link breaks onto its own line and the trailing full stop
   becomes a third item. Keep the note a normal block and float the icon. */
.mcreg-privacy{display:block; margin:16px 0 0; font:400 .81rem/1.5 var(--font-body); color:var(--fg2);}
.mcreg-privacy > vm-icon{vertical-align:-.15em; margin-right:7px; color:var(--accent-strong);}
.mcreg-privacy a{color:var(--accent-strong); text-underline-offset:2px;}

/* success */
.mcreg-success{text-align:center; padding:10px 4px;}
.mcreg-success[hidden]{display:none !important;}
.mcreg-success-mark{width:72px; height:72px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--parchment-200); color:var(--accent-strong); box-shadow:0 0 0 6px rgba(198,164,92,.14); margin-bottom:14px;}
.mcreg-success h2{font:600 1.5rem/1.2 var(--font-display); color:var(--fg1); margin:0 0 8px;}
.mcreg-success p{font:400 1rem/1.6 var(--font-body); color:var(--fg2); margin:0 auto 18px; max-width:40ch;}
.mcreg-success-cta{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.mcreg-success-cta .btn{margin:0;}

/* Dismissal — the sheet falls away on mobile, the card settles back on desktop.
   `is-closing` keeps the dialog painted for the length of the animation only. */
.mcreg.is-closing{display:flex;}
.mcreg.is-closing .mcreg-backdrop{animation:mcreg-fade .3s var(--ease-veil) both;}
.mcreg.is-closing .mcreg-card{animation:mcreg-out .3s var(--ease-veil) both;}
@keyframes mcreg-fade{to{opacity:0;}}
@keyframes mcreg-out{to{opacity:0; transform:translateY(12px) scale(.985);}}

/* Grab handle — the affordance for "drag me down". Mobile sheet only. */
.mcreg-grab{display:none;}

@media (max-width:560px){
  .mcreg{padding:0; align-items:flex-end;}
  .mcreg-card{max-width:none; border-radius:22px 22px 0 0; max-height:92dvh; padding:22px 18px 20px;
    animation-name:mcreg-up; animation-duration:.46s; overscroll-behavior:contain;}
  /* A real bottom sheet: it rises from off-screen rather than nudging upward. */
  @keyframes mcreg-up{from{transform:translateY(100%);} to{transform:none;}}
  .mcreg.is-closing .mcreg-card{animation-name:mcreg-sheet-out;}
  @keyframes mcreg-sheet-out{to{transform:translateY(100%);}}
  .mcreg-grab{display:block; width:44px; height:4px; border-radius:999px; background:var(--border);
    margin:-6px auto 14px; flex:none;}
  .mcreg-close{top:8px; right:8px;}
  .mcreg-head h2{font-size:1.4rem;}
  .mcreg-actions{gap:10px;}
}
@media (prefers-reduced-motion:reduce){
  .mcreg-card, .mcreg-form.is-wizard .mcreg-step.is-active, .mcreg-other,
  .mcreg.is-closing .mcreg-card, .mcreg.is-closing .mcreg-backdrop{animation:none;}
  .mcreg-bar-fill{transition:none;}
}