/* ============================================================
   legal.css - GiftM (giftm.in) legal pages design system
   ------------------------------------------------------------
   Self-contained stylesheet for the 4 legal pages on giftm.in:
   terms.html, privacy.html, grievance-policy.html, cookie-policy.html

   Ported verbatim from the gift-store (giftm.ai) marketplace
   .gs-terms2-* design system so both sites share the SAME
   visual identity for legal documents.
   ============================================================ */

/* ---- Base typography & background overrides ----
   Ported verbatim from giftm.ai (marketplace) lines 8298-8317 of
   giftm.css. Three rules together:
   1) body:has() prevents horizontal scrollbar when hero bleeds full-width
   2) .gs-terms2-page sets #fff bg + slate-900 text + system font stack
   3) html:has() enables smooth scroll for TOC anchor clicks

   On giftm.ai the font-family is `inherit` because the marketplace's
   header.php sets body to `-apple-system, BlinkMacSystemFont, "Segoe UI",
   Roboto, sans-serif`. On giftm.in, site.css sets body to DM Sans -
   so we set the EXPLICIT system stack here (and on all children) to
   match the marketplace's resolved font without touching the giftm.in
   body globally. */
body:has(.gs-terms2-page) {
  overflow-x: clip;
  /* Override site.css's tinted blue-grey body bg with pure white on
     legal pages, so the strip between main content end and the dark
     footer doesn't show a grey gap. */
  background: #fff !important;
}
html:has(.gs-terms2-page) {
  scroll-behavior: smooth;
}
.gs-terms2-page {
  background: #fff;
  color: #0f172a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
}
.gs-terms2-page * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* site.css ships a global `h1,h2,h3,h4,h5,h6 { color: var(--c-navy) }`
   rule that forces every heading to dark navy. That rule overrides
   color inheritance for ANY heading inside .gs-terms2-page that does
   not set its own explicit color - making a white-on-dark heading
   (e.g. <h3> inside the dark-purple .gs-terms2-controller-head) blend
   into its background. Restoring `color: inherit` here lets headings
   pick up the color set on their styled wrapper, while still allowing
   per-component rules (like .gs-terms2-sub h3) to set an explicit
   color when they need one. */
.gs-terms2-page h1,
.gs-terms2-page h2,
.gs-terms2-page h3,
.gs-terms2-page h4,
.gs-terms2-page h5,
.gs-terms2-page h6 {
  color: inherit;
}

/* ---- Strip stacking-context fix for giftm.in ----
   On giftm.in the strip's gradient background was rendering as if
   transparent (chips appeared on white) because the .gs-terms2-page
   wrapper has background: #fff and a higher stacking position than
   the strip when the strip uses calc(50% - 50vw) full-bleed margins.
   Adding position: relative + z-index: 1 to the strip puts it in its
   own stacking context above the wrapper's white background, and the
   solid background-color fallback paints even if the linear-gradient
   chain breaks on any browser. Same outcome as the marketplace's
   gm-shell which naturally provides a stacking context there. */
.gs-terms2-strip {
  background-color: #0d1a36;
  background-image: linear-gradient(135deg, #09122a 0%, #15264c 100%);
  position: relative;
  z-index: 1;
  padding: 16px 0;
}

.gs-terms2-hero {
    background: radial-gradient(ellipse 70% 75% at 50% 22%, rgba(60, 75, 130, 0.22) 0%, rgba(30, 45, 90, 0.12) 40%, transparent 75%), linear-gradient(135deg, #09122a 0%, #0d1a36 30%, #121f3f 60%, #15264c 100%);
  color: #fff;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
    padding: 55px 24px 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Side decorative dot patterns - LEFT and RIGHT. Subtle curved
   dot grids that fade away from the corner, mimicking the
   reference design's "wavy dotted curtain" on banner sides. */
.gs-terms2-hero::before,
.gs-terms2-hero::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 320px;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.13) 1px, transparent 1.5px);
  background-size: 14px 14px;
}
.gs-terms2-hero::before {
  left: 0;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 5% 50%, rgba(0, 0, 0, 0.9) 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 90% at 5% 50%, rgba(0, 0, 0, 0.9) 0%, transparent 75%);
}
.gs-terms2-hero::after {
  right: 0;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 95% 50%, rgba(0, 0, 0, 0.9) 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 90% at 95% 50%, rgba(0, 0, 0, 0.9) 0%, transparent 75%);
}
.gs-terms2-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
}
.gs-terms2-hero-brand {
      display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;

}
.gs-terms2-hero-logo {
    max-height: auto;
    max-width: 190px;
    /* dark.png is black-text + gold-bow on transparent. invert(1)
       flips black→white and gold→blue; hue-rotate(180deg) then
       rotates that blue back to the same gold hue. brightness +
       saturate then push the gold toward the brighter amber tone
       used in the giftm.in nav header (instead of the muted gold
       the bare invert/hue-rotate yields). */
    filter: invert(1) hue-rotate(180deg) brightness(1.18) saturate(1.25);
}
.gs-terms2-hero-mark { font-size: 26px; line-height: 1; }
.gs-terms2-hero-wordmark {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
}
.gs-terms2-hero-company {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.82);
    margin: 16px 0 28px;
    letter-spacing: 0.02em;
    font-weight: 400;
}
.gs-terms2-hero-divider {
    display: block;
       width: 190px;
    height: 1px;
    background: #c89a3e;
    margin: 16px auto 26px;
    position: relative;
    border-radius: 0;
}
.gs-terms2-hero-divider::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
        background: #fdb422;
}
.gs-terms2-hero-title {
    font-size: clamp(34px, 4.5vw, 52px);
    font-weight: 600;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 14px;
    letter-spacing: -0.6px;
}
.gs-terms2-hero-sub {
    font-size: 17.6px;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 45px;
    font-weight: 400;
}
.gs-terms2-hero-meta {
    display: inline-flex;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    margin: 0 0 37px;
}
/* PDF reference: each meta item is separated by a thin vertical
   divider line. Implemented as border-right on every card except
   the last, with symmetric horizontal padding for visual balance. */
