/* ============================================================
   CollegeJaancho
   Design concept: "the verified dossier"
   Editorial serif authority + official record styling.
   Palette grounded in the logo: deep green, gold check, warm paper.
   ============================================================ */

:root {
  /* ground + ink */
  --paper:      #FCFBF7;
  --paper-2:    #F6F4ED;
  --surface:    #FFFFFF;
  --ink:        #0C2A20;
  --ink-2:      #4A625A;
  --ink-3:      #83958D;

  /* brand */
  --green:      #0A5C42;
  --green-deep: #06382A;
  --green-pale: #E7F1EC;
  --green-mist: #F1F7F3;

  /* two golds: bright for marks, deep for type */
  --gold:       #F2B33D;
  --gold-ink:   #A8760D;
  --gold-pale:  #FBF1DC;

  --flag:       #A8352A;
  --flag-pale:  #F8EAE7;

  --line:       #E2E7E3;
  --line-2:     #CFD8D3;

  /* ---- Design refresh (5 Sep 2026) ----
     Vinod: "na koi achhi photos, na good looking design, Gen Z ko feel hi
     nahi aata." Sahi tha. Purana look ek sarkari dossier ka tha: har kona
     nukeela, ek hi rang, koi harkat nahi. Bharosa to dikhta tha, par apnapan
     nahi. Isliye teen cheezein judi, brand ka rang badle bina:
     goliyan (radius), garmi (mint + coral), aur halki harkat. */

  /* energy: gehre hare pe ye do rang hi jawan lagte hain */
  --mint:       #6EE7B7;
  --mint-deep:  #34D399;
  --coral:      #FF6B4A;
  --coral-deep: #E8462A;
  --coral-pale: #FFECE6;

  /* kona: 0 se seedha yahan tak. Yahi sabse bada farak daalta hai */
  --r-s:    10px;
  --r-m:    16px;
  --r-l:    24px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* parchhai: hare rangat wali, kaali nahi, warna gandi lagti hai */
  --sh-1: 0 1px 2px rgba(6,56,42,.04), 0 4px 14px rgba(6,56,42,.06);
  --sh-2: 0 2px 6px rgba(6,56,42,.06), 0 14px 34px rgba(6,56,42,.10);
  --sh-3: 0 4px 10px rgba(6,56,42,.08), 0 28px 64px rgba(6,56,42,.16);

  --ease: cubic-bezier(.2, .7, .3, 1);

  --max: 1160px;
  --gut: 24px;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Mukta", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}

/* ZAROORI: hidden attribute ko har display rule ke upar rakho.
   .crow pe display:grid tha, jisne [hidden] ki display:none ko haraa diya.
   Nateeja: state filter ginti badalta tha par rows chhupti nahi thi. */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* thin brand rule across the very top */
body::before {
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(90deg, var(--green-deep) 0%, var(--green) 55%, var(--gold) 55%, var(--gold) 100%);
}

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.narrow { max-width: 760px; }

img { max-width: 100%; }

a { color: var(--green); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ============================================================
   type
   ============================================================ */

h1, h2, h3 { margin: 0; text-wrap: balance; }

h1 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(44px, 6.4vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--green-deep);
}
h1 em {
  font-style: italic;
  font-weight: 600;
  color: var(--gold-ink);
}

h2 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(30px, 3.9vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--green-deep);
}
h2 em { font-style: italic; font-weight: 600; color: var(--gold-ink); }

h3 { font-family: var(--sans); font-weight: 700; font-size: 21px; line-height: 1.3; }

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

.lede { font-size: clamp(19px, 1.6vw, 21px); color: var(--ink-2); line-height: 1.6; }
.sub  { color: var(--ink-2); max-width: 64ch; }

/* mono label used for record-style metadata */
.label {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.label.green { color: var(--green); }
.label.gold  { color: var(--gold-ink); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

/* file-reference strip: "FILE 01 / WHAT WE CHECK" */
.fileref {
  display: flex;
  align-items: center;
  gap: 18px 26px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}
.fileref .tick { display: inline-flex; align-items: center; gap: 7px; }
.fileref .tick svg { width: 15px; height: 15px; flex: none; }

/* ============================================================
   header
   ============================================================ */

header.site {
  background: rgba(252, 251, 247, 0.92);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 60;
}

.headrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 20px pe menu ke chalte actions doosri line mein chale jaate the */
  gap: 12px;
  flex-wrap: wrap;
  /* longhand only: shorthand would cancel .wrap's side padding
     because both classes sit on the same element */
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand img { height: 40px; width: auto; display: block; }


.headcta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--green-deep);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  padding: 12px 20px;
  border: 0;
}
.headcta:hover, .headcta:focus-visible { background: var(--green); color: #fff; }
.headcta .arw { font-size: 15px; line-height: 1; }

/* language switcher */
.langswitch {
  display: inline-flex;
  border: 1px solid var(--line-2);
  overflow: hidden;
  flex: none;
}
.langswitch a {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  text-decoration: none;
  padding: 7px 12px;
  border-right: 1px solid var(--line-2);
  line-height: 1.4;
}
.langswitch a:last-child { border-right: 0; }
.langswitch a:hover, .langswitch a:focus-visible { background: var(--green-pale); color: var(--green); }
.langswitch a[aria-current="true"] { background: var(--green-deep); color: #fff; }

/* ============================================================
   portal hero: full-bleed photo + overlay + big search
   Photo slot: website/img/hero.jpg. File na ho to gradient dikhta
   hai aur kuch toota hua nahi lagta.
   ============================================================ */

.phero {
  position: relative;
  background:
    linear-gradient(135deg, #06382A 0%, #0A5C42 55%, #0C4736 100%);
  background-size: cover;
  background-position: center 40%;
  color: #fff;
  overflow: hidden;
}
.phero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--hero-img, none);
  background-size: cover;
  background-position: center 38%;
  opacity: .38;
}
.phero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,56,42,.72) 0%, rgba(6,56,42,.55) 45%, rgba(6,56,42,.92) 100%);
}
.phero > .wrap { position: relative; z-index: 2; padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(48px, 6vw, 84px); }

.phero .eyebrow { color: var(--gold); justify-content: center; }
.phero h1 {
  color: #fff;
  text-align: center;
  margin: 0 auto 18px;
  max-width: 16ch;
  text-shadow: 0 2px 24px rgba(0,0,0,.28);
}
.phero h1 em { color: var(--gold); }
.phero .plede {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto 34px;
  font-size: clamp(17px, 1.5vw, 20px);
  color: #D5E4DE;
  line-height: 1.55;
}

.searchwrap { max-width: 760px; margin: 0 auto; }

.trustrow {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 26px;
  position: relative;
  z-index: 2;
}
.trustrow span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #CBDDD5;
}
.trustrow svg { width: 17px; height: 17px; flex: none; }

/* ---------- goal cards ---------- */

.goals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}
.goal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: 4px solid var(--green);
  padding: 24px 22px 22px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: box-shadow .18s ease, transform .18s ease;
}
section.alt .goal { background: var(--paper); }
.goal:hover, .goal:focus-visible {
  box-shadow: 0 10px 26px rgba(6,56,42,.13);
}
@media (prefers-reduced-motion: no-preference) { .goal:hover { transform: translateY(-3px); } }
.goal .gi {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--green-pale);
  margin-bottom: 16px;
}
.goal .gi svg { width: 23px; height: 23px; }
.goal h3 { font-size: 19px; margin-bottom: 6px; color: var(--green-deep); }
.goal p { font-size: 15.5px; color: var(--ink-2); margin: 0 0 12px; }
.goal .gm {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-ink);
  font-weight: 600;
}

/* ---------- stat band ---------- */

.statband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.16);
}
.stat { background: var(--green-deep); padding: 26px 22px; }
.stat .sv {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1;
  color: var(--gold);
  display: block;
  margin-bottom: 8px;
}
.stat .sl { font-size: 15.5px; color: #B9CCC4; line-height: 1.45; }

/* ============================================================
   hero: asymmetric split, editorial left, product right
   ============================================================ */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}

.hero-left {
  background: var(--paper);
  display: flex;
  align-items: center;
  padding: clamp(48px, 6vw, 92px) clamp(24px, 4vw, 64px);
}
.hero-left-inner { max-width: 560px; margin-left: auto; width: 100%; }

.hero-right {
  background: var(--green-mist);
  border-left: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: clamp(40px, 5vw, 76px) clamp(24px, 4vw, 64px);
  position: relative;
  overflow: hidden;
}
.hero-right::after {
  /* faint oversized check mark, brand motif as texture */
  content: "";
  position: absolute;
  right: -70px; bottom: -90px;
  width: 340px; height: 340px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 54 L38 74 L86 14' fill='none' stroke='%230A5C42' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity: 0.05;
  pointer-events: none;
}
.hero-right-inner { max-width: 520px; width: 100%; position: relative; z-index: 1; }

.hero h1 { margin-bottom: 24px; }
.hero .lede { margin-bottom: 32px; max-width: 46ch; }

.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-note {
  margin-top: 22px;
  font-size: 15.5px;
  color: var(--ink-2);
  padding-left: 15px;
  border-left: 2px solid var(--gold);
  max-width: 46ch;
}

@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; }
  .hero-right { border-left: 0; border-top: 1px solid var(--line); }
  .hero-left-inner, .hero-right-inner { max-width: none; margin-left: 0; }
}

/* ============================================================
   buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--green-deep);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  padding: 15px 28px;
  border: 2px solid var(--green-deep);
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.btn:hover, .btn:focus-visible { background: var(--green); border-color: var(--green); color: #fff; }
.btn.ghost { background: transparent; color: var(--green-deep); border-color: var(--line-2); }
.btn.ghost:hover, .btn.ghost:focus-visible { background: var(--surface); border-color: var(--green); color: var(--green-deep); }
@media (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-1px); }
}

/* ============================================================
   the sample report card (hero product visual)
   ============================================================ */

