/* ================================================================
   Casa Lujuria -- the Casa Lujuria port for Casa Lujuria review pages.

   Ported elements (from Casa Lujuria mating_press enhanced v2):
     body mesh + drifting grid        hero w/ mesh, grid, ring, chip
     pulsing chip dot                 glassy hero sub
     scroll hint + animated line      gradient hook band + ghost word
     section inset frames             floating section orbs
     h2 kicker eyebrows               h2 animated underline
     typewriter headings              glass prose panels
     related-card grid + hover fill   scroll progress bar
     chapter dot nav                  blur reveal set
     selection tint                   reduced-motion support

   Recolored to Casa Lujuria brand: electric rouge and gold, not
   Casa Lujuria neon pink, so the two sites rhyme without twinning.
   Loaded AFTER poster-content.css.
   ================================================================ */
:root{
  --lqx-pink:#ff2f4d;
  --lqx-rose:#ff5f70;
  --lqx-gold:#ffc23d;
  --lqx-violet:#2f6bff;
  --lqx-ease:cubic-bezier(.2,.75,.2,1);
}
::selection{background:var(--lqx-pink);color:#fff}

/* ---------- body atmosphere: fixed mesh + drifting grid ---------- */
@keyframes lqx-grid-drift{to{background-position:44px 44px}}
@keyframes lqx-orbit{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}50%{transform:translate3d(2vw,-2vh,0) rotate(6deg) scale(1.05)}100%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}}
@keyframes lqx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes lqx-pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes lqx-shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes lqx-scrollpulse{0%,100%{opacity:.18;transform:scaleY(.8)}50%{opacity:1;transform:scaleY(1.05)}}
@keyframes lqx-cursor{0%,49%{opacity:1}50%,100%{opacity:0}}

body.lqx::before{
  content:'';position:fixed;inset:0;z-index:-3;
  background:
    radial-gradient(circle at 12% 8%,rgba(255,47,77,.20),transparent 28vw),
    radial-gradient(circle at 88% 16%,rgba(47,107,255,.16),transparent 30vw),
    radial-gradient(circle at 46% 90%,rgba(255,194,61,.10),transparent 32vw);
}
body.lqx::after{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),rgba(0,0,0,.12));
  animation:lqx-grid-drift 24s linear infinite;
}

/* ---------- scroll progress bar ---------- */
#lqx-progress{
  position:fixed;top:0;left:0;height:4px;width:0;z-index:9999;
  background:linear-gradient(90deg,var(--lqx-pink),var(--lqx-gold),var(--lqx-violet),var(--lqx-pink));
  background-size:240% 100%;
  box-shadow:0 0 22px rgba(255,47,77,.75);
  transition:width .08s linear;
  animation:lqx-shimmer 3.6s linear infinite;
}

/* ---------- chapter dot nav ---------- */
#lqx-chapnav{
  position:fixed;top:50%;right:22px;transform:translateY(-50%);z-index:888;
  display:flex;flex-direction:column;gap:10px;opacity:0;transition:opacity .35s ease;
}
#lqx-chapnav.visible{opacity:1}
.lqx-dot{
  width:11px;height:11px;border-radius:999px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);cursor:pointer;position:relative;
  transition:all .25s var(--lqx-ease);padding:0;
}
.lqx-dot:hover,.lqx-dot.active{
  background:var(--lqx-pink);border-color:var(--lqx-pink);
  transform:scale(1.45);box-shadow:0 0 20px rgba(255,47,77,.7);
}
.lqx-dot::after{
  content:attr(data-label);position:absolute;right:22px;top:50%;transform:translateY(-50%);
  background:rgba(10,5,8,.9);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);
  color:#fff;font-size:11px;white-space:nowrap;padding:6px 11px;border-radius:999px;
  opacity:0;pointer-events:none;transition:opacity .2s ease;font-weight:800;letter-spacing:.08em;
}
.lqx-dot:hover::after{opacity:1}

