/**
 * India Launchpad page
 *
 * Figma: node 266:2. Loaded only on the India Launchpad page template.
 * Depends on the token block in style.css section 1.
 *
 * Two colours here are one-offs from the calculator and have no token:
 *   --il-red    #D95959  the BEFORE column heading
 *   --il-amber  #D9A633  the "Marginal" verdict
 */

.page-template-page-india-launchpad{--il-red:#D95959;--il-amber:#D9A633}

/* ═══════════════════════════════════════════════
   1. SECTION SHELL
   ═══════════════════════════════════════════════ */
/* width:100% with content-box adds the padding on top of the full width, so
   the row was always viewport + 192px and overflowed at every size. Sized
   border-box against the same 1248px content column instead, matching
   .container in style.css. */
.il-in{
  width:100%;
  max-width:calc(1248px + var(--pad,96px) * 2);
  margin:0 auto;
  padding:0 var(--pad,96px);
  box-sizing:border-box;
}
.il-sec{padding:56px 0}
.il-sec--sand{background:var(--n50)}
.il-sec--navy{background:var(--c700)}

.il-h2{
  font-family:var(--fd);font-weight:700;font-size:36px;line-height:1.2;
  letter-spacing:-.72px;color:var(--c700);
  text-align:center;margin:0 0 24px;
}
.il-h2--light{color:var(--white)}
.il-h2--left{text-align:left}

.il-lede{
  font-family:var(--ff);font-size:15px;line-height:1.6;color:var(--n500);
  text-align:center;max-width:1040px;margin:0 auto 40px;
}
.il-lede--light{color:var(--c200)}

.il-note{
  font-family:var(--ff);font-size:13px;color:var(--c200);
  text-align:center;margin:32px auto 0;max-width:1040px;
}
.il-sec--sand .il-note{color:var(--n500)}

/* Eyebrow pill (266:17, 267:17) */
.il-badge{
  display:block;width:-moz-fit-content;width:fit-content;
  margin:0 auto 24px;padding:6px 16px;
  font-family:var(--ff);font-weight:500;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--c200);background:var(--c600);border-radius:13px;
}

.il-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:0 28px;
  font-family:var(--ff);font-weight:500;font-size:15px;
  border:0;border-radius:var(--r6);cursor:pointer;text-decoration:none;
  transition:background .15s;
}
.il-btn--gold{background:var(--g400);color:var(--g900)}
.il-btn--gold:hover{background:var(--g500);color:var(--g900)}
.il-btn--lg{height:52px;font-size:16px;padding:0 32px}

.il-grid{display:grid;gap:32px}
.il-grid--3{grid-template-columns:repeat(3,1fr)}
.il-grid--4{grid-template-columns:repeat(4,1fr);gap:36px}


/* ═══════════════════════════════════════════════
   2. HERO (266:16)
   ═══════════════════════════════════════════════ */
.il-hero{background:var(--c700);padding:50px 0 64px;text-align:center}
.il-hero__h{
  font-family:var(--fd);font-weight:700;font-size:44px;line-height:1.25;
  letter-spacing:-.9px;color:var(--white);
  max-width:1160px;margin:0 auto 28px;
}
.il-hero__p{
  font-family:var(--ff);font-size:16px;line-height:1.65;color:var(--c200);
  max-width:1000px;margin:0 auto 32px;
}


/* ═══════════════════════════════════════════════
   3. PROBLEM CARDS (267:4)
   ═══════════════════════════════════════════════ */
.il-card{
  padding:24px;
  background:var(--white);
  border:1px solid var(--n200);border-radius:var(--r8);
}
.il-card__n{
  display:block;margin-bottom:14px;
  font-family:var(--ff);font-weight:700;font-size:11px;
  letter-spacing:.1em;color:var(--c400);
}
.il-card__t{
  font-family:var(--fd);font-weight:700;font-size:20px;color:var(--c700);
  margin:0 0 14px;
}
.il-card__d{
  font-family:var(--ff);font-size:14px;line-height:1.65;color:var(--n500);margin:0;
}


/* ═══════════════════════════════════════════════
   4. PILLARS (267:20)
   ═══════════════════════════════════════════════ */