.rcard {
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: 18px 18px 0 rgba(10, 92, 66, 0.09);
}

.rcard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.rcard-head .t { font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--green-deep); }
.rcard-head .m { margin-top: 4px; }

.stamp {
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--gold-ink);
  border: 1.5px solid var(--gold);
  background: var(--gold-pale);
  padding: 5px 9px;
  transform: rotate(2deg);
  white-space: nowrap;
}

.rrow {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
}
.rrow:last-of-type { border-bottom: 0; }
.rrow .ic { margin-top: 3px; }
.rrow .ic svg { width: 20px; height: 20px; display: block; }
.rrow .k { font-weight: 700; font-size: 16.5px; line-height: 1.35; }
.rrow .v { font-size: 15.5px; color: var(--ink-2); line-height: 1.45; }
.rrow .src {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.03em;
  margin-top: 5px;
  display: block;
}
.rrow.flag { background: var(--flag-pale); }
.rrow.flag .k { color: var(--flag); }

.rcard-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  text-transform: uppercase;
}

/* ============================================================
   the live checker: the reason a visitor stays
   ============================================================ */

.checker {
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: 18px 18px 0 rgba(10, 92, 66, 0.09);
}

.checker-head {
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.checker-head .t {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--green-deep);
  margin-bottom: 6px;
}
.checker-head .d { font-size: 15.5px; color: var(--ink-2); line-height: 1.45; margin: 0; }

.checker-body { padding: 22px 24px 24px; }

.cfield { display: flex; gap: 10px; flex-wrap: wrap; }
.cfield input[type="text"] {
  flex: 1 1 200px;
  min-width: 0;
  font-family: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--line-2);
  padding: 13px 15px;
  border-radius: 0;
}
.cfield input[type="text"]::placeholder { color: #9AAAA3; }
.cfield input[type="text"]:focus {
  outline: none;
  border-color: var(--green);
  background: #fff;
}
.cfield button {
  flex: none;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  background: var(--green-deep);
  border: 2px solid var(--green-deep);
  padding: 13px 26px;
  cursor: pointer;
}
.cfield button:hover { background: var(--green); border-color: var(--green); }

/* Chhoti screen pe input aur button ek line mein nahi aate aur adhoore
   dikhte hain. Wahan dono ko poori chaudai de dete hain, tap karna bhi
   aasan ho jata hai. */
@media (max-width: 560px) {
  .cfield { flex-direction: column; }
  .cfield input[type="text"] { flex: 1 1 auto; width: 100%; }
  .cfield button { width: 100%; padding: 15px 20px; }
}

.cnote {
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 12px 0 0;
  line-height: 1.5;
}

.cresult { margin-top: 18px; display: none; }
.cresult.show { display: block; }
.cresult .rbox { padding: 18px 20px; border-left: 4px solid var(--line-2); background: var(--paper-2); }
.cresult .rbox .rh {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 18px; line-height: 1.3; margin-bottom: 8px;
}
.cresult .rbox .rh svg { width: 22px; height: 22px; flex: none; }
.cresult .rbox p { font-size: 15.5px; color: var(--ink-2); margin: 0 0 8px; line-height: 1.5; }
.cresult .rbox p:last-child { margin-bottom: 0; }
.cresult .rbox .named { font-weight: 700; color: var(--ink); }

.cresult .rbox.danger { border-left-color: var(--flag); background: var(--flag-pale); }
.cresult .rbox.danger .rh { color: var(--flag); }
.cresult .rbox.warn { border-left-color: var(--gold); background: var(--gold-pale); }
.cresult .rbox.warn .rh { color: var(--gold-ink); }
.cresult .rbox.clear { border-left-color: var(--green); background: var(--green-pale); }
.cresult .rbox.clear .rh { color: var(--green-deep); }

.csrc {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.csrc a { color: var(--ink-2); }

/* ============================================================
   sections
   ============================================================ */

section { padding: clamp(64px, 8vw, 104px) 0; }
section.alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
section.deep {
  background: var(--green-deep);
  color: #D6E3DD;
  border: 0;
}
section.deep h2 { color: #fff; }
section.deep h2 em { color: var(--gold); }
section.deep .sub, section.deep p { color: #B9CCC4; }
section.deep .eyebrow { color: var(--gold); }
section.deep .label { color: #9FB6AD; }

.sechead { max-width: 720px; margin-bottom: 46px; }
.sechead h2 { margin-bottom: 16px; }

/* ---------- commitments ---------- */

.pledges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: 0;
  border: 1px solid var(--line-2);
  background: var(--line-2);
  gap: 1px;
}
.pledge {
  background: var(--surface);
  padding: 34px 30px 32px;
  position: relative;
}
section.alt .pledge { background: var(--paper); }
.pledge .n {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold-ink);
  display: block;
  margin-bottom: 16px;
}
.pledge h3 { font-size: 22px; margin-bottom: 12px; color: var(--green-deep); }
.pledge p { color: var(--ink-2); font-size: 16.5px; margin: 0; }
.pledge::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 4px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.pledge:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .pledge::after { transition: none; } }

/* ---------- checklist of what we verify ---------- */

.checkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.citem {
  background: var(--paper);
  padding: 26px 28px 26px 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  gap: 4px 14px;
}
section.alt .citem { background: var(--surface); }
.citem .num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-ink);
  letter-spacing: 0.1em;
  padding-top: 4px;
}
.citem h3 { font-size: 18.5px; margin-bottom: 5px; }
.citem p { font-size: 16px; color: var(--ink-2); margin: 0; }

/* ---------- callout ---------- */

.callout {
  background: var(--gold-pale);
  border-left: 4px solid var(--gold);
  padding: 26px 30px;
  margin-top: 40px;
}
.callout p { font-size: 17px; }

/* ---------- steps ---------- */

.steps { counter-reset: step; margin-top: 8px; }
.step {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 4px 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.step:last-child { border-bottom: 0; }
.step .sn {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold-ink);
  padding-top: 5px;
}
.step h3 { font-size: 19.5px; margin-bottom: 5px; }
.step p { font-size: 16.5px; color: var(--ink-2); margin: 0; }

/* ---------- whatsapp conversation mockup ---------- */

.chat {
  background: #ECE5DD;
  border: 1px solid var(--line-2);
  box-shadow: 18px 18px 0 rgba(10, 92, 66, 0.09);
  max-width: 420px;
  overflow: hidden;
}
.chat-top {
  background: var(--green-deep);
  color: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat-top .av {
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  background: var(--paper);
  display: grid; place-items: center;
}
.chat-top .av img { width: 24px; height: 24px; display: block; }
.chat-top .nm { font-weight: 700; font-size: 16px; line-height: 1.2; }
.chat-top .st { font-size: 12.5px; color: #A9C0B7; }

.chat-body { padding: 18px 16px 20px; display: flex; flex-direction: column; gap: 12px; }

.bub {
  max-width: 84%;
  padding: 10px 13px;
  font-size: 15.5px;
  line-height: 1.45;
  position: relative;
  box-shadow: 0 1px 1px rgba(0,0,0,.09);
}
.bub .tm {
  display: block;
  font-size: 11px;
  color: #7C8B84;
  text-align: right;
  margin-top: 3px;
}
.bub.them { background: #fff; align-self: flex-start; border-radius: 0 10px 10px 10px; }
.bub.us { background: #DCF8C6; align-self: flex-end; border-radius: 10px 0 10px 10px; }
.bub b { font-weight: 700; }
.bub .ok { color: var(--green); font-weight: 700; }
.bub .no { color: var(--flag); font-weight: 700; }
.bub ul { margin: 8px 0 0; padding-left: 18px; }
.bub li { margin-bottom: 5px; font-size: 15px; }

.chat-cap {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  padding: 0 16px 14px;
}

/* ---------- two column split ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---------- founder ---------- */

.founder {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 60px);
  align-items: start;
}
@media (max-width: 860px) { .founder { grid-template-columns: 1fr; } }

.portrait {
  aspect-ratio: 4 / 5;
  background: var(--green-pale);
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait .ph { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--green); text-transform: uppercase; line-height: 1.7; }
.portrait .ph b { display: block; font-family: var(--serif); font-size: 40px; letter-spacing: 0; color: var(--green-deep); margin-bottom: 8px; }

.creds { margin-top: 26px; border-top: 2px solid var(--green-deep); }
.creds .r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.creds .r span:first-child { font-size: 16.5px; }
.creds .r span:last-child { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--ink-3); text-transform: uppercase; white-space: nowrap; }
@media (max-width: 520px) {
  .creds .r { grid-template-columns: 1fr; }
  .creds .r span:last-child { white-space: normal; }
}

/* ---------- closing band ---------- */

.closing { text-align: center; max-width: 640px; margin: 0 auto; }
.closing h2 { margin-bottom: 18px; }
.closing p { margin-bottom: 30px; }

/* ============================================================
   verify page blocks
   ============================================================ */

.vblock { border-top: 2px solid var(--green-deep); margin-bottom: 40px; }
.vblock > h3 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  padding: 14px 0 12px;
}
.vrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 28px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.vrow .t { font-weight: 700; font-size: 17.5px; margin-bottom: 3px; }
.vrow .d { font-size: 16px; color: var(--ink-2); line-height: 1.5; }
.vrow .id {
  font-family: var(--mono);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--green-deep);
  background: var(--green-pale);
  border: 1px solid #CFE2D8;
  padding: 7px 14px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .vrow { grid-template-columns: 1fr; }
  .vrow .id { justify-self: start; }
}

/* ============================================================
   footer
   ============================================================ */