/* ---------- hero ---------- */
.page .narrow .lqx-hero{
  /* .page .narrow .gmast sets margin with higher specificity; match it */
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  margin-top:0 !important;margin-bottom:0 !important;
  min-height:0;
  display:flex;align-items:center;justify-content:center;text-align:center;
  position:relative;overflow:hidden;isolation:isolate;
  padding:56px clamp(20px,5vw,72px) 84px;
  background:
    radial-gradient(circle at 50% 28%,rgba(255,47,77,.22),transparent 31%),
    radial-gradient(circle at 18% 72%,rgba(47,107,255,.15),transparent 30%),
    radial-gradient(circle at 84% 70%,rgba(255,194,61,.10),transparent 28%),
    linear-gradient(150deg,#0a0407 0%,#180712 48%,#0a0407 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.lqx-hero::before{
  content:'';position:absolute;inset:-10%;z-index:-2;
  background:
    linear-gradient(115deg,transparent 0 20%,rgba(255,47,77,.18) 35%,transparent 52%),
    radial-gradient(circle at 50% 48%,rgba(255,255,255,.08),transparent 32%);
  filter:blur(34px);opacity:.55;
  animation:lqx-orbit 26s ease-in-out infinite;
}
.lqx-hero::after{
  content:'';position:absolute;left:50%;top:50%;
  width:min(78vw,920px);height:min(78vw,920px);
  transform:translate(-50%,-50%);border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 0 90px rgba(255,47,77,.09),0 0 110px rgba(47,107,255,.10);
  pointer-events:none;z-index:-1;
}
.lqx-hero-mesh{
  position:absolute;inset:0;opacity:.72;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 38%,rgba(255,47,77,.28) 0%,transparent 44%),
    radial-gradient(ellipse at 28% 64%,rgba(47,107,255,.20) 0%,transparent 38%),
    radial-gradient(ellipse at 74% 70%,rgba(255,194,61,.12) 0%,transparent 34%);
  animation:lqx-float 11s ease-in-out infinite;
}
.lqx-hero-grid{
  position:absolute;inset:0;opacity:.32;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:96px 96px;
  mask-image:radial-gradient(circle at 50% 44%,black 0%,transparent 68%);
}
.lqx-hero-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto}
.lqx-hero .ls-crumb{justify-content:center;margin-bottom:26px;opacity:.75}

.lqx-chip{
  display:inline-flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.17);
  box-shadow:0 0 60px rgba(255,47,77,.20),inset 0 0 22px rgba(255,255,255,.04);
  backdrop-filter:blur(18px);color:#fff;
  font-size:12px;font-weight:900;letter-spacing:.42em;text-transform:uppercase;
  padding:12px 26px;border-radius:100px;margin-bottom:38px;
}
.lqx-chip-dot{
  width:8px;height:8px;border-radius:50%;background:var(--lqx-gold);
  box-shadow:0 0 18px var(--lqx-gold);animation:lqx-pulse 1.7s ease-in-out infinite;
}

.lqx-hero .page .narrow h1,
.page .narrow .lqx-hero h1{
  font-size:clamp(60px,11.5vw,156px) !important;
  line-height:1.08 !important;
  letter-spacing:.025em !important;
  max-width:none;margin:0 auto 30px !important;
  text-shadow:0 4px 0 rgba(255,47,77,.42),0 18px 80px rgba(255,47,77,.34);
}
.lqx-hero .ls-byline{margin-bottom:22px}
.lqx-sub{
  font-size:clamp(19px,2.2vw,26px) !important;
  color:rgba(255,255,255,.86) !important;
  font-weight:600;line-height:1.5;max-width:760px;margin:0 auto 52px !important;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.10);
  border-radius:24px;padding:20px 24px;
  backdrop-filter:blur(14px);box-shadow:0 24px 90px rgba(0,0,0,.22);
  text-wrap:balance;
}
.lqx-scroll{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:rgba(255,255,255,.55);font-size:12px;font-weight:900;
  letter-spacing:.35em;text-transform:uppercase;
}
.lqx-scroll-line{
  width:2px;height:64px;
  background:linear-gradient(to bottom,transparent,var(--lqx-gold),var(--lqx-pink),transparent);
  animation:lqx-scrollpulse 2.2s ease-in-out infinite;transform-origin:center;
}

