/* ══════════════════════════════════════════════════════════════
   Investopedia India — inner document pages
   Loaded only on service, compliance and legal pages.
   Everything stays scoped under #ii-root, same as the landing page.
══════════════════════════════════════════════════════════════ */

/* On inner pages the nav must be visible and clickable from the top,
   rather than fading in after 80px of scroll as it does over the hero. */
body.ii-inner #ii-nav {
  background: rgba(8, 17, 13, .94);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(212, 184, 114, .12);
  pointer-events: all;
}
body.ii-inner #ii-nav .ii-nav-logo,
body.ii-inner #ii-nav .ii-nav-links { opacity: 1; pointer-events: all; }
body.ii-inner #ii-nav-burger { pointer-events: all; }

#ii-root .ii-doc {
  display: block;
  max-width: 820px;
  margin: 0 auto;
  padding: 150px 28px 90px;
  background: var(--emerald-1);
}

/* ── header ─────────────────────────────────────────────── */
#ii-root .ii-doc-head { display: block; margin-bottom: 44px; }

#ii-root .ii-doc-back {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sage); text-decoration: none;
  margin-bottom: 30px;
  transition: color .2s;
}
#ii-root .ii-doc-back:hover { color: var(--champagne); }

#ii-root .ii-doc-h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 600; line-height: 1.08; letter-spacing: -.02em;
  color: var(--ivory);
  margin: 0 0 20px;
}
#ii-root .ii-doc-h1 em {
  font-style: italic; font-weight: 400; color: var(--champagne);
}

#ii-root .ii-doc-lead {
  font-family: 'Inter', sans-serif;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.62; color: var(--sage);
  max-width: 64ch; margin: 0;
}

#ii-root .ii-doc-updated {
  font-family: 'Inter', sans-serif;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sage-dim); margin: 22px 0 0;
}

/* ── body ───────────────────────────────────────────────── */
#ii-root .ii-doc-body { display: block; }

#ii-root .ii-doc-sec {
  display: block;
  padding: 30px 0;
  border-top: 1px solid rgba(212, 184, 114, .14);
}

#ii-root .ii-doc-sec h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(21px, 2.3vw, 27px);
  font-weight: 600; line-height: 1.25; letter-spacing: -.01em;
  color: var(--ivory);
  margin: 0 0 16px;
}

#ii-root .ii-doc-sec p {
  font-family: 'Inter', sans-serif;
  font-size: 16px; line-height: 1.72;
  color: #C3CCC4;
  margin: 0 0 15px;
  max-width: 70ch;
}
#ii-root .ii-doc-sec p:last-child { margin-bottom: 0; }
#ii-root .ii-doc-sec strong { color: var(--ivory); font-weight: 600; }

#ii-root .ii-doc-sec ul {
  margin: 0 0 15px; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 11px;
}
#ii-root .ii-doc-sec li {
  position: relative;
  font-family: 'Inter', sans-serif;
  font-size: 16px; line-height: 1.6;
  color: #C3CCC4;
  padding-left: 24px;
  max-width: 70ch;
}
#ii-root .ii-doc-sec li::before {
  content: ''; position: absolute; left: 4px; top: 11px;
  width: 7px; height: 1px; background: var(--champagne);
}

#ii-root .ii-doc-sec a {
  color: var(--champagne); text-decoration: none;
  border-bottom: 1px solid rgba(212, 184, 114, .35);
  transition: border-color .2s, color .2s;
}
#ii-root .ii-doc-sec a:hover {
  color: var(--champagne-lt); border-bottom-color: var(--champagne);
}

/* ── callout for "you must do something here" ───────────── */
#ii-root .ii-doc-note {
  background: rgba(217, 123, 102, .07);
  border: 1px solid rgba(217, 123, 102, .3);
  border-radius: 4px;
  padding: 24px 26px;
  margin: 0 0 8px;
}
#ii-root .ii-doc-note h2 { font-size: 18px; color: var(--alert); }

#ii-root .ii-doc-slot {
  background: rgba(212, 184, 114, .05);
  border: 1px dashed rgba(212, 184, 114, .4);
  border-radius: 4px;
  padding: 26px;
  min-height: 150px;
}
#ii-root .ii-doc-slotnote {
  font-size: 14px !important; color: var(--sage-dim) !important;
  font-style: italic;
}

#ii-root .ii-todo {
  display: inline-block;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--alert);
  background: rgba(217, 123, 102, .12);
  border: 1px solid rgba(217, 123, 102, .35);
  border-radius: 3px;
  padding: 3px 9px;
  white-space: nowrap;
}

