/* ============================================================
   Muntiji Legal Center
   Legal Common Kernel R3
   Shared visual foundation for legal pages
   ============================================================ */

:root{
  --legal-brand:#3159e8;
  --legal-brand-strong:#2749c6;
  --legal-brand-soft:#f3f6ff;

  --legal-ink:#172036;
  --legal-ink-soft:#263248;
  --legal-muted:#667287;

  --legal-line:#dce4ef;
  --legal-line-soft:#e9edf4;

  --legal-surface:#ffffff;
  --legal-bg:#f6f8fc;

  --legal-radius-sm:10px;
  --legal-radius-md:14px;
  --legal-radius-lg:20px;

  --legal-shadow:
    0 18px 48px rgba(28,43,78,.07);
}

html{
  direction:rtl;
}

body{
  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(49,89,232,.06),
      transparent 28rem
    ),
    var(--legal-bg);

  color:var(--legal-ink);

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{
  color:var(--legal-brand);
  text-decoration:none;
}

a:hover{
  color:var(--legal-brand-strong);
}

.brand,
.brand-text,
.brand strong,
.brand-text strong{
  color:var(--legal-ink);
}

.brand-badge,
.brand-icon{
  background:
    linear-gradient(
      145deg,
      var(--legal-brand),
      #4771f2
    );

  color:#fff;

  box-shadow:
    0 9px 22px rgba(49,89,232,.18);
}

.nav a{
  border-radius:10px;
}

.nav a:hover{
  background:var(--legal-brand-soft);
  color:var(--legal-brand);
}

.nav .active{
  background:var(--legal-brand-soft);
  color:var(--legal-brand);
}

.card,
.main-card,
.content-card,
.section,
.hero-main,
.side-card{
  border-color:var(--legal-line);
}

.hero,
.hero-main,
.content-card,
.card,
.main-card,
.side-card,
.section{
  box-shadow:var(--legal-shadow);
}

h1,
h2,
h3,
h4{
  color:var(--legal-ink);
}

p,
li,
.lead,
.subtitle,
.meta,
.side-item,
.brand span,
.brand small,
.brand-text span{
  color:var(--legal-muted);
}

.notice{
  border-radius:var(--legal-radius-md);
}

.warning{
  border-radius:var(--legal-radius-md);
}

.danger{
  border-radius:var(--legal-radius-md);
}

.footer{
  color:var(--legal-muted);
}

.footer a,
.footer-links a{
  color:var(--legal-ink-soft);
}

.footer a:hover,
.footer-links a:hover{
  color:var(--legal-brand);
}

@media(max-width:768px){
  body{
    background:var(--legal-bg);
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;
  }
}

/* LEGAL_COMMON_R3 */


/* ============================================================
   Muntiji Legal Center
   LEGAL R3.1 — Visual Unification
   Common presentation layer across all legal documents
   ============================================================ */

/* ---------- Global legal canvas ---------- */

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(
      circle at 88% -8%,
      rgba(49,89,232,.075),
      transparent 34rem
    ),
    #f7f9fc !important;
  color:var(--legal-ink);
}

.page,
.container{
  box-sizing:border-box;
}

/* ---------- Unified content width ---------- */

body > .page,
body > main.page,
body > main.container,
.page > .container{
  width:min(1120px, calc(100% - 40px));
  max-width:1120px;
  margin-inline:auto;
}

/* acceptable/disclaimer inner containers must not shrink twice */

.page > .container{
  width:100%;
}

/* ---------- Unified header shell ---------- */

