.elementor-13 .elementor-element.elementor-element-419f589{--display:flex;}/* Start custom CSS for html, class: .elementor-element-f0fcd35 *//* =========================================
   7of9 JuiceIN — FAQ ONLY (Premium v2)
   Scope: .jx-faq (add this class to FAQ page wrapper)
   Horse-blood red + gold, premium depth, tighter layout
   No pink / no cream
   ========================================= */

/* Make sure your FAQ page wrapper has: class="jx-faq" */
.jx-faq{
  /* Core palette */
  --bg0:#06070b;
  --bg1:#0a0c12;
  --ink:#eef3ff;
  --muted:rgba(238,243,255,.74);
  --muted2:rgba(238,243,255,.56);

  /* Accents */
  --blood:#7a0017;      /* horse-blood base */
  --blood2:#b3002d;     /* brighter blood */
  --gold:#ffd46b;       /* rich gold */
  --gold2:#ffcf5a;      /* warmer gold */
  --purple:#a78bfa;
  --lime:#7cffc8;

  /* Surfaces */
  --card: rgba(16,18,26,.78);
  --card2: rgba(10,12,18,.62);
  --line: rgba(238,243,255,.10);

  /* Geometry */
  --r: 18px;
  --r2: 22px;

  /* Depth */
  --shadowA: 0 24px 70px rgba(0,0,0,.62);
  --shadowB: 0 10px 26px rgba(0,0,0,.52);

  position:relative;
  isolation:isolate;
  color:var(--ink);
  background: transparent;
}

/* Premium background + subtle grain (no external assets) */
.jx-faq::before{
  content:"";
  position:absolute; inset:-2px;
  z-index:-2;
  background:
    radial-gradient(1100px 620px at 12% 0%, rgba(179,0,45,.20), transparent 60%),
    radial-gradient(900px 560px at 92% 8%, rgba(255,212,107,.14), transparent 58%),
    radial-gradient(900px 560px at 55% 112%, rgba(167,139,250,.12), transparent 58%),
    linear-gradient(180deg, rgba(6,7,11,.00), rgba(6,7,11,.38));
  filter: saturate(1.18) contrast(1.08);
  pointer-events:none;
}
.jx-faq::after{
  content:"";
  position:absolute; inset:-2px;
  z-index:-1;
  pointer-events:none;
  opacity:.07;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}

/* Typography + crisp rhythm */
.jx-faq, .jx-faq *{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.jx-faq p{margin:0 0 10px; color:var(--muted);}
.jx-faq h1,.jx-faq h2,.jx-faq h3{margin:0 0 10px; color:var(--ink); letter-spacing:-.35px;}
.jx-faq a{color:inherit; text-decoration:none;}
.jx-faq a:hover{opacity:.95;}

/* Container tighter */
.jx-faq .container{max-width:1120px; margin-inline:auto; padding-inline:20px;}
@media (max-width: 640px){ .jx-faq .container{padding-inline:16px;} }

/* OPTIONAL: Hide top menu bar on FAQ page */
.jx-faq .jx-top{display:none !important;}

/* ---------- Premium “metal edge” utility (gradient border) ---------- */
.jx-faq .metal{
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg,
      rgba(255,212,107,.42),
      rgba(179,0,45,.26),
      rgba(167,139,250,.20),
      rgba(124,255,200,.16)
    ) border-box;
  border-radius: var(--r2);
  box-shadow: var(--shadowA);
}

/* ---------- HERO (FAQ) ----------
   Apply these classes in Elementor:
   fq-hero, fq-hero__kicker, fq-hero__title, fq-hero__lead
*/
.jx-faq .fq-hero{padding: 22px 0 10px;}
.jx-faq .fq-hero__kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:950;
  color: rgba(255,212,107,.88);
  margin:0 0 8px;
  letter-spacing:.2px;
}
.jx-faq .fq-hero__kicker::before{
  content:"";
  width:34px; height:1px;
  background: linear-gradient(90deg, rgba(255,212,107,.95), rgba(179,0,45,.65), transparent);
}
.jx-faq .fq-hero__title{
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  line-height:1.10;
  margin:0 0 10px;
  font-weight: 1000;
  text-shadow:
    0 0 22px rgba(179,0,45,.18),
    0 0 28px rgba(255,212,107,.08);
}
.jx-faq .fq-hero__lead{max-width:76ch;}

/* ---------- Editable Flash Strip (premium) ----------
   Add structure:
   <div class="fq-strip metal">
     <div class="fq-strip__inner"> ... </div>
   </div>
*/
.jx-faq .fq-strip{
  margin-top: 12px;
  border-radius: 999px;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(122,0,23,.55), rgba(179,0,45,.18), rgba(255,212,107,.10)),
    rgba(255,255,255,.02);
  box-shadow: var(--shadowB);
}
.jx-faq .fq-strip::after{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,212,107,.08) 16%,
    rgba(255,212,107,.22) 26%,
    rgba(255,212,107,.06) 40%,
    transparent 60%);
  background-size: 220% 100%;
  animation: fqSheen 3.6s linear infinite;
  mix-blend-mode: screen;
  opacity:.85;
  pointer-events:none;
}
@keyframes fqSheen{ 0%{background-position:200% 0} 100%{background-position:-60% 0} }
@media (prefers-reduced-motion: reduce){ .jx-faq .fq-strip::after{animation:none;} }