/* ---------- hook band ---------- */
.page .narrow .lqx-hook{
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  background:linear-gradient(100deg,var(--lqx-pink),var(--lqx-rose) 36%,#f18a4b 72%,var(--lqx-gold));
  padding:60px clamp(24px,6vw,92px);position:relative;overflow:hidden;isolation:isolate;
  box-shadow:0 30px 120px rgba(255,47,77,.28);margin-top:0;margin-bottom:56px;
}
.lqx-hook::before{
  content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(-45deg,rgba(255,255,255,.12) 0 1px,transparent 1px 18px),
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.26),transparent 26%);
  mix-blend-mode:overlay;
}
.lqx-hook::after{
  content:attr(data-ghost);position:absolute;right:-3vw;bottom:-.18em;
  font-family:var(--anton);font-size:clamp(80px,14vw,240px);
  color:rgba(0,0,0,.08);line-height:1;letter-spacing:-.04em;white-space:nowrap;
}
.lqx-hook-text{
  font-family:var(--anton) !important;text-transform:uppercase;font-weight:400;
  font-size:clamp(28px,4.2vw,56px) !important;color:#fff !important;text-align:center;
  position:relative;z-index:1;max-width:1160px;margin:0 auto !important;
  line-height:1.05 !important;text-wrap:balance;
  text-shadow:0 8px 26px rgba(0,0,0,.22);letter-spacing:-.02em !important;
}

/* ---------- section frames + floating orbs ---------- */
.lqx .rev-sec{position:relative;overflow:hidden;isolation:isolate}
.lqx .rev-sec::before{
  content:'';position:absolute;inset:22px clamp(12px,2.5vw,36px);
  border:1px solid rgba(255,255,255,.07);border-radius:26px;
  pointer-events:none;z-index:-1;
}
.lqx .rev-sec--light::before{border-color:rgba(20,8,14,.10)}
.lqx .rev-sec::after{
  content:'';position:absolute;width:46vw;height:46vw;border-radius:50%;
  right:-24vw;top:-22vw;z-index:-2;filter:blur(8px);
  background:radial-gradient(circle,rgba(255,47,77,.16),transparent 68%);
  animation:lqx-float 9s ease-in-out infinite;
}
.lqx .rev-sec:nth-of-type(odd)::after{
  left:-23vw;right:auto;
  background:radial-gradient(circle,rgba(47,107,255,.15),transparent 68%);
}
.lqx .rev-sec--light::after{opacity:.5}

/* ---------- h2: kicker eyebrow + animated underline ---------- */
.lqx .page .narrow h2{display:block;width:100%;max-width:none}
.lqx .page .narrow h2::before{
  /* replace the static bar with the LQ text kicker.
     layout.css forces content:"" !important on rev-sec h2::before,
     so every property that fights it needs !important too. */
  content:attr(data-kicker) !important;
  display:block !important;
  width:auto !important;height:auto !important;border-radius:0 !important;
  background:none !important;
  font-family:"Inter Tight",system-ui,sans-serif !important;
  font-size:12px !important;line-height:1 !important;letter-spacing:.38em !important;
  margin-bottom:18px !important;color:var(--lqx-pink) !important;
  text-shadow:none !important;font-weight:900 !important;
}
.lqx .rev-sec--light h2::before{color:#b3122c !important}
.lqx .page .narrow h2:not([data-kicker])::before{content:none !important}
.lqx .page .narrow h2::after{
  content:'';position:absolute;bottom:-13px;left:0;width:0;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--lqx-pink),var(--lqx-gold),var(--lqx-violet));
  box-shadow:0 0 24px rgba(255,47,77,.5);
  transition:width 1.05s var(--lqx-ease);
}
.lqx .page .narrow h2.lqx-seen::after{width:100%}
.lqx .page .narrow h2{margin-bottom:2rem !important}

