.doc { max-width: 46rem; margin: 0 auto; padding: 32px 24px 48px; }
.doc h1 { font-family: var(--font-read); font-size: 2.3rem; line-height: 1.1; margin: 0 0 8px; }
.doc .lede { font-size: 1.08rem; color: var(--ink-soft); margin: 0 0 22px; }
.doc h2 { font-family: var(--font-read); font-size: 1.45rem; margin: 34px 0 10px; padding-top: 14px; border-top: 1px solid var(--mist); }
.doc h3 { font-size: 1.05rem; margin: 20px 0 6px; }
.doc p, .doc li { line-height: 1.65; }
.doc ul, .doc ol { padding-left: 22px; }
.doc .toc { background: #fff; border: 1px solid var(--mist); border-radius: var(--radius); padding: 14px 20px; }
.doc .toc ol { margin: 6px 0 0; }
.doc table { width: 100%; border-collapse: collapse; background: #fff; font-size: 0.93rem; margin: 10px 0; }
.doc th, .doc td { border: 1px solid var(--mist); padding: 8px 10px; text-align: left; vertical-align: top; }
.doc th { background: var(--pearl); }
.doc .tip { background: #FBF4E4; border-left: 4px solid var(--gold); padding: 10px 14px; border-radius: 6px; }
.doc .ar-block { direction: rtl; text-align: right; font-family: var(--font-ar); font-size: 1.12rem; }
.doc .ar-block h2, .doc .ar-block h3 { font-family: var(--font-ar); }
.doc .ar-block ul { padding-left: 0; padding-right: 22px; }
.doc .updated { font-size: 0.88rem; color: var(--ink-soft); }
.table-scroll { overflow-x: auto; }

/* =====================================================================
   P23: the guide and privacy pages as a gilded folio on navy
   ===================================================================== */
.doc-page {
  --folio: #FFFDF8; --folio-2: #FBF6EA;
  --gilt: rgba(201, 161, 74, 0.55); --gilt-soft: rgba(201, 161, 74, 0.28);
  background: linear-gradient(180deg, #0B1F3A 0, #0A1C36 800px, #07152A 100%); min-height: 100vh;
}
.doc-page .footer { background: transparent; }
.doc-page .doc {
  max-width: 50rem; margin: 30px auto 44px; width: calc(100% - 40px); box-sizing: border-box;
  padding: 58px clamp(24px, 5vw, 70px) 54px; border-radius: 26px;
  background: radial-gradient(ellipse 70% 18% at 50% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, var(--folio) 0%, var(--folio-2) 100%);
  box-shadow: 0 0 0 1px var(--gilt), inset 0 0 0 10px var(--folio), inset 0 0 0 11px var(--gilt-soft), inset 0 0 0 15px var(--folio), inset 0 0 0 16px rgba(201, 161, 74, 0.14), 0 40px 90px rgba(0, 0, 0, 0.45);
}
.doc-page .doc h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 5vw, 3.4rem); line-height: 1.02; }
.doc-page .doc h1::after {
  content: ""; display: block; width: 200px; height: 12px; margin: 16px 0 6px;
  background:
    radial-gradient(circle at 6px 6px, #FFFFFF 0, #F1E8D4 2.5px, #C9B891 5px, rgba(201, 161, 74, 0.7) 5.6px, rgba(0, 0, 0, 0) 6.2px) no-repeat,
    linear-gradient(90deg, #C9A14A, rgba(201, 161, 74, 0)) 12px 50% / calc(100% - 12px) 1px no-repeat;
}
.doc-page .doc .lede { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.4; color: var(--navy-2); }
.doc-page .doc h2 { font-family: var(--font-display); font-weight: 600; font-size: 2rem; line-height: 1.1; margin-top: 46px; padding-top: 24px; border-top: 0; position: relative; }
.doc-page .doc h2::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, #C9A14A, rgba(201, 161, 74, 0.25) 60%, rgba(201, 161, 74, 0)); }
.doc-page .doc h3 { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.3rem; color: var(--gold-deep); }
.doc-page .doc p, .doc-page .doc li { font-size: 1.02rem; line-height: 1.72; }
.doc-page .doc li::marker { color: var(--gold); }
.doc-page .doc .toc { border: 0; border-radius: 18px; padding: 20px 26px; background: #fff; box-shadow: 0 0 0 1px var(--gilt-soft), inset 0 0 0 6px #fff, inset 0 0 0 7px rgba(201, 161, 74, 0.12), 0 10px 24px rgba(11, 31, 58, 0.06); }
.doc-page .doc .toc a { color: var(--navy); text-decoration-color: rgba(201, 161, 74, 0.6); text-underline-offset: 3px; }
.doc-page .doc table { border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--gilt-soft); }
.doc-page .doc th, .doc-page .doc td { border: 0; border-bottom: 1px solid #F1E9D8; }
.doc-page .doc th { background: #F8F1E1; color: var(--gold-deep); font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.02rem; }
.doc-page .doc .tip { border-left: 0; border-radius: 14px; padding: 14px 18px; background: #FBF4E4; box-shadow: inset 3px 0 0 var(--gold); }
.doc-page .doc .updated { font-family: var(--font-display); font-style: italic; font-size: 1rem; }
.doc-page .doc .ar-block h2, .doc-page .doc .ar-block h3 { font-family: var(--font-ar); font-style: normal; }
.doc-page .doc .ar-block h2::before { background: linear-gradient(270deg, #C9A14A, rgba(201, 161, 74, 0.25) 60%, rgba(201, 161, 74, 0)); }
@media (max-width: 640px) {
  .doc-page .doc { width: calc(100% - 16px); margin: 12px auto 28px; padding: 38px 20px 32px; border-radius: 20px;
    box-shadow: 0 0 0 1px var(--gilt), inset 0 0 0 6px var(--folio), inset 0 0 0 7px var(--gilt-soft), 0 24px 50px rgba(0, 0, 0, 0.4); }
  .doc-page .doc h2 { font-size: 1.65rem; }
}