.topbar,
.site-header{
  width:min(1120px, calc(100% - 40px));
  max-width:1120px;
  margin:28px auto 24px !important;
  padding:0 !important;

  background:rgba(255,255,255,.92) !important;
  border:1px solid var(--legal-line) !important;
  border-radius:20px !important;

  box-shadow:
    0 12px 36px rgba(23,32,54,.055) !important;

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.topbar-inner,
.site-header .inner,
.topbar{
  box-sizing:border-box;
}

.topbar-inner,
.site-header .inner{
  min-height:76px;
  padding:14px 18px !important;
}

/* privacy topbar itself contains children */

main.page > .topbar,
.page > .topbar{
  min-height:76px;
  padding:14px 18px !important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}

/* ---------- Brand ---------- */

.brand{
  min-width:0;
}

.brand strong,
.brand-text strong{
  color:var(--legal-ink) !important;
  font-weight:800 !important;
}

.brand span,
.brand small,
.brand-text span{
  color:var(--legal-muted) !important;
}

.brand-badge,
.brand-icon{
  flex:0 0 auto;
  border-radius:13px !important;
}

/* ---------- Navigation ---------- */

.nav{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px !important;
}

.nav a{
  min-height:38px;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:8px 13px !important;

  border:1px solid transparent !important;
  border-radius:10px !important;

  color:var(--legal-ink-soft) !important;
  font-weight:700;

  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease;
}

.nav a:hover{
  background:#f5f7ff !important;
  border-color:#dce4ff !important;
  color:var(--legal-brand) !important;
}

.nav a.active,
.nav .active{
  background:#eef3ff !important;
  border-color:#d6e0ff !important;
  color:var(--legal-brand) !important;
}

/* ---------- Main spacing ---------- */

main.page,
main.container{
  padding-top:0 !important;
  padding-bottom:44px !important;
}

/* ---------- Unified two-column hero/layout ---------- */

.hero,
.hero-grid,
.layout{
  gap:20px !important;
}

/* Privacy + Terms hero */
.hero,
.hero-grid{
  align-items:stretch;
}

/* acceptable-use / disclaimer */
.layout{
  align-items:start;
}

/* ---------- White primary surfaces ---------- */

.hero-main,
.main-card,
.content-card,
.content,
.section,
.card:not(.side-card){
  border-color:var(--legal-line) !important;
}

/* ---------- Hero primary card ---------- */

.hero-main,
.main-card{
  background:#fff !important;
  border:1px solid var(--legal-line) !important;
  border-radius:22px !important;

  box-shadow:
    0 16px 42px rgba(23,32,54,.055) !important;
}

/* acceptable-use hero lives inside main card/container */
.layout .hero{
  border-color:var(--legal-line) !important;
}

/* ---------- Typography ---------- */

.hero-main h1,
.hero h1{
  color:#121b30 !important;
  letter-spacing:-.025em;
}

.hero-main .lead,
.hero .lead,
.hero p,
.subtitle{
  color:#59667b !important;
  line-height:1.9 !important;
}

/* ---------- BLUE INFORMATION PANELS ----------
   Critical contrast correction.
   Previous page CSS colored text with muted gray.
   Everything inside the blue panels receives an explicit
   accessible foreground.
   --------------------------------------------------------- */

.hero-side,
.side-card{
  background:
    linear-gradient(
      145deg,
      #315fe9 0%,
      #3268ef 100%
    ) !important;

  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:22px !important;

  box-shadow:
    0 18px 42px rgba(49,89,232,.17) !important;

  color:#fff !important;
}

/* Decorative circle stays subtle */

.hero-side::before,
.hero-side:before{
  opacity:.12 !important;
}

/* All ordinary text in blue surfaces */

.hero-side,
.hero-side h1,
.hero-side h2,
.hero-side h3,
.hero-side h4,
.hero-side p,
.hero-side li,
.hero-side span,
.hero-side strong,
.hero-side .side-title,
.hero-side .side-item,

.side-card,
.side-card h1,
.side-card h2,
.side-card h3,
.side-card h4,
.side-card p,
.side-card li,
.side-card span,
.side-card strong,
.side-card .side-title,
.side-card .side-item{
  color:#fff !important;
}

/* Secondary descriptions remain visible but softer */

.hero-side p,
.hero-side li,
.side-card p,
.side-card li{
  color:rgba(255,255,255,.90) !important;
}

/* Individual principle rows */

.hero-side .side-item,
.side-card .side-item{
  background:rgba(255,255,255,.105) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:14px !important;

  color:#fff !important;

  box-shadow:none !important;
}

/* ---------- Content cards ---------- */

.content-card,
.content{
  background:#fff !important;
  border:1px solid var(--legal-line) !important;
  border-radius:22px !important;

  box-shadow:
    0 14px 38px rgba(23,32,54,.045) !important;
}

/* Terms uses individual sections */

main.container > .section{
  background:#fff !important;
  border:1px solid var(--legal-line) !important;
  border-radius:18px !important;

  box-shadow:
    0 10px 30px rgba(23,32,54,.04) !important;
}

/* Sections nested inside a content card should not look like
   floating cards inside another card. */

.content-card > .section,
.main-card .section,
.content > .section{
  box-shadow:none !important;
}

/* ---------- Section typography ---------- */

.section h2,
.content h2,
.content-card h2{
  color:#172036 !important;
}

.section p,
.section li,
.content p,
.content li,
.content-card p,
.content-card li{
  color:#59667b !important;
  line-height:1.9 !important;
}

/* ---------- Notices ---------- */

.notice{
  background:#f7f9ff !important;
  border-color:#dbe4ff !important;
  color:#3159d8 !important;
}

/* ---------- Footer ---------- */

.footer{
  color:#7a8597 !important;
}

.footer a,
.footer-links a{
  color:#4d5a70 !important;
}

.footer a:hover,
.footer-links a:hover{
  color:var(--legal-brand) !important;
}

/* ---------- Tablet ---------- */

@media(max-width:980px){

  .topbar,
  .site-header{
    width:min(100% - 28px, 1120px);
  }

  body > .page,
  body > main.page,
  body > main.container,
  .page > .container{
    width:min(100% - 28px, 1120px);
  }

  .hero-grid,
  .hero,
  .layout{
    gap:16px !important;
  }
}

/* ---------- Mobile ---------- */

@media(max-width:768px){

  body{
    background:#f7f9fc !important;
  }

  .topbar,
  .site-header{
    width:calc(100% - 20px);
    margin:10px auto 16px !important;
    border-radius:16px !important;
  }

  .topbar-inner,
  .site-header .inner,
  main.page > .topbar,
  .page > .topbar{
    min-height:auto;
    padding:13px !important;
    flex-direction:column;
    align-items:stretch !important;
  }

  .brand{
    justify-content:flex-start !important;
  }

  .nav{
    width:100%;
    gap:6px !important;
  }

  .nav a{
    flex:1 1 auto;
    min-height:38px;
    padding:7px 10px !important;
    font-size:.88rem;
  }

  body > .page,
  body > main.page,
  body > main.container,
  .page > .container{
    width:calc(100% - 20px);
  }

  .hero,
  .hero-grid,
  .layout{
    grid-template-columns:1fr !important;
  }

  .hero-main,
  .main-card,
  .content-card,
  .content,
  .side-card,
  .hero-side,
  main.container > .section{
    border-radius:16px !important;
  }

  main.page,
  main.container{
    padding-bottom:24px !important;
  }
}

/* ---------- Accessibility ---------- */

@media(prefers-reduced-motion:reduce){
  .nav a{
    transition:none !important;
  }
}

/* LEGAL_COMMON_R31 */