:root {
  --purple: #bd58ec;
  --purple-dark: #341259;
  --green: #00d65a;
  --cream: #fffbea;
  --text: #4f4d54;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--cream); font: 16px/1.65 "Noto Sans", Arial, sans-serif; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; opacity: .25; background: repeating-linear-gradient(160deg, transparent 0 120px, rgba(0,214,90,.08) 121px 124px); }
a { color: var(--purple-dark); }
.doc-header { background: rgba(255,255,255,.96); border-bottom: 1px solid #ddd; }
.doc-header-inner { width: min(1100px, calc(100% - 48px)); min-height: 96px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.doc-header img { width: 270px; display: block; }
.back-link { padding: 12px 20px; border: 2px solid var(--purple); border-radius: 999px; text-decoration: none; font-weight: 700; }
.doc-hero { padding: 60px 24px 110px; text-align: center; color: white; background: linear-gradient(120deg, #35125b, #bd58ec 65%, #20b98b); }
.doc-hero h1 { max-width: 1000px; margin: 0 auto 18px; font: 700 clamp(28px,4vw,48px)/1.2 "Unbounded", sans-serif; }
.doc-hero p { margin: 0; }
.document { width: min(1040px, calc(100% - 32px)); margin: -65px auto 60px; padding: 48px 64px; background: white; border-radius: 24px; box-shadow: 0 12px 38px rgba(51,20,88,.12); }
.notice { padding: 18px 22px; border-left: 5px solid var(--green); border-radius: 10px; background: #f0fff6; }
h2 { margin: 38px 0 12px; color: var(--purple-dark); font: 600 22px/1.35 "Unbounded", sans-serif; }
h3 { margin-top: 25px; color: var(--purple-dark); }
li { margin: 8px 0; }
.meta { color: #777; font-size: 14px; }
.doc-footer { padding: 30px 20px; text-align: center; background: #e8e8e8; font-size: 13px; }

@media (max-width: 760px) {
  body { font-size: 14px; }
  .doc-header-inner { min-height: 72px; width: calc(100% - 20px); }
  .doc-header img { width: 190px; }
  .back-link { padding: 9px 12px; font-size: 11px; }
  .doc-hero { padding: 40px 16px 85px; }
  .document { margin-top: -50px; padding: 28px 18px; border-radius: 16px; }
  h2 { font-size: 18px; }
}