/* ============================================================================
   nestabode — preconstruction match wizard
   Opens IN PLACE on any register CTA. No anchor-scroll, no second effort.
   Tokens inherited from precon.css (--ink, --brass, --cream, --serif, --sans).
   ========================================================================== */

.pw-scrim{
  position:fixed; inset:0; z-index:4000;
  background:rgba(8,13,30,.72);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:24px; opacity:0; pointer-events:none;
  transition:opacity .22s var(--ease,ease);
}
.pw-scrim.pw-open{ opacity:1; pointer-events:auto }
body.pw-locked{ overflow:hidden }

/* The sticky site header PAINTS over the scrim even though the scrim is z-index 4000
   and .site-nav is 60 — its backdrop-filter puts it in a compositing layer the scrim
   does not tint. Worst on WebKit, where the nav stayed fully bright over the modal.
   It was never TAPPABLE (elementFromPoint returns .pw-scrim in Chromium and WebKit at
   both widths), so this is a visual containment fix, not a hit-testing one. Setting
   z-index:auto or removing the backdrop-filter does NOT fix it — both were tested and
   left the nav visible; hiding it is what actually works. visibility (not display)
   keeps the sticky box, so nothing reflows when the wizard closes. */
body.pw-locked .site-nav{ visibility:hidden }

