/* Fidelity overlays + small bridges between design.css and site.css */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:120;backdrop-filter:blur(2px)}
.modal-backdrop[hidden]{display:none!important}
.modal-panel{position:fixed;z-index:130;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,94vw);max-height:90vh;overflow:auto;background:var(--card,#12151C);border:1px solid var(--line-strong,#1E2330);border-radius:18px;padding:28px 24px 24px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.modal-panel[hidden]{display:none!important}
.modal-close{position:absolute;top:10px;right:12px;background:transparent;border:0;color:var(--dim);font-size:28px;line-height:1;cursor:pointer}
.qz-k,.wel-k{letter-spacing:.16em;text-transform:uppercase;font-size:11px;color:var(--cura,#4FC3F7)}
.qz-title{font-size:1.55rem;margin:10px 0 16px;font-weight:500}
.qz-opts{display:flex;flex-direction:column;gap:8px}
.qz-opt{text-align:left;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--ink);cursor:pointer}
.qz-opt:hover,.qz-opt.onq{border-color:rgba(79,195,247,.5);background:rgba(79,195,247,.08)}
.qz-opt b{display:block}
.qz-opt span{color:var(--dim);font-size:13px}
.qz-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:10px}
.qz-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 14px}
.qz-chips span{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--dim)}
.qz-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.qz-duo{grid-template-columns:1fr}}
.qz-rescard{border:1px solid var(--line);border-radius:14px;padding:14px;background:rgba(0,0,0,.2)}
.qz-rescard .qi img{max-width:100%;height:auto}
.qz-rescard .qtag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent,var(--cura))}
.qz-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.qz-progress{display:flex;gap:4px;margin-bottom:12px}
.qz-progress i{flex:1;height:3px;background:rgba(255,255,255,.1);border-radius:99px}
.qz-progress i.on{background:var(--cura)}
.nav-quiz{background:transparent;border:0;color:var(--cura);font:inherit;font-weight:600;font-size:14px;cursor:pointer;padding:8px 12px}
.footer .newsletter{display:flex;gap:8px}
.footer .newsletter input{flex:1;background:var(--dark,#0A0C11);border:1px solid var(--line-strong);border-radius:10px;padding:10px 12px;color:var(--ink)}
/* Keep our sticky nav readable when design.css also defines .nav */
body > .nav{position:sticky;top:0;z-index:90}
.serif{font-style:italic;font-family:Georgia,"Instrument Serif",serif}
.page.wrap,.wrap.page{max-width:var(--max,1240px);margin:0 auto;padding-left:20px;padding-right:20px}
button.nav-quiz{display:inline-block}
#quiz:not([hidden]),#welcome:not([hidden]){display:block}

/* ---- Reveal: visible without JS (Jeff iPhone blank-home fix) ---- */
.reveal{
  opacity:1 !important;
  transform:none !important;
}
.reveal.is-pending{
  opacity:0 !important;
  transform:translateY(18px) !important;
  transition:opacity .65s cubic-bezier(.2,.6,.2,1), transform .65s cubic-bezier(.2,.6,.2,1);
}
.reveal.is-pending.in,
.reveal.in{
  opacity:1 !important;
  transform:none !important;
}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.is-pending{opacity:1 !important;transform:none !important;transition:none !important}
}


/* ---- Orig drop-panel: keep design.css chrome; bridge gap + is-open ---------- */
.nav-links .has-drop > .drop-panel{
  top: 100%;
  padding-top: 12px; /* invisible hit area so cursor can reach panel */
  background: transparent;
  border: none;
  box-shadow: none;
}
.nav-links .has-drop > .drop-panel::before{
  content: "";
  display: block;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: var(--sh);
  position: absolute;
  inset: 12px 0 0 0;
  z-index: -1;
}
.nav-links .has-drop.is-open > .drop-panel,
.nav-links .has-drop:hover > .drop-panel,
.nav-links .has-drop:focus-within > .drop-panel{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
@media (max-width:880px){
  /* Mobile accordion: give submenu the same breathing room as sibling items.
     padding-top:0 left BPC-157 jammed under Shop's divider. */
  .nav-links .has-drop > .drop-panel{
    padding-top: 8px;
    padding-bottom: 6px;
  }
  .nav-links .has-drop > .drop-panel::before{display:none}
  .nav-links .has-drop > .drop-panel a{
    padding: 16px 4px;
  }
  .nav-links .has-drop > .drop-panel a:first-child{
    padding-top: 16px;
    margin-top: 4px;
  }
}
.cart-btn b:not([hidden]){display:flex;align-items:center;justify-content:center}

/* Hero still under optional desktop video (mobile never loads mp4) */
.hero-media #hero-still{
  position:absolute;inset:0;width:100%;height:100%;display:block;margin:0;padding:0;
}
.hero-media #hero-still img,
.hero-media #herofallback{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  margin:0;padding:0;border:0;
}
.hero-media #herovideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media #herovideo[hidden]{display:none!important}
/* Match video duotone on the still so mobile hero doesn't look like a different layer */
.hero-media #hero-still img,
.hero-media #herofallback{
  filter:grayscale(1) sepia(1) saturate(3) hue-rotate(160deg) brightness(.95) contrast(1.05);
}
/* Nav is sticky (in-flow) via fidelity.css, so do NOT add another ~104px top margin
   or a molecule strip from body::before shows between nav and hero. Sit flush. */
@media (max-width:880px){
  .hero{margin-top:12px}
}
@media (max-width:560px){
  .hero{margin:10px 10px 0;border-radius:22px}
}

/* Collapsed promo: low-key text link, expands on click */
.promo-toggle{
  display:inline-block;background:none;border:0;padding:0;margin:0;
  font:inherit;font-size:.86rem;color:var(--dim);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
.promo-toggle:hover{color:var(--cura, #4FC3F7)}
.promo-wrap .promo-fields[hidden]{display:none!important}
.cd-promo{margin:0 0 10px}
.cd-promo .cd-disc{margin-top:8px}