/* ============================================================
   CommentShield — site stylesheet
   Shared by index_6.html, support.html, and
   commentshield-privacy-policy.html
   ============================================================ */

/* ---------------- design tokens ---------------- */
:root {
  /* surfaces */
  --mist:#F2F6F5;
  --card:#FFF;
  --sea-tint:#E6EFED;
  --sea-pale:#ECF2F0;

  /* text */
  --ink:#24332F;
  --muted:#5C716D;

  /* brand */
  --sea:#3F8F82;
  --sea-deep:#2C6B61;
  --coral:#C25B4A;
  --line:#DDE7E5;

  /* dark band + code */
  --band-tile:#2E403B;
  --band-line:#3C4F4A;
  --band-text:#A9BCB8;
  --band-accent:#8FC4BB;
  --code-bg:#1D2B27;
  --code-ink:#CFE3DF;

  /* type */
  --display:"Bricolage Grotesque", Inter, system-ui, sans-serif;
  --body:Inter, system-ui, -apple-system, sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;

  /* shape */
  --r-sm:10px;
  --r:14px;
  --r-lg:18px;
  --shadow:0 18px 44px -24px rgba(36,51,47,.25);
}

/* ---------------- base ---------------- */
* { box-sizing:border-box; margin:0; }

body {
  font:16px/1.65 var(--body);
  color:var(--ink);
  background:var(--mist);
  -webkit-font-smoothing:antialiased;
}

h1, h2, h3 { font-family:var(--display); line-height:1.12; letter-spacing:-.015em; }
a { color:var(--sea-deep); }

:focus-visible { outline:2px solid var(--sea); outline-offset:2px; border-radius:4px; }

/* ---------------- layout ---------------- */
.wrap { max-width:1060px; margin:0 auto; padding:0 24px; }
.wrap.narrow { max-width:760px; }

section { padding:64px 0; }
section.tight { padding-top:8px; }

.view { display:none; }
.view.active { display:block; }

/* ---------------- buttons + bits ---------------- */
.btn {
  display:inline-block; padding:12px 24px; border-radius:12px; border:0;
  background:var(--sea); color:#fff; font:600 15px var(--body);
  text-decoration:none; cursor:pointer; transition:background .15s;
}
.btn:hover { background:var(--sea-deep); }
.btn.ghost { background:transparent; color:var(--sea-deep); border:1.5px solid var(--sea); }
.btn.ghost:hover { background:var(--sea-tint); }
.btn.sm { padding:8px 16px; font-size:13.5px; }

.eyebrow {
  font:600 12px/1 var(--body); letter-spacing:.14em;
  text-transform:uppercase; color:var(--sea-deep);
}

.pill {
  display:inline-block; font:600 11px var(--body); padding:3px 10px;
  border-radius:999px; background:var(--sea-tint); color:var(--sea-deep);
}

/* ---------------- nav ---------------- */
nav { padding:18px 0; }
nav .wrap { display:flex; align-items:center; justify-content:space-between; }

.logo {
  font:800 19px var(--display); text-decoration:none; color:var(--ink);
  cursor:pointer; display:inline-flex; align-items:center; gap:8px;
}
.logo img { height:40px; width:auto; display:block; }
.logo span { color:var(--sea); }

nav .links { display:flex; gap:22px; align-items:center; font-size:14.5px; }
nav .links a { text-decoration:none; color:var(--muted); font-weight:500; cursor:pointer; }
nav .links a:hover { color:var(--ink); }

/* ---------------- hero (home) ---------------- */
.hero { padding:54px 0 26px; }
.hero .wrap { display:grid; grid-template-columns:1.05fr 1fr; gap:52px; align-items:center; }
.hero h1 { font-size:clamp(36px,5vw,54px); font-weight:800; margin:14px 0 18px; }
.hero h1 em { font-style:normal; color:var(--sea); }
.hero p.lede { font-size:18px; color:var(--muted); max-width:46ch; margin-bottom:26px; }
.hero .ctas { display:flex; gap:14px; flex-wrap:wrap; }
.hero .sub { font-size:13px; color:var(--muted); margin-top:12px; }

/* ---------------- page head (interior pages) ---------------- */
.page-head { padding:44px 0 30px; }
.page-head h1 { font-size:clamp(30px,4.2vw,42px); font-weight:800; margin:12px 0 14px; }
.page-head .lede { font-size:17px; color:var(--muted); max-width:52ch; }

