/* ==========================================================================
   Shivganga — legal documents (Privacy Policy, Terms of Use, Refund Policy)
   Page-specific components only; tokens, resets, utilities and the closing
   CTA band come from page.css, which must load first.
   Scoped under .sg-lg.

   These three pages are documents rather than marketing pages, so they do not
   use the photographic .sg-phero the rest of the redesign uses. They get a
   plain green band instead, and the header stays in its normal solid state.
   ========================================================================== */

/* ==========================================================================
   HEAD BAND
   ========================================================================== */
.sg-lg-head {
  position: relative;
  background: linear-gradient(135deg, var(--sg-green) 0%, var(--sg-green-dark) 100%);
  color: #fff;
  padding-block: clamp(34px, 5vw, 64px) clamp(38px, 5.5vw, 72px);
  overflow: hidden;
}
/* A soft light behind the title, the same device the closing CTA band uses. */
.sg-lg-head::after {
  content: "";
  position: absolute; right: -80px; top: -120px;
  width: 420px; height: 420px; border-radius: 50%;
  background: rgba(255,255,255,.05);
  pointer-events: none;
}
.sg-lg-head__inner { position: relative; z-index: 1; max-width: 820px; }
.sg-lg-head h1 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  color: #fff; margin-bottom: .35em;
}
.sg-lg-head h1 em { font-style: normal; color: #F6B98C; }
.sg-page .sg-lg-head__lede {
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.7;
  color: rgba(255,255,255,.88);
  margin-bottom: 0;
}
.sg-lg-head .sg-eyebrow { color: #F6B98C; }
.sg-lg-head .sg-eyebrow::before { background: #F6B98C; }

/* Effective date and the registration line, set small under the lede.
   Prefixed with .sg-page: this is a <p>, and page.css's .sg-page p rule is
   (0,1,1), which beats a bare single class and would grey the line out. */
.sg-page .sg-lg-meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  margin-top: clamp(18px, 2.4vw, 26px);
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: .86rem; color: rgba(255,255,255,.8);
}
.sg-page .sg-lg-meta b { color: #fff; font-weight: 600; }

/* ==========================================================================
   LAYOUT — contents beside the document
   ========================================================================== */
.sg-lg-grid {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: start;
}

.sg-lg-toc {
  position: sticky;
  top: calc(var(--sg-header-h) + 20px);
  background: var(--sg-white);
  border: 1px solid var(--sg-cream-2);
  border-radius: var(--sg-radius);
  padding: clamp(18px, 2vw, 24px);
}
.sg-lg-toc h2 {
  font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sg-green);
  margin-bottom: .9em;
}
.sg-lg-toc ol { margin: 0; padding: 0; counter-reset: sglg; }
.sg-lg-toc li { list-style: none; counter-increment: sglg; }
.sg-page .sg-lg-toc a {
  display: block;
  padding: .38rem 0 .38rem 1.7rem;
  position: relative;
  font-size: .9rem; line-height: 1.45;
  color: var(--sg-muted);
  border-left: 2px solid transparent;
}
.sg-lg-toc a::before {
  content: counter(sglg) ".";
  position: absolute; left: .35rem;
  font-family: var(--sg-font-head); font-weight: 600;
  font-size: .8rem; color: var(--sg-green-soft);
}
.sg-page .sg-lg-toc a:hover { color: var(--sg-green-dark); }
.sg-page .sg-lg-toc a.is-here { color: var(--sg-green-dark); font-weight: 600; }
.sg-lg-toc a.is-here::before { color: var(--sg-orange); }

/* ==========================================================================
   THE DOCUMENT
   Long-form prose, so the measure is held down and the rhythm is looser than
   the rest of the site.
   ========================================================================== */
.sg-lg-doc { max-width: 74ch; }

.sg-lg-doc > section { scroll-margin-top: calc(var(--sg-header-h) + 24px); }
.sg-lg-doc > section + section {
  margin-top: clamp(34px, 4.5vw, 56px);
  padding-top: clamp(34px, 4.5vw, 56px);
  border-top: 1px solid var(--sg-cream-2);
}

.sg-page .sg-lg-doc h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  margin-bottom: .7em;
  /* The section number, so a clause can be cited by number in an email. */
  display: flex; align-items: baseline; gap: .6rem;
}
.sg-lg-doc h2 .n {
  font-size: .72em; font-weight: 700;
  color: var(--sg-orange); flex: none;
}
.sg-page .sg-lg-doc h3 {
  font-size: 1.06rem;
  margin-top: 1.8em; margin-bottom: .5em;
  color: var(--sg-ink-2);
}
.sg-page .sg-lg-doc p {
  font-size: 1rem; line-height: 1.78;
  color: var(--sg-muted); margin-bottom: 1.1rem;
}
.sg-page .sg-lg-doc p:last-child { margin-bottom: 0; }
.sg-page .sg-lg-doc strong { color: var(--sg-ink); font-weight: 600; }

/* page.css strips list markers site-wide; documents need them back. */
.sg-lg-doc ul, .sg-lg-doc ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.sg-lg-doc ul li { list-style: disc; }
.sg-lg-doc ol li { list-style: decimal; }
.sg-lg-doc li {
  font-size: 1rem; line-height: 1.72;
  color: var(--sg-muted); margin-bottom: .5rem;
  padding-left: .3rem;
}
.sg-lg-doc li::marker { color: var(--sg-green-soft); }
.sg-lg-doc li:last-child { margin-bottom: 0; }

.sg-page .sg-lg-doc a {
  color: var(--sg-green); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.sg-page .sg-lg-doc a:hover { color: var(--sg-green-dark); }

/* A pulled-out clause — the one line in a section a reader must not miss. */
.sg-lg-note {
  background: var(--sg-green-tint);
  border-left: 4px solid var(--sg-orange);
  border-radius: 0 var(--sg-radius) var(--sg-radius) 0;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 26px);
  margin: 1.4rem 0;
}
.sg-page .sg-lg-note p { color: var(--sg-ink-2); margin-bottom: .6rem; }
.sg-page .sg-lg-note p:last-child { margin-bottom: 0; }

/* ==========================================================================
   TABLE — what we collect, and why
   ========================================================================== */
.sg-lg-tablewrap {
  overflow-x: auto;
  margin: 1.4rem 0;
  border: 1px solid var(--sg-cream-2);
  border-radius: var(--sg-radius);
  background: var(--sg-white);
}
.sg-lg-table { width: 100%; border-collapse: collapse; min-width: 460px; }
.sg-lg-table th, .sg-lg-table td {
  text-align: left; vertical-align: top;
  padding: .85rem 1.1rem;
  font-size: .93rem; line-height: 1.62;
  border-bottom: 1px solid var(--sg-cream-2);
}
.sg-lg-table th {
  font-family: var(--sg-font-head); font-weight: 700;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sg-green); background: var(--sg-green-tint);
  white-space: nowrap;
}
.sg-lg-table td { color: var(--sg-muted); }
.sg-lg-table td:first-child { color: var(--sg-ink); font-weight: 600; }
.sg-lg-table tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   WHO TO WRITE TO — the block that closes every document
   ========================================================================== */