/* typewriter cursor */
.lqx-typing .lqx-cursor{
  display:inline-block;width:.08em;height:.82em;margin-left:.05em;
  background:currentColor;vertical-align:-.05em;
  animation:lqx-cursor .85s steps(1) infinite;
}
.lqx-typewriter{min-height:1em}

/* ---------- glass prose panels ---------- */
.lqx .rev-sec>p{
  background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.016));
  border:1px solid rgba(255,255,255,.08);border-radius:22px;
  padding:22px 24px;box-shadow:0 24px 80px rgba(0,0,0,.12);
  backdrop-filter:blur(12px);
}
.lqx .rev-sec--light>p{
  background:rgba(255,255,255,.72);border-color:rgba(255,47,77,.13);
  box-shadow:0 26px 90px rgba(255,47,77,.10);
}
.lqx .rev-sec>p+p{margin-top:16px}
.lqx .rev-sec strong{color:var(--lqx-pink)}
.lqx .rev-sec--light strong{color:#b3122c}

/* ---------- related cards: hover fill ---------- */
.lqx .grev-grid a{
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.12);border-radius:16px;
  transition:all .18s var(--lqx-ease);
}
.lqx .grev-grid a:hover{
  background:var(--lqx-pink);border-color:var(--lqx-pink);color:#fff;
  transform:translateY(-4px);box-shadow:0 18px 48px rgba(255,47,77,.25);
}

/* ---------- blur reveal set ---------- */
.lqx-reveal{opacity:0;transform:translateY(38px);filter:blur(8px);
  transition:opacity .85s var(--lqx-ease),transform .85s var(--lqx-ease),filter .85s var(--lqx-ease)}
.lqx-reveal.lqx-seen{opacity:1;transform:none;filter:blur(0)}