.gs-terms2-meta-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 0 30px;
  border-right: 2px solid rgba(255, 255, 255, 0.18);
}
.gs-terms2-meta-card:first-child { padding-left: 0; }
.gs-terms2-meta-card:last-child { padding-right: 0; border-right: 0; }
/* PDF reference: icon sits directly on the gradient with NO box/bg
   behind it - just the stroke glyph. */
.gs-terms2-meta-icon {
    width: 30px;
    height: auto;
    border-radius: 0;
    background: transparent;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.65);
    flex: none;
    padding: 0;
}
.gs-terms2-meta-icon svg{
      width: 100%;
    height: auto;
}
.gs-terms2-meta-label {
       display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 3px;
    font-weight: 400;
}
.gs-terms2-meta-value {
     display: block;
    font-size: 15px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0;
}
/* PDF reference: URLs sit on their OWN ROW below the meta cards.
   Using `display: flex` (block-level) instead of inline-flex forces
   the line break - the meta row above is inline-flex which previously
   pulled the URLs onto the same line. */
.gs-terms2-hero-urls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 45px;
    margin: 0;
    font-size: 13px;
}
.gs-terms2-hero-urls a {
      color: rgba(255, 255, 255, 80%);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    font-weight: 400;
    font-size: 15px;
}
.gs-terms2-hero-urls a:hover { color: #fff; }

/* ---- Trust badges strip inside hero ----
   Row of 4 trust badges (Secure Platform / Legal Compliance / Enterprise
   Ready / Data Privacy Protected) appearing below the meta-card row in
   the dark navy hero. Each: gold circular outlined icon + white label.
   Uses space-between + max-width wider than hero-inner so all 4 items
   stay on one row across desktop viewports. */
.gs-terms2-trust-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 10px auto 0;
    max-width: 920px;
}
.gs-terms2-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.gs-terms2-trust-icon {
      width: 47px;
    height: 47px;
    border-radius: 50%;
    border: 1.5px solid rgb(255 170 0 / 55%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #c89a3e;
    flex: none;
}
.gs-terms2-trust-icon svg { 
      width: 27px;
    height: 27px;
    stroke: #ffc041;
 }
.gs-terms2-trust-label {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.01em;
}
@media (max-width: 980px) {
  .gs-terms2-trust-strip { gap: 24px; }
}
@media (max-width: 640px) {
  /* Switch from flex/space-between to a 2x2 grid so the 4 items
     wrap cleanly at half-width each, instead of awkward single-item
     rows caused by varying label widths. */
  .gs-terms2-trust-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    max-width: 320px;
    margin: 28px auto 0;
  }
  .gs-terms2-trust-icon { width: 36px; height: 36px; }
  .gs-terms2-trust-icon svg { width: 17px; height: 17px; }
  .gs-terms2-trust-label { font-size: 13px; }
}
@media (max-width: 380px) {
  /* Very narrow phones: stack to single column rather than cramming
     2 tiny columns. */
  .gs-terms2-trust-strip {
    grid-template-columns: 1fr;
    max-width: 220px;
  }
}

/* ---- ELECTRONIC RECORD NOTICE - PDF reference: soft lavender card
   with a chunkier circular icon badge (filled lavender disc + thick
   purple "i" glyph) on the left, 3-line text on the right. No drop
   shadow on the strip, generous padding. ---- */
.gs-terms2-notice {
max-width: 930px;
    margin: 28px auto 35px;
    padding: 20px 25px;
    background: #FEFBF7;
    border-radius: 10px;
    display: flex;
    gap: 25px;
    box-shadow: 0 0 2px rgb(255 0 0 / 32%);
}
.gs-terms2-notice-icon {
    width: 51px;
    height: 51px;
    border-radius: 50%;
    background: #c89a3e;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.gs-terms2-notice-icon svg {
      width: 35px;
    height: 35px;
    stroke: #fff;
 }
.gs-terms2-notice p {
    margin: 0;
    font-size: 15px;
    color: #363c43;
    line-height: 1.95;
}
.gs-terms2-notice p + p { margin-top: 0; }