.sg-lg-contact {
  background: var(--sg-white);
  border: 1px solid var(--sg-cream-2);
  border-radius: var(--sg-radius);
  padding: clamp(20px, 2.6vw, 30px);
  margin-top: 1.4rem;
}
.sg-lg-contact address {
  font-style: normal; font-size: .95rem; line-height: 1.7;
  color: var(--sg-muted); margin: 0;
}
.sg-lg-contact address b { color: var(--sg-ink); font-weight: 600; }
.sg-page .sg-lg-contact a { color: var(--sg-green); font-weight: 600; }

/* The other two documents, linked from the foot of each one. */
.sg-lg-siblings { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.sg-page .sg-lg-siblings a {
  font-family: var(--sg-font-head); font-weight: 600; font-size: .88rem;
  color: var(--sg-green); text-decoration: none;
  border: 1.5px solid var(--sg-green-soft); border-radius: 999px;
  padding: .5rem 1.05rem;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.sg-page .sg-lg-siblings a:hover {
  background: var(--sg-green); color: #fff; border-color: var(--sg-green);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .sg-lg-grid { grid-template-columns: 1fr; }
  /* Above the document rather than beside it, and no longer sticky — a box
     pinned to the top of a phone screen eats the reading area. */
  .sg-lg-toc { position: static; top: auto; }
  .sg-lg-doc { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sg-page .sg-lg-siblings a { transition: none; }
}