/* ═══════════════════════════════════════════════════════════
   ClicGuard — page styles
   Loaded after the shared ClicAuto stylesheet (/styles.css,
   copied here at build time). Green shield on night blue for
   the brand, amber for Warn, red for Block, pale green for a
   restored value; the rest of the design system unchanged.
   ═══════════════════════════════════════════════════════════ */

:root {
  --cg-green: #3ddc97;
  --cg-green-ink: #062a1b;
  --cg-navy: #1b2466;
  --cg-warn: #ffb648;
  --cg-block: #ff6b6b;
  --cg-restored: rgba(61, 220, 151, 0.22);
}

.logo-mark-guard {
  background: var(--cg-navy);
  color: var(--cg-green);
  box-shadow: 0 4px 14px rgba(27, 36, 102, 0.55);
}

.cg-hero .mark { background-image: linear-gradient(rgba(61, 220, 151, 0.45), rgba(61, 220, 151, 0.45)); }

.cg-steps .card-ico,
.cg-catch li::before { border-color: rgba(61, 220, 151, 0.3); background: rgba(61, 220, 151, 0.1); color: var(--cg-green); }

.cg-steps .cg-ico-block { border-color: rgba(255, 107, 107, 0.35); background: rgba(255, 107, 107, 0.1); color: var(--cg-block); }

.cg-steps .card p,
.cg-plan p { font-size: 0.9375rem; color: var(--text-2); }

.cg-steps .card b,
.cg-plan b { color: var(--text); font-weight: 600; }

/* ── Launch status ── */

.cg-launch { margin-top: 30px; display: grid; justify-items: center; gap: 12px; }

.cg-launch-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 1px solid rgba(61, 220, 151, 0.4);
  border-radius: 100px;
  background: rgba(61, 220, 151, 0.08);
  color: var(--cg-green);
  font-weight: 600;
  font-size: 0.9375rem;
}

.cg-launch-badge svg { width: 18px; height: 18px; flex: none; }

.cg-launch-note {
  font-size: 0.9375rem;
  color: var(--text-3);
  text-align: center;
}

/* ── Signature feature: masked message out, real value back ── */

.cg-demo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  max-width: 860px;
}

.cg-bubble {
  padding: 18px 20px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: var(--sh-2);
  font-size: 1rem;
  line-height: 1.6;
}

.cg-bubble-out { border-color: rgba(255, 182, 72, 0.4); border-bottom-right-radius: 6px; }
.cg-bubble-in { border-color: rgba(61, 220, 151, 0.4); border-bottom-left-radius: 6px; }

.cg-ph {
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 182, 72, 0.12);
  color: var(--cg-warn);
  font-family: var(--mono);
  font-size: 0.875em;
}

.cg-real {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--cg-restored);
  color: #fff;
}

.cg-demo-arrow { width: 28px; height: 28px; color: var(--text-4); }
.cg-demo-arrow svg { width: 100%; height: 100%; }

@media (max-width: 720px) {
  .cg-demo { grid-template-columns: 1fr; }
  .cg-demo-arrow { justify-self: center; rotate: 90deg; }
}

/* ── What it catches ── */

.cg-catch { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

.cg-catch li {
  position: relative;
  padding: 22px 22px 22px 58px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.9375rem;
}

.cg-catch li::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 22px;
  width: 22px;
  height: 22px;
  border-width: 1px;
  border-style: solid;
  border-radius: 7px;
}

.cg-catch b { color: var(--text); font-weight: 600; }

/* ── Where it works ── */

.cg-sites { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cg-sites .tag { color: var(--text); font-weight: 500; }

/* ── Private by design ── */

.cg-ticks { display: grid; gap: 12px; max-width: 760px; }

.cg-ticks li {
  position: relative;
  padding-left: 28px;
  color: var(--text-2);
  font-size: 1rem;
}

.cg-ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.4em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--cg-green);
  border-bottom: 2px solid var(--cg-green);
  rotate: -45deg;
}

/* ── Pricing (home page) ── */

.cg-plan-pro {
  border-color: rgba(61, 220, 151, 0.4);
  background: linear-gradient(180deg, rgba(61, 220, 151, 0.07), rgba(61, 220, 151, 0.015));
}

/* ── Subscribe page ── */

.cg-sub-section { padding-top: calc(var(--hdr-h) + clamp(40px, 6vw, 72px)); }

.cg-sub {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: var(--sh-3);
  text-align: center;
}

.cg-sub-title { font-size: clamp(1.7rem, 3.6vw, 2.3rem); }
.cg-sub-note { margin-top: 10px; font-size: 0.9375rem; color: var(--text-2); }
.cg-sub-email { margin-top: 18px; font-size: 0.875rem; color: var(--text-3); overflow-wrap: anywhere; }

.cg-sub-offers { display: grid; gap: 12px; margin-top: 24px; text-align: left; }

.cg-sub-offer {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.02);
}

.cg-sub-offer p { font-size: 0.9375rem; color: var(--text-2); }
.cg-sub-offer b { color: var(--text); font-weight: 600; }

.cg-sub-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 16px;
  border: 1px solid rgba(61, 220, 151, 0.35);
  border-radius: var(--r-sm);
  background: rgba(61, 220, 151, 0.06);
  text-align: left;
  font-size: 0.875rem;
  color: var(--text-2);
  cursor: pointer;
}

.cg-sub-check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--cg-green);
  cursor: pointer;
}

.cg-sub-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.cg-sub-status { min-height: 1.4em; margin-top: 12px; font-size: 0.875rem; color: var(--cg-green); }

.cg-sub-fine { margin-top: 16px; font-size: 0.8125rem; color: var(--text-3); }
.cg-sub-fine a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-line); }

/* ── Help page ── */

.page-head .lead a { color: var(--accent); }