/* ============================================================
   MEDIVEXA LABS — FAQ PAGE ONLY
   Loaded after style.css. All colour/typography comes from the
   shared tokens — no new hex values are introduced here.

   Layout: sticky left rail (search + vertical category nav +
   dark help panel) alongside a single accordion column. This
   mirrors the home page FAQ (.faq-grid) and the legal pages
   (.legal-layout) so the site reads as one system.
   Section rhythm: tint (hero) -> white (body) -> tint (cta)
   ============================================================ */

/* ============ PAGE HERO ============
   page-hero is a per-page block (see about.css / contact.css),
   deliberately duplicated rather than pushed into style.css. */
.page-hero{
  position:relative;padding:64px 0 68px;background:var(--tint);
  border-bottom:1px solid var(--line);overflow:hidden;
}
.ph-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ph-ring{
  position:absolute;top:-260px;right:-180px;width:620px;height:620px;
  border-radius:50%;border:1px dashed rgba(73,66,225,.16);
  animation:ringSpinFaq 60s linear infinite;
}
@keyframes ringSpinFaq{to{transform:rotate(360deg)}}
.ph-dots{
  position:absolute;bottom:-30px;left:2%;width:220px;height:150px;
  background-image:radial-gradient(rgba(73,66,225,.16) 1.4px,transparent 1.4px);
  background-size:19px 19px;
  mask-image:radial-gradient(ellipse,#000 15%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse,#000 15%,transparent 72%);
}
.page-hero .container{position:relative;z-index:1}

.ph-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.crumb{display:flex;align-items:center;gap:8px;margin-bottom:24px;
  font-family:var(--fm);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.crumb a{color:var(--violet)}
.crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.crumb svg{opacity:.5}
.page-hero h1{
  font-size:clamp(2.1rem,3.9vw,3.1rem);font-weight:700;letter-spacing:-.025em;
  line-height:1.14;margin:20px 0 18px;text-wrap:balance;
}
.ph-content>p{color:var(--ink2);font-size:1.06rem;line-height:1.75;max-width:520px}
.ph-facts{display:flex;gap:0;flex-wrap:wrap;margin-top:36px;border-top:1px solid var(--line);padding-top:26px}
.phf{padding:0 34px;border-left:1px solid var(--line)}
.phf:first-child{padding-left:0;border-left:none}
.phf b{display:block;font-family:var(--fd);font-size:1.85rem;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.phf b em{font-style:normal;color:var(--orchid)}
.phf span{font-family:var(--fm);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);display:block;margin-top:9px}

.ph-media{position:relative}
.ph-media-fig{
  border-radius:var(--r-lg);overflow:hidden;border:5px solid #fff;
  box-shadow:var(--sh-card);aspect-ratio:4/3.6;
}
.ph-media-fig img{width:100%;height:100%;object-fit:cover;display:block}
.ph-badge{
  position:absolute;left:-18px;bottom:26px;display:flex;align-items:center;gap:12px;
  background:#fff;padding:14px 18px;border-radius:var(--r-md);box-shadow:var(--sh);
  max-width:270px;border:1px solid #EDEAF8;
}
.ph-badge-ico{
  flex-shrink:0;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--grad);color:#fff;
}
.ph-badge b{display:block;font-family:var(--fd);font-size:.86rem;font-weight:600;color:var(--ink)}
.ph-badge span{display:block;font-size:.74rem;color:var(--ink2);line-height:1.4;margin-top:2px}

/* ============================================================
   FAQ BODY — sticky rail + accordion column
   ============================================================ */
.faqp{padding:92px 0 104px;background:#fff}
.faqp-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(32px,4.5vw,60px);align-items:start}

/* ---------- LEFT RAIL ---------- */
.faqp-rail{position:sticky;top:104px;display:flex;flex-direction:column;gap:18px}

/* search */
.faqp-search{position:relative}
.faqp-search input{
  width:100%;padding:.92rem 2.8rem .92rem 2.9rem;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;
  font-family:var(--fb);font-size:.9rem;font-weight:500;color:var(--ink);
  box-shadow:0 6px 18px -14px rgba(26,21,51,.4);transition:.3s;
}
.faqp-search input::placeholder{color:#9A93B5;font-weight:400}
.faqp-search input::-webkit-search-cancel-button{display:none}
.faqp-search input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(73,66,225,.14)}
.fs-ico{position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);color:var(--violet);pointer-events:none}
.fs-clear{
  position:absolute;right:.55rem;top:50%;transform:translateY(-50%);
  width:27px;height:27px;border-radius:50%;display:grid;place-items:center;
  background:var(--tint2);color:var(--ink2);transition:.25s;
}
.fs-clear:hover{background:var(--grad);color:#fff}

/* vertical category nav */
.faqp-nav{
  background:#fff;border:1px solid #EDEAF8;border-radius:var(--r-md);
  padding:1.15rem 1.05rem;box-shadow:var(--sh-card);
}
.fn-label{
  display:block;font-family:var(--fm);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink3);margin:0 .35rem 12px;
}
.fn-list{list-style:none;display:flex;flex-direction:column;gap:2px}
.fn-item{
  width:100%;display:flex;align-items:center;gap:11px;text-align:left;
  padding:.62rem .7rem;border-radius:11px;
  font-family:var(--fd);font-size:.88rem;font-weight:500;color:var(--ink2);
  line-height:1.35;transition:.28s var(--ease);cursor:pointer;
}
.fn-item:hover{background:var(--tint);color:var(--ink)}
.fn-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--tint2);transition:.28s var(--ease);
}
.fn-txt{flex:1;min-width:0}
.fn-n{
  font-family:var(--fm);font-size:.64rem;font-weight:600;letter-spacing:.06em;
  color:var(--ink3);flex-shrink:0;transition:.28s;
}
.fn-item.on{background:var(--grad-soft);color:var(--violet);font-weight:600}
.fn-item.on .fn-dot{background:var(--grad);transform:scale(1.25)}
.fn-item.on .fn-n{color:var(--violet)}

