/* content.css — shared styles for Drishti SEO content pages.
   Self-contained; tokens mirror the landing (public/index.html :root). Light + dark. */
:root {
  --paper:#faf8f3; --surface:#ffffff; --ink:#1a1a1a; --ink-2:#3a3a3a; --muted:#6b6862;
  --border:#e8e3d8; --saffron:#b04e0a; --positive:#2d5a3f; --negative:#8b2f2f;
  --delta-brand:#FE6C02; --delta-brand-hover:#E76202;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,'Roboto Mono',monospace;
  --measure:68ch; --radius:8px;
}
:root[data-theme=dark]{
  --paper:#0d1216; --surface:#161b20; --ink:#e8e6e3; --ink-2:#b6b3ae; --muted:#9b988f;
  --border:rgba(255,255,255,.12); --saffron:#f59e50; --positive:#6ac489; --negative:#e86666;
  --delta-brand:#FE8935; --delta-brand-hover:#FE6C02;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --paper:#0d1216; --surface:#161b20; --ink:#e8e6e3; --ink-2:#b6b3ae; --muted:#9b988f;
    --border:rgba(255,255,255,.12); --saffron:#f59e50; --positive:#6ac489; --negative:#e86666;
    --delta-brand:#FE8935; --delta-brand-hover:#FE6C02;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--measure); margin:0 auto; padding:32px 20px 64px}
a{color:var(--saffron); text-decoration:underline; text-underline-offset:2px}
a:hover{color:var(--delta-brand-hover)}
:focus-visible{outline:2px solid var(--saffron); outline-offset:2px; border-radius:2px}

/* header / breadcrumb */
.site-head{display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:var(--measure); margin:0 auto; padding:16px 20px; border-bottom:1px solid var(--border)}
.site-head .brand{font-family:var(--sans); font-weight:700; font-size:18px; color:var(--ink); text-decoration:none}
.site-head .brand span{color:var(--saffron)}
.crumb{font-family:var(--mono); font-size:12px; color:var(--muted); margin:0 0 20px}
.crumb a{color:var(--muted)}

h1{font-family:var(--sans); font-size:32px; line-height:1.18; letter-spacing:-.01em; margin:.2em 0 .5em}
h2{font-family:var(--sans); font-size:23px; line-height:1.25; margin:1.8em 0 .5em}
h3{font-family:var(--sans); font-size:19px; margin:1.4em 0 .4em}
p{margin:0 0 1em}
ul,ol{padding-left:1.3em}
li{margin:.3em 0}
strong{color:var(--ink)}

/* answer capsule — the first-screen answer */
.capsule{background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px 20px; margin:0 0 24px; font-size:18px}
.capsule p:last-child{margin-bottom:0}

/* live-now client box (progressively enhanced) */
.live-now{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px; margin:24px 0}
.live-now .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:6px}
.live-now .dot{width:7px; height:7px; border-radius:50%; background:var(--positive); display:inline-block}
.live-now .body{font-family:var(--sans); font-size:16px; margin-top:8px}
.live-now .muted{color:var(--muted); font-size:13px}

/* stat strip */
.stats{display:flex; flex-wrap:wrap; gap:14px; margin:20px 0; padding:0; list-style:none}
.stats li{flex:1 1 120px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px}
.stats .n{font-family:var(--mono); font-size:24px; color:var(--ink); font-weight:600}
.stats .k{font-family:var(--sans); font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}

/* track-record table */
.track{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:13px; margin:8px 0 4px}
.track th{text-align:left; font-weight:600; color:var(--muted); border-bottom:2px solid var(--border); padding:8px 10px; white-space:nowrap}
.track td{padding:6px 10px; border-bottom:1px solid var(--border); white-space:nowrap}
.track .o{text-transform:capitalize; font-weight:600}
.track tr.win .o{color:var(--positive)}
.track tr.loss .o{color:var(--negative)}

/* faq */
.faq h3{font-size:18px; margin-bottom:.2em}
.faq p{color:var(--ink-2)}

/* CTA */
.cta{display:inline-block; background:var(--delta-brand); color:#fff; font-family:var(--sans); font-weight:600;
  text-decoration:none; padding:11px 20px; border-radius:6px; margin:6px 10px 6px 0}
.cta:hover{background:var(--delta-brand-hover); color:#fff}
.cta--ghost{background:transparent; color:var(--saffron); border:1px solid var(--border)}

/* disclaimer + footer */
.disclaimer{font-family:var(--sans); font-size:13px; color:var(--muted); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px; margin:32px 0 0}
.page-foot{border-top:1px solid var(--border); margin-top:40px; padding-top:20px;
  font-family:var(--sans); font-size:14px; color:var(--muted)}
.page-foot a{color:var(--muted)}
.related{font-family:var(--sans); font-size:15px}
.related a{display:inline-block; margin:0 14px 8px 0}
@media (max-width:600px){ body{font-size:17px} h1{font-size:27px} .wrap{padding:24px 16px 48px} }