/* ---- LAYOUT: sidebar TOC + main content ---- */
.gs-terms2-layout {
  max-width: 1140px;
  margin: 0 auto 60px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* ---- SIDEBAR TOC ---- */
.gs-terms2-toc {
  position: sticky;
  top: 24px;
}
/* Sidebar card - PDF reference: bordered white card with thin
   light-gray border, generous padding, no shadow. Active item gets
   lavender background + purple text (no left-border accent). */
.gs-terms2-toc-card {
    background: #fff;
    border: 1px solid #e9ecf3;
    border-radius: 10px;
    padding: 18px 0px 20px 0px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}
.gs-terms2-toc-card::-webkit-scrollbar { width: 4px; }
.gs-terms2-toc-card::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }
.gs-terms2-toc-head {
      font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 13px;
    padding: 0px 23px;
}
.gs-terms2-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.gs-terms2-toc-list a {
   display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 23px;
    font-size: 14px;
    color: #5d5e60 !important;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    border: 0;
}
.gs-terms2-toc-list a:hover { color: #c89a3e; }
.gs-terms2-toc-list a.is-active {
     background: #fbf2dd;
    font-weight: 600;
    position: relative;
}

.gs-terms2-toc-list a.is-active::before{
      content: " ";
    height: 28px;
    width: 3.7px;
    position: absolute;
    left: 0;
    background: #c89a3e;
    border-radius: 0px 5px 5px 0px;
    top: 50%;
    transform: translatey(-50%);
}
.gs-terms2-toc-num {
  flex: none;
  display: inline-block;
  width: 22px;
  font-size: 12px;
  color: #c89a3e;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.gs-terms2-toc-list a.is-active .gs-terms2-toc-num { color: #c89a3e; }
.gs-terms2-toc-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Need Help card at TOC bottom ----
   Cream-tinted CTA card sitting below the TOC list. Headphones icon
   on the left, two-line label in the middle, chevron arrow on the
   right. Acts as a mailto link to the legal team. */
.gs-terms2-need-help {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 14px 4px;
    padding: 12px 14px;
    background: #fefbf7;
    border-radius: 7px;
    text-decoration: none !important;
    color: inherit !important;
    transition: transform .15s, box-shadow .15s;
    box-shadow: 0 0 2px rgb(255 0 0 / 32%);
}
.gs-terms2-need-help:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(200, 154, 62, 0.14);
}
.gs-terms2-need-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111e3d;
    flex: none;
}
.gs-terms2-need-help-icon svg { 
      width: 23px;
    height: 23px;
 }
.gs-terms2-need-help-text { flex: 1; min-width: 0; line-height: 1.3; }
.gs-terms2-need-help-text strong {
  display: block;
  font-size: 14px;
  color: #0f172a;
  font-weight: 700;
  margin-bottom: 1px;
}
.gs-terms2-need-help-text span {
     display: block;
    font-size: 12px;
    color: #111e3d;
}
.gs-terms2-need-help-arrow {
  color: #94a3b8;
  font-size: 18px;
  font-weight: 400;
  flex: none;
  margin-left: 2px;
}

/* ---- Column divider + scroll-to-read-more ----
   A thin vertical line separating the sticky TOC sidebar from the
   main content column, and a centered "Scroll to read more" pill
   button at the very bottom of the main content. */
.gs-terms2-main {
  border-left: 1px solid #eef0f4;
  padding-left: 28px;
}
.gs-terms2-scroll-more-wrap {
  display: flex;
  justify-content: center;
  margin: 28px 0 8px;
}
.gs-terms2-scroll-more {
      display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 22px;
    background: #fff;
    border: 1px solid #e6e8ee;
    border-radius: 8px;
    font-size: 13.5px;
    color: #111e3d;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
    transition: box-shadow .15s, transform .15s;
    font-family: inherit;
}
.gs-terms2-scroll-more:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.gs-terms2-scroll-more svg {
  width: 14px;
  height: 14px;
  color: #6b7280;
}

/* ---- Mobile responsive for new components ----
   Tighter sizing on tablet/phone for Need Help card, Scroll-more
   button, and the 4-card meta strip. Prevents overflow / text-clipping
   on viewports as narrow as 320px. */
@media (max-width: 980px) {
  /* 4 meta cards: tighter padding per card so they fit in tablet width */
  .gs-terms2-meta-card { padding: 0 14px; }
  /* Trust strip: smaller label */
  .gs-terms2-trust-label { font-size: 13px; }
  .gs-terms2-need-help { margin: 12px 8px 4px; padding: 11px 12px; gap: 10px; }
  .gs-terms2-need-help-icon { width: 34px; height: 34px; }
  .gs-terms2-need-help-icon svg { width: 16px; height: 16px; }
  .gs-terms2-need-help-text strong { font-size: 13.5px; }
  .gs-terms2-need-help-text span { font-size: 11.5px; }
}
@media (max-width: 640px) {
  .gs-terms2-scroll-more { padding: 8px 16px; font-size: 12.5px; }
  .gs-terms2-scroll-more svg { width: 12px; height: 12px; }
  .gs-terms2-scroll-more-wrap { margin: 20px 0 8px; }
  /* Need Help card more compact on phone */
  .gs-terms2-need-help { padding: 10px 12px; gap: 9px; }
  /* Trust strip: tighter gap when wrapping */
  .gs-terms2-trust-strip { gap: 14px 22px; }
  /* TOC card content full width with snug padding */
  .gs-terms2-toc-card { padding: 14px 0 14px 0; }
  .gs-terms2-toc-head { padding: 0 14px; margin-bottom: 8px; }
  .gs-terms2-toc-list a { padding: 9px 12px 9px 18px; font-size: 13.5px; }
}
@media (max-width: 440px) {
  .gs-terms2-trust-strip { gap: 12px 16px; }
  .gs-terms2-trust-label { font-size: 12px; }
  .gs-terms2-need-help-text strong { font-size: 13px; }
}