.il-pillar{
  padding:24px;
  background:var(--c600);
  border:1px solid rgba(42,69,154,.5);border-radius:var(--r8);
}
.il-pillar__n{
  display:block;margin-bottom:14px;
  font-family:var(--ff);font-weight:700;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--g400);
}
.il-pillar__t{
  font-family:var(--fd);font-weight:700;font-size:20px;color:var(--white);
  margin:0 0 14px;
}
.il-pillar__d{
  font-family:var(--ff);font-size:14px;line-height:1.65;color:var(--c200);margin:0;
}


/* ═══════════════════════════════════════════════
   5. STEPS (269:5)
   ═══════════════════════════════════════════════ */
.il-steps{list-style:none;margin:0;padding:0}
.il-step{
  padding:16px;
  background:var(--white);
  border:1px solid var(--n200);border-radius:var(--r6);
}
.il-step__n{
  display:block;margin-bottom:8px;
  font-family:var(--ff);font-weight:700;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--c400);
}
.il-step__t{
  font-family:var(--fd);font-weight:700;font-size:15px;color:var(--c700);margin:0 0 6px;
}
.il-step__d{
  font-family:var(--ff);font-size:12px;line-height:1.45;color:var(--n500);margin:0;
}


/* ═══════════════════════════════════════════════
   6. CALCULATOR (269:23)
   ═══════════════════════════════════════════════ */
.il-calc{
  display:grid;grid-template-columns:440px 1fr;gap:56px;
  padding:28px 32px;
  background:var(--c600);
  border:1px solid rgba(42,69,154,.3);border-radius:var(--r12);
}

.il-calc__eyebrow{
  font-family:var(--ff);font-weight:500;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--g400);
  margin:0 0 22px;
}

.il-field{margin-bottom:22px}
.il-field__l{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:8px;
  font-family:var(--ff);font-size:13px;color:var(--c200);
}
.il-field__v{
  font-weight:700;font-size:13px;color:var(--white);
  font-variant-numeric:tabular-nums;
}

/* Range input — track fills gold up to the thumb via --fill, set in JS. */
.il-range{
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;height:16px;
  background:transparent;cursor:pointer;
}
.il-range::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;
  background:linear-gradient(to right,var(--g400) var(--fill,0%),var(--c500) var(--fill,0%));
}
.il-range::-moz-range-track{
  height:4px;border-radius:2px;background:var(--c500);
}
.il-range::-moz-range-progress{height:4px;border-radius:2px;background:var(--g400)}
.il-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;margin-top:-6px;
  border:0;border-radius:50%;background:var(--g400);
}
.il-range::-moz-range-thumb{
  width:16px;height:16px;border:0;border-radius:50%;background:var(--g400);
}
.il-range:focus-visible{outline:none}
.il-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(245,196,0,.35)}
.il-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(245,196,0,.35)}

.il-chip{
  display:inline-block;padding:7px 12px;
  font-family:var(--ff);font-weight:500;font-size:11px;color:var(--c200);
  background:var(--c500);border-radius:var(--r4);
}

.il-calc__cols{display:grid;grid-template-columns:1fr 1fr;gap:36px}

.il-out__h{
  font-family:var(--ff);font-weight:500;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;margin:0 0 16px;
}
.il-out--before .il-out__h{color:var(--il-red)}
.il-out--after  .il-out__h{color:var(--g400)}

.il-out__list{margin:0 0 20px}
.il-out__list > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:10px;
}
.il-out__list dt{
  font-family:var(--ff);font-size:13px;color:var(--c200);
}
.il-out__list dd{
  margin:0;
  font-family:var(--ff);font-size:15px;color:var(--white);
  font-variant-numeric:tabular-nums;
}

.il-verdict{
  display:inline-flex;align-items:center;
  height:32px;padding:0 16px;
  font-family:var(--ff);font-weight:500;font-size:13px;color:var(--white);
  background:var(--c500);border-radius:var(--r4);
}
.il-verdict.is-good{background:var(--ok)}
.il-verdict.is-warn{background:var(--il-amber)}
.il-verdict.is-bad {background:var(--il-red)}