/* ── tables ─────────────────────────────────────────────── */
#ii-root .ii-doc-table {
  width: 100%; border-collapse: collapse;
  font-family: 'Inter', sans-serif; font-size: 15px;
  margin: 4px 0 8px;
  display: table;
}
#ii-root .ii-doc-table tr { border-bottom: 1px solid rgba(212, 184, 114, .12); }
#ii-root .ii-doc-table tr:last-child { border-bottom: none; }
#ii-root .ii-doc-table th {
  text-align: left; vertical-align: top;
  font-weight: 600; color: var(--sage);
  padding: 13px 18px 13px 0;
  width: 40%;
}
#ii-root .ii-doc-table td {
  vertical-align: top; color: var(--ivory);
  padding: 13px 0;
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
}
#ii-root .ii-doc-table a { font-family: 'Inter', sans-serif; }

#ii-root .ii-doc-table-grid { font-size: 14px; }
#ii-root .ii-doc-table-grid thead th {
  width: auto; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--champagne);
  border-bottom: 1px solid rgba(212, 184, 114, .3);
  padding: 11px 12px 11px 0;
}
#ii-root .ii-doc-table-grid td {
  padding: 11px 12px 11px 0; color: #C3CCC4;
}
#ii-root .ii-doc-table-grid td:first-child {
  color: var(--ivory); font-family: 'Inter', sans-serif;
}
#ii-root .ii-doc-total td {
  color: var(--ivory) !important; font-weight: 700;
  border-top: 1px solid rgba(212, 184, 114, .3);
}

/* ── link row ───────────────────────────────────────────── */
#ii-root .ii-doc-links {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px;
}
#ii-root .ii-doc-links a {
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: .03em;
  color: var(--ivory); text-decoration: none; border-bottom: none;
  background: var(--emerald-3);
  border: 1px solid rgba(212, 184, 114, .18);
  border-radius: 3px;
  padding: 11px 17px;
  transition: border-color .25s, background .25s, transform .25s var(--spring);
}
#ii-root .ii-doc-links a:hover {
  border-color: var(--champagne);
  background: var(--emerald-4);
  transform: translateY(-2px);
}

/* ── closing CTA ────────────────────────────────────────── */
#ii-root .ii-doc-cta {
  display: block; text-align: center;
  margin-top: 54px; padding: 44px 30px;
  background: var(--emerald-2);
  border: 1px solid rgba(212, 184, 114, .18);
  border-radius: 5px;
}
#ii-root .ii-doc-cta h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 600;
  color: var(--ivory); margin: 0 0 12px; line-height: 1.22;
}
#ii-root .ii-doc-cta p {
  font-family: 'Inter', sans-serif; font-size: 15px;
  color: var(--sage); margin: 0 0 26px;
}

#ii-root .ii-doc-404 { text-align: center; padding-top: 170px; }
#ii-root .ii-doc-404 .ii-tag { justify-content: center; }
#ii-root .ii-doc-404 .ii-doc-lead { margin: 0 auto; }
#ii-root .ii-doc-404 .ii-doc-sec { border-top: none; }
#ii-root .ii-doc-404 .ii-doc-links { justify-content: center; }

/* ── responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  #ii-root .ii-doc { padding: 118px 20px 70px; }
  #ii-root .ii-doc-head { margin-bottom: 32px; }
  #ii-root .ii-doc-sec { padding: 26px 0; }
  #ii-root .ii-doc-sec p,
  #ii-root .ii-doc-sec li { font-size: 15px; }

  /* Stacked label and value beats a squeezed two column table */
  #ii-root .ii-doc-table,
  #ii-root .ii-doc-table tr,
  #ii-root .ii-doc-table th,
  #ii-root .ii-doc-table td { display: block; width: auto; }
  #ii-root .ii-doc-table th { padding: 14px 0 3px; }
  #ii-root .ii-doc-table td { padding: 0 0 14px; }

  /* The wide complaints grids scroll sideways instead of crushing */
  #ii-root .ii-doc-table-grid {
    display: block; overflow-x: auto; white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  #ii-root .ii-doc-table-grid thead,
  #ii-root .ii-doc-table-grid tbody { display: table-row-group; }
  #ii-root .ii-doc-table-grid tr { display: table-row; }
  #ii-root .ii-doc-table-grid th,
  #ii-root .ii-doc-table-grid td {
    display: table-cell; width: auto; padding: 10px 14px 10px 0;
  }
  #ii-root .ii-doc-cta { padding: 34px 22px; margin-top: 40px; }
  #ii-root .ii-doc-404 { padding-top: 130px; }
}

@media (max-width: 480px) {
  #ii-root .ii-doc { padding: 108px 16px 60px; }
  #ii-root .ii-doc-links a { width: 100%; text-align: center; }
}