/* doc.css — shared styling for the prose pages: /about, /contact, /privacy.
 *
 * The tokens are lifted verbatim from plans.html rather than re-picked, so these pages sit in
 * the same light/dark system as the rest of the site. Brass is #8F6716 on light ground: the
 * lighter brass fails AA against --paper, and that regression has been fixed here once before.
 *
 * These three pages share a stylesheet instead of inlining it, because they are one design
 * repeated three times; index.html and plans.html keep their inline CSS since each is a
 * one-off layout. */

:root{
  --paper:#F1F3F1;        /* ledger grey-green, not cream */
  --card:#FBFCFB;
  --ink:#121D2B;          /* deep navy-black */
  --navy:#1B3A5C;
  --brass:#8F6716;        /* deepened for AA on light ground */
  --brass-lit:#C08A2D;
  --muted:#57626D;        /* grey biased toward the navy */
  --rule:#D3D8D3;
  --rule-soft:#E2E6E2;
  --tint:#F6F1E4;
  --shadow:0 1px 2px rgba(18,29,43,.05), 0 8px 24px -16px rgba(18,29,43,.25);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E1620; --card:#141F2C; --ink:#E7ECE9; --navy:#9DBBD8;
    --brass:#D9A63F; --brass-lit:#E8BC5E; --muted:#93A0AC;
    --rule:#26333F; --rule-soft:#1D2833; --tint:#1C2634;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#0E1620; --card:#141F2C; --ink:#E7ECE9; --navy:#9DBBD8;
  --brass:#D9A63F; --brass-lit:#E8BC5E; --muted:#93A0AC;
  --rule:#26333F; --rule-soft:#1D2833; --tint:#1C2634;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.serif{font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif}
.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace;
      font-variant-numeric:tabular-nums}

/* ---- masthead -------------------------------------------------------------
   These pages had no site chrome at all: the brand was one uppercase text line
   above the h1, and the only navigation on the page was in the footer. A reader
   arriving on /bail-pakistan from a search result could not reach the product
   without scrolling past the whole article. Mark, wordmark, and one primary
   action, identical on every page. The mark is inline SVG so it inherits the
   theme and costs no request. */
.masthead{border-bottom:1px solid var(--rule-soft); background:var(--card)}
.masthead-in{
  max-width:820px; margin:0 auto; padding:11px clamp(20px,5vw,40px);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.brandmark{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  margin-right:auto; min-width:0;
}
.brandmark-i{width:25px; height:25px; flex:0 0 auto; border-radius:6px}
.brandmark-t{
  font-family:var(--serif, Georgia, serif); font-size:15px; font-weight:600;
  color:var(--ink); letter-spacing:-.005em; white-space:nowrap;
}
.brandmark:hover .brandmark-t{color:var(--navy)}
.masthead-nav{display:flex; align-items:center; gap:6px 18px; flex-wrap:wrap; font-size:13.5px}
.masthead-nav a{color:var(--muted); text-decoration:none}
.masthead-nav a:hover{color:var(--brass)}
.masthead-nav a:focus-visible,.brandmark:focus-visible{
  outline:2px solid var(--navy); outline-offset:3px; border-radius:3px;
}
.masthead-cta{
  padding:6px 13px; border:1px solid var(--brass); border-radius:3px;
  color:var(--brass) !important; font-weight:600; white-space:nowrap;
}
.masthead-cta:hover{background:var(--brass); color:var(--card) !important}
@media (max-width:430px){
  /* the second half of the wordmark is the first thing to go, not the action */
  .brandmark-t2{display:none}
  .masthead-nav{font-size:13px; gap:6px 13px}
}

.wrap{max-width:820px; margin:0 auto; padding:clamp(32px,6vw,72px) clamp(20px,5vw,40px)}

/* ---- masthead ------------------------------------------------------------- */
.eyebrow{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass); font-weight:600; margin:0;
}
.eyebrow a{color:inherit; text-decoration:none}
.eyebrow a:hover{text-decoration:underline}
h1{
  font-size:clamp(30px,5.2vw,46px); line-height:1.12; margin:14px 0 0;
  letter-spacing:-.02em; text-wrap:balance; font-weight:600;
}
.lede{margin:16px 0 0; max-width:56ch; color:var(--muted); font-size:16.5px}