/* Survival chart (269:60) */
.il-chart{
  margin:28px 0 0;padding:12px 16px 14px;
  background:rgba(13,31,78,.5);border-radius:var(--r8);
}
.il-chart figcaption{
  font-family:var(--ff);font-weight:500;font-size:11px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--c200);
  margin-bottom:8px;
}
.il-chart svg{display:block;width:100%;height:92px;overflow:visible}
.il-chart__grid{fill:none;stroke:rgba(160,178,228,.25);stroke-width:1}
.il-chart__line{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.il-chart__line--before{stroke:var(--il-red)}
.il-chart__line--after{stroke:var(--g400)}

.il-chart__key{
  display:flex;gap:18px;margin:10px 0 0;
  font-family:var(--ff);font-size:11px;color:var(--c200);
}
.il-chart__k{display:flex;align-items:center;gap:6px}
.il-chart__k::before{content:'';width:12px;height:2px;border-radius:1px}
.il-chart__k--before::before{background:var(--il-red)}
.il-chart__k--after::before{background:var(--g400)}
.il-chart__k--m{margin-left:auto}
.il-chart__k--m::before{display:none}


/* ═══════════════════════════════════════════════
   7. PROOF (269:62)
   ═══════════════════════════════════════════════ */
.il-stats{gap:56px}
.il-stat b{
  display:block;
  font-family:var(--fd);font-weight:700;font-size:36px;color:var(--ok);
  margin-bottom:6px;
}
.il-stat span{
  font-family:var(--ff);font-size:14px;color:var(--n500);
}


/* ═══════════════════════════════════════════════
   8. PRICING PHILOSOPHY (269:74)
   ═══════════════════════════════════════════════ */
.il-align{
  display:block;width:-moz-fit-content;width:fit-content;max-width:100%;
  margin:0 auto;padding:11px 24px;
  font-family:var(--ff);font-weight:500;font-size:14px;color:var(--g400);
  background:var(--c600);border-radius:var(--r6);
  text-align:center;
}


/* ═══════════════════════════════════════════════
   9. FAQ (269:78)
   ═══════════════════════════════════════════════ */
.il-faq{display:flex;flex-direction:column;gap:10px}
.il-faq__item{
  background:var(--white);
  border:1px solid var(--n200);border-radius:var(--r6);
}
.il-faq__q{
  padding:14px 20px;
  font-family:var(--ff);font-weight:500;font-size:15px;color:var(--c700);
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.il-faq__q::-webkit-details-marker{display:none}
.il-faq__q::after{
  content:'+';flex-shrink:0;
  font-size:18px;font-weight:400;color:var(--c400);line-height:1;
}
.il-faq__item[open] .il-faq__q::after{content:'−'}
.il-faq__q:hover{color:var(--c500)}
.il-faq__q:focus-visible{outline:2px solid var(--c500);outline-offset:-2px;border-radius:var(--r6)}
.il-faq__a{
  margin:0;padding:0 20px 16px;
  font-family:var(--ff);font-size:14px;line-height:1.65;color:var(--n500);
}

.il-final{text-align:center;padding:48px 0}
.il-final .il-h2{margin-bottom:28px}


/* ═══════════════════════════════════════════════
   10. RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width:1180px){
  .il-calc{grid-template-columns:1fr;gap:36px}
}

@media (max-width:1024px){
  .il-grid--3,.il-grid--4{grid-template-columns:repeat(2,1fr);gap:24px}
  .il-hero__h{font-size:36px}
  .il-h2{font-size:30px}
  .il-stats{gap:32px}
}

@media (max-width:768px){
  .il-sec{padding:40px 0}
  .il-hero{padding:36px 0 44px}
  .il-hero__h{font-size:27px;letter-spacing:-.4px}
  .il-hero__p{font-size:15px}
  .il-h2{font-size:24px;letter-spacing:-.3px}
  .il-grid--3,.il-grid--4{grid-template-columns:1fr}
  .il-calc{padding:20px}
  .il-calc__cols{grid-template-columns:1fr;gap:28px}
  .il-stats{gap:28px;text-align:center}
  .il-btn{width:100%}
  .il-chart__key{flex-wrap:wrap;gap:12px}
  .il-chart__k--m{margin-left:0;width:100%}
}

/* ── Above 1920: span the viewport ─────────────────────────────────────
   Loaded after style.css, so the shared ultrawide rule needs restating here
   for this page's own wrapper. Capping the column would leave a growing
   empty margin instead of using the screen. */
@media (min-width:1921px){
  .il-in{max-width:100%}
  .il-lede,.il-note{max-width:90ch}
  .il-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr))}
  .il-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
}