/* ═══════════════════════════════════════════════════════════════
   TradeLog v3 — Legal / doc pages (cinematic)
   Loads AFTER styles.css (reuses its tokens, fonts, bg, brand)
═══════════════════════════════════════════════════════════════ */

/* ── Sticky topbar ── */
.dtop {
  position:sticky; top:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 34px;
  background:rgba(6,11,24,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.dtop-back { display:inline-flex; align-items:center; gap:11px; color:var(--text-2); transition:color .2s ease; }
.dtop-back:hover { color:var(--teal-400); }
.dtop-back .chev { width:16px; height:16px; color:var(--text-4); transition:color .2s ease, transform .2s ease; }
.dtop-back:hover .chev { color:var(--teal-400); transform:translateX(-2px); }
@media (max-width:560px){ .dtop{ padding:13px 20px; } }

/* ── Reading column ── */
.doc { max-width:820px; margin:0 auto; padding:72px 34px 110px; }
@media (max-width:560px){ .doc{ padding:52px 20px 90px; } }

.doc-eyebrow { font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-500); margin-bottom:16px; }
.doc h1 {
  font-family:'DM Serif Display', serif; font-weight:400;
  font-size:clamp(38px,6vw,68px); line-height:1; letter-spacing:-.03em;
  color:var(--text-1); margin-bottom:16px;
}
.doc .meta { font-family:var(--mono); font-size:12.5px; color:var(--text-4); margin-bottom:8px; letter-spacing:.02em; }
.doc .meta span { color:var(--teal-400); }
.doc .intro { font-size:18px; font-weight:300; color:var(--text-2); line-height:1.7; margin:14px 0 44px; }

.doc h2 {
  font-family:'DM Serif Display', serif; font-weight:400;
  font-size:clamp(23px,2.8vw,30px); color:var(--text-1);
  margin-top:56px; margin-bottom:18px; padding-left:16px;
  border-left:2px solid var(--teal-600);
}
.doc h3 { font-size:16px; font-weight:600; color:var(--text-1); margin:28px 0 8px; }
.doc p { margin-bottom:16px; color:var(--text-2); font-weight:300; line-height:1.78; }
.doc strong { color:var(--text-1); font-weight:600; }
.doc em { color:var(--text-2); }

.doc ul { margin:12px 0 18px; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.doc ul li { padding-left:24px; position:relative; color:var(--text-2); font-weight:300; line-height:1.65; }
.doc ul li::before { content:''; position:absolute; left:4px; top:10px; width:6px; height:6px; border-radius:50%; background:var(--teal-500); box-shadow:0 0 8px rgba(20,184,166,.5); }

.doc a { color:var(--teal-400); text-decoration:none; transition:color .2s ease; }
.doc a:hover { color:var(--teal-300); text-decoration:underline; }
.doc code { font-family:var(--mono); font-size:13px; background:var(--surface-3); border-radius:5px; padding:2px 6px; color:var(--teal-300); }

/* ── Callout boxes (SVG icon + text; card-glow language) ── */
.callout { position:relative; overflow:hidden; display:flex; gap:15px; align-items:flex-start; border-radius:16px; padding:22px 24px; margin:30px 0; border:1px solid var(--border); background:linear-gradient(160deg, var(--surface-2), var(--surface-1)); }
.callout svg { flex-shrink:0; width:22px; height:22px; margin-top:2px; }
.callout p { margin:0; color:var(--text-1); font-weight:400; line-height:1.72; }
.callout-info { border-color:rgba(20,184,166,.28); } .callout-info svg { color:var(--teal-400); }
.callout-warn { border-color:rgba(251,191,36,.3); } .callout-warn svg { color:var(--warn); }
.callout-info::after,.callout-warn::after { content:''; position:absolute; inset:0 auto 0 0; width:3px; }
.callout-info::after { background:var(--teal-500); box-shadow:0 0 16px var(--teal-500); }
.callout-warn::after { background:var(--warn); box-shadow:0 0 16px var(--warn); }

/* ── Language blocks ── */
.lang-block { display:none; }
.lang-block.active { display:block; }

/* ── Delete-account flow (namespaced) ── */
.doc .lead { font-size:18px; font-weight:300; color:var(--text-2); line-height:1.7; margin:8px 0 40px; }
.da-steps { display:flex; flex-direction:column; gap:16px; margin-bottom:40px; }
.da-step { position:relative; display:flex; gap:20px; align-items:flex-start; background:linear-gradient(160deg, var(--surface-2), var(--surface-1)); border:1px solid var(--border); border-radius:18px; padding:24px; }
.da-step-num { width:38px; height:38px; flex-shrink:0; border-radius:50%; background:rgba(20,184,166,.12); border:1px solid rgba(20,184,166,.35); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:14px; font-weight:700; color:var(--teal-400); }
.da-step-num svg { width:19px; height:19px; }
.da-step-body { flex:1; min-width:0; }
.da-step-body h3 { margin:3px 0 6px; font-size:16px; font-weight:600; color:var(--text-1); }
.da-step-body p { margin:0; font-size:14px; color:var(--text-3); font-weight:400; line-height:1.65; }
.da-hint { margin-top:10px !important; font-family:var(--mono); font-size:12.5px !important; color:var(--text-4) !important; }

.email-box { background:var(--surface-3); border:1px solid rgba(20,184,166,.28); border-radius:12px; padding:14px 18px; margin:14px 0; font-family:var(--mono); font-size:15px; color:var(--teal-300); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.copy-btn { background:rgba(20,184,166,.1); border:1px solid rgba(20,184,166,.28); border-radius:8px; padding:7px 15px; color:var(--teal-400); font:inherit; font-family:var(--mono); font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; transition:background .2s ease, color .2s ease, border-color .2s ease; }
.copy-btn:hover { background:rgba(20,184,166,.2); }
.copy-btn.copied { color:var(--profit); border-color:rgba(52,211,153,.45); }
.subject-box { background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:14px 18px; margin:12px 0; font-size:14px; color:var(--text-2); }
.subject-label { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-4); margin-bottom:6px; }

.danger-box { position:relative; overflow:hidden; background:linear-gradient(160deg, rgba(248,113,113,.06), var(--surface-1)); border:1px solid rgba(248,113,113,.26); border-radius:16px; padding:22px 24px; margin:32px 0; }
.danger-box::after { content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--loss); box-shadow:0 0 16px var(--loss); }
.danger-box h3 { display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:15px; font-weight:600; color:var(--loss); }
.danger-box h3 svg { width:20px; height:20px; flex-shrink:0; }
.danger-box ul { margin:0; }
.danger-box ul li { color:var(--text-2); }
.danger-box ul li::before { background:var(--loss); box-shadow:0 0 8px rgba(248,113,113,.5); }

.response-note { display:flex; gap:15px; align-items:flex-start; background:linear-gradient(160deg, var(--surface-2), var(--surface-1)); border:1px solid var(--border); border-radius:16px; padding:18px 22px; font-size:14px; color:var(--text-3); line-height:1.65; }
.response-note svg { flex-shrink:0; width:22px; height:22px; margin-top:1px; color:var(--teal-400); }
@media (max-width:560px){
  .da-step{ padding:20px; gap:15px; }
  .email-box span{ overflow-wrap:anywhere; }
  .email-box{ flex-direction:column; align-items:stretch; gap:12px; }
  .email-box .copy-btn{ align-self:flex-start; }
}

/* ── Doc footer ── */
.doc-footer { border-top:1px solid var(--border); max-width:820px; margin:0 auto; padding:30px 34px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; align-items:center; }
@media (max-width:560px){ .doc-footer{ padding:26px 20px; } }
.doc-footer-links { display:flex; gap:24px; flex-wrap:wrap; }
.doc-footer-links a { font-family:var(--mono); font-size:12.5px; color:var(--text-3); transition:color .2s ease; }
.doc-footer-links a:hover { color:var(--teal-400); }