/* ═══ PREORDER FORM (plan §D.3; v391 paid deposit) — one form on the Epos PDPs, /epos and /preorder ═══
   Dark studio by default (matches the PDP rail); html.mzlight flips it. Tokens only.
   Tap targets are 44px in px on purpose: the root font shrinks on small screens.
   Theme copy: theme/assets/preorder.css (byte-identical). */
.pre-form,.pre-done{display:none;flex-direction:column;gap:.95rem;width:100%;max-width:34rem;
  margin:0 auto;padding:1.4rem;box-sizing:border-box;text-align:left;color-scheme:dark;
  background:#0A0A0A;border:.0625rem solid #2A2A2A;color:#F4F0E9;font-family:'Inter',sans-serif}
/* v391: collapsed on a PDP until its CTA is clicked (js adds .open); never opened by a URL :target */
.pre-form.open,.pre-form.always,.pre-done{display:flex}
.pre-form.open{animation:pre-in .32s cubic-bezier(.23,1,.32,1)}
@keyframes pre-in{from{opacity:0;transform:translateY(-.5rem)}}
.pre-form[hidden],.pre-done[hidden]{display:none!important}
.pre-done{border-color:var(--h2)}
.pre-head{display:flex;flex-direction:column;gap:.35rem}
.pre-head b,.pre-done b{font-size:.72rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase}
.pre-head span{font-size:.8rem;line-height:1.6;color:rgba(244,240,233,.72)}
.pre-f{display:flex;flex-direction:column;gap:.4rem;min-width:0;margin:0}
.pre-f>span:first-child{font-size:.58rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(244,240,233,.65)}
.pre-f input,.pre-f select{width:100%;box-sizing:border-box;min-height:44px;margin:0;padding:.7rem .9rem;
  background:#0A0A0A;border:.0625rem solid #2A2A2A;border-radius:0;color:#F4F0E9;
  font-family:'Inter',sans-serif;font-size:.8rem;letter-spacing:.08em}
.pre-f select{-webkit-appearance:none;appearance:none;padding-right:2.2rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238A8A90' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:.7rem}
.tel-wrap{display:flex;align-items:center;background:#0A0A0A;border:.0625rem solid #2A2A2A}
.tel-wrap i{font-style:normal;padding-left:.9rem;font-size:.8rem;letter-spacing:.08em;color:rgba(244,240,233,.6)}
.pre-f .tel-wrap input{border:0;padding-left:.5rem}
.pre-f input:focus,.pre-f select:focus,.tel-wrap:focus-within{outline:none;border-color:var(--h2)}
.pre-row{display:grid;grid-template-columns:1.6fr 1fr;gap:.95rem}
.pre-consent{display:flex;align-items:flex-start;gap:.6rem;min-height:44px;cursor:pointer;
  font-size:.74rem;line-height:1.55;color:rgba(244,240,233,.8)}
.pre-consent input{accent-color:var(--h2);width:1rem;height:1rem;margin:.15rem 0 0;flex:none;cursor:pointer}
.pre-consent a{text-decoration:underline;text-underline-offset:.2em}   /* site.css a{} strips it */
.pre-form .pre-submit{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;
  margin:0;padding:.9rem 1rem;box-sizing:border-box;background:var(--h2);color:#FFF;border:.0625rem solid var(--h2);
  border-radius:0;font-family:'Inter',sans-serif;font-weight:800;font-size:.72rem;letter-spacing:.24em;cursor:pointer;
  transition:opacity .2s,transform .15s}
.pre-form .pre-submit:hover{opacity:.9} .pre-form .pre-submit:active{transform:translateY(1px)}
.pre-form .pre-submit:disabled{opacity:.6;cursor:progress}
.pre-form .pre-fine{margin:0;font-size:.68rem;line-height:1.6;color:rgba(244,240,233,.55)}
.pre-form .pre-sum{margin:0;font-size:.74rem;line-height:1.6;color:rgba(244,240,233,.8)}
.pre-sum:empty{display:none}
.pre-form .pre-msg{margin:0;font-size:.74rem;line-height:1.5;color:#E07A6B}
.pre-msg:empty{display:none}
.pre-form .err,.pre-form .tel-wrap.err{border-color:#E07A6B}
.pre-consent.err{color:#E07A6B}
.pre-done p{margin:0;font-size:.85rem;line-height:1.7;color:rgba(244,240,233,.85)}
.pre-done .pre-next{font-size:.78rem;color:rgba(244,240,233,.65)}
.pre-done a,.pre-change{color:#F4F0E9;text-decoration:underline;text-decoration-color:var(--h2);text-underline-offset:.3em}
.pre-change{align-self:flex-start;background:none;border:0;padding:0;min-height:44px;
  font-family:'Inter',sans-serif;font-size:.62rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;cursor:pointer}
/* "Can't wait until mid-November?" - the Discovery Set for the impatient, under the preorder */
.pre-wait{display:flex;flex-direction:column;gap:.55rem;width:100%;max-width:34rem;margin:1.1rem auto 0;padding:1.1rem 0 0;
  box-sizing:border-box;text-align:left;border-top:.0625rem solid #2A2A2A;color:#F4F0E9;font-family:'Inter',sans-serif}
.pre-wait b{font-size:.72rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase}
.pre-wait p{margin:0;font-size:.8rem;line-height:1.6;color:rgba(244,240,233,.72)}
.pre-wait .pre-wait-cta{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;padding:0 1.4rem;margin-top:.3rem;
  box-sizing:border-box;border:.0625rem solid var(--h2);background:none;color:#F4F0E9;text-decoration:none;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.66rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;transition:background .2s}
.pre-wait .pre-wait-cta:hover{background:color-mix(in srgb,var(--h2) 22%,transparent)}
.pre-wait form{margin:0}

/* light mode */
html.mzlight .pre-form,html.mzlight .pre-done{color-scheme:light;background:#FFF;color:#1E1E22;
  border-color:color-mix(in srgb,var(--h2) 45%,transparent)}
html.mzlight .pre-done{border-color:var(--h2)}
html.mzlight .pre-form .pre-done{border:0;background:none}
html.mzlight .pre-head b,html.mzlight .pre-done b{color:var(--h2)}
html.mzlight .pre-head span,html.mzlight .pre-done p{color:rgba(30,30,34,.78)}
html.mzlight .pre-f>span:first-child{color:color-mix(in srgb,var(--h2) 70%,#333)}
html.mzlight .pre-f input,html.mzlight .pre-f select,html.mzlight .tel-wrap{background-color:#FFF;color:#1E1E22;
  border-color:color-mix(in srgb,var(--h2) 45%,transparent)}
html.mzlight .tel-wrap i{color:rgba(30,30,34,.6)}
html.mzlight .pre-f input:focus,html.mzlight .pre-f select:focus,html.mzlight .tel-wrap:focus-within{border-color:var(--h2)}
html.mzlight .pre-consent{color:rgba(30,30,34,.82)}
html.mzlight .pre-form .pre-fine,html.mzlight .pre-done .pre-next{color:rgba(30,30,34,.6)}
html.mzlight .pre-form .pre-sum,html.mzlight .pre-wait p{color:rgba(30,30,34,.78)}
html.mzlight .pre-wait{color:#1E1E22;border-color:color-mix(in srgb,var(--h2) 45%,transparent)}
html.mzlight .pre-wait b,html.mzlight .pre-wait .pre-wait-cta{color:var(--h2)}
html.mzlight .pre-done a,html.mzlight .pre-change{color:var(--h2)}
html.mzlight .pre-form .pre-msg,html.mzlight .pre-consent.err{color:#B03348}
html.mzlight .pre-form .err,html.mzlight .pre-form .tel-wrap.err{border-color:#B03348}

@media (max-width:40rem){
  .pre-form,.pre-done{padding:1.1rem}
  .pre-row{grid-template-columns:1fr}
  .pre-f input,.pre-f select{font-size:16px}          /* px on purpose: stops iOS zooming into the field */
  .pre-form .pre-fine{font-size:10px}                 /* .68rem = 8.8px, under the floor on a phone */
}
@media (prefers-reduced-motion:reduce){.pre-form .pre-submit,.pre-wait .pre-wait-cta{transition:none}.pre-form.open{animation:none}}