.corpus{
  display:flex; flex-wrap:wrap; gap:0; margin:28px 0 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.corpus div{flex:1 1 130px; padding:14px 18px 14px 0}
.corpus dt{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.corpus dd{margin:4px 0 0; font-size:21px; font-weight:600; letter-spacing:-.01em}

/* ---- section labels ------------------------------------------------------- */
.section-label{
  margin:clamp(36px,6vw,56px) 0 15px;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 14px;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.section-label .note{
  letter-spacing:0; text-transform:none; font-weight:400;
  font-size:14px; color:var(--brass);
}

/* ---- prose ---------------------------------------------------------------- */
main p{margin:0 0 15px; max-width:68ch}
main p:last-child{margin-bottom:0}
main a{color:var(--brass); text-decoration:underline; text-underline-offset:2px}
main a:hover{color:var(--brass-lit)}
main a:focus-visible{outline:2px solid var(--navy); outline-offset:2px; border-radius:2px}
main strong{font-weight:600}

main ul{margin:0 0 15px; padding-left:0; list-style:none; max-width:68ch}
main ul li{position:relative; padding-left:16px; margin-bottom:8px}
main ul li::before{
  content:""; position:absolute; left:0; top:.62em; width:5px; height:5px;
  border-radius:50%; background:var(--brass-lit); opacity:.85;
}

/* ---- sourcing notice ------------------------------------------------------ */
/* Used on the comparison pages. A claim about a competitor is only worth making if the
   reader can see where it came from and when it was checked, so the provenance gets its
   own block rather than a footnote nobody reads. */
.notice{
  margin:0 0 15px; padding:14px 18px; border:1px solid var(--brass);
  border-left-width:3px; border-radius:3px; background:var(--tint);
  color:var(--ink); font-size:14px; max-width:none;
}
.notice strong{color:var(--brass); font-weight:600}

/* Inline source line under a claim about someone else's product. */
.src{font-size:13px; color:var(--muted); margin:-6px 0 15px}
.src a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
.src a:hover{color:var(--brass)}

/* ---- card grid ------------------------------------------------------------ */
.grid{display:grid; gap:20px 32px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid h3{font-size:15.5px; margin:0 0 4px; font-weight:600}
.grid p{margin:0; font-size:14px; color:var(--muted); line-height:1.55}

/* ---- contact rows --------------------------------------------------------- */
.channels{display:flex; flex-direction:column; gap:12px; margin:0}
.channel{
  background:var(--card); border:1px solid var(--rule); border-radius:3px;
  padding:20px clamp(18px,3vw,26px); box-shadow:var(--shadow);
}
.channel h3{margin:0; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
            color:var(--muted); font-weight:600}
.channel .value{margin:7px 0 0; font-size:20px; font-weight:600; letter-spacing:-.01em;
                word-break:break-word}
.channel .value a{color:var(--ink); text-decoration:none}
.channel .value a:hover{color:var(--brass)}
.channel p.what{margin:8px 0 0; font-size:14px; color:var(--muted); max-width:60ch}

/* ---- ledger table --------------------------------------------------------- */
.ledger{
  width:100%; border-collapse:separate; border-spacing:0; overflow:hidden;
  background:var(--card); border:1px solid var(--rule);
  border-radius:3px; box-shadow:var(--shadow); margin:0 0 15px;
}
.ledger th,.ledger td{
  padding:13px clamp(14px,2.4vw,22px); text-align:right;
  border-bottom:1px solid var(--rule-soft);
}
.ledger th:first-child,.ledger td:first-child{text-align:left}
.ledger thead th{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  color:var(--muted); font-weight:600; border-bottom:1px solid var(--rule);
}
.ledger tbody tr:last-child th,.ledger tbody tr:last-child td{border-bottom:0}
.ledger tbody th{font-size:15.5px; font-weight:600; letter-spacing:-.01em; line-height:1.25}

/* ---- cta ------------------------------------------------------------------ */
.cta{
  margin-top:clamp(34px,5vw,48px); padding:26px clamp(20px,3vw,30px);
  border:1px solid var(--rule); border-radius:3px; background:var(--card);
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px; box-shadow:var(--shadow);
}
.cta div{flex:1 1 260px}
.cta h2{font-size:19px; margin:0 0 5px; font-weight:600; letter-spacing:-.01em}
.cta p{margin:0; color:var(--muted); font-size:14.5px}
.btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  background:var(--brass); color:#fff; border-radius:3px;
  padding:13px 22px; font-size:14.5px; font-weight:600; letter-spacing:.01em;
  transition:filter .18s ease, transform .18s ease;
}
:root[data-theme="dark"] .btn,
:root:not([data-theme="light"]) .btn{color:#121D2B}
.btn:hover{filter:brightness(1.08); transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--navy); outline-offset:3px}
@media (prefers-reduced-motion:reduce){.btn{transition:none} .btn:hover{transform:none}}

/* ---- quoted statute text --------------------------------------------------- */
/* Used on the statute-explainer pages: the retrieved section text, set apart from the
   surrounding prose so a reader can tell primary source from commentary at a glance. */
.statute{
  background:var(--card); border:1px solid var(--rule); border-left:3px solid var(--navy);
  border-radius:3px; padding:18px 22px; margin:0 0 15px; font-size:14.5px;
  white-space:pre-line; max-width:none;
}
.statute cite{display:block; margin-top:12px; font-size:12px; color:var(--muted); font-style:normal}

/* ---- footer ---------------------------------------------------------------
   Was a single flex strip of links. The owner's point 2 asked for a footer that
   is not an afterthought: navigation, the disclaimer, and a way to reach a human.
   The disclaimer is the part that mattered - the criminal-law guides (bail, FIR,
   murder punishment) carried no "not legal advice" line ANYWHERE on the page,
   and those are the pages a worried member of the public actually lands on.
   Same markup on every page, so it reads as one product rather than per-page
   link lists that each happened to omit a different link. */
footer{
  margin-top:56px; padding-top:26px; border-top:1px solid var(--rule);
  color:var(--muted); font-size:13px;
}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--brass)}
footer a:focus-visible{outline:2px solid var(--navy); outline-offset:2px; border-radius:2px}

/* auto-fit, not a fixed five-across: these pages set a ~740px reading measure,
   and five columns at their minimums wanted 789px. Brand takes its own row so
   the nav columns divide the width evenly at every size. */
.sitefoot-top{
  display:grid; gap:24px 32px; align-items:start;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
}
.sitefoot-brand{grid-column:1 / -1}
.sitefoot-name{
  font-family:var(--serif, Georgia, serif); font-size:15px; font-weight:600;
  color:var(--ink); margin:0 0 3px;
}
.sitefoot-by{margin:0; font-size:12.5px}
.sitefoot-nav{display:flex; flex-direction:column; gap:7px}
.sitefoot-h{
  margin:0 0 2px; font-size:11px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink); opacity:.72;
}