/* ---------------- live filter demo feed ---------------- */
.feed {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px; box-shadow:var(--shadow); min-height:380px;
  display:flex; flex-direction:column; gap:10px; overflow:hidden;
}
.feed-head { display:flex; justify-content:space-between; padding:0 4px 6px; border-bottom:1px solid var(--line); }
.feed-head .t { font:600 13.5px var(--body); }
.feed-head .count { font:500 12px var(--mono); color:var(--sea-deep); }

.cmt {
  border:1px solid var(--line); border-radius:12px; padding:10px 14px;
  background:#fff; animation:rise .45s ease both;
}
.cmt .who { font:600 12px var(--mono); color:var(--muted); margin-bottom:2px; }
.cmt .txt { font-size:14px; }
.cmt.shielded {
  background:var(--sea-pale); border-left:3px solid var(--sea); color:var(--sea-deep);
  font:600 12.5px var(--body); padding:9px 14px;
}
.cmt.shielded .tag { color:var(--coral); }
.cmt.shielded .tag.bot { color:var(--muted); }

@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .cmt { animation:none; } }

/* ---------------- sections + tiles ---------------- */
h2.sec { font-size:clamp(26px,3.4vw,36px); margin:12px 0 30px; }
h2.sec.sm { font-size:clamp(22px,2.6vw,27px); margin-bottom:20px; }

.band-dark { background:var(--ink); color:var(--mist); }
.band-dark .eyebrow { color:var(--band-accent); }
.band-dark h2 { color:var(--mist); }
.band-dark p.band-lede { color:var(--band-text); max-width:56ch; }
.band-dark p.band-lede b { color:var(--mist); }

.cols3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px; }
.tile h3 { font-size:18px; margin:8px 0; }
.tile p { font-size:14.5px; color:var(--muted); }
.band-dark .tile { background:var(--band-tile); border-color:var(--band-line); }
.band-dark .tile p { color:var(--band-text); }

.code {
  background:var(--code-bg); color:var(--code-ink); border-radius:var(--r);
  padding:18px 20px; overflow-x:auto; font:13px/1.7 var(--mono); margin-top:18px;
}
.code .k { color:var(--band-accent); }
.code .s { color:#E8C48A; }

/* ---------------- pricing ---------------- */
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.plan {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px; display:flex; flex-direction:column;
}
.plan.hot { border:2px solid var(--sea); position:relative; }
.plan.hot::before {
  content:"Most popular"; position:absolute; top:-11px; left:22px; background:var(--sea);
  color:#fff; font:600 11px var(--body); letter-spacing:.06em; padding:3px 10px; border-radius:999px;
}
.plan h3 { font-size:19px; }
.plan .amt { font:800 32px var(--display); margin:6px 0 0; }
.plan .amt small { font:500 13.5px var(--body); color:var(--muted); }
.plan .for { font-size:13px; color:var(--muted); margin-bottom:14px; }
.plan ul { list-style:none; padding:0; margin:0 0 22px; flex:1; }
.plan li { padding:6px 0 6px 24px; position:relative; font-size:14px; }
.plan li::before { content:"\2713"; position:absolute; left:0; color:var(--sea); font-weight:700; }

.note { font-size:13px; color:var(--muted); margin-top:18px; }

/* ---------------- auth ---------------- */
.auth {
  max-width:400px; margin:60px auto; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:32px;
}
.auth h2 { font-size:24px; margin-bottom:6px; }
.auth .hint { font-size:13.5px; color:var(--muted); margin-bottom:20px; }
.auth .btn { width:100%; text-align:center; margin-top:6px; }
.auth .swap { font-size:13.5px; color:var(--muted); text-align:center; margin-top:16px; }
.auth .swap a { cursor:pointer; }

.field { margin-bottom:14px; }
.field label { display:block; font:600 13px var(--body); margin-bottom:5px; }
.field input, .field textarea, .field select {
  width:100%; padding:10px 12px; border:1px solid var(--line);
  border-radius:var(--r-sm); font:inherit; color:var(--ink); background:#fff;
}
.field input:focus, .field textarea:focus { outline:2px solid var(--sea); }

.demo-note {
  font-size:12.5px; color:var(--sea-deep); background:var(--sea-tint);
  border-radius:8px; padding:8px 12px; margin-bottom:16px;
}

/* ---------------- app shell ---------------- */
/* 76px = nav height (40px logo + 18px padding top/bottom) */
.app { display:grid; grid-template-columns:220px 1fr; min-height:calc(100vh - 76px); }

.side { border-right:1px solid var(--line); padding:22px 14px; background:var(--sea-pale); }
.side a {
  display:block; padding:9px 12px; border-radius:var(--r-sm); text-decoration:none;
  color:var(--muted); font:500 14px var(--body); cursor:pointer; margin-bottom:2px;
}
.side a.on { background:var(--card); color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(36,51,47,.08); }
.side a:hover { color:var(--ink); }

.main { padding:30px 34px; }
.main h2 { font-size:24px; margin-bottom:4px; }
.main .sub { color:var(--muted); font-size:14px; margin-bottom:24px; }

.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; }
.stat .n { font:800 28px var(--display); color:var(--sea-deep); }
.stat .l { font-size:12.5px; color:var(--muted); }

