/* ============================================================
   Pakistan & Counting — Legal / Info pages
   (FAQs, Privacy Policy, Terms & Conditions, Refund Policy,
   Cookie Policy). Shares header/footer/tokens from style.css;
   boxed headline, rainbow, ticker, sponsor from
   industry-reports.css; Vision/Mission block reuses .about.
   ============================================================ */

:root{ --lg-red:#E8412A; }

/* ============================================================
   HERO  —  boxed title + subtitle, faded office backdrop
   (mirrors the other inner-page heros so the set stays uniform)
   ============================================================ */
.lg-hero{position:relative;margin-top:-84px;padding:170px 0 92px;text-align:center;overflow:hidden;
  background-color:#fff;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px);
  background-size:46px 46px}
.lg-hero__inner{position:relative;z-index:1;max-width:1160px;margin:0 auto;padding:0 32px}
.lg-hero__title{font-family:var(--ff);font-weight:900;text-transform:uppercase;line-height:1;color:var(--dark)}
.lg-hero__title .ir-boxed{font-size:clamp(26px,5.4vw,64px);color:var(--dark);white-space:nowrap}
.lg-hero__sub{margin:34px auto 0;max-width:640px;font-family:var(--ff);font-weight:600;
  text-transform:none;color:#3a3a3a;font-size:clamp(16px,1.9vw,23px);line-height:1.5}

/* ============================================================
   BODY  —  full-height green watermark panel (bleeds to the left
   screen edge)  |  white content column, over a faint grid.
   ============================================================ */
.lg-body{position:relative;overflow:hidden;background:#fff}
.lg-body::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px)}
.lg-body__inner{position:relative;z-index:1;
  display:grid;grid-template-columns:25% 1fr;grid-template-rows:auto 1fr;
  grid-template-areas:"panel rainbow" "panel content";align-items:stretch}
.lg-panel{grid-area:panel}
/* rainbow bar sits at the top of the CONTENT column (right of the green panel),
   top-aligned with the panel — matches Figma. yellow / pink / orange */
.lg-rainbow{grid-area:rainbow;height:10px;align-self:start;
  background:linear-gradient(90deg,#ffcb00 0 33.333%,#ef2167 33.333% 66.666%,#ff6b22 66.666% 100%)}
.lg-content,.faq-acc{grid-area:content}

/* green panel + rotated brand watermark */
.lg-panel{position:relative;background:var(--green);min-height:100%;overflow:hidden}
.lg-panel::before{content:"";position:absolute;top:0;bottom:0;right:100%;width:100vw;background:var(--green)}
.lg-panel__mark{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(180deg);writing-mode:vertical-rl;
  font-family:var(--ff);font-weight:900;text-transform:uppercase;
  font-size:clamp(38px,6vw,88px);line-height:.9;letter-spacing:.01em;
  color:rgba(255,255,255,.15);white-space:nowrap;text-align:center}

/* image variant (FAQ) — real exported sidebar SVG, fixed height,
   green portion bleeds to the left screen edge */
/* solid green panel — brand watermark image kept for layout height but hidden
   (client request: remove the text, keep the colour) */
.lg-panel--img{background:#26B685;overflow:hidden;align-self:start;min-height:0}
.lg-panel--img::before{top:0;bottom:auto;right:0;left:auto;width:100vw;
  height:calc(100% * 784 / 974);background:#26B685;z-index:0}
.lg-panel--img img{position:relative;z-index:1;display:block;width:100%;height:auto;visibility:hidden}

/* white content column */
.lg-content{position:relative;padding:64px 0 92px;padding-left:58px;max-width:920px}

/* brand lockup heading */
.lg-brand{align-items:center;gap:.06em;font-family:var(--ff);font-weight:900;
  text-transform:uppercase;color:var(--dark);font-size:clamp(22px,2.6vw,30px);line-height:1}
.lg-brand__amp{margin: -4px;display:inline-grid;place-items:center;width:1.50em;height:1.50em;
  background:var(--orange);color:#fff;border-radius:50px;font-size:.92em;line-height:1}
/* heading underline removed (client request) */
.lg-rule{display:none}

.lg-intro{margin-top:20px;max-width:680px;font-family:var(--ff);font-weight:500;
  color:var(--dark);font-size:15px;line-height:1.7}

/* section heading (POLICY NAME) */
.lg-h{margin-top:40px;font-family:var(--ff);font-weight:900;text-transform:uppercase;color:var(--dark);
  font-size:clamp(20px,2.3vw,27px);line-height:1}
.lg-h .lg-rule{width:132px;margin-top:0px}

/* bullet list */
.lg-list{list-style:none;margin:26px 0 0;padding:0;max-width:700px}
.lg-list li{position:relative;padding-left:26px;margin-bottom:22px;
  font-family:var(--ff);font-weight:500;color:var(--dark);font-size:15px;line-height:1.7}
.lg-list li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;
  background:var(--lg-red)}

/* ============================================================
   FAQ  —  accordion
   ============================================================ */
.faq-acc{padding:60px 0 84px;padding-left:58px;max-width:780px}
.faq-item{background:#fff;border:1.5px solid var(--green);margin-bottom:20px;
  box-shadow:6px 6px 0 0 rgba(38,182,133,.34)}
/* opened item is green-filled (the answer) and drops the offset shadow */
.faq-item.is-open{    box-shadow: 3px 9px 0 3px #26b685;}
.faq-q{width:100%;display:flex;align-items:center;gap:15px;cursor:pointer;
  background:none;border:0;text-align:left;padding:18px 22px;font-family:inherit}
/* Q lettermark — green when closed, dark when open */
.faq-q__ic{flex:0 0 auto;font-family:var(--ff);font-weight:900;font-size:22px;line-height:1;
  color:var(--green)}
.is-open .faq-q__ic{color:var(--dark)}
.faq-q__text{flex:1;font-family:var(--ff);font-weight:700;color:var(--dark);
  font-size:clamp(15px,1.4vw,17px);line-height:1.35}
.is-open .faq-q__text{color:var(--green)}
.faq-q__sign{position:relative;flex:0 0 auto;width:20px;height:20px}
.faq-q__sign::before,.faq-q__sign::after{content:"";position:absolute;background:var(--green);
  transition:opacity .2s}
.faq-q__sign::before{left:0;top:9px;width:20px;height:2.4px}          /* horizontal */
.faq-q__sign::after{left:9px;top:0;width:2.4px;height:20px}           /* vertical  */
.is-open .faq-q__sign::before,.is-open .faq-q__sign::after{background:var(--dark)}
.is-open .faq-q__sign::after{opacity:0}                               /* + -> −    */
/* answer panel — green fill, white copy (only this part is green) */
.faq-a{max-height:0;overflow:hidden;background:var(--green);transition:max-height .32s ease}
.is-open .faq-a{max-height:340px}
.faq-a p{margin:0;padding:26px 32px 30px 59px;font-family:var(--ff);font-weight:500;
  color:#fff;font-size:15px;line-height:1.6}

/* Vision/Mission reuse: no heading, tighten top padding */
.about--legal{padding-top:70px}
/* white icon at the top-left of each Vision/Mission card */
.vm-ic{position:relative;z-index:1;display:block;width:50px;height:50px;margin-bottom:14px}

/* ============================================================
   COMBINED POLICIES PAGE — three colour-coded sections
   (Terms=green, Refund=orange, Privacy=pink), each with a
   full-height side panel that bleeds to the left screen edge.
   ============================================================ */
.pol-body{position:relative;overflow:hidden;background:#fff}
.pol-body::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px)}

.pol-sec{position:relative;z-index:1;display:grid;grid-template-columns:25% 1fr;align-items:start}
/* panel sizes to its watermark image (align-self:start) — NOT the full section
   height, so there's no long text-less colour strip below the watermark. */
.pol-panel{grid-column:1;position:relative;overflow:hidden;align-self:start}
.pol-content{grid-column:2}
/* first section carries the rainbow bar at the top of the content column */
.pol-sec--terms{grid-template-rows:auto 1fr;grid-template-areas:"panel rainbow" "panel content"}
.pol-sec--terms .pol-panel{grid-area:panel}
.pol-sec--terms .lg-rainbow{grid-area:rainbow}
.pol-sec--terms .pol-content{grid-area:content}

/* Colour band per section, sized to the watermark image and bleeding to the
   left screen edge (green → orange → pink). The panel colour just backs any
   transparent part of the exported SVG, which carries the faded watermark text. */
.pol-panel{background:var(--green)}                    /* Terms = green (base)        */
.pol-sec--refund  .pol-panel{background:var(--orange)} /* Refund / Complaints = orange */
.pol-sec--privacy .pol-panel{background:#D82E5D}       /* Privacy = pink               */
.pol-panel::before{content:"";position:absolute;top:0;bottom:0;right:0;width:100vw;z-index:0;
  background-color:inherit}
/* exported panel SVG sizes the colour band, but the baked-in watermark text is
   hidden — matching the FAQ / other inner pages (client request: keep colour,
   drop the text). The solid colour comes from the panel background + ::before. */
.pol-panel img{position:relative;z-index:1;display:block;width:100%;height:auto;visibility:hidden}

.pol-content{position:relative;padding:64px 0 66px;padding-left:58px;max-width:770px}
.pol-sec--refund .pol-content,.pol-sec--privacy .pol-content{padding-top:58px;padding-bottom:60px}

/* per-section underline colour (base .lg-rule is green = Terms) */
.pol-sec--refund  .lg-rule{background:var(--orange)}
.pol-sec--privacy .lg-rule{background:#D82E5D}
/* per-section bullet-square colour */
.pol-sec--terms   .lg-list li::before{background:var(--lg-red);box-shadow: -2px 2px 0 0 #3A3A3A;}
.pol-sec--refund  .lg-list li::before{background:var(--yellow);box-shadow: -2px 2px 0 0 #3A3A3A;}
.pol-sec--privacy .lg-list li::before{background:var(--green);box-shadow: -2px 2px 0 0 #3A3A3A;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .lg-body__inner{grid-template-columns:1fr;grid-template-rows:auto auto auto;
    grid-template-areas:"rainbow" "panel" "content";padding:0}
  .lg-rainbow{height:10px}
  .lg-panel{min-height:0;padding:26px 32px 26px 82px;background:var(--green)}
  .lg-panel::before{display:none}
  .lg-panel__mark{position:absolute;left:6px;top:50%;transform:translateY(-50%) rotate(180deg);
    writing-mode:vertical-rl;font-size:clamp(34px,11vw,54px)}
  /* FAQ image panel → plain green band (watermark text removed, client request) */
  .lg-panel--img{align-self:stretch;overflow:hidden;background:#26B685;min-height:120px}
  .lg-panel--img img{display:none}
  .lg-panel--img::before{content:none}
  .lg-content{padding:40px 32px 60px}
  .faq-acc{padding:40px 32px 60px}
  .faq-a p{margin-left:22px}
  /* combined policies → single column; the tall side SVG collapses to a
     short coloured band per section (image hidden, coloured bleed shows) */
  .pol-sec,.pol-sec--terms{grid-template-columns:1fr;grid-template-rows:auto auto auto;
    grid-template-areas:"rainbow" "panel" "content";padding:0}
  /* place EVERY section's panel/content by area (not grid-column), so refund &
     privacy collapse to the same full-width coloured band as terms */
  .pol-sec .pol-panel{grid-area:panel;min-height:26px;overflow:hidden}
  .pol-sec .pol-content{grid-area:content}
  .pol-panel img{display:none}
  .pol-panel::before{left:0;right:auto;width:100%}
  .pol-content,.pol-sec--refund .pol-content,.pol-sec--privacy .pol-content{padding:38px 32px 46px}
}
@media (max-width:600px){
  .lg-hero{margin-top:-70px;padding:120px 0 56px}
  .lg-hero__title .ir-boxed{font-size:clamp(20px,7.4vw,38px)}
  .lg-panel{padding:22px 20px 22px 60px}
  .lg-panel__mark{left:2px;font-size:clamp(30px,13vw,44px)}
  .lg-content{padding:34px 20px 48px}
  .faq-acc{padding:34px 20px 48px}
  .faq-q{padding:15px 16px;gap:12px}
}