/* dark help panel — the one dark punctuation on this page */
.faqp-help{
  background:linear-gradient(158deg,#171034 0%,#2A2178 46%,#4F46CC 100%);
  color:#fff;border-radius:22px;padding:1.6rem 1.5rem;position:relative;overflow:hidden;
  box-shadow:0 30px 60px -28px rgba(26,21,51,.32);
}
.faqp-help::before{
  content:"";position:absolute;top:-110px;right:-90px;width:270px;height:270px;border-radius:50%;
  background:radial-gradient(circle,rgba(204,95,246,.5),transparent 68%);
}
.faqp-help>*{position:relative;z-index:1}
.fh-ico{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.14);color:#fff;margin-bottom:14px;
}
.faqp-help b{display:block;font-family:var(--fd);font-size:1.02rem;font-weight:600;margin-bottom:8px}
.faqp-help p{font-size:.82rem;line-height:1.65;color:rgba(255,255,255,.75);margin-bottom:16px}
.faqp-help .btn{width:100%;background:#fff;color:var(--indigo);box-shadow:none}
.faqp-help .btn::after{display:none}
.faqp-help .btn:hover{box-shadow:0 16px 32px -12px rgba(0,0,0,.45)}
.fh-call{
  display:block;text-align:center;margin-top:13px;
  font-family:var(--fm);font-size:.64rem;letter-spacing:.1em;color:rgba(255,255,255,.7);
  text-decoration:underline;text-underline-offset:4px;
}
.fh-call:hover{color:#fff}

/* ---------- RIGHT COLUMN ---------- */
.faqp-main{min-width:0}
.faqp-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--line);
}
.faqp-head h2{font-size:1.45rem;font-weight:600;letter-spacing:-.015em;margin:0}
.faqp-count{
  font-family:var(--fm);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink3);margin:0;
}