.pw-modal{
  position:relative; width:100%; max-width:596px;
  max-height:calc(100vh - 48px);
  background:var(--ink,#0F1A3D); color:var(--cream,#F4F1EA);
  border:1px solid rgba(217,138,85,.22); border-radius:10px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(10px) scale(.985);
  transition:transform .26s var(--ease,ease);
}
.pw-scrim.pw-open .pw-modal{ transform:none }

/* ---------- head ---------- */
.pw-head{ padding:20px 24px 0; flex:none }
.pw-bar{ height:2px; background:rgba(217,138,85,.20); border-radius:2px; overflow:hidden }
.pw-bar i{ display:block; height:100%; width:0; background:var(--brass-ink,#d98a55); transition:width .3s var(--ease,ease) }
/* padding-right reserves the close button's lane. Measured 2026-08-10: without it
   .pw-ctx overlapped .pw-x by 26px at 390w on EVERY project page — the X sat on top
   of the last word of the project name ("...at Bristol Station"). */
.pw-meta{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  margin-top:11px; padding-right:40px; font-family:var(--sans,system-ui);
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:#8d97b4;
}
.pw-meta > span:first-child{ flex:none; padding-top:1px }
.pw-ctx{
  color:var(--brass-ink,#d98a55); letter-spacing:.06em; text-transform:none;
  font-size:12px; text-align:right; line-height:1.3; min-width:0;
}
.pw-x{
  position:absolute; top:14px; right:14px; z-index:2;
  width:32px; height:32px; border:0; border-radius:50%;
  background:rgba(255,255,255,.06); color:#c5cce0;
  font-size:19px; line-height:1; cursor:pointer;
}
.pw-x:hover{ background:rgba(255,255,255,.13); color:#fff }

/* ---------- body ---------- */
.pw-body{ padding:18px 24px 22px; overflow-y:auto; flex:1 1 auto; -webkit-overflow-scrolling:touch }
.pw-body h3{
  font-family:var(--serif,Georgia,serif); font-weight:500;
  font-size:clamp(23px,3.2vw,29px); line-height:1.14; color:#fff;
  margin:6px 0 6px; letter-spacing:-.005em;
}
.pw-say{ color:#b9c1d8; font-size:14px; line-height:1.5; margin:0 0 18px; max-width:44ch }

.pw-lab{
  display:block; font-family:var(--sans,system-ui); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:#8d97b4; margin:16px 0 9px;
}
.pw-lab:first-of-type{ margin-top:0 }
.pw-lab em{ font-style:normal; color:var(--brass-ink,#d98a55); text-transform:none; letter-spacing:.02em; font-size:11px }

.pw-opts{ display:flex; flex-wrap:wrap; gap:8px }
.pw-o{
  font-family:var(--sans,system-ui); font-size:13.5px; line-height:1;
  padding:11px 15px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.05); color:#dfe4f0;
  border:1px solid rgba(217,138,85,.18);
  transition:background .15s,border-color .15s,color .15s;
  -webkit-tap-highlight-color:transparent;
}
.pw-o:hover{ background:rgba(255,255,255,.10); border-color:rgba(217,138,85,.4) }
.pw-o[aria-pressed="true"]{
  background:var(--brass,#C26A38); border-color:var(--brass,#C26A38); color:#fff; font-weight:500;
}
.pw-o:focus-visible{ outline:2px solid var(--brass-ink,#d98a55); outline-offset:2px }

/* ---------- fields ---------- */
.pw-f{ display:grid; gap:10px; margin-top:4px }
.pw-f label{ display:block; position:relative }
.pw-f .pw-tag{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-family:var(--sans,system-ui); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--brass-ink,#d98a55); pointer-events:none;
}
.pw-f input{
  width:100%; box-sizing:border-box;
  background:rgba(255,255,255,.05); color:#fff;
  border:1px solid rgba(217,138,85,.20); border-radius:6px;
  padding:13px 15px; font-family:var(--sans,system-ui); font-size:15px;
}
.pw-f input::placeholder{ color:#8d97b4 }
.pw-f input:focus{ outline:0; border-color:var(--brass-ink,#d98a55); background:rgba(255,255,255,.08) }
.pw-f input[aria-invalid="true"]{ border-color:#FF6A50; background:rgba(255,90,64,.10) }

.pw-micro{ color:#96a0bd; font-size:11.5px; line-height:1.55; margin:14px 0 0 }
.pw-micro + .pw-micro{ margin-top:8px }

.pw-err{
  color:#FF7A63; font-size:13px; margin:10px 0 0; min-height:1px;
  font-family:var(--sans,system-ui); font-weight:500;
}
.pw-err:not(:empty){
  background:rgba(255,90,64,.10); border-left:2px solid #FF6A50;
  padding:9px 12px; border-radius:0 4px 4px 0;
}

/* ---------- foot ---------- */
.pw-foot{
  flex:none; display:flex; align-items:center; gap:12px;
  padding:15px 24px 20px; border-top:1px solid rgba(217,138,85,.14);
}
.pw-back{
  background:none; border:0; color:#96a0bd; cursor:pointer;
  font-family:var(--sans,system-ui); font-size:13px; padding:8px 2px;
}
.pw-back:hover{ color:#dfe4f0 }
.pw-next{
  margin-left:auto; border:0; border-radius:6px; cursor:pointer;
  background:var(--brass,#C26A38); color:#fff;
  font-family:var(--sans,system-ui); font-weight:600; font-size:14.5px;
  padding:13px 24px; transition:background .15s,opacity .15s;
}
.pw-next:hover{ background:var(--brass-deep,#a4572b) }
.pw-next[disabled]{ opacity:.42; cursor:not-allowed }
.pw-next:focus-visible,.pw-back:focus-visible{ outline:2px solid var(--brass-ink,#d98a55); outline-offset:2px }

/* ---------- terminal screens ---------- */
.pw-final{ text-align:left; padding:8px 0 4px }
.pw-final .pw-mark{
  width:42px; height:42px; border-radius:50%; margin-bottom:16px;
  background:rgba(217,138,85,.16); color:var(--brass-ink,#d98a55);
  display:flex; align-items:center; justify-content:center; font-size:21px;
}
.pw-final ul{ margin:14px 0 0; padding:0 0 0 18px; color:#b9c1d8; font-size:14px; line-height:1.75 }

@media(max-width:560px){
  .pw-scrim{ padding:0; align-items:flex-end }
  .pw-modal{ max-width:none; max-height:94vh; border-radius:14px 14px 0 0; border-bottom:0 }
  .pw-body{ padding:16px 20px 20px }
  .pw-head{ padding:18px 20px 0 }
  .pw-foot{ padding:13px 20px 18px; padding-bottom:max(18px,env(safe-area-inset-bottom)) }
  .pw-next{ padding:14px 20px }
}

@media(prefers-reduced-motion:reduce){
  .pw-scrim,.pw-modal,.pw-bar i{ transition:none }
}

/* ---------------------------------------------------------------------------
   Launcher surfaces. Progressive enhancement: the ORIGINAL #regform stays in
   the DOM and is the no-JS fallback. precon-wizard.js stamps .pw-js on <html>,
   which hides the raw form and reveals the launcher. If the JS never loads the
   visitor still gets a working form instead of a dead button.
   ------------------------------------------------------------------------- */
.pw-launch{ display:none }
.pw-js .pw-launch{ display:grid }
.pw-js #regform{ display:none }

.pw-launch{
  position:relative; background:var(--ink,#0F1A3D); color:var(--cream,#F4F1EA);
  border-radius:8px; padding:46px; gap:40px; align-items:center;
  grid-template-columns:1.05fr 1fr; overflow:hidden;
}
@media(max-width:760px){ .pw-launch{ grid-template-columns:1fr; padding:32px; gap:26px } }
.pw-launch .eyebrow{ color:var(--brass-ink,#d98a55) }
.pw-launch h2{
  font-family:var(--serif,Georgia,serif); font-weight:500;
  font-size:clamp(28px,3.4vw,36px); margin:0 0 12px; color:#fff; line-height:1.05;
}
.pw-launch p{ color:#c5cce0; margin:0 0 6px; font-size:14.5px; max-width:42ch }
.pw-launch .promise{
  margin-top:18px; padding-top:18px; border-top:1px solid var(--blueprint-2,rgba(217,138,85,.18));
  color:#aeb5cd; font-size:12.5px; line-height:1.6; max-width:42ch;
}
.pw-launch .promise b{ color:var(--brass-ink,#d98a55) }
.pw-launch-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:11px }
.pw-go{
  border:0; border-radius:7px; cursor:pointer;
  background:var(--brass,#C26A38); color:#fff;
  font-family:var(--sans,system-ui); font-weight:600; font-size:16px;
  padding:17px 30px; transition:background .15s;
}
.pw-go:hover{ background:var(--brass-deep,#a4572b) }
.pw-go:focus-visible{ outline:2px solid var(--brass-ink,#d98a55); outline-offset:3px }
.pw-note{ color:#96a0bd; font-size:12.5px; font-family:var(--sans,system-ui) }

/* hero CTA — the first screen had no way to act (Gemini's #1 structural note) */
.pw-herocta{ display:none; margin-top:28px }
.pw-js .pw-herocta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.pw-herocta .pw-note{ color:#9aa3c0 }