/* The disclaimer sits on the tint, not in the link strip: on a page about a
   criminal charge it is content, not fine print. */
.sitefoot-note{
  margin:26px 0 0; padding:14px 16px; background:var(--tint);
  border-left:2px solid var(--brass); border-radius:0 3px 3px 0;
  font-size:12.5px; line-height:1.62; max-width:78ch;
}
.sitefoot-note strong{color:var(--ink)}
.sitefoot-note a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}

.sitefoot-base{
  margin:18px 0 0; padding-top:14px; border-top:1px solid var(--rule-soft);
  display:flex; flex-wrap:wrap; gap:6px 18px; font-size:12px;
}



/* ---- narrow --------------------------------------------------------------- */
@media (max-width:620px){
  /* the table stops being a grid of numbers and becomes one block per row */
  .ledger,.ledger tbody,.ledger tr,.ledger th,.ledger td{display:block; width:100%}
  .ledger thead{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
  .ledger tr{border-bottom:1px solid var(--rule); padding:12px 0}
  .ledger tr:last-child{border-bottom:0}
  .ledger th,.ledger td{
    display:flex; justify-content:flex-end; align-items:baseline;
    border-bottom:0; padding:5px clamp(16px,4vw,22px); text-align:right;
  }
  .ledger tbody th{justify-content:flex-start; padding-bottom:9px}
  .ledger td::before{
    content:attr(data-label); flex:0 0 auto; text-align:left;
    margin-right:auto; padding-right:16px;
    font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--muted); font-weight:600;
  }
}