/* ============================================================
   WAGate.app — inner pages (/legal, /developers, /integrations)
   on the 2026-09 "slab" system.

   These pages keep their lg-/dev-/int- markup and stylesheets
   (legal.css, dev.css, integrations.css); this file re-skins them:
   the core tokens are re-pointed at the landing palette, headings go
   to Rubik, cards get the landing's radius and soft shadows, and the
   integration icons become the green blob badges. The page title now
   lives in the green .wg-pageband (wg.css). Load it LAST.
   ============================================================ */

.lg-body {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F6F8F5;
  --inset: #F9FBF8;
  --border: #E4E8E2;
  --border-strong: #D5DAD3;
  --border-stronger: #C6CCC3;
  --text: #202328;
  --text-muted: #5E6470;
  --text-faint: #6B717C;
  --accent: #35803A;
  --accent-text: #2A7D40;
  --accent-press: #2F5B33;
  --accent-tint: #EEF8EE;
  --accent-tint-2: #CFE3CF;
  --text-on-accent: #FFFFFF;
  --font: 'Manrope', 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #fff;
  font-family: var(--font);
  color: var(--text);
}
.lg-body .wg-pageband h1 { font-size: clamp(28px, 7.6vw, 48px); max-width: 900px; }

/* ---- Reading column --------------------------------------------- */
.lg-body .lg-container { padding: 36px 20px 72px; }
.lg-body .int-container { max-width: 880px; }
.lg-body .dev-container { max-width: 860px; }
.lg-doc { font-size: 16.5px; line-height: 1.75; }
.lg-doc h2 {
  font-family: var(--wg-display); font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -.015em;
  margin: 44px 0 12px; scroll-margin-top: calc(var(--wg-head-h) + 16px);
}
.lg-doc h2:first-child { margin-top: 0; }
.lg-doc h3 { font-family: var(--wg-display); font-size: 18px; font-weight: 600; }
.lg-doc a { color: var(--accent-text); text-underline-offset: 3px; }
.lg-doc table { border-radius: 14px; overflow: hidden; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); }
.lg-doc th, .lg-doc td { border: 0; border-bottom: 1px solid var(--border); }
.lg-doc tr:last-child td { border-bottom: 0; }
.lg-doc th { background: var(--surface-2); font-family: var(--wg-display); font-weight: 600; }
/* Wide tables scroll inside their own box instead of widening the page. */
@media (max-width: 700px) {
  .lg-doc table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.lg-note { border-radius: 18px; border: 0; background: var(--accent-tint); padding: 18px 20px; }
.lg-toc { border-radius: 20px; box-shadow: none; background: var(--surface-2); border: 1px solid var(--border); }
.lg-toc-t { font-family: var(--wg-mono); font-size: 11.5px; letter-spacing: .12em; color: var(--text); }
[dir="rtl"] .lg-toc-t { letter-spacing: 0; }
@media (max-width: 600px) { .lg-toc ol { columns: 1; } }

/* ---- Cards (legal hub, integrations hub, related, how-to cards) ---- */
.lg-hub-card, .int-hub-card, .int-rel-card, .int-card {
  border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 24px 60px -30px rgba(32, 35, 40, .28), 0 2px 8px rgba(32, 35, 40, .05);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.lg-hub-card:hover, .int-hub-card:hover, .int-rel-card:hover {
  transform: translateY(-4px); border-color: #BFDDBF;
  box-shadow: 0 30px 70px -30px rgba(32, 35, 40, .35), 0 2px 8px rgba(32, 35, 40, .05);
}
.lg-hub-card-t, .int-hub-name, .int-rel-name, .int-card-t, .int-step-t {
  font-family: var(--wg-display); font-weight: 600; letter-spacing: -.005em;
}
.lg-hub-card-t { font-size: 18px; }
.int-hub-name { font-size: 19px; }
/* Integration icons → the landing's green blob badges (the per-integration
   inline colours are overridden on purpose). */
.int-hub-ic, .int-rel-ic {
  background: linear-gradient(135deg, var(--wg-brand-aa-lg), var(--wg-brand-aa-dark)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 62% 38% 54% 46% / 52% 60% 40% 48% !important;
  box-shadow: 0 14px 26px -14px rgba(47, 91, 51, .85) !important;
}
.int-hub-cat, .int-rel-cat { color: var(--wg-green-text); }
.int-hub-more {
  font-family: var(--wg-display); font-weight: 600; color: var(--wg-green-text);
}

/* How-to steps: numbered circles in the brand gradient. */
.int-steps > li::before {
  background: linear-gradient(90deg, var(--wg-brand-aa), var(--wg-brand-aa-dark)) !important;
  color: #fff !important;
  font-family: var(--wg-display);
}

/* FAQ on integration pages: rounded boxes like the landing accordion. */
.int-faq { display: flex; flex-direction: column; gap: 10px; }
.int-faq-item, .int-faq-item:first-child { border: 1px solid var(--border); border-radius: 18px; background: #fff; overflow: hidden; }
.int-faq-item[open] { border-color: #BFDDBF; background: #FBFDFA; }
.int-faq-q { padding: 16px 18px; font-family: var(--wg-display); font-weight: 500; font-size: 16.5px; min-height: 60px; }
.int-faq-a { padding: 0 18px 18px; }

/* Closing CTA: the dark green card from the blog article. */
.int-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1F3A24 0%, #2F5B33 60%, #3A693A 100%) !important;
  border: 0 !important; border-radius: 26px !important; color: #fff;
}
.int-cta::before {
  content: ""; position: absolute; width: 280px; height: 280px; inset-inline-end: -80px; top: -110px;
  border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .12); pointer-events: none;
}
.int-cta > * { position: relative; }
.int-cta-h { font-family: var(--wg-display); font-weight: 700; color: #fff; }
.int-cta-p { color: var(--wg-on-dark); }
.int-btn { min-height: 48px; font-family: var(--wg-display); font-weight: 600; }
.int-btn--primary { background: #fff !important; color: var(--wg-brand-aa-dark) !important; }
.int-btn--primary:hover { background: #fff !important; transform: translateY(-2px); }
.int-btn--ghost { background: transparent !important; color: #fff !important; border: 1.5px solid rgba(255, 255, 255, .55) !important; }
.int-btn--ghost:hover { background: rgba(255, 255, 255, .12) !important; }
.int-cta :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---- Developers ------------------------------------------------- */
.dev-subnav { flex-wrap: wrap; margin-bottom: 28px; padding: 5px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); }
.dev-tab { min-height: 42px; display: inline-flex; align-items: center; font-family: var(--wg-display); font-weight: 600; }
.dev-tab.on { background: #fff; color: var(--text); box-shadow: 0 6px 16px -8px rgba(32, 35, 40, .35); }
.dev-code { border-radius: 18px; }
.dev-ep { border-radius: 16px; }

@media (min-width: 601px) {
  .lg-body .lg-container { padding: 56px 32px 96px; }
  .lg-doc { font-size: 17px; }
  .lg-doc h2 { font-size: 26px; }
}
@media (min-width: 1024px) {
  .lg-body .lg-container { padding: 72px 40px 110px; }
}

/* "Related integrations" heading is an inline-styled h2.lg-doc. */
h2.lg-doc { font-family: var(--wg-display); letter-spacing: -.01em; }