/* ---- Collapsed state ----
   Initially only the first 2 sections of the main column are shown.
   The Scroll-to-read-more button appears between section 2 and the
   rest. Clicking it (or any TOC item below #s2) removes the
   .is-collapsed class via the inline JS at the bottom of each page,
   which reveals all remaining sections AND hides the button. */
.gs-terms2-main.is-collapsed > .gs-terms2-section:nth-of-type(n+3) {
  display: none;
}
.gs-terms2-main:not(.is-collapsed) > .gs-terms2-scroll-more-wrap {
  display: none;
}

@media (max-width: 980px) {
  .gs-terms2-main { border-left: 0; padding-left: 0; }
}

/* ---- MAIN CONTENT ---- */
.gs-terms2-main { min-width: 0; }

.gs-terms2-section {
  padding: 24px 0 28px;
  border-bottom: 1px solid #eef0f4;
  /* Scroll target lands ~120px from top so the sticky site header
     doesn't cover the section heading. */
  scroll-margin-top: 120px;
}
.gs-terms2-section:first-child { padding-top: 8px; }
.gs-terms2-section:last-child { border-bottom: 0; }

.gs-terms2-section-head { margin-bottom: 16px; }
.gs-terms2-section-tag {
display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 14px;
}
/* PDF reference: rounded-rectangle badge (~28x22, 6px radius) with
   lavender bg and purple text. Sits inline with the uppercase
   category label to its right. */
.gs-terms2-section-num {
     display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 30px;
    border-radius: 7px;
    background: #c89a3e;
    color: white;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.gs-terms2-section-cat {
    font-size: 14px;
    font-weight: 700;
    color: #c89a3e;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.gs-terms2-section-title {
     margin: 0;
    font-size: 29px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.4px;
    line-height: 1.25;
}

/* Section body */
.gs-terms2-section-body {
       font-size: 16px;
    color: #5d5e60;
    line-height: 1.75;
}
.gs-terms2-section-body p {    margin: 0 0 20px;
    font-size: 16px;}
.gs-terms2-section-body p:last-child { margin-bottom: 0; }
.gs-terms2-section-body strong { color: #0f172a; font-weight: 600; }
.gs-terms2-section-body em { font-style: italic; }
.gs-terms2-section-body a {
  color: #c89a3e;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 154, 62, 0.3);
}
.gs-terms2-section-body a:hover { border-bottom-color: #c89a3e; }

/* Sub-sections (e.g. 5.1, 5.2) */
.gs-terms2-sub { margin: 18px 0; }
.gs-terms2-sub h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.01em;
}
.gs-terms2-sub h3::before {
    content: "";
    width: 3px;
    height: 14px;
    background: #c89a3e;
    border-radius: 2px;
    flex: none;
}

/* Definition grid - 2-column key/value layout used for Definitions
   (Section 2) and Miscellaneous (Section 38). Left column carries
   the term in a soft lavender pill-bg; right column carries the
   description in white. PDF reference. */
.gs-terms2-defgrid {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr;
  gap: 0;
  margin: 16px 0;
  border: 1px solid #e6e8ee;
  border-radius: 10px;
  overflow: hidden;
  font-size: 13.5px;
}
.gs-terms2-defterm,
.gs-terms2-defdesc {
  padding: 12px 16px;
  border-bottom: 1px solid #eef0f4;
}
.gs-terms2-defterm:nth-last-of-type(1),
.gs-terms2-defdesc:nth-last-of-type(1) {
  border-bottom: 0;
}
.gs-terms2-defterm {
  background: #fdf6e3;
  color: #0f172a;
  font-weight: 700;
  font-size: 13px;
}
.gs-terms2-defdesc {
  background: #fff;
  color: #475569;
  line-height: 1.65;
}
.gs-terms2-defdesc a {
  color: #c89a3e;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 154, 62, 0.3);
}
.gs-terms2-defdesc a:hover { border-bottom-color: #c89a3e; }
@media (max-width: 640px) {
  .gs-terms2-defgrid { grid-template-columns: 1fr; }
}

/* Lists */
.gs-terms2-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}
.gs-terms2-list li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: 14px;
  
}
.gs-terms2-list li:last-child { border-bottom: none; }
.gs-terms2-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
     background: #454546;
}