.panel { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; margin-bottom:18px; }
.panel h3 { font-size:16px; margin-bottom:12px; }
.panel p { font-size:14.5px; color:var(--muted); }

/* bars stretch to full track height; .bar i is the percentage fill */
.bars { display:flex; align-items:stretch; gap:10px; height:130px; }
.bar { flex:1; background:#D7E5E2; border-radius:6px 6px 0 0; position:relative; }
.bar i { position:absolute; bottom:0; left:0; right:0; background:var(--sea); border-radius:6px 6px 0 0; }
.bar .d { position:absolute; bottom:-20px; width:100%; text-align:center; font:500 11px var(--mono); color:var(--muted); }

.qitem { border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:10px; font-size:14px; }
.qitem .who { font:600 12px var(--mono); color:var(--muted); }
.qitem .acts { display:flex; gap:14px; margin-top:8px; font:600 12.5px var(--body); color:var(--sea-deep); }
.qitem .acts span { cursor:pointer; }

.keybox { display:flex; gap:10px; align-items:center; }
.keybox code {
  background:var(--sea-pale); border:1px solid var(--line); border-radius:8px;
  padding:8px 12px; font:13px var(--mono); flex:1;
}

.toast {
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--mist); padding:10px 18px; border-radius:var(--r-sm);
  font:500 13.5px var(--body); opacity:0; transition:opacity .25s; pointer-events:none;
}
.toast.show { opacity:1; }

/* ---------------- support page ---------------- */
.contact {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px 24px; display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px; margin-bottom:44px;
}
.contact h3 { font-size:17px; margin-bottom:4px; }
.contact p { color:var(--muted); font-size:14px; }

.faq { display:flex; flex-direction:column; gap:10px; }
.faq details {
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:0 18px;
}
.faq details[open] { border-color:#C8DBD7; }
.faq summary {
  list-style:none; cursor:pointer; padding:16px 0;
  font:600 15.5px var(--body);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content:"+"; font:400 20px var(--mono); color:var(--sea); flex:none; line-height:1;
}
.faq details[open] summary::after { content:"\2013"; }
.faq .a {
  padding:14px 0 18px; color:var(--muted); font-size:14.5px;
  border-top:1px solid var(--line);
}
.faq .a code, .doc code {
  background:var(--sea-pale); border:1px solid var(--line); border-radius:5px;
  padding:2px 6px; font:0.88em var(--mono);
}

/* ---------------- prose / legal doc ---------------- */
.doc { padding:8px 0 56px; }
.doc h1 { font-size:clamp(28px,4vw,38px); font-weight:800; margin-bottom:6px; }
.doc .updated { color:var(--muted); font-size:14px; margin-bottom:36px; }
.doc h2 {
  font-size:19px; margin:36px 0 12px; padding-bottom:8px;
  border-bottom:1px solid var(--line);
}
.doc p { margin-bottom:14px; color:var(--ink); }
.doc ul { padding-left:22px; margin-bottom:16px; }
.doc li { margin-bottom:8px; }
.doc a { color:var(--sea-deep); }

/* ---------------- footer ---------------- */
footer { border-top:1px solid var(--line); padding:28px 0 38px; }
footer .wrap { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
footer small { color:var(--muted); }

/* ---------------- responsive ---------------- */
@media (max-width:860px) {
  .hero .wrap { grid-template-columns:1fr; gap:30px; }
  .cols3, .plans, .stat-row { grid-template-columns:1fr; }
  .app { grid-template-columns:1fr; }
  .side { display:flex; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); }
  nav .links a.mkt { display:none; }
}

@media (max-width:640px) {
  section { padding:44px 0; }
  .contact { flex-direction:column; align-items:flex-start; }
  nav .links { gap:16px; }
  footer .wrap { flex-direction:column; align-items:flex-start; }
}