/* ============================================================
   Kelu — document pages (legal / help / about / faq)
   Dark premium theme. Design tokens, base, shared header and
   footer live in assets/theme.css (loaded first). This file
   only styles the document reading column.
   ============================================================ */

main.doc{
  display:block;
  font-size:17.5px;
  line-height:1.72;
  color:var(--soft);
}
main.doc .wrap{
  max-width:var(--maxw);          /* match the homepage container width */
  padding-top:clamp(2.4rem, 5vw, 4rem);
  padding-bottom:4.5rem;
  counter-reset:sec;
}
/* Keep the reading line-length comfortable inside the wide container,
   left-aligned so the text starts under the header logo (like the homepage). */
main.doc .wrap > *{ max-width:54rem; }
main.doc .wrap > .cards,
main.doc .wrap > .tablewrap,
main.doc .wrap > table{ max-width:62rem; }

/* ---- Page head ------------------------------------------ */
.page-head{ margin-bottom:.4rem; }
.page-head .eyebrow{ margin-bottom:.7rem; }
.page-head h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2rem, 5.5vw, 2.9rem); line-height:1.06;
  letter-spacing:-.03em; margin:.1rem 0 .7rem; color:var(--ink);
}
.docmeta{
  font-family:var(--display); font-size:.78rem; color:var(--muted);
  display:flex; gap:1.4rem; flex-wrap:wrap; margin-bottom:1.2rem;
}
.docmeta b{ color:var(--soft); font-weight:500; }

/* Route-line divider */
.routeline{ display:flex; align-items:center; gap:.6rem; margin:1.6rem 0 2.6rem; height:12px; }
.routeline .node{ width:9px; height:9px; border-radius:50%;
  border:2px solid var(--gold); background:var(--bg); flex:0 0 auto; }
.routeline .node.fill{ background:var(--gold); border-color:var(--gold); }
.routeline .dash{ flex:1 1 auto; height:0; border-top:1.5px dashed rgba(255,255,255,.18); }

/* ---- Review banner -------------------------------------- */
.banner{
  font-size:.84rem; line-height:1.55;
  background:var(--panel); color:var(--muted);
  border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:10px; padding:.8rem 1rem; margin:0 0 1.8rem;
}
.banner b{ font-weight:600; color:var(--ink); }

/* ---- Table of contents ---------------------------------- */
.toc{
  background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:1.1rem 1.25rem; margin:0 0 2.8rem;
}
.toc h2{
  all:unset; display:block; font-family:var(--display); font-weight:600;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.7rem;
}
.toc ol{ margin:0; padding:0; list-style:none; counter-reset:toc;
  columns:2; column-gap:2rem; font-size:.9rem; line-height:1.5; }
.toc li{ counter-increment:toc; margin:.2rem 0; break-inside:avoid; }
.toc a{ color:var(--soft); text-decoration:none; display:flex; gap:.55rem; align-items:baseline; }
.toc a::before{ content:counter(toc, decimal-leading-zero);
  color:var(--gold); font-family:var(--display); font-weight:600;
  font-size:.78rem; font-variant-numeric:tabular-nums; flex:0 0 auto; }
.toc a:hover{ color:var(--gold); }

/* ---- Body content --------------------------------------- */
.page-head + main, main.doc main{ display:block; }

main.doc h2{
  font-family:var(--display); font-weight:600;
  font-size:1.35rem; letter-spacing:-.02em; line-height:1.25;
  margin:3.2rem 0 .5rem; padding-top:.2rem; color:var(--ink);
  scroll-margin-top:5rem;
}
main.doc h2.num{ display:flex; align-items:baseline; gap:.7rem; }
main.doc h2.num::before{
  counter-increment:sec; content:counter(sec, decimal-leading-zero);
  color:var(--gold); font-weight:600; font-size:.95rem;
  font-variant-numeric:tabular-nums; flex:0 0 auto;
}
main.doc h3{
  font-family:var(--display); font-weight:600; font-size:1.05rem;
  letter-spacing:-.01em; margin:1.9rem 0 .35rem; color:var(--ink);
}
main.doc .lede{
  font-size:1.18rem; line-height:1.58; color:var(--ink);
  letter-spacing:-.011em; max-width:40rem;
}
main.doc p{ margin:.6rem 0 1.05rem; }
main.doc a{ color:var(--gold); text-decoration:underline; text-decoration-color:rgba(186,225,102,.35);
   text-underline-offset:3px; text-decoration-thickness:1.5px;
   transition:text-decoration-color .15s, color .15s; }
main.doc a:hover{ color:var(--gold-soft); text-decoration-color:var(--gold); }

main.doc ul, main.doc ol{ margin:.5rem 0 1.15rem; padding-left:1.3rem; }
main.doc li{ margin:.34rem 0; }
main.doc li::marker{ color:var(--gold); }
main.doc ul.tight li, main.doc ol.tight li{ margin:.14rem 0; }

main.doc strong, main.doc b{ font-weight:600; color:var(--ink); }
main.doc hr{ border:0; border-top:1px solid var(--line); margin:2.6rem 0; }
main.doc small, main.doc .fineprint{ font-size:.84rem; color:var(--muted); line-height:1.6; }