footer.site {
  background: var(--green-deep);
  color: #A9C0B7;
  padding: 66px 0 32px;
  font-size: 16px;
  line-height: 1.6;
}
footer.site a { color: #EAF2EE; text-decoration: none; border-bottom: 1px solid rgba(234,242,238,.32); }
footer.site a:hover, footer.site a:focus-visible { border-bottom-color: var(--gold); color: #fff; }
footer.site .fgrid {
  display: grid;
  grid-template-columns: minmax(210px, 1.5fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: 36px;
  margin-bottom: 44px;
}
footer.site h4 {
  font-family: var(--mono);
  color: #fff;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 14px;
  font-weight: 600;
}
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { margin-bottom: 9px; }
footer.site .fbrand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
footer.site .flogo { height: 34px; width: auto; display: block; }
footer.site .fname {
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  font-weight: 500;
}
footer.site .fname b { font-weight: 800; color: var(--gold); }
/* trademark application filed 11 Sep 2026: sirf ™, registration ke baad hi ® */
footer.site .fname .tm { font-size: .45em; font-weight: 600; color: #fff;
  vertical-align: super; line-height: 0; margin-left: 2px; }
/* Footer: official social profiles (11 Sep 2026). Site se profile aur
   profile se site, dono taraf link hon to search aur AI engine inhe ek
   hi company maante hain. */
footer.site .fsocial {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  margin: 0 0 24px; font-size: 14.5px;
}
footer.site .fsocial span { color: #fff; font-weight: 600; }
footer.site .fsocial a { display: inline-block; padding: 4px 0; }
footer.site .legal {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 24px;
  font-size: 14.5px;
  color: #8FA9A0;
  max-width: 78ch;
}
footer.site .legal .ids {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  display: block;
  margin-top: 10px;
  color: #A9C0B7;
}

/* ============================================================
   entrance motion, kept quiet
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity: 1; transform: none; }
}

/* ============================================================
   skip link: keyboard user seedha content pe ja sake
   ============================================================ */

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--green-deep);
  color: #fff;
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
}
.skiplink:focus {
  left: 12px;
  top: 12px;
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* ============================================================
   policy / document pages
   ============================================================ */

.phero.pagehead > .wrap { padding-top: clamp(44px, 5vw, 72px); padding-bottom: clamp(40px, 4.5vw, 64px); }
.phero.pagehead h1 { text-align: left; margin-left: 0; max-width: 20ch; }
.phero.pagehead .eyebrow { justify-content: flex-start; }
.phero.pagehead .plede { text-align: left; margin-left: 0; max-width: 60ch; }

h2.doch {
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.2;
  color: var(--green-deep);
  margin: 46px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
h2.doch:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.tablewrap { overflow-x: auto; margin: 22px 0; }
.doctable {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 16px;
}
.doctable th {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 2px solid var(--green-deep);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-deep);
}
.doctable td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-2);
}
.doctable tr:last-child td { border-bottom: 0; }

/* ============================================================
   404
   ============================================================ */

.err { text-align: center; max-width: 620px; margin: 0 auto; }
.err .code {
  font-family: var(--serif);
  font-size: clamp(76px, 12vw, 132px);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  display: block;
  margin-bottom: 12px;
}







/* "Message bhejne ke baad kya hoga" - parivaar ka sabse bada dar yahi hai */
.nextlist { counter-reset: nx; list-style: none; margin: 0; padding: 0; }
.nextlist li { counter-increment: nx; position: relative; padding: 0 0 20px 46px; color: #C9DBD3; font-size: 16.5px; line-height: 1.62; }
.nextlist li::before {
  content: counter(nx); position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid rgba(242,179,61,.55); color: var(--gold);
  font-family: var(--mono); font-size: 12px;
}
.nextlist b { color: #fff; font-weight: 700; }
/* nextlist gehre (.deep) section ke liye bani thi. Fees page pe ye halke
   section mein hai, jahan safed bold text cream pe gayab ho jaata tha
   (Vinod ka phone screenshot, 11 Sep 2026). Halke section mein gehre rang. */
section:not(.deep) .nextlist li { color: var(--ink-2); }
section:not(.deep) .nextlist b { color: var(--ink); }
section:not(.deep) .nextlist li::before { color: var(--gold-ink); border-color: rgba(168,118,13,.45); }
.nexth { color: #fff; font-size: 19px; margin: 26px 0 12px; }
.neverlist { list-style: none; margin: 0; padding: 0; }
.neverlist li { position: relative; padding: 0 0 12px 28px; color: #C9DBD3; font-size: 16px; line-height: 1.6; }
.neverlist li::before {
  content: ""; position: absolute; left: 4px; top: 9px; width: 11px; height: 2px;
  background: var(--gold);
}
#afteryoumessage a { color: var(--gold); }

/* ============================================================
   "Kya padhna hai" form. Us student ke liye jise college ka
   naam pata hi nahi, jo humari sabse badi kami thi.
   ============================================================ */

.slbox { border: 1px solid var(--line); background: var(--paper-2); padding: 30px 30px 26px; }
.slhead { margin-bottom: 22px; }
.slhead h3 { font-size: 24px; margin: 6px 0 8px; }
.slhead p { color: var(--ink-2); max-width: 58ch; margin: 0; font-size: 16.5px; }
.slgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.slgrid label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-ink); }
.slgrid select, .slgrid input {
  display: block; width: 100%; margin-top: 7px; font: inherit; font-size: 16px;
  min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); background: #fff;
  color: var(--ink); border-radius: 0; -webkit-appearance: none; appearance: none;
}
.slgrid select { background-image: linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position: calc(100% - 18px) 22px, calc(100% - 13px) 22px; background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat; padding-right: 34px; }
.slgrid select:focus, .slgrid input:focus { outline: 2px solid var(--green); outline-offset: -2px; }
.slout { margin-top: 22px; }
.slnote { font-size: 13.5px; color: var(--ink-3); margin: 12px 0 0; max-width: 56ch; }

@media (max-width: 620px) {
  .slbox { padding: 22px 18px 20px; }
  .slhead h3 { font-size: 21px; }
  .slout .btn { display: block; text-align: center; }
}

/* ============================================================
   Do-hisse wala hero: baayen baat, daayen saboot
   Photo lagani ho to img/student.jpg daal do, apne aap aa jayegi.
   ============================================================ */

.hero2 > .heroin {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: 52px; align-items: center;
  padding-top: clamp(48px, 5.5vw, 84px); padding-bottom: clamp(48px, 5.5vw, 84px);
}
.hero2 .heroleft { text-align: left; }
.hero2 h1 { text-align: left; margin-left: 0; max-width: 15ch; }
.hero2 .eyebrow { justify-content: flex-start; }
.hero2 .plede { text-align: left; margin-left: 0; max-width: 38ch; font-size: clamp(18px, 2vw, 21px); color: #EAF2EE; }
.hero2 .plede2 { text-align: left; margin: 14px 0 0; max-width: 46ch; font-size: 15.5px; line-height: 1.62; color: #A9C2B8; }
.hero2 .heroctas { justify-content: flex-start; }
.hero2 .trustrow { justify-content: flex-start; margin-top: 30px; }

/* daayen taraf ka card */
.heroright { position: relative; display: flex; justify-content: center; }
.heroright::before {
  content: ""; position: absolute; inset: -6% -4%;
  background-image: var(--hero-portrait, none);
  background-size: cover; background-position: center;
  opacity: .55; filter: saturate(.9);
}
.hcard {
  position: relative; width: 100%; max-width: 400px;
  background: var(--paper); border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 70px rgba(0,0,0,.34); padding: 26px 26px 20px;
}
.hc-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-ink); margin: 0 0 10px; }
.hc-name { font-family: var(--serif); font-size: 24px; line-height: 1.2; color: var(--green-deep); margin: 0 0 18px; }
.hc-name span { font-style: italic; color: var(--gold-ink); font-size: 20px; }
.hc-list { list-style: none; margin: 0; padding: 0; }
.hc-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0 9px 20px; border-top: 1px solid var(--line); position: relative; font-size: 14px; }
.hc-list li:first-child { border-top: 0; }
.hc-list li::before { content: ""; position: absolute; left: 0; top: 14px; width: 10px; height: 10px; border-radius: 50%; }
.hc-list li.ok::before    { background: #1E8A5F; }
.hc-list li.watch::before { background: var(--gold); }
.hc-list li.none::before  { background: #B9C4BF; }
.hc-list span { color: var(--ink-2); }
.hc-list b { color: var(--green-deep); font-weight: 700; text-align: right; white-space: nowrap; }
.hc-list li.watch b { color: var(--gold-ink); }
.hc-list li.none b  { color: var(--ink-3); font-weight: 500; }
.hc-foot { font-family: var(--mono); font-size: 10px; letter-spacing: .07em; color: var(--ink-3);
  margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); }

@media (max-width: 980px) {
  .hero2 > .heroin { grid-template-columns: 1fr; gap: 36px; }
  .hero2 .heroleft { text-align: center; }
  .hero2 h1, .hero2 .plede, .hero2 .plede2 { text-align: center; margin-left: auto; margin-right: auto; }
  .hero2 .eyebrow, .hero2 .heroctas, .hero2 .trustrow { justify-content: center; }
  .heroright { order: -1; }
  .hcard { max-width: 360px; }
}
@media (max-width: 560px) {
  .hcard { padding: 20px 18px 16px; }
  .hc-name { font-size: 21px; }
  .hc-list li { font-size: 13.5px; }
}


/* ============================================================
   Header ka menu. Desktop pe dropdown, phone pe poora panel.
   Panels CSS se chhipe hain, nav.js kholta hai. Bina JS ke
   footer mein har link poora likha hai, isliye kuch khota nahi.
   ============================================================ */

nav.site { display: flex; align-items: center; }
.navtoggle { display: none; }
.navmenu { display: flex; align-items: center; gap: 2px; }

.navtop, .navlink {
  font: inherit; font-size: 16px; font-weight: 500; color: var(--ink);
  background: none; border: 0; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 9px; min-height: 44px; border-bottom: 2px solid transparent;
}
.navtop:hover, .navlink:hover, .navtop:focus-visible, .navlink:focus-visible { border-bottom-color: var(--gold); }
.navtop[aria-current="page"], .navlink[aria-current="page"] { border-bottom-color: var(--green); font-weight: 700; }
.cav { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--ink-3); margin-top: 2px; }
.navgroup.open .cav { transform: rotate(180deg); }

.navgroup { position: relative; }
.navpanel {
  display: none; position: absolute; top: 100%; left: 0; z-index: 80;
  min-width: 290px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(6,56,42,.16); padding: 8px;
}
.navgroup.open .navpanel { display: block; }
.navpanel a {
  display: block; padding: 11px 12px; text-decoration: none; color: var(--ink); border-radius: 0;
}
.navpanel a b { display: block; font-weight: 600; font-size: 15.5px; }
.navpanel a span { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.navpanel a:hover, .navpanel a:focus-visible { background: var(--green-pale); }
.navpanel .navall { border-top: 1px solid var(--line); margin-top: 6px; }
.navpanel .navall b { color: var(--green); font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .07em; text-transform: uppercase; }

@media (max-width: 1050px) {
  /* phone aur tablet pe: ek Menu button, aur poora panel header ke neeche */
  nav.site { order: 0; flex: none; width: auto; border-top: 0; margin-top: 0; overflow: visible; }
  .navtoggle {
    display: inline-flex; align-items: center; gap: 8px;
    font: inherit; font-size: 14.5px; font-weight: 700; color: var(--green-deep);
    background: none; border: 1px solid var(--line-2); cursor: pointer;
    padding: 0 13px; min-height: 44px;
  }
  .bars { width: 16px; height: 2px; background: currentColor; position: relative; display: block; }
  .bars::before, .bars::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; }
  .bars::before { top: -5px; }
  .bars::after { top: 5px; }

  /* Phone menu (11 Sep 2026, doosra fix). Menu ab header ke andar
     "absolute" nahi, screen pe "fixed" hai: header ke theek neeche se
     quickbar ke theek upar tak, aur apne andar scroll hota hai. nav.js
     khulte waqt header ki neeche wali line aur quickbar ki height naap ke
     top/bottom lagata hai; yahan ki values sirf fallback hain.
     Quickbar kabhi nahi chhupti (Vinod: Call/WhatsApp hamesha dikhe). */
  .navmenu {
    display: none; position: fixed; top: 140px; bottom: 0; left: 0; right: 0; z-index: 85;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-top: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(6,56,42,.18);
    overflow-y: auto; padding: 6px 0 10px;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  .navmenu > * { flex-shrink: 0; }
  @media (max-width: 900px) { .navmenu { bottom: 57px; } }
  nav.site.open .navmenu { display: flex; }
  /* backdrop-filter kuch phone browsers (khaaskar iPhone Safari) pe header
     ke andar ke menu ko kaat deta hai, ya "fixed" ko header ke hisaab se
     rakh deta hai. Phone pe header ab saada rang ka, bina blur ke. */
  header.site { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }

  .navtop, .navlink {
    width: 100%; justify-content: space-between; padding: 14px 18px;
    border-bottom: 1px solid var(--line); font-size: 16.5px; font-weight: 600;
  }
  .navtop:hover, .navlink:hover { border-bottom-color: var(--line); background: var(--green-pale); }
  .navpanel {
    position: static; min-width: 0; border: 0; box-shadow: none;
    background: var(--paper-2); padding: 4px 0 8px;
  }
  .navpanel a { padding: 12px 18px 12px 30px; }
}

/* ============================================================
   Header: phone pe chhota, aur har cheez 44px se badi
   (Vinod ka audit: header 812px screen ka 226px kha raha tha)
   ============================================================ */

.headact { display: inline-flex; align-items: center; gap: 10px; flex: none; }

.headtel {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--green); color: var(--green-deep);
  text-decoration: none; font-weight: 700; font-size: 15.5px;
}
.headtel svg { width: 17px; height: 17px; flex: none; }
.headtel:hover, .headtel:focus-visible { background: var(--green-pale); }

.headcta { min-height: 44px; }
.langswitch a { min-height: 40px; display: inline-flex; align-items: center; }

@media (max-width: 1050px) {
  .headrow { gap: 8px; padding-top: 10px; padding-bottom: 0; }
  .brand img { height: 28px; }
  /* sab kuch pehli line mein rakhna hai, warna header teen line ka ho jata hai */
  .headact { margin-left: auto; gap: 7px; }
  .headtel .tl { display: none; }
  .headtel { padding: 0 12px; min-width: 44px; justify-content: center; }
  .headcta { font-size: 13.5px; padding: 12px 12px; min-height: 44px; }
  .headcta .arw { display: none; }
  /* EN/hindi ko nav ke saath doosri line mein rakho, apni alag line pe nahi.
     Isi wajah se header 182px ka ho raha tha. */
  /* zabardasti line todo, warna nav pehli line ke bache hue 5px me ghus jati hai */
  .headrow::after { content: ""; flex-basis: 100%; height: 0; order: 8; }

  .langswitch { order: 10; flex: none; margin-top: 8px; align-self: center; }
  .langswitch a { font-size: 11px; padding: 0 11px; min-height: 44px; }

  nav.site {
    order: 9; flex: 1 1 0; min-width: 0; gap: 20px; flex-wrap: nowrap;
    /* pehle overflow-x: auto tha (purane horizontal menu ka). Ab isme sirf
       Menu button hai, aur scroll box menu ke liye khatra hai. */
    overflow: visible;
    border-top: 1px solid var(--line); margin-top: 8px;
    scrollbar-width: none;
  }
  nav.site::-webkit-scrollbar { display: none; }
}

@media (max-width: 420px) {
  .headcta { font-size: 13.5px; padding: 12px 11px; }
  .brand img { height: 27px; }
}

/* ============================================================
   Hero ke do CTA, aur "Start here" ke do card
   ============================================================ */

.heroctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.btn.big { font-size: 15px; padding: 16px 26px; }
.phero .btn.ghost { color: #fff; border-color: rgba(255,255,255,.4); background: transparent; }
.phero .btn.ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); }

.startgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 22px; align-items: start; }
.startcard { border: 1px solid var(--line); background: #fff; padding: 30px 30px 26px; }
.startcard .scnum { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--gold-ink); margin: 0 0 10px; }
.startcard h3 { font-size: 21px; margin: 0 0 10px; }
.startcard > p { color: var(--ink-2); font-size: 16.5px; margin: 0 0 12px; }
.startcard .searchwrap { margin-top: 20px; }
.startcard .checker { box-shadow: none; }

@media (max-width: 760px) {
  .heroctas { flex-direction: column; align-items: stretch; }
  .heroctas .btn { text-align: center; }
  .startcard { padding: 24px 20px 20px; }
}




/* ============================================================
   Hamesha dikhne wali call/WhatsApp patti. Sirf phone pe.
   Parent ko site par kahin bhi ruk kar poochhne ka raasta.
   ============================================================ */

.quickbar { display: none; }

@media (max-width: 900px) {
  .quickbar {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    border-top: 1px solid rgba(0,0,0,.12);
    box-shadow: 0 -6px 20px rgba(0,0,0,.14);
  }
  .qb {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 56px; padding: 0 10px;
    font-weight: 700; font-size: 15.5px; text-decoration: none;
  }
  .qb svg { width: 19px; height: 19px; flex: none; }
  .qb.call { background: var(--paper); color: var(--green-deep); border-right: 1px solid rgba(0,0,0,.12); }
  .qb.wa   { background: var(--green-deep); color: #fff; }
  .qb.call:active { background: var(--green-pale); }
  .qb.wa:active   { background: var(--green); }

  /* patti footer ko na dhake */
  footer.site { padding-bottom: 76px; }
}


/* State pages: NIRF ka chhota sa top-few block */
.scard { border: 1px solid var(--line); background: #fff; padding: 22px 22px 18px; display: flex; flex-direction: column; }
.scard h3 { font-size: 19px; margin: 0 0 12px; }
.slist { list-style: none; margin: 0 0 14px; padding: 0; counter-reset: none; }
.slist li { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); }
.slist li:first-child { border-top: 0; }
.slist li b { font-family: var(--serif); font-size: 18px; color: var(--green-deep); text-align: center; }
.slist li span { display: none; }
.statelinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 10px; margin-top: 18px; }
.statelinks a { display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  border: 1px solid var(--line); background: #fff; padding: 13px 15px; text-decoration: none;
  font-size: 15px; color: var(--ink); min-height: 46px; }
.statelinks a:hover { border-color: var(--green); background: var(--green-pale); }
.statelinks a i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* ============================================================
   Sarkari Jaancho: har jaanch ka official portal
   ============================================================ */

.vgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 18px; }
.vcard { border: 1px solid var(--line); background: #fff; padding: 24px 24px 20px; display: flex; flex-direction: column; }
.vtag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink); margin: 0 0 8px; }
.vcard h3 { font-size: 20px; margin: 0 0 10px; }
.vcard p { color: var(--ink-2); font-size: 16px; margin: 0 0 12px; }
.vwarn {
  border-left: 3px solid var(--gold); background: var(--gold-pale);
  padding: 12px 14px; font-size: 14.5px !important; color: var(--gold-ink) !important;
}
.vwarn strong { color: var(--gold-ink); }
.vlink {
  margin-top: auto; font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em;
  text-transform: uppercase; font-weight: 600; color: var(--green); text-decoration: none;
  padding-top: 14px; border-top: 1px dashed var(--line); display: block;
}
.vlink:hover, .vlink:focus-visible { text-decoration: underline; }
.vlink.alt { margin-top: 0; border-top: 0; padding-top: 8px; color: var(--ink-3); text-transform: none;
  font-family: var(--sans); font-size: 14px; letter-spacing: 0; font-weight: 500; }