/* Tables */
.gs-terms2-table-wrap {
  margin: 14px 0;
  border: 1px solid #e6e8ee;
  border-radius: 12px;
  overflow: hidden;
}
.gs-terms2-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.gs-terms2-table thead {
  background: linear-gradient(135deg, #1f1247 0%, #2a1a55 100%);
  color: #fff;
}
.gs-terms2-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gs-terms2-table tbody td {
  padding: 11px 16px;
  color: #475569;
  border-bottom: 1px solid #eef0f4;
  vertical-align: top;
}
.gs-terms2-table tbody tr:nth-child(even) { background: #fafbff; }
.gs-terms2-table tbody tr:last-child td { border-bottom: 0; }
.gs-terms2-table tbody td:first-child { color: #0f172a; font-weight: 500; }

/* Liability pills inside table */
.gs-terms2-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.gs-terms2-pill--zero    { background: #d4f0e8; color: #0d5c3e; }
.gs-terms2-pill--limited { background: #fef3d3; color: #7a5010; }
.gs-terms2-pill--full    { background: #fce4e4; color: #8b1a1a; }
.gs-terms2-pill--inv     { background: #e8eaf6; color: #3949ab; }

/* Alert boxes */
.gs-terms2-alert {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 16px 0;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  border-left: 3px solid #c89a3e;
}
.gs-terms2-alert strong {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #0f172a;
}
.gs-terms2-alert span { color: #475569; line-height: 1.6; }
.gs-terms2-alert--info  { background: #eef4fb; border-left-color: #2563eb; }
.gs-terms2-alert--info strong { color: #1a3a5c; }
.gs-terms2-alert--warn  { background: #fef7ec; border-left-color: #d97706; }
.gs-terms2-alert--warn strong { color: #5a3e10; }
.gs-terms2-alert--legal { background: #fdf6e3; border-left-color: #c89a3e; }
.gs-terms2-alert--legal strong { color: #7a5018; }

/* Officer card (Section 37) */
.gs-terms2-officer {
  margin: 18px 0;
  padding: 26px;
  border-radius: 14px;
  background: linear-gradient(135deg, #160b3a 0%, #2a1a55 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.gs-terms2-officer::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1.5px solid rgba(200, 154, 62, 0.25);
}
.gs-terms2-officer-name {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
  position: relative;
}
.gs-terms2-officer-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 22px;
  position: relative;
}
.gs-terms2-officer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  position: relative;
}
.gs-terms2-officer-grid .gs-terms2-officer-full { grid-column: 1 / -1; }
.gs-terms2-officer-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
}
.gs-terms2-officer-value {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}
.gs-terms2-officer-value[href] {
  color: #e5c98a;
  border-bottom: 1px solid rgba(196, 181, 253, 0.4);
  text-decoration: none;
  width: fit-content;
}
.gs-terms2-officer-value[href]:hover { color: #fff; border-bottom-color: #fff; }

/* ---- Responsive ----
   3 breakpoints: tablet (≤980), mobile (≤640), small phone (≤440).
   The terms page is a content-heavy legal doc, so the priorities are:
   (1) keep text readable, (2) prevent horizontal scroll, (3) shrink
   decorative chrome before content.
*/

/* TABLET — sidebar collapses to a 2-column grid above content */
@media (max-width: 980px) {
  .gs-terms2-layout {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 14px;
  }
  .gs-terms2-toc { position: static; }
  .gs-terms2-toc-card { max-height: none; }
  .gs-terms2-toc-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 12px; }
  /* Shrink decorative rings so they don't bleed into the centred logo */
  .gs-terms2-hero::before,
  .gs-terms2-hero::after { width: 800px; height: 800px; left: -420px; right: auto; top: -420px; background: repeating-radial-gradient(circle at center, transparent 0 60px, rgba(255, 255, 255, 0.1) 60px 61px); }
  .gs-terms2-hero::after { left: auto; right: -420px; }
  .gs-terms2-hero { padding: 52px 22px 56px; }
  .gs-terms2-hero-meta { gap: 0; }
  .gs-terms2-meta-card { padding: 0 20px; }
}

/* MOBILE — single-column TOC, stacked meta cards, compact hero */
@media (max-width: 640px) {
  .gs-terms2-hero { padding: 40px 16px 44px; }
  .gs-terms2-hero-divider { margin-bottom: 16px; }
  .gs-terms2-hero-sub { margin-bottom: 24px; font-size: 13.5px; }
  /* Meta cards stack vertically - remove vertical separators (they
     would render as awkward horizontal lines between stacked cards). */
  .gs-terms2-hero-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
    text-align: left;
    width: 100%;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }
  .gs-terms2-meta-card {
    padding: 0;
    border-right: 0;
    width: 100%;
  }
  .gs-terms2-hero-urls { gap: 14px; flex-wrap: wrap; }
  /* Decorative rings further reduced for phones */
  .gs-terms2-hero::before,
  .gs-terms2-hero::after { width: 560px; height: 560px; left: -320px; right: auto; top: -320px; background: repeating-radial-gradient(circle at center, transparent 0 44px, rgba(255, 255, 255, 0.1) 44px 45px); }
  .gs-terms2-hero::after { left: auto; right: -320px; }

  /* Notice card compact */
  .gs-terms2-notice {
    margin: 18px auto 24px;
    padding: 16px 18px;
    gap: 14px;
    border-radius: 12px;
  }
  .gs-terms2-notice-icon { width: 38px; height: 38px; }
  .gs-terms2-notice-icon svg { width: 22px; height: 22px; }
  .gs-terms2-notice p { font-size: 13px; line-height: 1.65; }

  /* TOC items one per row */
  .gs-terms2-toc-list { grid-template-columns: 1fr; }
  .gs-terms2-toc-card { padding: 16px 12px 16px 14px; border-radius: 10px; }

  /* Section spacing tighter, title smaller */
  .gs-terms2-layout { padding: 0 14px; margin-bottom: 40px; }
  .gs-terms2-section { padding: 20px 0 24px; }
  .gs-terms2-section-title { font-size: 20px; }
  .gs-terms2-section-body { font-size: 14px; }
  .gs-terms2-sub h3 { font-size: 13.5px; }

  /* Tables: horizontal scroll if needed, smaller text */
  .gs-terms2-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .gs-terms2-table thead th,
  .gs-terms2-table tbody td { padding: 10px 12px; font-size: 12.5px; }

  /* Officer card stacks */
  .gs-terms2-officer { padding: 22px; }
  .gs-terms2-officer-grid { grid-template-columns: 1fr; gap: 14px; }
  .gs-terms2-officer-grid .gs-terms2-officer-full { grid-column: auto; }

  /* Def-grid already collapses to 1-col at 640px via existing rule */
}

/* SMALL PHONE — final tuning at ~440px and below */
@media (max-width: 440px) {
  .gs-terms2-hero { padding: 34px 14px 38px; }
  .gs-terms2-hero-title { font-size: 30px; }
  .gs-terms2-hero-sub { font-size: 13px; }
  .gs-terms2-hero-company { font-size: 11.5px; }
  .gs-terms2-meta-value { font-size: 13px; }
  .gs-terms2-meta-label { font-size: 11px; }
  /* Rings smaller still so they don't overpower the small canvas */
  .gs-terms2-hero::before,
  .gs-terms2-hero::after { width: 420px; height: 420px; left: -250px; right: auto; top: -250px; background: repeating-radial-gradient(circle at center, transparent 0 36px, rgba(255, 255, 255, 0.1) 36px 37px); }
  .gs-terms2-hero::after { left: auto; right: -250px; }

  .gs-terms2-notice { padding: 14px 16px; gap: 12px; }
  .gs-terms2-notice-icon { width: 34px; height: 34px; }
  .gs-terms2-notice-icon svg { width: 20px; height: 20px; }
  .gs-terms2-notice p { font-size: 12.5px; line-height: 1.6; }

  .gs-terms2-section-title { font-size: 18px; }
  .gs-terms2-section-body { font-size: 13.5px; }
  .gs-terms2-section-num { width: 28px; height: 22px; font-size: 11px; }
  .gs-terms2-section-cat { font-size: 11px; }

  .gs-terms2-toc-list a { font-size: 12.5px; padding: 9px 10px 9px 6px; gap: 10px; }
  .gs-terms2-officer { padding: 18px; }
  .gs-terms2-officer-name { font-size: 18px; }
}

/* ============================================================
   ADD-ONS used by Privacy / Grievance / Cookie pages
   ============================================================ */
   Components used by the Privacy / Cookie / Grievance pages.
   Live alongside the Terms & Conditions design system so all
   four legal pages share the same hero, TOC, section, alert,
   table, pill, officer and notice primitives - and these add
   the page-specific blocks (consent strip, rights grid, intl
   cards, escalation ladder cards, cookie category cards, etc.)
   ============================================================ */

/* ---- Strip band that sits directly under the hero ----
   Slightly lighter navy than the hero so it reads as a second
   band (separator pill row). Full-bleed via the negative-margin
   trick the hero uses. */
.gs-terms2-strip {
  background: linear-gradient(135deg, #271c5e 0%, #2e1f63 100%);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 16px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.gs-terms2-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.gs-terms2-strip-label {
      font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
    flex-shrink: 0;
}
.gs-terms2-strip-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.gs-terms2-chip {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 7px;
    padding: 4px 9px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.gs-terms2-chip--solid {
  background: rgba(196, 181, 253, 0.22);
  border-color: rgba(196, 181, 253, 0.45);
  color: #fff;
}
.gs-terms2-stripsep {
  color: rgba(255, 255, 255, 0.35);
  font-size: 14px;
  user-select: none;
}
/* Dot chips (cookie page) */
.gs-terms2-chipdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gs-terms2-chipdot--red   { background: #ff6b6b; }
.gs-terms2-chipdot--green { background: #5ed49a; }

/* ---- Controller card (Privacy S2) ----
   White card with a dark gradient header strip + 2-col body of
   labelled cells, full-width row support via -full modifier. */
.gs-terms2-controller {
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 12px;
  overflow: hidden;
  margin: 16px 0;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.gs-terms2-controller-head {
  background: linear-gradient(135deg, #1f1247 0%, #2a1a55 100%);
  padding: 16px 22px;
  color: #fff;
}
.gs-terms2-controller-head h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 3px;
  letter-spacing: -0.1px;
}
.gs-terms2-controller-head p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}
.gs-terms2-controller-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.gs-terms2-controller-cell {
  padding: 14px 22px;
  border-bottom: 1px solid #eef0f4;
  border-right: 1px solid #eef0f4;
}
.gs-terms2-controller-cell:nth-child(even) { border-right: 0; }
.gs-terms2-controller-cell:nth-last-child(-n+2) { border-bottom: 0; }
.gs-terms2-controller-full {
  grid-column: 1 / -1;
  border-right: 0 !important;
}
.gs-terms2-controller-label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7280;
  font-weight: 600;
  margin-bottom: 4px;
}
.gs-terms2-controller-value {
  font-size: 13.5px;
  color: #0f172a;
  font-weight: 500;
}
.gs-terms2-controller-value a {
  color: #c89a3e;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 154, 62, 0.3);
}
.gs-terms2-controller-value a:hover { border-bottom-color: #c89a3e; }

/* ---- Rights grid (Privacy S9) ----
   2-col card grid of "right" cards (icon + title + desc). -full
   modifier spans both columns for the headline Nomination right. */
.gs-terms2-rightsgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 18px 0;
}
.gs-terms2-rightcard {
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.gs-terms2-rightcard:hover {
  border-color: #e5c98a;
  box-shadow: 0 4px 14px rgba(200, 154, 62, 0.08);
  transform: translateY(-1px);
}
.gs-terms2-rightcard--full { grid-column: 1 / -1; }
.gs-terms2-rightcard-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: #fbf2dd;
  color: #c89a3e;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gs-terms2-rightcard-icon svg { width: 19px; height: 19px; }
.gs-terms2-rightcard-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 3px;
}
.gs-terms2-rightcard-desc {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.55;
}

/* ---- International grid (Privacy S11A) ----
   2-col cards with a small region tag, title, sub, and a paragraph
   describing the regional rights / framework. */
.gs-terms2-intlgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 16px 0;
}
.gs-terms2-intlcard {
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 12px;
  padding: 16px;
}
.gs-terms2-intlcard-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.gs-terms2-intlcard-tag {
  flex-shrink: 0;
  background: #1f1247;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  border-radius: 6px;
  min-width: 38px;
  text-align: center;
}
.gs-terms2-intlcard-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}
.gs-terms2-intlcard-sub {
  font-size: 11.5px;
  color: #6b7280;
}
.gs-terms2-intlcard p {
  font-size: 13px;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

/* ---- Principles grid (Grievance S2) ----
   2-col numbered tile list. */
.gs-terms2-principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 16px 0;
}
.gs-terms2-principle {
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: #475569;
  line-height: 1.55;
}
.gs-terms2-principle-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: #fbf2dd;
  color: #c89a3e;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  margin-top: 1px;
}

/* ---- Escalation level cards (Grievance S4) ----
   Vertical stack of L1/L2/L3/L4 cards. Each card has a coloured
   badge, name, sub-text, and a body region that can contain alerts,
   tables, officer cards, or meta info rows. */
.gs-terms2-leveltree {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 18px 0;
}
.gs-terms2-level {
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 12px;
  overflow: hidden;
  scroll-margin-top: 120px;
}
.gs-terms2-level-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid #eef0f4;
}
.gs-terms2-level-badge {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.gs-terms2-level-badge--l1 { background: #e8f4ff; color: #1a5fa0; }
.gs-terms2-level-badge--l2 { background: #fff3e0; color: #b8540a; }
.gs-terms2-level-badge--l3 { background: #fbf2dd; color: #c89a3e; }
.gs-terms2-level-badge--l4 { background: #fff0f0; color: #c0392b; }
.gs-terms2-level-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
}
.gs-terms2-level-sub {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}
.gs-terms2-level-body {
  padding: 16px 20px;
  font-size: 13.5px;
  color: #475569;
  line-height: 1.7;
}
.gs-terms2-level-body p { margin: 0 0 12px; }
.gs-terms2-level-body p:last-child { margin-bottom: 0; }
.gs-terms2-level-body a {
  color: #c89a3e;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 154, 62, 0.3);
}
.gs-terms2-level-body a:hover { border-bottom-color: #c89a3e; }
.gs-terms2-level-meta {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e6e8ee;
}
.gs-terms2-level-meta > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gs-terms2-level-mlabel {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7280;
  font-weight: 700;
}
.gs-terms2-level-mvalue {
  font-size: 13px;
  color: #0f172a;
  font-weight: 500;
}
a.gs-terms2-level-mvalue {
  color: #c89a3e;
  border-bottom: 1px solid rgba(200, 154, 62, 0.3);
  text-decoration: none;
  width: fit-content;
}
a.gs-terms2-level-mvalue:hover { border-bottom-color: #c89a3e; }

/* ---- Cookie category cards (Cookie S3) ----
   Vertical stack with a coloured icon, name + sub, and an Always
   Active / Can be declined pill on the right of the header. */
.gs-terms2-cookcards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0;
}
.gs-terms2-cookcard {
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .15s, border-color .15s;
}
.gs-terms2-cookcard:hover {
  border-color: #e5c98a;
  box-shadow: 0 4px 14px rgba(200, 154, 62, 0.06);
}
.gs-terms2-cookcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid #eef0f4;
}
.gs-terms2-cookcard-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.gs-terms2-cookcard-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gs-terms2-cookcard-icon svg { width: 19px; height: 19px; }
.gs-terms2-cookcard-icon--essential { background: #fce4e4; color: #8b1a1a; }
.gs-terms2-cookcard-icon--perf      { background: #e8f0ff; color: #1a5fa0; }
.gs-terms2-cookcard-icon--analytics { background: #fff3e0; color: #b8540a; }
.gs-terms2-cookcard-icon--ads       { background: #fbf2dd; color: #c89a3e; }
.gs-terms2-cookcard-icon--social    { background: #e3f7ff; color: #0c6e8a; }
.gs-terms2-cookcard-name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.gs-terms2-cookcard-sub {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}
.gs-terms2-cookcard-body {
  padding: 14px 18px;
  font-size: 13.5px;
  color: #475569;
  line-height: 1.65;
}
.gs-terms2-cookcard-body p { margin: 0 0 10px; }
.gs-terms2-cookcard-body p:last-child { margin-bottom: 0; }
.gs-terms2-cooktools {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.gs-terms2-tooltag {
  background: #fdf6e3;
  color: #a47a26;
  border: 1px solid #f0e3b8;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 500;
}

/* ---- Control grid (Cookie S4) ----
   2-col card grid showing the ways a user can manage cookies. */
.gs-terms2-controlgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 16px 0;
}
.gs-terms2-controlcard {
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.gs-terms2-controlcard-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background: #fbf2dd;
  color: #c89a3e;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gs-terms2-controlcard-icon svg { width: 19px; height: 19px; }
.gs-terms2-controlcard-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}
.gs-terms2-controlcard-desc {
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.55;
}

/* ---- TOC sub-row (Grievance L1..L4 indented under "Escalation Matrix") ---- */
.gs-terms2-toc-list a.is-sub {
  padding-left: 22px;
  font-size: 12.5px;
  color: #6b7280;
}
.gs-terms2-toc-list a.is-sub .gs-terms2-toc-num {
  opacity: 0.6;
  font-size: 11px;
}

/* ============================================================
   RESPONSIVE TUNING FOR ADD-ONS
   ============================================================ */

@media (max-width: 980px) {
  .gs-terms2-strip { padding: 14px 18px; }
  .gs-terms2-rightsgrid,
  .gs-terms2-intlgrid,
  .gs-terms2-principles,
  .gs-terms2-controlgrid { grid-template-columns: 1fr; }
  .gs-terms2-controller-grid { grid-template-columns: 1fr; }
  .gs-terms2-controller-cell { border-right: 0; }
  .gs-terms2-controller-cell:nth-last-child(-n+2) { border-bottom: 1px solid #eef0f4; }
  .gs-terms2-controller-cell:last-child { border-bottom: 0; }
}

@media (max-width: 640px) {
  .gs-terms2-strip { padding: 12px 14px; }
  .gs-terms2-strip-inner { gap: 12px; }
  .gs-terms2-strip-label { font-size: 10px; }
  .gs-terms2-chip { font-size: 11.5px; padding: 4px 11px; }
  .gs-terms2-stripsep { display: none; }

  .gs-terms2-controller-head { padding: 14px 18px; }
  .gs-terms2-controller-head h3 { font-size: 15.5px; }
  .gs-terms2-controller-cell { padding: 12px 18px; }

  .gs-terms2-rightcard,
  .gs-terms2-intlcard,
  .gs-terms2-controlcard,
  .gs-terms2-principle { padding: 14px; }
  .gs-terms2-rightcard-icon,
  .gs-terms2-controlcard-icon,
  .gs-terms2-cookcard-icon { width: 34px; height: 34px; }

  .gs-terms2-level-head { padding: 12px 16px; gap: 12px; }
  .gs-terms2-level-badge { width: 38px; height: 38px; font-size: 12px; }
  .gs-terms2-level-name { font-size: 13.5px; }
  .gs-terms2-level-body { padding: 14px 16px; font-size: 13px; }
  .gs-terms2-level-meta { gap: 16px; }

  .gs-terms2-cookcard-head { padding: 12px 14px; flex-wrap: wrap; gap: 10px; }
  .gs-terms2-cookcard-body { padding: 12px 14px; }
  .gs-terms2-cookcard-name { font-size: 13.5px; }
}

@media (max-width: 440px) {
  .gs-terms2-strip { padding: 10px 12px; }
  .gs-terms2-chip { font-size: 11px; padding: 3px 10px; }
  .gs-terms2-controller-head h3 { font-size: 14.5px; }
  .gs-terms2-rightcard-title,
  .gs-terms2-controlcard-title,
  .gs-terms2-intlcard-title,
  .gs-terms2-cookcard-name { font-size: 13px; }
  .gs-terms2-rightcard-desc,
  .gs-terms2-controlcard-desc { font-size: 12px; }
  .gs-terms2-level-badge { width: 34px; height: 34px; font-size: 11.5px; border-radius: 8px; }
  .gs-terms2-level-name { font-size: 13px; }
  .gs-terms2-level-sub { font-size: 11.5px; }
  .gs-terms2-principles { gap: 8px; }
}