/* ---- Callouts ------------------------------------------- */
.callout{
  background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:1rem 1.2rem; margin:1.4rem 0;
  font-size:.95rem; line-height:1.6; color:var(--soft);
}
.callout.warn{ border-left:3px solid var(--gold); }
.callout .t{
  font-family:var(--display); font-weight:600; font-size:.68rem;
  letter-spacing:.15em; text-transform:uppercase; display:block;
  margin-bottom:.4rem; color:var(--gold);
}
.callout p:last-child{ margin-bottom:0; }
.callout p:first-of-type{ margin-top:0; }

/* ---- Placeholder fills ---------------------------------- */
.fill{
  font-family:var(--display); font-size:.8em; font-weight:500;
  letter-spacing:.01em; color:var(--gold);
  background:rgba(186,225,102,.12);
  border:1px dashed rgba(186,225,102,.5); border-radius:5px;
  padding:.08em .45em; white-space:nowrap;
}

/* ---- Tables --------------------------------------------- */
.tablewrap{ overflow-x:auto; margin:1.3rem 0 1.5rem; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:12px; }
table{ border-collapse:collapse; width:100%; min-width:30rem;
  font-size:.88rem; line-height:1.45; }
th, td{ text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--line-2);
  vertical-align:top; color:var(--soft); }
tbody tr:last-child td{ border-bottom:0; }
thead th{
  font-family:var(--display); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:600; background:rgba(255,255,255,.04);
}
tbody tr:nth-child(even){ background:rgba(255,255,255,.025); }

/* ---- FAQ accordion -------------------------------------- */
details.q{ border-bottom:1px solid var(--line); }
details.q summary{
  cursor:pointer; list-style:none; padding:1rem .2rem 1rem 1.9rem;
  position:relative; font-family:var(--display); font-weight:500;
  font-size:1rem; color:var(--ink);
}
details.q summary::-webkit-details-marker{ display:none; }
details.q summary::before{
  content:""; position:absolute; left:.3rem; top:1.18rem; width:11px; height:11px;
  background:
    linear-gradient(var(--gold),var(--gold)) center/11px 1.5px no-repeat,
    linear-gradient(var(--gold),var(--gold)) center/1.5px 11px no-repeat;
  transition:transform .2s ease, opacity .2s ease;
}
details.q[open] summary::before{ transform:rotate(90deg);
  background:linear-gradient(var(--gold),var(--gold)) center/11px 1.5px no-repeat; }
details.q summary:hover{ color:var(--gold); }
details.q .a{ padding:0 .2rem 1.1rem 1.9rem; font-size:.96rem; color:var(--soft); }
details.q .a p:first-child{ margin-top:0; }

/* ---- About-page accents --------------------------------- */
.bigstat{ font-family:var(--display); font-weight:600; letter-spacing:-.03em;
  font-size:clamp(2.2rem,7vw,3.2rem); line-height:1; color:var(--gold); }
.steps{ counter-reset:step; list-style:none; padding:0; margin:1.6rem 0; }
.steps li{ counter-increment:step; position:relative; padding-left:3rem;
  margin:1.3rem 0; min-height:2rem; }
.steps li::before{
  content:counter(step, decimal-leading-zero); position:absolute; left:0; top:-.1rem;
  width:2rem; height:2rem; border-radius:50%;
  background:var(--gold); color:var(--green); font-family:var(--display);
  font-weight:700; font-size:.82rem; display:flex; align-items:center; justify-content:center;
}
.steps li h3{ margin:.15rem 0 .15rem; }

/* ---- Hub (help) cards ----------------------------------- */
.cards{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:.9rem; margin:1.6rem 0 2.2rem;
}
.card{
  display:block; text-decoration:none; color:var(--ink);
  background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:1.2rem 1.25rem;
  transition:border-color .15s ease, transform .15s ease, background .15s ease;
}
.card:hover{ border-color:rgba(186,225,102,.5); transform:translateY(-3px); background:var(--panel-2); }
.card .k{ font-family:var(--display); font-weight:600; font-size:1rem; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; }
.card .k .arr{ color:var(--gold); transition:transform .15s ease; }
.card:hover .k .arr{ transform:translateX(3px); }
.card p{ margin:.4rem 0 0; font-size:.9rem; color:var(--muted); line-height:1.5; }

/* ---- Responsive ----------------------------------------- */
@media (max-width:34rem){
  main.doc{ font-size:16.5px; }
  .toc ol{ columns:1; }
}

/* ---- Print ---------------------------------------------- */
@media print{
  body{ background:#fff; color:#000; }
  .site-header,.nav-panel,.scroll-progress,.site-footer{ display:none; }
  main.doc{ color:#000; }
  h1,h2,h3,.lede,strong,b{ color:#000; }
  a{ color:#000; text-decoration:none; }
  .callout, .card, .toc{ break-inside:avoid; border-color:#ccc; background:#fff; }
  h2{ break-after:avoid; color:#000; }
}