/* jaldi pahunchne ke chaar raaste */
.qgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 14px; }
.qlink {
  display: block; padding: 20px 20px 18px; text-decoration: none;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.04);
}
.qlink b { display: block; color: #fff; font-family: var(--serif); font-size: 18px; margin-bottom: 6px; }
.qlink span { color: #A9C2B8; font-size: 14.5px; line-height: 1.5; }
.qlink:hover, .qlink:focus-visible { background: rgba(255,255,255,.1); border-color: var(--gold); }

@media (max-width: 620px) {
  .vcard { padding: 20px 18px 18px; }
}

/* ============================================================
   Course pages (B.Tech, MBA, MBBS ...). Rank NIRF ka hai,
   humara koi score nahi. Rows static HTML mein hain.
   ============================================================ */

.cnote-box { border-left: 3px solid var(--gold); background: var(--paper-2); padding: 22px 24px; margin: 0 0 26px; }
.cnote-box p { margin: 0 0 12px; color: var(--ink-2); font-size: 16px; max-width: 74ch; }
.cnote-box p:last-child { margin-bottom: 0; }

.cfilter { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; }
.cfilter label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-ink); }
.cfilter select {
  font: inherit; font-size: 16px; min-height: 48px; padding: 12px 34px 12px 14px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 0;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position: calc(100% - 18px) 22px, calc(100% - 13px) 22px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.cfilter select:focus { outline: 2px solid var(--green); outline-offset: -2px; }
.ccount { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); }

.clist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.crow {
  display: grid; grid-template-columns: 62px minmax(0,1fr) auto;
  gap: 18px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.crank {
  font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--green-deep);
  text-align: center; line-height: 1;
}
.cmain h3 { font-size: 18px; margin: 0 0 4px; line-height: 1.3; }
.cplace { margin: 0 0 3px; color: var(--ink-2); font-size: 14.5px; }
.cscore { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); }
.cscore b { color: var(--gold-ink); font-weight: 600; }
.cask {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; color: var(--green); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--line-2); padding: 12px 14px; min-height: 44px;
  display: inline-flex; align-items: center; gap: 6px;
}
.cask:hover, .cask:focus-visible { background: var(--green-pale); border-color: var(--green); }

.csrc { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--ink-3);
  margin-top: 22px; padding-top: 12px; border-top: 1px dashed var(--line); max-width: 78ch; }
.csrc a { color: var(--ink-2); }

.coursegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 12px; }
.ccard { display: block; border: 1px solid var(--line); background: #fff; padding: 18px 18px 16px;
  text-decoration: none; }
.ccard b { display: block; font-family: var(--serif); font-size: 19px; color: var(--green-deep); margin-bottom: 4px; }
.ccard span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-3); }
.ccard:hover { border-color: var(--green); background: var(--green-pale); }

/* Pehle 25 dikhao, baaki button se. Rows HTML mein rehti hain isliye
   Google sab padhta hai, aur bina JS ke poori list dikhti hai. */
.clist.capped > .crow:nth-of-type(n+26) { display: none; }
/* generic cap: data-cap="20" wale box ke pehle 20 hi dikhte hain */
[data-cap].capped > *:nth-child(n+21) { display: none; }
.cmore { margin: 22px 0 0; text-align: center; }

@media (max-width: 720px) {
  /* row 193px ki ho gayi thi, 100 rows ne page 29 screen ka bana diya tha */
  .crow { grid-template-columns: 44px minmax(0,1fr); gap: 4px 12px; padding: 14px 0; }
  .crank { font-size: 20px; padding-top: 2px; }
  .cmain h3 { font-size: 16.5px; }
  .cplace { font-size: 13.5px; }
  .cask {
    grid-column: 2; justify-self: start; border: 0; padding: 6px 0 0;
    min-height: 0; font-size: 10.5px;
  }
  .cask:hover, .cask:focus-visible { background: transparent; text-decoration: underline; }
  .cnote-box { padding: 18px 16px; }
}

/* ============================================================
   University directory
   ============================================================ */