/* ---------- phone ---------- */
@media (max-width:768px){
  #lqx-chapnav{display:none}
  .page .narrow .lqx-hero{min-height:0;padding:34px 20px 64px}
  .lqx-hero::after{width:112vw;height:112vw;opacity:.75}
  .lqx-chip{font-size:11px;letter-spacing:.28em;padding:11px 18px;margin-bottom:30px}
  .lqx-hero .page .narrow h1,
  .page .narrow .lqx-hero h1{
    font-size:clamp(48px,14.5vw,72px) !important;
    line-height:1.12 !important;margin-bottom:24px !important;
    letter-spacing:.03em !important;
    text-shadow:0 3px 0 rgba(255,47,77,.5),0 16px 55px rgba(255,47,77,.4);
  }
  .lqx-sub{font-size:19px !important;padding:16px 16px;border-radius:20px;margin-bottom:44px !important}
  .page .narrow .lqx-hook{padding:44px 20px;margin-bottom:44px}
  .lqx-hook-text{font-size:clamp(27px,8.6vw,42px) !important;line-height:1.08 !important}
  .lqx .rev-sec::before{inset:14px 10px;border-radius:20px}
  .lqx .page .narrow h2::before{font-size:11px;letter-spacing:.28em;margin-bottom:14px}
  .lqx .page .narrow h2::after{height:5px;bottom:-10px}
  .lqx .rev-sec>p{padding:18px 16px;border-radius:18px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  body.lqx::after,.lqx-hero::before,.lqx-hero-mesh,.lqx-scroll-line,
  .lqx .rev-sec::after,#lqx-progress,.lqx-chip-dot{animation:none !important}
  .lqx-reveal{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important}
  .lqx .page .narrow h2::after{transition:none}
}

/* ================================================================
   TCM PORT (~40% of the tcmsite elements), recolored purple-pink.
   All structural styling: no page content changes.
     founding-strip  -> the disclosure band (his "yellow strip")
     hl-marker       -> highlighter strip behind strong text
     sec-label       -> numbered mono kickers on h2 eyebrows
     marquee         -> scrolling strip built from the page's own h2s
     lead emphasis   -> first paragraph after each h2 reads louder
   ================================================================ */

/* -- the strip: disclosure band, purple-pink instead of acid yellow -- */
.lqx .disclosure{
  background:linear-gradient(100deg,rgba(255,47,77,.16),rgba(47,107,255,.14)) !important;
  border:1px solid rgba(255,47,77,.42) !important;
  border-left-width:1px !important;
  border-radius:18px !important;
  padding:clamp(16px,2.2vh,22px) clamp(20px,2.6vw,32px) !important;
  box-shadow:0 18px 60px rgba(47,107,255,.10);
}

/* -- highlighter strip through bold words, marker style -- */
.lqx .rev-sec strong{
  color:#fff;
  background:linear-gradient(transparent 18%,rgba(255,47,77,.42) 18%,rgba(47,107,255,.40) 92%,transparent 92%);
  padding:0 .10em;
}
.lqx .rev-sec--light strong{
  color:#04070f;
  background:linear-gradient(transparent 18%,rgba(255,47,77,.30) 18%,rgba(47,107,255,.26) 92%,transparent 92%);
}

/* -- numbered mono kickers (tcm sec-label energy on the LQ eyebrow) -- */
.lqx .page .narrow h2::before{
  font-family:ui-monospace,'SF Mono','Cascadia Mono',Menlo,monospace !important;
}

/* -- lead emphasis: the paragraph right under each h2 reads louder,
      so a phone screen is never a flat run of same-size gray text -- */
.lqx .rev-sec > h2 + p{
  font-size:clamp(19px,1.6vw,22px) !important;
  font-weight:600;
  line-height:1.6 !important;
}
.lqx .rev-sec--light > h2 + p{font-weight:600}

/* -- the scrolling strip: purple-pink gradient marquee -- */
@keyframes lqx-scroll{to{transform:translateX(-50%)}}
.lqx-marquee{
  width:100vw;margin-left:calc(50% - 50vw);
  overflow:hidden;white-space:nowrap;
  background:linear-gradient(100deg,var(--lqx-violet),var(--lqx-pink) 55%,var(--lqx-rose));
  padding:16px 0;margin-top:34px;margin-bottom:34px;
  box-shadow:0 18px 70px rgba(47,107,255,.28);
}
.lqx-marquee-track{display:inline-block;animation:lqx-scroll 30s linear infinite;will-change:transform}
.lqx-marquee-track span{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:12px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;
  color:#fff;padding:0 34px;text-shadow:0 2px 12px rgba(0,0,0,.25);
}
@media (max-width:768px){
  .lqx-marquee{padding:12px 0;margin-top:26px;margin-bottom:26px}
  .lqx-marquee-track span{font-size:11px;padding:0 24px}
}
@media (prefers-reduced-motion:reduce){
  .lqx-marquee-track{animation:none}
}

/* -- the strip, in the H1: TCM hl-marker through the tail of the title.
      pink-violet gradient band behind the last word(s), clipped top and
      bottom like a real highlighter pass, cloned across line breaks. -- */
.lqx-hero h1 .lqx-mark{
  background:linear-gradient(transparent 16%,rgba(255,47,77,.72) 16%,rgba(47,107,255,.66) 90%,transparent 90%);
  padding:0 .09em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* -- breadcrumb arrows: cascading chevrons that pull the eye down.
      used under the hero headline and again after the hook band. -- */
@keyframes lqx-chev{
  0%{opacity:0;transform:rotate(45deg) translate(-7px,-7px)}
  40%{opacity:1}
  80%,100%{opacity:0;transform:rotate(45deg) translate(7px,7px)}
}
.lqx-chevrons{display:flex;flex-direction:column;align-items:center;gap:3px;margin-top:12px}
.lqx-chevrons i{
  width:16px;height:16px;display:block;
  border-right:3px solid var(--lqx-gold);
  border-bottom:3px solid var(--lqx-pink);
  transform:rotate(45deg);opacity:0;
  animation:lqx-chev 1.6s ease-in-out infinite;
  filter:drop-shadow(0 0 8px rgba(255,47,77,.55));
}
.lqx-chevrons i:nth-child(2){animation-delay:.18s}
.lqx-chevrons i:nth-child(3){animation-delay:.36s}
.lqx-crumbs{display:flex;justify-content:center;padding:6px 0 2px}
.lqx-crumbs .lqx-chevrons{margin-top:0}
@media (max-width:768px){
  .lqx-chevrons i{width:21px;height:21px;border-right-width:4px;border-bottom-width:4px}
  .lqx-hook-text{font-size:clamp(30px,9.2vw,46px) !important}
}
@media (prefers-reduced-motion:reduce){
  .lqx-chevrons i{animation:none;opacity:.7}
}

/* ================================================================
   POP LAYER v2 -- the actual neo-brutalist formula from the cat
   page: OPAQUE borders, SOLID offset shadows, cards visibly lighter
   than the page. v1 used transparent grays and 40% shadows, which
   killed the whole effect. Never fade a pop shadow.
   ================================================================ */

/* -- pill highlight through key phrases -- */
.lqx .rev-sec strong{
  background:linear-gradient(100deg,rgba(255,47,77,.38),rgba(47,107,255,.34));
  border:1.5px solid var(--lqx-pink);
  border-radius:9px;
  padding:.06em .34em;
  color:#fff;
}
.lqx .rev-sec--light strong{
  background:#ffe9c9;
  border:2px solid #0b1226;
  border-radius:9px;
  padding:.06em .34em;
  color:#0b1226;
  box-shadow:2px 2px 0 var(--lqx-pink);
}

/* -- the lead: bigger but NOT bold (a bold 14-line paragraph is a
      brick), opened up, with an Anton drop cap as the landmark -- */
.lqx .rev-sec > h2 + p{
  font-size:clamp(19px,1.6vw,22px) !important;
  font-weight:500 !important;
  line-height:1.68 !important;
  background:#0c1428 !important;
  border:2.5px solid #f6efe2 !important;
  box-shadow:9px 9px 0 var(--lqx-pink) !important;
  border-radius:18px !important;
}
.lqx .rev-sec > h2 + p::first-letter{
  font-family:var(--anton);
  font-size:3.1em;
  float:left;
  line-height:.78;
  padding:.04em .14em 0 0;
  color:var(--lqx-pink);
  text-shadow:3px 3px 0 rgba(47,107,255,.6);
}
.lqx .rev-sec--light > h2 + p{
  background:#fff !important;
  border:2.5px solid #0b1226 !important;
  box-shadow:9px 9px 0 var(--lqx-pink) !important;
  color:#0b1226 !important;
}
.lqx .rev-sec--light > h2 + p::first-letter{color:#b3122c;text-shadow:3px 3px 0 #f6cdb4}

/* -- vitals chips: solid pop -- */
.lqx .gmast-vitals .gv{
  background:#0c1428;
  border:2.5px solid #f6efe2;
  box-shadow:7px 7px 0 var(--lqx-violet);
  border-radius:16px;
}

/* -- step cards -- */
.lqx .gstep{
  background:#0c1428;
  border:2.5px solid #f6efe2;
  box-shadow:8px 8px 0 var(--lqx-pink);
  border-radius:18px;
}
.lqx .gstep .gstep-n{
  color:var(--lqx-pink);
  text-shadow:4px 4px 0 var(--lqx-violet);
  font-weight:800;
}

/* -- FAQ pop cards -- */
.lqx .faq > div{
  background:#0c1428;
  border:2.5px solid #f6efe2;
  box-shadow:7px 7px 0 var(--lqx-violet);
  border-radius:18px;
  padding:20px 24px;
  margin-bottom:20px;
}
.lqx .faq > div > h3{margin-top:0}

/* -- disclosure: compact sticker, not a six-line block -- */
.lqx .disclosure{
  font-size:14px !important;
  line-height:1.55 !important;
  border:2.5px solid var(--lqx-pink) !important;
  box-shadow:8px 8px 0 var(--lqx-violet) !important;
}

/* -- safety note -- */
.lqx .guide-safety{
  background:#0c1428;
  border:2.5px solid #f6efe2;
  box-shadow:8px 8px 0 var(--lqx-pink);
  border-radius:18px;
}

/* -- related cards -- */
.lqx .grev-grid a{
  background:#0c1428;
  border:2px solid #f6efe2;
  box-shadow:5px 5px 0 var(--lqx-pink);
}
.lqx .grev-grid a:hover{
  background:var(--lqx-pink);border-color:#f6efe2;color:#fff;
  box-shadow:5px 5px 0 var(--lqx-violet);
  transform:translate(-2px,-4px);
}

@media (max-width:768px){
  .lqx .rev-sec > h2 + p{box-shadow:6px 6px 0 var(--lqx-pink) !important}
  .lqx .gstep{box-shadow:6px 6px 0 var(--lqx-pink)}
  .lqx .faq > div{box-shadow:5px 5px 0 var(--lqx-violet)}
  .lqx .gmast-vitals .gv{box-shadow:5px 5px 0 var(--lqx-violet)}
}

/* ================================================================
   PATTERN INTERRUPTS + CONTRAST PASS
   1. prose on dark sections was rgba(246,239,226,.78): too dark.
      lift everything to near-white.
   2. every third paragraph flips to a WHITE card with dark ink,
      the loudest interrupt available on a dark page. text-heavy
      sections stop reading as one continuous surface.
   3. remaining panels get alternating accent bars so no two
      neighboring blocks look identical.
   ================================================================ */

/* brighter words, full stop */
.lqx .page .narrow .rev-sec p{color:rgba(255,255,255,.93) !important}
.lqx .page .narrow .rev-sec li{color:rgba(255,255,255,.90) !important}
.lqx .page .narrow p{color:rgba(255,255,255,.90)}
.lqx .rev-sec--light p,
.lqx .page .narrow .rev-sec--light p{color:#16223f !important}

/* the white flip: every 3rd paragraph after the lead */
.lqx .page .narrow .rev-sec > p:nth-of-type(3n){
  background:#fffaf0 !important;
  border:2.5px solid #0b1226 !important;
  box-shadow:8px 8px 0 var(--lqx-pink) !important;
  color:#16223f !important;
  border-radius:18px !important;
}
.lqx .rev-sec > p:nth-of-type(3n) a{color:#b3122c !important;font-weight:700}
.lqx .rev-sec > p:nth-of-type(3n) strong{
  background:#ffe9c9;border:2px solid #0b1226;color:#0b1226;
  box-shadow:2px 2px 0 var(--lqx-pink);
}

/* the lead card goes WHITE on dark sections: the biggest interrupt
   sits right under every headline */
.lqx .page .narrow .rev-sec:not(.rev-sec--light) > h2 + p{
  background:#fffaf0 !important;
  border:2.5px solid #0b1226 !important;
  color:#16223f !important;
}
.lqx .rev-sec:not(.rev-sec--light) > h2 + p a{color:#b3122c !important;font-weight:700}
.lqx .rev-sec:not(.rev-sec--light) > h2 + p strong{
  background:#ffe9c9;border:2px solid #0b1226;color:#0b1226;box-shadow:2px 2px 0 var(--lqx-pink);
}
.lqx .rev-sec:not(.rev-sec--light) > h2 + p::first-letter{
  color:#b3122c;text-shadow:3px 3px 0 #f6cdb4;
}

/* in-between panels: alternating accent bars, lighter glass */
.lqx .rev-sec > p{
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
}
.lqx .rev-sec > p:nth-of-type(even){
  border-left:4px solid var(--lqx-pink) !important;
  border-radius:6px 18px 18px 6px;
}
.lqx .rev-sec > p:nth-of-type(odd):not(:nth-of-type(3n)):not(:first-of-type){
  border-left:4px solid var(--lqx-violet) !important;
  border-radius:6px 18px 18px 6px;
}