/* UTOPIA pharaonic FAQ: a plain accordion carved into the same tomb wall (painted stone + a still torch glow, no WebGL).
   Full-bleed. "UH Orbitron" comes from the hoodie hero CSS in the head. */
.upq{--upq-hdr:var(--utopia-header-height,104px);--upq-gold:#D9A441;--upq-ivory:#EDE3CF;--upq-gut:3.8cqw;
  position:relative;width:var(--upq-vw,100vw);margin-inline:calc(50% - var(--upq-vw,100vw) / 2);height:120svh;min-height:650px;background:#0b0907;isolation:isolate;overflow:clip}
@media (max-width:767px){.upq{--upq-hdr:var(--utopia-header-height,64px)}}
.upq *{box-sizing:border-box;margin:0}
.upq__stage{position:sticky;top:0;height:100svh;min-height:540px;overflow:hidden;
  background:radial-gradient(48% 60% at 22% 30%,rgba(255,190,110,.17),rgba(0,0,0,0) 70%),linear-gradient(rgba(11,9,7,.55),rgba(11,9,7,.55)),var(--upq-stone,none) 0 0/620px,#0b0907}
/* the top melts out of the video section's dark bottom */
.upq__stage::before{content:"";position:absolute;left:0;right:0;top:0;height:22%;pointer-events:none;background:linear-gradient(180deg,#0b0907,rgba(11,9,7,0))}
.upq__in{position:absolute;left:0;right:0;bottom:0;top:var(--upq-hdr);container-type:size}

.upq__intro{position:absolute;right:var(--upq-gut);top:50%;translate:0 -50%;width:34cqw}
.upq__k{font:500 clamp(9px,.75cqw,11px)/1 "UH Orbitron",sans-serif;letter-spacing:.32em;direction:ltr;text-align:right;color:rgba(237,227,207,.62);margin-bottom:22px}
.upq__t{font:700 clamp(36px,8cqh,72px)/1.3 Alexandria,sans-serif;color:var(--upq-ivory)}
.upq__t span{color:var(--upq-gold);text-shadow:0 0 30px rgba(217,164,65,.25)}
.upq__sub{margin-top:18px;font:400 clamp(13px,1.9cqh,16px)/1.7 Alexandria,sans-serif;color:rgba(237,227,207,.7)}

.upq__list{position:absolute;left:var(--upq-gut);top:50%;translate:0 -50%;width:min(46cqw,640px)}
.upq__item{position:relative}
/* carved groove between questions: dark cut + a light lip */
.upq__item::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(0,0,0,.75);box-shadow:0 1px 0 rgba(237,227,207,.1)}
.upq__item h3{font:inherit}
.upq__q{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:clamp(14px,2.5cqh,22px) 2px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.upq__q b{font:600 clamp(13px,1.8cqh,16px)/1 "UH Orbitron",sans-serif;letter-spacing:.06em;color:rgba(217,164,65,.55);transition:color .3s}
.upq__q span{font:600 clamp(15px,2.3cqh,19px)/1.5 Alexandria,sans-serif;color:var(--upq-ivory);transition:color .3s}
/* plus that turns into minus */
.upq__q i{position:relative;width:14px;height:14px;flex:none}
.upq__q i::before,.upq__q i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:var(--upq-gold);transition:rotate .3s}
.upq__q i::after{rotate:90deg}
.upq__q[aria-expanded="true"] i::after{rotate:0deg}
.upq__q[aria-expanded="true"] b,.upq__q[aria-expanded="true"] span,.upq__q:hover span{color:var(--upq-gold)}
.upq__q:focus-visible{outline:2px solid var(--upq-gold);outline-offset:2px;border-radius:4px}
/* answers: open by height (grid rows); without the script they all stay readable */
.upq__a{display:grid;grid-template-rows:1fr;transition:grid-template-rows .35s ease}
.upq--on .upq__a{grid-template-rows:0fr}
.upq--on .upq__item.is-open .upq__a{grid-template-rows:1fr}
.upq__a>div{overflow:hidden}
.upq__a p{padding:0 calc(clamp(13px,1.8cqh,16px) * 2 + 18px) clamp(14px,2.4cqh,20px) 32px;font:400 clamp(13px,1.9cqh,16px)/1.8 Alexandria,sans-serif;color:rgba(237,227,207,.78)}
.upq__a strong{color:var(--upq-gold);font-weight:700}

/* the store forces its own font on span/p/button: lock ours */
.upq .upq__k,.upq .upq__q b{font-family:"UH Orbitron",sans-serif!important}
.upq .upq__t,.upq .upq__sub,.upq .upq__q span,.upq .upq__a p,.upq .upq__a strong{font-family:Alexandria,sans-serif!important}
.upq .upq__t{line-height:1.3!important}.upq .upq__q span{line-height:1.5!important}.upq .upq__a p{line-height:1.8!important}

/* portrait: title on top, questions under it, room left for the floating buy buttons */
@container (max-aspect-ratio:4/5){
  .upq__intro{top:4cqh;translate:none;left:var(--upq-gut);width:auto}
  .upq__k{font-size:9px;letter-spacing:.22em;margin-bottom:10px}
  .upq__t{font-size:clamp(28px,4.4cqh,40px)}
  .upq__t br{display:none}
  .upq__sub{margin-top:6px;font-size:12px}
  .upq__list{top:calc(4cqh + 120px);translate:none;right:var(--upq-gut);width:auto}
  .upq__q{gap:12px;padding:13px 0}
  .upq__q b{font-size:12px}
  .upq__q span{font-size:14px}
  .upq__a p{padding:0 30px 12px 26px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){.upq__a,.upq__q i::after{transition:none}}

/* EasyOrders adds inline 10px block padding. Remove only the direct
   HTML-block wrapper of this section so the existing dark fades meet. */
div:has(> section[data-utopia-pharaoh-faq]){padding-block:0!important}