.usearch { background: var(--paper-2); border: 1px solid var(--line); padding: 22px 22px 16px; margin-bottom: 26px; }
.ulab { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-ink); margin-bottom: 10px; }
.urow-in { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.urow-in input, .urow-in select {
  font: inherit; font-size: 16px; padding: 13px 14px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); width: 100%; border-radius: 0; -webkit-appearance: none; appearance: none;
}
.urow-in select { background-image: linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.urow-in input:focus, .urow-in select:focus { outline: 2px solid var(--green); outline-offset: -2px; }
.unote { font-size: 13px; color: var(--ink-3); margin: 10px 0 0; }
.ucount { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 14px; }

#uout { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.urow { border: 1px solid var(--line); background: #fff; padding: 20px 20px 16px; }
.uhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.uhead h3 { font-size: 18px; line-height: 1.28; margin: 0; }
.utag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green-deep); background: var(--green-pale); padding: 4px 8px; white-space: nowrap; flex-shrink: 0; }
.umeta { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px 14px; margin: 0 0 12px; }
.umeta dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.umeta dd { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.unirfs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.unirf { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; background: var(--gold-pale);
  color: var(--gold-ink); padding: 4px 8px; }
.unirf strong { font-weight: 600; }
.uask { margin: 0; padding-top: 12px; border-top: 1px dashed var(--line); }
/* sansthan ka apna sarkari data, jo har NIRF cycle mein khud badalta hai */
.uofficial { margin: 0 0 10px; padding: 10px 12px; background: var(--paper-2); border-left: 3px solid var(--gold); }
.uofficial a { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600; color: var(--gold-ink); text-decoration: none; }
.uofficial a:hover { text-decoration: underline; }
.uofficial span { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.uask a { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--green); text-decoration: none; font-weight: 600; }
.uask a:hover { text-decoration: underline; }
.unone { border: 1px solid var(--line); background: var(--paper-2); padding: 26px; }
.unone p { max-width: 62ch; }

@media (max-width: 700px) {
  .urow-in { grid-template-columns: 1fr; }
  .usearch { padding: 18px 16px 14px; }
  #uout { grid-template-columns: 1fr; }
}

/* ============================================================
   Jaancho Report page
   ============================================================ */

.repmeta {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  padding: 16px 0; margin-bottom: 8px;
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.repmeta div { font-size: 15px; color: #CBDDD5; }
.repmeta b { display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 3px; }

/* ek check */
.chk { border-top: 1px solid var(--line); padding: 26px 0; }
.chk:last-of-type { border-bottom: 1px solid var(--line); }
.chk-head { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 14px; align-items: start; }
.chk-head svg { width: 26px; height: 26px; margin-top: 2px; }
.chk h3 { font-size: 20px; margin-bottom: 6px; }
.chk .verdict {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 600; display: inline-block;
  padding: 3px 10px; margin-bottom: 10px;
}
.chk .verdict.ok    { background: var(--green-pale); color: var(--green-deep); }
.chk .verdict.watch { background: var(--gold-pale);  color: var(--gold-ink); }
.chk .verdict.none  { background: var(--paper-2);    color: var(--ink-2); }
.chk p { font-size: 17px; color: var(--ink-2); margin: 0 0 10px; max-width: 66ch; }
.chk .src {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--ink-3); display: block; padding-top: 8px; border-top: 1px dashed var(--line);
  max-width: 66ch;
}
.chk .src a { color: var(--ink-2); }


/* chhoti utility: mara hua domain dikhane ke liye, aur table ka label */
.mono { font-family: var(--mono); font-size: .92em; }
.doctable .tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}

/* poochhne wale sawal */
.askbox { background: var(--green-deep); color: #D6E3DD; padding: 30px 32px; margin: 40px 0; }
.askbox h3 { color: #fff; font-size: 22px; margin-bottom: 8px; }
.askbox p { color: #B9CCC4; margin-bottom: 18px; }
.askbox ol { margin: 0; padding-left: 22px; }
.askbox li { margin-bottom: 12px; color: #E4EDE9; font-size: 16.5px; }

/* Footer ke link phone pe 28px the, ungli se dabana mushkil tha */
@media (max-width: 900px) {
  footer.site .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer.site .fgrid > :first-child { grid-column: 1 / -1; }
  footer.site .fgrid ul li { margin-bottom: 2px; }
  footer.site .fgrid ul a { display: inline-block; padding: 9px 0; min-height: 40px; }
}

/* Chhote laptop (1024-1200) pe menu aur actions ek line mein rahein */
@media (min-width: 1051px) and (max-width: 1240px) {
  .navtop, .navlink { font-size: 15px; padding: 11px 7px; }
  .headcta { font-size: 15px; padding: 12px 15px; }
  .headtel { padding: 0 12px; }
  .brand img { height: 34px; }
}

/* DEB ki prohibited list: ye padhi jaani chahiye, saji hui nahi */
.prohib {
  border-left: 3px solid #B3261E; background: #FDF3F2; padding: 14px 16px;
  font-size: 15.5px !important; line-height: 1.75; color: #7A1C15 !important;
}

/* ============================================================
   Ek hi khoj: header ka box aur search page
   Collegedunia aur Shiksha dono har page pe ek search rakhte hain.
   Humare paas 1,074 university + 14,996 college pade the par unhe
   dhoondhne ka raasta sirf do page pe tha. Ab har page pe hai.
   Phone pe sirf magnifier dikhta hai, isliye header ek pixel nahi badhta.
   ============================================================ */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.hsearch { display: flex; align-items: center; flex: none;
  border: 1px solid var(--line-2); background: #fff; height: 44px; }
.hsearch .hsq { border: 0; background: none; font: inherit; font-size: 14.5px;
  color: var(--ink); padding: 0 12px; width: 208px; min-width: 0; }
.hsearch .hsq::placeholder { color: var(--ink-3); }
.hsearch .hsq:focus { outline: 2px solid var(--green); outline-offset: -2px; }
.hsearch button { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 42px; border: 0; background: none; color: var(--green-deep); cursor: pointer; }
.hsearch button svg { width: 19px; height: 19px; }
.hsearch button:hover, .hsearch button:focus-visible { background: var(--green-pale); }

@media (max-width: 1240px) { .hsearch .hsq { width: 140px; } }
@media (max-width: 1050px) {
  /* input hata do, magnifier reh jaye. Khaali form submit hoke
     seedha search page khol deta hai, isliye JS ki zaroorat nahi. */
  .hsearch .hsq { display: none; }
  .hsearch { border-color: var(--line); }
}

.bigsearch { display: flex; gap: 10px; margin: 24px 0 12px; max-width: 720px; }
.bigsearch input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--line-2);
  background: #fff; font: inherit; font-size: 17px; padding: 15px 16px; color: var(--ink); }
.bigsearch input:focus { outline: 2px solid var(--green); outline-offset: -2px; }
.bigsearch button { flex: none; border: 0; background: var(--green-deep); color: #fff;
  font: inherit; font-weight: 700; font-size: 16px; padding: 0 26px; cursor: pointer; min-height: 52px; }
.bigsearch button:hover, .bigsearch button:focus-visible { background: var(--green); }

.sgroup { margin-top: 36px; }
.sgroup h2 { font-size: 25px; margin: 0 0 6px; }
.sgroup .sub { margin: 0 0 16px; }
.ugrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.srow { display: block; border: 1px solid var(--line); background: #fff;
  padding: 14px 16px; text-decoration: none; color: inherit; }
.srow:hover, .srow:focus-visible { border-color: var(--green); background: var(--green-mist); }
.skind { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-ink); margin-bottom: 5px; }
.srow b { display: block; font-size: 16px; line-height: 1.3; color: var(--ink); }
.snote { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 4px; }

.searchhelp { margin-top: 50px; border-top: 1px solid var(--line); padding-top: 28px; max-width: 70ch; }
.searchhelp h2 { font-size: 22px; margin: 0 0 12px; }

@media (max-width: 560px) {
  .bigsearch { flex-direction: column; }
  .ugrid, .sgrid { grid-template-columns: 1fr; }
}

/* Desktop ka header ab jaan-boojh kar do line ka hai.
   Pehle bhi do line ka ho raha tha (1440 pe "Get admission help" neeche
   gir jaata tha) par galti se, aur teesri cheez ke liye jagah hi nahi thi.
   Ab upar brand + search + call, neeche poora menu apni line pe. Yahi
   dhaancha Shiksha aur Collegedunia dono use karte hain, aur isse search
   ko asli chaudai milti hai. */
@media (min-width: 1051px) {
  .headrow { padding-bottom: 0; row-gap: 0; }
  .brand { order: 1; }
  .hsearch { order: 2; flex: 1 1 240px; max-width: 440px; }
  .hsearch .hsq { width: auto; flex: 1 1 auto; min-width: 0; }
  .langswitch { order: 3; }
  .headact { order: 4; }
  .headrow::after { content: ""; order: 5; flex-basis: 100%; height: 0; }
  nav.site { order: 6; flex: 1 1 100%; border-top: 1px solid var(--line); margin-top: 12px; }
  /* pehla menu item apne padding ki wajah se logo se 9px andar tha */
  .navmenu { margin-left: -9px; }
}

/* Phone pe search icon doosri line mein, Menu ke saath.
   Pehli line mein rakha to "Get admission help" neeche gir jaata tha aur
   header 136px se 179px ka ho jaata tha. Vinod ka audit yahi tha ki header
   screen ka chauthai hissa na khaye. */
@media (max-width: 1050px) {
  .hsearch { order: 10; margin-top: 8px; align-self: center; }
  .langswitch { order: 11; }
}

/* ============================================================
   University ka apna record page
   ============================================================ */
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 18px; }
.crumb a { color: #CFE0D8; text-decoration: none; border-bottom: 1px solid rgba(207,224,216,.4); }
.crumb a:hover { color: #fff; border-bottom-color: var(--gold); }
.crumb span { color: #8FA9A0; }

.ntable { display: grid; gap: 10px; margin: 18px 0 26px; }
.nrow { display: grid; grid-template-columns: minmax(0,1.4fr) 84px 84px minmax(0,1.6fr);
  gap: 14px; align-items: center;
  border: 1px solid var(--line); background: #fff; padding: 14px 16px; }
.ncat { font-weight: 700; font-size: 16px; }
.nrank, .nscore { text-align: center; }
.nrank b, .nscore b { display: block; font-family: var(--serif); font-size: 24px;
  line-height: 1; color: var(--green-deep); }
.nrank span, .nscore span { display: block; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.nlinks { display: flex; flex-direction: column; gap: 4px; }
.nlinks a { font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; font-weight: 600; color: var(--gold-ink); text-decoration: none; }
.nlinks a + a { color: var(--green); }
.nlinks a:hover { text-decoration: underline; }

.callout { border-left: 3px solid var(--gold); background: var(--gold-pale);
  padding: 20px 22px; margin: 30px 0 0; }
.callout h3 { margin: 0 0 10px; font-size: 20px; }
.callout p { margin: 0 0 10px; }
.callout p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .nrow { grid-template-columns: 1fr 70px 70px; gap: 10px 12px; }
  .ncat { grid-column: 1 / -1; }
  .nlinks { grid-column: 1 / -1; }
}

/* ============================================================
   DESIGN REFRESH 2.0 (5 Sep 2026)
   Vinod: site pe "koi achhi photo nahi, na good looking design",
   aur Gen Z ko "feel hi nahi aata". Reference: CollegeDekho, jahan
   garam rang, gol kone aur ek muskurata chehra hai.

   Photo abhi bhi nahi hai, aur kisi named university ki photo lagana
   is brand ke liye sabse bada khatra hai (wajah HANDOVER mein hai).
   Isliye jaan doosri jagah se daali gayi: gol kone, do naye rang,
   gehri parchhai, bade aankde aur halki harkat.

   Ye block sabse aakhir mein hai taaki upar ke purane rules ko
   jaan-boojh kar haraa sake. Purana kuch mitaya nahi gaya.
   ============================================================ */

/* ---------- 1. Kone aur parchhai: sabse bada ek badlav ---------- */

.btn, .headcta, .headtel, .navtoggle, .hsearch, .bigsearch input,
.bigsearch button, .langswitch, .cfield input[type="text"], .cfield button,
.urow-in input, .urow-in select { border-radius: var(--r-pill); }

.hcard, .startcard, .goal, .ccard, .urow, .srow, .rcard, .navpanel,
.usearch, .unone, .callout, .nrow, .checker, .stat, .searchhelp,
.chat, .pledge { border-radius: var(--r-m); }

/* Sirf .btn ko chaudi padding. Header ke button apni compaction khud
   sambhalte hain; unhe 22px dene se phone pe header 127px se 162px ka
   ho gaya tha aur teen line mein tootne laga tha. */
.btn { padding-left: 24px; padding-right: 24px; }

/* har card ab utha hua lagta hai, chipka hua nahi */
.startcard, .goal, .ccard, .urow, .srow, .rcard, .checker, .callout, .nrow {
  box-shadow: var(--sh-1);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease);
}
.goal:hover, .ccard:hover, .srow:hover, .urow:hover,
.ccard:focus-visible, .srow:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
  border-color: var(--mint-deep);
}

/* ---------- 2. Button: goli, garmi, aur uthaan ---------- */

.btn {
  font-weight: 700;
  box-shadow: var(--sh-1);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background .18s var(--ease);
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); }

/* pehla CTA ab coral hai. Gehre hare pe hara button doob jaata tha,
   aur Gen Z ko yahi ek rang "click karo" bolta hai */
.phero .btn:not(.ghost), .closing .btn:not(.ghost), .heroctas .btn:not(.ghost) {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}
.phero .btn:not(.ghost):hover, .closing .btn:not(.ghost):hover,
.heroctas .btn:not(.ghost):hover,
.phero .btn:not(.ghost):focus-visible, .heroctas .btn:not(.ghost):focus-visible {
  background: var(--coral-deep);
  border-color: var(--coral-deep);
  color: #fff;
}
.phero .btn.ghost {
  background: rgba(255,255,255,.10);
  color: #fff;
  border-color: rgba(255,255,255,.42);
}
.phero .btn.ghost:hover, .phero .btn.ghost:focus-visible {
  background: rgba(255,255,255,.2); color: #fff; border-color: #fff;
}

.headcta { box-shadow: var(--sh-1); transition: transform .18s var(--ease), background .18s var(--ease); }
.headcta:hover, .headcta:focus-visible { transform: translateY(-1px); }

/* ---------- 3. Hero: rang, roshni aur halki harkat ---------- */

.phero {
  background:
    radial-gradient(120% 90% at 12% 0%, #0E6B4C 0%, transparent 55%),
    radial-gradient(90% 80% at 92% 12%, #0B5340 0%, transparent 60%),
    linear-gradient(150deg, #05301F 0%, #06382A 45%, #0A5C42 100%);
}
/* do mulayam roshni ke gole. Yahi photo ki jagah kaam karte hain. */
.phero > .wrap::before,
.phero > .wrap::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
  z-index: 0;
}
.phero > .wrap::before {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(110,231,183,.34), transparent 70%);
  top: -110px; left: -140px;
  animation: floaty 16s ease-in-out infinite;
}
.phero > .wrap::after {
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(242,179,61,.30), transparent 70%);
  bottom: -130px; right: -110px;
  animation: floaty 20s ease-in-out infinite reverse;
}
.phero > .wrap > * { position: relative; z-index: 1; }
@keyframes floaty {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(26px, -22px, 0) scale(1.08); }
}
.phero::after {
  background:
    linear-gradient(180deg, rgba(5,48,31,.60) 0%, rgba(6,56,42,.30) 45%, rgba(5,48,31,.86) 100%);
}
.phero::before { opacity: .20; }

/* headline ka em ab sirf rang nahi, uske neeche ek tirchi lakeer */
.phero h1 em, h2 em { position: relative; display: inline-block; }
.phero h1 em::after, h2 em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .02em;
  height: .1em;
  background: var(--gold);
  opacity: .45;
  border-radius: var(--r-pill);
  transform: rotate(-.6deg);
}
h2 em::after { background: var(--coral); opacity: .26; }

/* ---------- 4. Trust chips: patli line se ab asli goli ---------- */

.trustrow { gap: 10px 12px; }
.trustrow span {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-pill);
  padding: 8px 16px 8px 13px;
  color: #E6F2ED;
}
.trustrow span svg { width: 16px; height: 16px; }

/* ---------- 5. Hero ka Jaancho Report card: ab product jaisa ---------- */

.hcard {
  border-radius: var(--r-l);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 40px 90px rgba(0,0,0,.42);
  transform: rotate(-1.2deg);
  transition: transform .35s var(--ease);
}
.hcard:hover { transform: rotate(0deg) translateY(-4px); }
/* upar chipka hua sticker */
.hcard::before {
  content: "UGC record";
  position: absolute;
  top: -14px; right: 18px;
  background: var(--mint);
  color: #06382A;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
  transform: rotate(2.5deg);
}
.hc-list li::before { box-shadow: 0 0 0 3px rgba(30,138,95,.14); }
.hc-list li.watch::before { box-shadow: 0 0 0 3px rgba(242,179,61,.18); }
.hc-list li.none::before  { box-shadow: none; }

/* ---------- 6. Stat band: ab aankda bolta hai ---------- */

.statband { gap: 14px; }
.stat {
  background: linear-gradient(160deg, #0A5C42 0%, #06382A 100%);
  border: 1px solid rgba(255,255,255,.08);
  padding: 30px 24px;
  transition: transform .22s var(--ease);
}
.stat:hover { transform: translateY(-4px); }
.stat .sv {
  font-size: clamp(38px, 4.4vw, 54px);
  background: linear-gradient(180deg, #fff 0%, var(--mint) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- 7. Goal cards: rang wale badge, thin icon nahi ---------- */

.goal .gi {
  width: 54px; height: 54px;
  border-radius: var(--r-m);
  background: linear-gradient(150deg, var(--green) 0%, var(--green-deep) 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(10,92,66,.24);
}
.goal .gi svg { width: 26px; height: 26px; }
.goal:nth-child(2) .gi { background: linear-gradient(150deg, #F5C05A 0%, #D4901A 100%); box-shadow: 0 8px 18px rgba(212,144,26,.26); }
.goal:nth-child(3) .gi { background: linear-gradient(150deg, #FF8A6B 0%, #E8462A 100%); box-shadow: 0 8px 18px rgba(232,70,42,.24); }
.goal:nth-child(4) .gi { background: linear-gradient(150deg, var(--mint) 0%, #0E9C6E 100%); box-shadow: 0 8px 18px rgba(52,211,153,.26); }

/* ---------- 8. Chips: tag, NIRF badge, state links ---------- */

.utag, .unirf, .skind, .statelinks a { border-radius: var(--r-pill); }
.utag { padding: 5px 12px; }
.unirf { padding: 6px 12px; }
.statelinks a {
  padding: 9px 16px;
  border: 1px solid var(--line);
  background: #fff;
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.statelinks a:hover, .statelinks a:focus-visible {
  transform: translateY(-2px);
  border-color: var(--mint-deep);
  box-shadow: var(--sh-1);
}
.scnum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--r-pill);
  background: var(--green-deep); color: var(--mint);
  font-size: 13px;
}

/* ---------- 9. Form aur search: bade, gol, saaf ---------- */

.checker { box-shadow: var(--sh-2); overflow: hidden; }
.checker-head { background: linear-gradient(140deg, #0A5C42 0%, #06382A 100%); }
.checker-head .t { color: #fff; }
.checker-head .d { color: #C9DED6; }
.cfield input[type="text"] { padding-left: 20px; }
.cfield button { background: var(--coral); border-color: var(--coral); }
.cfield button:hover, .cfield button:focus-visible { background: var(--coral-deep); border-color: var(--coral-deep); }
.bigsearch button { background: var(--coral); }
.bigsearch button:hover, .bigsearch button:focus-visible { background: var(--coral-deep); }

/* ---------- 10. Quick bar, panel aur footer ke kone ---------- */

.quickbar { border-radius: var(--r-l) var(--r-l) 0 0; overflow: hidden; box-shadow: 0 -8px 30px rgba(6,56,42,.18); }
.quickbar .qb { transition: filter .18s var(--ease); }
.quickbar .qb:hover { filter: brightness(1.08); }

.navpanel { box-shadow: var(--sh-3); }
.navpanel a { border-radius: var(--r-s); }

/* ---------- 11. Saans ---------- */

.sechead { margin-bottom: 34px; }
.sechead h2 { margin-bottom: 12px; }

/* ---------- 12. Jinko harkat se dikkat hai ---------- */

@media (prefers-reduced-motion: reduce) {
  .startcard, .goal, .ccard, .urow, .srow, .rcard, .checker, .callout, .nrow,
  .btn, .headcta, .statelinks a, .stat, .hcard, .quickbar .qb { transition: none; }
  .goal:hover, .ccard:hover, .srow:hover, .urow:hover, .btn:hover,
  .statelinks a:hover, .stat:hover, .hcard:hover { transform: none; }
  .phero > .wrap::before, .phero > .wrap::after { animation: none; }
}

/* ============================================================
   DESIGN REFRESH 2.1: rang ke band, gol kinare, aur course cards
   Pehle poori site ek hi cream rang pe thi aur har section ek
   lakeer se alag hota tha. Ab band se band badalta hai, aur dark
   se light ka jod ek badi goli se hota hai. Yahi "app jaisa" lagta hai.
   ============================================================ */

/* Hero ke neeche wala section ab uske upar chadhta hai, gol kandhon ke saath */
.phero + section {
  position: relative;
  z-index: 3;
  margin-top: -34px;
  padding-top: clamp(52px, 6vw, 84px);
  background: var(--paper);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.phero + section.alt { background: var(--green-mist); }
.phero { padding-bottom: 34px; }

/* Band ab rang se alag hote hain, lakeer se nahi */
section.alt {
  background: var(--green-mist);
  border-top: 0;
  border-bottom: 0;
}
section.alt + section.alt { padding-top: 0; }

/* Gehre band ke dono kinare gol, taaki wo ek block lage */
section.deep {
  border-radius: var(--r-xl);
  margin: 0 clamp(0px, 2vw, 26px);
  background:
    radial-gradient(90% 120% at 8% 0%, #0E6B4C 0%, transparent 58%),
    linear-gradient(160deg, #06382A 0%, #05301F 100%);
}

/* ---------- Course cards: aath rang, ek jaisi shakl ---------- */

.ccard {
  padding: 20px 20px 18px;
  border-color: var(--line);
  position: relative;
  overflow: hidden;
}
.ccard::before {
  content: "";
  display: block;
  width: 38px; height: 38px;
  border-radius: 12px;
  margin-bottom: 14px;
  background: linear-gradient(150deg, var(--green) 0%, var(--green-deep) 100%);
  box-shadow: 0 6px 14px rgba(10,92,66,.22);
}
.coursegrid .ccard:nth-child(8n+2)::before { background: linear-gradient(150deg, #F5C05A, #D4901A); box-shadow: 0 6px 14px rgba(212,144,26,.24); }
.coursegrid .ccard:nth-child(8n+3)::before { background: linear-gradient(150deg, #FF8A6B, #E8462A); box-shadow: 0 6px 14px rgba(232,70,42,.22); }
.coursegrid .ccard:nth-child(8n+4)::before { background: linear-gradient(150deg, #6EE7B7, #0E9C6E); box-shadow: 0 6px 14px rgba(52,211,153,.24); }
.coursegrid .ccard:nth-child(8n+5)::before { background: linear-gradient(150deg, #7FB2F0, #2A6BB8); box-shadow: 0 6px 14px rgba(42,107,184,.22); }
.coursegrid .ccard:nth-child(8n+6)::before { background: linear-gradient(150deg, #C9A7F0, #7C4DBE); box-shadow: 0 6px 14px rgba(124,77,190,.22); }
.coursegrid .ccard:nth-child(8n+7)::before { background: linear-gradient(150deg, #F5A0A0, #C43D3D); box-shadow: 0 6px 14px rgba(196,61,61,.2); }
.coursegrid .ccard:nth-child(8n)::before   { background: linear-gradient(150deg, #8FD9C6, #157C63); box-shadow: 0 6px 14px rgba(21,124,99,.22); }
.ccard:hover { background: #fff; }
.ccard b { font-size: 20px; margin-bottom: 5px; }

/* ---------- Pledges: table se teen alag card ---------- */

.pledges {
  border: 0;
  background: none;
  gap: 18px;
}
.pledge {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  padding: 30px 28px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.pledge:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.pledge .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px; height: 34px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--coral-pale);
  color: var(--coral-deep);
  margin-bottom: 16px;
}
section.alt .pledge { background: #fff; }

/* ---------- Founder ki jagah: khaali dabba nahi, banaya hua card ---------- */

.portrait {
  border-radius: var(--r-l);
  overflow: hidden;
  background:
    radial-gradient(80% 70% at 20% 10%, rgba(110,231,183,.28), transparent 60%),
    linear-gradient(155deg, #0A5C42 0%, #06382A 100%);
  border: 0;
  box-shadow: var(--sh-2);
}
.portrait .ph { color: #BFE3D3; }
.portrait .ph b {
  color: #fff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-pill);
  width: 96px; height: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 34px;
}

/* ---------- Checks list: numbered chip ---------- */

.citem .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--r-pill);
  background: var(--gold-pale);
  color: var(--gold-ink);
  padding-top: 0;
}
.citem {
  border-radius: var(--r-m);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.citem:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }

/* ---------- Chat mockup: WhatsApp jaisa hi rehne do, bas gol ---------- */

.chat { border-radius: var(--r-l); box-shadow: var(--sh-2); }

/* ---------- Report card list (Jaancho Report) ---------- */

.rcard { box-shadow: var(--sh-1); }
.repmeta > div { border-radius: var(--r-s); }

/* ---------- Hero ko saans ---------- */

.phero > .wrap { padding-top: clamp(64px, 7.5vw, 104px); padding-bottom: clamp(64px, 7vw, 100px); }
.heroctas { gap: 12px; }

@media (prefers-reduced-motion: reduce) {
  .pledge, .citem { transition: none; }
  .pledge:hover, .citem:hover { transform: none; }
}

@media (max-width: 700px) {
  .phero + section { margin-top: -22px; border-radius: var(--r-l) var(--r-l) 0 0; }
  section.deep { border-radius: var(--r-l); margin: 0 12px; }
}

/* ---------- Shortlist form: dabba se card ---------- */

.slbox {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--sh-2);
  padding: 34px 32px 30px;
}
.slgrid select, .slgrid input { border-radius: var(--r-pill); padding-left: 18px; }
.slgrid select:focus, .slgrid input:focus { outline-offset: 0; }

/* Ginti khud gin kar upar aati hai. Chhoti si baat hai par yahi
   pehla ishara hai ki page zinda hai, marks nahi. */
.stat .sv[data-count] { font-variant-numeric: tabular-nums; }

/* Lambi table phone pe poore page ko khiskaa deti thi (375px screen pe
   520px ki table = 4px ka horizontal scroll, aur padhna mushkil).
   Ab table khud ke andar khiskati hai, page nahi. */
.doctable {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   DESIGN REFRESH 2.2: asli photo
   Vinod ne free-licence photos ki ijazat di. Teen lagi hain (Pexels
   licence: commercial use free, attribution zaroori nahi).

   NIYAM: photo sirf mahaul banati hai. Kisi photo ke saath koi naam,
   koi quote, koi testimonial nahi jodna, aur kisi NAMED sansthan ka
   campus ya signboard kabhi nahi lagana. Warna lagta hai ki unse
   rishta hai, aur verification brand ke liye wahi sabse bada khatra hai.
   ============================================================ */

/* Hero: photo peeche, report card uske upar. PhysicsWallah aur
   CollegeDekho dono yahi karte hain - ek chehra plus ek UI card. */
.heroright { align-items: flex-end; }
.hphoto {
  width: 100%;
  max-width: 372px;
  /* height:auto zaroori hai. <img> ka height attribute ek presentational
     hint hai, aur uske hote hue aspect-ratio lagta hi nahi: photo 1120px
     lambi ho gayi thi aur card fold ke neeche chala gaya tha. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
  border-radius: var(--r-xl);
  display: block;
  box-shadow: 0 30px 70px rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.18);
}
/* card photo ke neeche-baayen kone pe tairta hai */
/* Card photo ke neeche-baayen kone pe tairta hai, poora nahi dhakta.
   Pehle card photo se lamba tha aur usne chehra hi chhupa diya tha. */
.heroright .hcard {
  position: absolute;
  left: -30px;
  bottom: -34px;
  max-width: 268px;
  padding: 16px 18px 13px;
  transform: rotate(-1.8deg);
}
.heroright .hcard .hc-eyebrow { font-size: 9px; margin-bottom: 7px; }
.heroright .hcard .hc-name { font-size: 18px; margin-bottom: 10px; }
.heroright .hcard .hc-name span { font-size: 15px; }
.heroright .hcard .hc-list li { font-size: 12px; padding: 6px 0 6px 17px; }
.heroright .hcard .hc-list li::before { top: 10px; width: 8px; height: 8px; }
.heroright .hcard .hc-foot { font-size: 9px; }
.heroright .hcard::before { font-size: 9.5px; padding: 6px 11px; top: -12px; right: 14px; }
.heroright .hcard:hover { transform: rotate(0) translateY(-4px); }

@media (max-width: 1050px) {
  /* .heroright ek flex row hai. Sirf position:static karne se card photo
     ke BAGAL mein aa jaata tha aur dono kuchle jaate the. Column karna
     zaroori hai, tabhi card photo ke NEECHE aata hai. */
  .heroright { flex-direction: column; align-items: center; padding-bottom: 34px; }
  .hphoto { max-width: 300px; }
  .heroright .hcard {
    position: static;
    margin: -54px 0 0 0;
    max-width: 320px;
    align-self: center;
  }
}
@media (max-width: 520px) {
  .hphoto { max-width: 246px; }
  .heroright .hcard { margin-top: -46px; max-width: 290px; }
}

/* Aakhri CTA ab photo ke upar, gehre parde ke saath */
.photoband {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  margin: 0 clamp(0px, 2vw, 26px);
  background: var(--green-deep);
  color: #fff;
}
.pbimg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: .34;
}
.photoband::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,48,31,.82) 0%, rgba(6,56,42,.62) 45%, rgba(5,48,31,.9) 100%);
}
.photoband > .wrap { position: relative; z-index: 2; }
.photoband h2, .photoband .closing h2 { color: #fff; }
.photoband h2 em { color: var(--gold); }
.photoband h2 em::after { background: var(--gold); opacity: .4; }
.photoband .sub, .photoband p { color: #D5E4DE; }
.photoband .eyebrow { color: var(--gold); }
.photoband .btn:not(.ghost) { background: var(--coral); border-color: var(--coral); color: #fff; }
.photoband .btn:not(.ghost):hover, .photoband .btn:not(.ghost):focus-visible {
  background: var(--coral-deep); border-color: var(--coral-deep);
}
.photoband .btn.ghost { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.42); }
.photoband .btn.ghost:hover, .photoband .btn.ghost:focus-visible { background: rgba(255,255,255,.2); border-color: #fff; color: #fff; }

/* ---------- Aath check ab chip mein, poore card mein nahi ----------
   Homepage 13 screen ki thi. Ye section akela 1,296px kha raha tha,
   jabki wahi baat verify-a-college.html pe poori detail mein likhi hai.
   Ab chip hai, aur har chip usi detail pe le jaati hai. */
.checkchips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}
.chip {
  display: block;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--r-m);
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--sh-1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover, .chip:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
  border-color: var(--mint-deep);
}
.chip b {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 16.5px;
  line-height: 1.3;
  color: var(--green-deep);
  margin-bottom: 5px;
}
.chip b i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--gold-ink);
  flex: none;
}
.chip span { display: block; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .chip { transition: none; }
  .chip:hover { transform: none; }
}


/* ---------- Density: competitors ke barabar ----------
   Har section 92px upar aur 92px neeche kha raha tha. 14 section ka
   matlab 2,500px sirf khaali jagah. Collegedunia aur Shiksha isse
   kaafi kas kar rakhte hain, aur Gen Z 13 screen scroll nahi karta. */
section { padding: clamp(52px, 5.6vw, 78px) 0; }
.phero + section { padding-top: clamp(44px, 4.8vw, 66px); }
.coursegrid { grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 10px; }
.sechead { margin-bottom: 28px; max-width: 700px; }

/* Ab andar ke page ke peeche asli padhai wali photo hai (kitaab, lab,
   blueprint, notes), isliye 20% pe wo dikhti hi nahi thi. Sirf pagehead
   pe thodi tez, homepage ka hero jaisa tha waisa hi. */
.phero.pagehead::before { opacity: .30; }
.phero.pagehead::after {
  background: linear-gradient(180deg, rgba(5,48,31,.80) 0%, rgba(6,56,42,.58) 45%, rgba(5,48,31,.92) 100%);
}

/* Yahan pehle teen rule the jo purane plain-link header ke liye likhe gaye
   the (`nav.site a`). Ab Hindi pe bhi wahi dropdown menu hai, aur wo rule
   nuksaan kar rahe the: `nav.site a` ki specificity (0,1,2) `.navlink` aur
   `.navpanel a` (0,1,1) se zyada hai, isliye unka padding-left 0 ho jaata
   tha. Nateeja: "Trust Centre" aur panel ke saare link phone pe bilkul
   kinare se chipak jaate the. Teeno hata diye.
   SABAK: nav ka dhaancha badlo to purane nav ke rule usi waqt hataana. */

/* Record table inside a Jaancho Report check. Ek official record ko
   jaise ka waise dikhane ke liye: baayen label, daayen value. */
.rec {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 18px;
  font-size: 15.5px;
}
.rec th {
  text-align: left;
  width: 46%;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--green-deep);
  font-weight: 600;
  vertical-align: top;
}
.rec td {
  padding: 10px 0 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  vertical-align: top;
}
.rec tr:last-child th, .rec tr:last-child td { border-bottom: 0; }
@media (max-width: 520px) {
  .rec th { width: 52%; font-size: 10px; }
  .rec td { font-size: 15px; }
}


/* ============================================================
   AI answer layer: quick facts (dl) aur FAQ
   Ye hissa insaan ke liye bhi hai aur jawab-engine ke liye bhi.
   Isliye text hamesha DOM mein rehta hai, kabhi JS se nahi aata.
   ============================================================ */

/* .repmeta ab <dl> hai. Purana <div><b>..</b>value</div> wala roop
   Jaancho Report page par abhi bhi hai, isliye dono chalte hain. */
dl.repmeta { margin: 0; }
.repmeta dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 3px;
}
.repmeta dd { margin: 0; font-size: 15px; color: #CBDDD5; }

.faq { margin-top: 26px; }
.faqi {
  border-top: 1px solid var(--line);
  padding: 20px 0;
}
.faqi:last-child { border-bottom: 1px solid var(--line); }
.faqi > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: 14px;
}
.faqi > summary::-webkit-details-marker { display: none; }
.faqi > summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-left: auto;
  margin-top: 8px; border-right: 2px solid var(--gold-ink);
  border-bottom: 2px solid var(--gold-ink); transform: rotate(45deg);
  transition: transform .18s ease;
}
.faqi[open] > summary::after { transform: rotate(-135deg); }
.faqi > summary h3 {
  display: inline; font-size: 19px; line-height: 1.35; margin: 0;
}
.faqa { padding-top: 10px; max-width: 68ch; }
.faqa p { margin: 0; color: var(--ink-2); }
.faqa strong { color: var(--ink); }

@media (max-width: 560px) {
  .faqi > summary h3 { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .faqi > summary::after { transition: none; }
}