/* accordion */
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{
  background:#fff;border:1px solid #EDEAF8;border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(21,16,46,.04),0 8px 24px -18px rgba(26,21,51,.22);
  transition:border-color .35s,box-shadow .35s;
}
.faq-item.hide{display:none}
.faq-item:hover{border-color:#DED9F0}
.faq-item.open{
  border-color:transparent;
  box-shadow:0 3px 6px rgba(21,16,46,.05),0 24px 46px -26px rgba(26,21,51,.42);
}
.faq-item h3{margin:0;font-size:inherit;font-weight:inherit;letter-spacing:normal}
.faq-q{
  width:100%;display:flex;align-items:center;gap:15px;text-align:left;
  padding:1.15rem 1.3rem;font-family:var(--fd);font-size:.99rem;font-weight:500;
  color:var(--ink);line-height:1.45;transition:color .3s;
}
.faq-q:hover{color:var(--violet)}
.fq-n{
  font-family:var(--fm);font-size:.66rem;font-weight:600;letter-spacing:.08em;
  color:var(--violet);flex-shrink:0;width:1.6em;
}
.fq-t{flex:1;min-width:0}
.fq-ico{
  position:relative;width:29px;height:29px;border-radius:50%;flex-shrink:0;
  background:var(--grad-soft);display:grid;place-items:center;transition:.4s var(--ease);
}
.fq-ico i{position:absolute;background:var(--violet);border-radius:2px;transition:.4s var(--ease)}
.fq-ico i:first-child{width:11px;height:2px}
.fq-ico i:last-child{width:2px;height:11px}
.faq-item.open .fq-ico{background:var(--grad);transform:rotate(180deg)}
.faq-item.open .fq-ico i{background:#fff}
.faq-item.open .fq-ico i:last-child{transform:scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.fa-inner{padding:0 1.3rem 1.25rem calc(1.3rem + 15px + 1.6em)}
.fa-inner p{font-size:.9rem;line-height:1.8;color:var(--ink2)}

/* empty state */
.faqp-empty{
  text-align:center;padding:56px 24px;background:#fff;border:1px dashed var(--line);
  border-radius:20px;
}
.faqp-empty[hidden]{display:none}
.te-ico{
  width:58px;height:58px;border-radius:18px;margin:0 auto 16px;display:grid;place-items:center;
  background:var(--grad-soft);color:var(--violet);
}
.faqp-empty b{display:block;font-family:var(--fd);font-size:1.05rem;font-weight:600;margin-bottom:8px}
.faqp-empty p{color:var(--ink2);font-size:.9rem;max-width:400px;margin:0 auto 20px;line-height:1.7}

/* ============ CTA ============ */
.faqp-cta{padding:0 0 104px;background:#fff}
.fcta-shell{
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  background:var(--tint);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:2.4rem 2.6rem;position:relative;overflow:hidden;
}
.fcta-shell::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(73,66,225,.14) 1.2px,transparent 1.2px);
  background-size:24px 24px;
  mask-image:radial-gradient(ellipse 50% 70% at 92% 30%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 50% 70% at 92% 30%,#000,transparent 76%);
}
.fcta-text,.fcta-actions{position:relative;z-index:1}
.fcta-text h2{font-size:clamp(1.4rem,2.4vw,1.85rem);font-weight:600;margin:12px 0 8px}
.fcta-text p{color:var(--ink2);font-size:.95rem;max-width:440px;line-height:1.7}
.fcta-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.wa-inline{
  display:inline-flex;align-items:center;gap:10px;padding:.85rem 1.4rem;border-radius:999px;
  background:#E9FBEF;color:#0F9D58;font-family:var(--fd);font-weight:600;font-size:.92rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.wa-inline:hover{transform:translateY(-3px);box-shadow:var(--sh-sm)}

/* ============ RESPONSIVE ============ */
@media(max-width:1080px){
  .ph-grid{grid-template-columns:1fr;gap:36px}
  .ph-media{max-width:440px;margin-inline:auto;width:100%}
  .faqp-grid{grid-template-columns:1fr;gap:34px}
  .faqp-rail{position:static}
  .fn-list{flex-direction:row;flex-wrap:wrap;gap:8px}
  .fn-item{width:auto;border:1.5px solid var(--line);border-radius:999px;padding:.5rem .9rem;font-size:.82rem}
  .fn-item.on{border-color:transparent}
  .fn-dot{display:none}
}
@media(max-width:640px){
  .page-hero{padding:44px 0 52px}
  .ph-facts{gap:0 16px;margin-top:28px}
  .phf{padding:0 18px}
  .faqp{padding:64px 0 70px}
  .faqp-head{margin-bottom:18px}
  .faqp-head h2{font-size:1.2rem}
  .faq-q{padding:1.05rem 1.05rem;gap:11px;font-size:.93rem}
  .fq-n{display:none}
  .fa-inner{padding:0 1.05rem 1.15rem}
  .faqp-cta{padding-bottom:70px}
  .fcta-shell{padding:1.8rem;flex-direction:column;align-items:flex-start}
  .fcta-actions{width:100%}
  .fcta-actions .btn,.fcta-actions .wa-inline{width:100%;justify-content:center}
}