.jx-faq .fq-strip__inner{
  padding: 10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  position:relative;
  z-index:1;
}
.jx-faq .fq-strip b{color:var(--ink); font-weight:1000;}
.jx-faq .fq-strip span{color:rgba(238,243,255,.80); font-weight:750;}
.jx-faq .fq-strip a{
  white-space:nowrap;
  font-weight:1000;
  border-bottom: 1px dashed rgba(255,212,107,.55);
}
.jx-faq .fq-strip a:hover{border-bottom-color: rgba(179,0,45,.60);}

/* ---------- FAQ BLOCK ----------
   Use:
   fq-block, fq-hd__title, fq-hd__sub, fq-faq, fq-q, fq-a
*/
.jx-faq .fq-block{padding: 14px 0;}
.jx-faq .fq-hd__title{
  font-size: clamp(1.35rem, 2.2vw, 1.95rem);
  font-weight: 1000;
  margin:0 0 6px;
}
.jx-faq .fq-hd__sub{margin:0; color:var(--muted); max-width:88ch;}
.jx-faq .fq-faq{display:grid; gap:12px; margin-top: 12px;}

/* Card: premium depth + edge */
.jx-faq .fq-q{
  border-radius: var(--r2);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg,
      rgba(255,212,107,.40),
      rgba(179,0,45,.24),
      rgba(167,139,250,.18),
      rgba(238,243,255,.10)
    ) border-box;
  box-shadow: var(--shadowB);
  overflow:hidden;
  transform: translateZ(0);
}

/* Summary row */
.jx-faq .fq-q > summary{
  list-style:none;
  cursor:pointer;
  padding: 14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  font-weight: 950;
  color: var(--ink);
}
.jx-faq .fq-q > summary::-webkit-details-marker{display:none;}

/* Focus (quality cue) */
.jx-faq .fq-q > summary:focus{outline:none;}
.jx-faq .fq-q > summary:focus-visible{
  outline: 2px solid rgba(255,212,107,.35);
  outline-offset: 3px;
  border-radius: 14px;
}

/* Premium toggle button */
.jx-faq .fq-q > summary::after{
  content:"+";
  width:36px; height:36px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  border: 1px solid rgba(255,212,107,.24);
  background:
    radial-gradient(120px 60px at 30% 25%, rgba(255,212,107,.16), transparent 62%),
    rgba(255,255,255,.03);
  color: rgba(255,212,107,.95);
  box-shadow:
    0 0 0 1px rgba(179,0,45,.10) inset,
    0 10px 24px rgba(0,0,0,.40);
  flex: 0 0 auto;
  font-weight: 1000;
  transition: transform .18s ease, filter .18s ease, border-color .18s ease;
}
.jx-faq .fq-q > summary:hover::after{
  filter: brightness(1.10);
  border-color: rgba(179,0,45,.28);
}

/* Open state = richer glow + header sheen */
.jx-faq .fq-q[open]{
  box-shadow:
    0 26px 80px rgba(0,0,0,.66),
    0 0 46px rgba(179,0,45,.14),
    0 0 36px rgba(255,212,107,.08);
}
.jx-faq .fq-q[open] > summary{
  background:
    linear-gradient(90deg, rgba(179,0,45,.14), rgba(255,212,107,.10), rgba(167,139,250,.08));
}
.jx-faq .fq-q[open] > summary::after{
  content:"–";
  border-color: rgba(179,0,45,.30);
  filter: brightness(1.12);
}

/* Answer */
.jx-faq .fq-a{
  padding: 0 14px 14px;
  color: rgba(238,243,255,.78);
  font-weight: 650;
  line-height: 1.6;
}
.jx-faq .fq-q[open] .fq-a{
  border-top: 1px solid rgba(238,243,255,.10);
  padding-top: 12px;
  animation: fqReveal .18s ease-out;
}
@keyframes fqReveal{
  from{opacity:.0; transform: translateY(-4px);}
  to{opacity:1; transform: translateY(0);}
}

/* Buttons (premium, restrained glow) */
.jx-faq .jx-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(238,243,255,.14);
  background: rgba(255,255,255,.03);
  box-shadow: 0 14px 34px rgba(0,0,0,.50);
  font-weight: 950;
  letter-spacing:.2px;
  transition: transform .18s ease, filter .18s ease, border-color .18s ease;
}
.jx-faq .jx-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  border-color: rgba(255,212,107,.30);
}
.jx-faq .jx-btn--gold{
  border-color: rgba(255,212,107,.38);
  background:
    radial-gradient(180px 90px at 28% 18%, rgba(255,212,107,.20), transparent 62%),
    radial-gradient(200px 110px at 90% 55%, rgba(179,0,45,.12), transparent 64%),
    rgba(255,255,255,.03);
}
.jx-faq .jx-btn--primary{
  border-color: rgba(179,0,45,.30);
  background:
    radial-gradient(180px 90px at 28% 18%, rgba(179,0,45,.18), transparent 62%),
    radial-gradient(200px 110px at 90% 55%, rgba(255,212,107,.10), transparent 64%),
    rgba(255,255,255,.03);
}

/* Optional: Bottom dock polish (FAQ-only) */
.jx-faq .jx-dock{
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(238,243,255,.12);
}
.jx-faq .dock-cta{
  border-color: rgba(179,0,45,.28);
  background:
    radial-gradient(200px 90px at 25% 20%, rgba(179,0,45,.18), transparent 62%),
    radial-gradient(220px 110px at 90% 55%, rgba(255,212,107,.10), transparent 64%),
    rgba(255,255,255,.03);
}/* End custom CSS */