/* CrawlGuard storefront — light "operator console", same language as the
   dashboard: the pass/challenge/block decision palette IS the brand, infra
   primitives are monospace, one cobalt accent. Zero JavaScript.
   Signature element: the edge decision log in the hero (.edgelog). */

/* Design tokens (colors, radii, shadows, fonts, dark theme) come from the shared
   /theme/theme.css (internal/webtheme) linked before this file — one source of
   truth across storefront, dashboard and challenge. Only storefront-specific vars
   live here. */
:root { --maxw:70rem; }

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1 { font-family:var(--display); font-size:clamp(2rem,4.8vw,3.1rem); font-weight:730; letter-spacing:-.03em; line-height:1.07; margin:0 0 .7rem; }
h2 { font-family:var(--display); font-size:clamp(1.3rem,2.6vw,1.7rem); font-weight:640; letter-spacing:-.02em; line-height:1.2; margin:0 0 .5rem; }
h3 { font-family:var(--display); font-size:1.02rem; font-weight:600; letter-spacing:-.008em; margin:0 0 .3rem; }
p { margin:.45rem 0; }
ul, ol { margin:.5rem 0; padding-left:1.25rem; }
li { margin:.3rem 0; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--r-xs); }

code, .mono { font-family:var(--mono); font-variant-ligatures:none; }
code {
  background:var(--sunken); border:1px solid var(--line); border-radius:var(--r-xs);
  padding:.08em .4em; font-size:.86em; color:var(--code-ink); word-break:break-word;
}
pre {
  background:var(--term-bg); color:var(--term-ink); border-radius:var(--r-sm);
  padding:.9rem 1.05rem; overflow-x:auto; font-size:.85rem; line-height:1.55;
}
pre code { background:none; border:0; padding:0; color:inherit; font-size:inherit; }

/* Infra labels are monospace — the operator-console vernacular. */
.eyebrow {
  font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-ink); margin:0 0 .6rem;
}
.muted { color:var(--muted); }
.helper { color:var(--muted); font-size:.85rem; margin:.5rem 0 0; }
.lead { font-size:1.1rem; line-height:1.65; color:var(--muted); max-width:36rem; }
.center { text-align:center; }
.center .lead { margin-left:auto; margin-right:auto; }

.skip { position:absolute; left:-999px; top:.5rem; background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:.5rem .8rem; z-index:20; }
.skip:focus { left:.75rem; }

/* ---- top bar ---- */
.topbar {
  position:sticky; top:0; z-index:10; background:var(--topbar);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem clamp(1rem,4vw,2rem);
}
.brand { display:inline-flex; align-items:center; gap:.5rem; color:var(--ink);
  font-family:var(--display); font-weight:640; font-size:1.05rem; letter-spacing:-.01em; }
.brand:hover { text-decoration:none; }
.brand svg { display:block; }
.topbar nav { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.topbar nav a {
  color:var(--muted); font-size:.92rem; font-weight:550; padding:.4rem .6rem;
  border-radius:var(--r-sm);
}
.topbar nav a:hover { color:var(--ink); background:var(--surface-2); text-decoration:none; }
.topbar nav a[aria-current="page"] { color:var(--ink); }
.nav-login { color:var(--ink) !important; }
.nav-cta { color:#fff !important; }
.nav-cta:hover { background:var(--accent-ink) !important; }
.theme-toggle { margin-left:.15rem; background:transparent; border:1px solid var(--line-strong);
  color:var(--muted); border-radius:var(--r-sm); width:2rem; height:2rem; display:inline-flex;
  align-items:center; justify-content:center; cursor:pointer; font-size:.95rem; line-height:1; padding:0; }
.theme-toggle:hover { color:var(--ink); background:var(--surface-2); }

main { max-width:var(--maxw); margin:0 auto; padding:clamp(1.4rem,3vw,2.4rem) clamp(1rem,4vw,2rem) 3rem; }
.page-head { margin:0 0 1.6rem; }

/* ---- buttons ---- */
.btn {
  font:inherit; font-size:.95rem; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.55rem 1.1rem; border-radius:var(--r-sm); border:1px solid transparent;
  background:var(--accent); color:#fff; transition:background .12s;
}
.btn:hover { background:var(--accent-ink); text-decoration:none; }
.btn-ghost {
  font:inherit; font-size:.95rem; font-weight:580; display:inline-flex; align-items:center;
  justify-content:center; padding:.55rem 1.1rem; border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink); border:1px solid var(--line-strong);
}
.btn-ghost:hover { background:var(--surface-2); text-decoration:none; }
.btn-lg { padding:.8rem 1.6rem; font-size:1.02rem; }

/* ---- cards ---- */
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-sm); padding:1.2rem 1.35rem; margin:1rem 0;
}
.spine { border-left:3px solid var(--line-strong); }
.spine.is-pass { border-left-color:var(--pass); }
.spine.is-chal { border-left-color:var(--chal); }

/* ---- hero ---- */
.hero-wrap {
  /* Quiet dotted grid: the graph-paper texture of an ops console. */
  background:radial-gradient(circle, var(--line-strong) 1px, transparent 1px);
  background-size:22px 22px;
  border-radius:var(--r-lg); margin-top:.4rem;
}
.hero {
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
  padding:clamp(1.6rem,4.5vw,3.4rem) clamp(.2rem,2vw,1.4rem);
}
.hero-copy { background:linear-gradient(90deg, var(--bg) 60%, transparent); border-radius:var(--r); }
.hero-cta { display:flex; gap:.7rem; flex-wrap:wrap; margin:1.4rem 0 .5rem; }

/* ---- edge decision log — the signature element ---- */
.edgelog {
  background:var(--term-bg); border-radius:var(--r); box-shadow:var(--shadow-lg);
  overflow:hidden; font-size:.82rem;
}
.edgelog-head {
  display:flex; align-items:center; gap:.55rem; padding:.6rem .95rem;
  border-bottom:1px solid var(--term-line); color:var(--term-mut);
  font-family:var(--mono); font-size:.75rem;
}
.edgelog-head .host { color:#9fb0cc; }
.edgelog-sub { margin-left:auto; font-size:.7rem; }
.live-dot {
  width:.55rem; height:.55rem; border-radius:50%; background:var(--pass); flex:none;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation:none; } }
.edgelog-rows { list-style:none; margin:0; padding:.5rem 0; }
.edgelog-rows li {
  display:flex; align-items:center; gap:.8rem; margin:0;
  padding:.4rem .95rem; font-size:.88rem;
}
.el-what { color:var(--term-ink); flex:1 1 auto; min-width:0; }
.chip {
  flex:none; margin-left:auto; font-weight:600; font-size:.7rem; letter-spacing:.04em;
  padding:.1rem .5rem; border-radius:var(--r-pill); font-style:normal;
}
.chip-pass  { color:#7ee2a4; background:rgba(22,163,74,.16); }
.chip-chal  { color:#ffce7a; background:rgba(217,119,6,.18); }
.chip-block { color:#ff9d94; background:rgba(220,38,38,.18); }
.edgelog-foot {
  padding:.55rem .95rem .75rem; border-top:1px solid var(--term-line);
  color:var(--term-mut); font-size:.75rem;
}

/* ---- benefits strip ---- */
.benefits {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; margin:2.4rem 0;
}
.benefit { background:var(--surface); padding:1.05rem 1.2rem; }
.benefit b {
  display:block; font-family:var(--mono); font-size:1.15rem; font-weight:640;
  letter-spacing:-.01em; color:var(--ink);
}
.benefit span { color:var(--muted); font-size:.84rem; line-height:1.5; display:block; margin-top:.2rem; }

/* ---- sections ---- */
.section { margin:3rem 0; }
.section-head { max-width:44rem; margin-bottom:1.3rem; }

/* Steps: a real sequence (DNS -> проверка -> cookie), so the numbering is
   information, not decoration. */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem; }
.step { margin:0; }
.step-n {
  display:block; font-family:var(--mono); font-size:.75rem; font-weight:600;
  letter-spacing:.12em; color:var(--accent-ink); margin-bottom:.6rem;
}
.step-n::after { content:""; display:block; width:2.2rem; height:2px; background:var(--accent); margin-top:.45rem; border-radius:2px; }

.two-col { display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:1rem; }
.two-col .card { margin:0; }
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1rem; }
.feature-grid .card { margin:0; }
.cta-final { margin:3rem 0 1rem; }
.cta-card { text-align:center; padding:2.4rem 1.5rem; }
.cta-card .lead { margin:0 auto .8rem; }

/* ---- pricing ---- */
.plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr)); gap:1rem; align-items:stretch; }
.plan { display:flex; flex-direction:column; margin:0; position:relative; }
.plan-featured { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow); }
.plan-tag {
  position:absolute; top:-.7rem; left:1rem; background:var(--accent); color:#fff;
  font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; padding:.18rem .6rem; border-radius:var(--r-pill);
}
.plan-price { margin:.2rem 0 .1rem; }
.plan-price b { font-size:1.75rem; font-weight:730; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.plan-price span { color:var(--muted); }
.plan-limits { color:var(--muted); font-size:.88rem; margin:0 0 .5rem; }
.plan-feats { list-style:none; padding:0; margin:.3rem 0 1rem; flex:1; }
.plan-feats li { padding-left:1.25rem; position:relative; font-size:.92rem; }
.plan-feats li::before { content:"✓"; position:absolute; left:0; color:var(--pass); font-weight:700; }
.plan-cta { margin:0; }
.plan-cta .btn, .plan-cta .btn-ghost { width:100%; }
.pricing-notes { margin-top:1.6rem; }

/* ---- docs ---- */
.doc-toc { display:flex; flex-wrap:wrap; gap:.25rem .9rem; padding:.8rem 1.1rem; }
.doc-toc a { font-size:.9rem; font-weight:550; }
.doc-section { margin:2.2rem 0; scroll-margin-top:4.5rem; }
.doc-steps li { margin:.55rem 0; }
.faq dt { font-weight:650; margin-top:1rem; }
.faq dd { margin:.25rem 0 0; color:var(--muted); }
.table-wrap { overflow-x:auto; }
.tbl { width:100%; border-collapse:collapse; font-size:.9rem; }
.tbl th { text-align:left; color:var(--muted); font-weight:600; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.05em; padding:.5rem .6rem; border-bottom:1px solid var(--line-strong); }
.tbl td { padding:.5rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }

/* ---- legal pages ---- */
.legal { max-width:46rem; }
.legal h2 { margin-top:1.8rem; }
.legal-meta { color:var(--muted); font-size:.88rem; }
.warn-note { background:var(--chal-wash); border-color:var(--chal-line); border-left:3px solid var(--chal); }
.warn-note p { margin:0; font-size:.9rem; color:var(--chal-ink); }

/* ---- footer ---- */
.footer { border-top:1px solid var(--line); background:var(--surface); margin-top:2rem; }
.footer-inner {
  max-width:var(--maxw); margin:0 auto; padding:1.6rem clamp(1rem,4vw,2rem) .6rem;
  display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}
.brand-foot { font-weight:700; margin:0 0 .2rem; }
.footer-inner nav { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.footer-inner nav a { color:var(--muted); font-size:.9rem; }
.footer-note {
  max-width:var(--maxw); margin:0 auto; padding:0 clamp(1rem,4vw,2rem) 1.4rem; font-size:.82rem;
}

/* ---- trust strip (first-screen assurances) ---- */
.trustbar {
  display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem 1.7rem;
  margin:1.5rem 0 .2rem; padding:.85rem 1rem;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.trust { display:inline-flex; align-items:center; gap:.45rem; color:var(--muted); font-size:.85rem; }
.trust svg { color:var(--pass); flex:none; }

/* ---- product showcase: a dashboard preview, so buyers see what they get ---- */
.showcase { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.4rem,4vw,3rem); align-items:center; }
.mock { border:1px solid var(--line-strong); border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow-lg); }
.mock-chrome { display:flex; align-items:center; gap:.4rem; padding:.5rem .8rem;
  background:var(--surface-2); border-bottom:1px solid var(--line); }
.mock-chrome i { width:.6rem; height:.6rem; border-radius:50%; background:var(--line-strong); }
.mock-chrome .mock-url { margin-left:.5rem; font-family:var(--mono); font-size:.72rem; color:var(--muted); }
.mock-body { padding:1.1rem 1.25rem 1.3rem; }
.mock-top { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:1rem; }
.mock-domain { font-family:var(--mono); font-weight:600; font-size:.95rem; color:var(--ink); }
.mock-badge { display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:600;
  padding:.14rem .5rem; border-radius:var(--r-pill); color:var(--pass-ink);
  background:var(--pass-wash); border:1px solid var(--pass-line); }
.mock-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.mock-cap { font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); margin:0 0 .5rem; }
.mock-lrow { display:grid; grid-template-columns:5.5rem 1fr 3.3rem; align-items:center; gap:.7rem;
  margin:.55rem 0; font-size:.83rem; color:var(--muted); }
.mock-lrow b { text-align:right; color:var(--ink); font-variant-numeric:tabular-nums; font-weight:620; }
.mbar { height:8px; border-radius:var(--r-pill); background:var(--sunken); overflow:hidden; }
.mbar > i { display:block; height:100%; border-radius:var(--r-pill); }
/* Static mock widths — CSP forbids inline styles, so width lives in the class. */
.mbar > i.b-pass  { width:66%; background:var(--pass); }
.mbar > i.b-chal  { width:15%; background:var(--chal); }
.mbar > i.b-block { width:96%; background:var(--block); }
.mock-stats { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin:0 0 1rem; }
.mock-stat { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:.5rem .65rem; }
.mock-stat b { display:block; font-size:1.35rem; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; line-height:1.1; }
.mock-stat span { display:block; margin-top:.15rem; font-size:.7rem; color:var(--muted); line-height:1.2; }
.mock-foot { margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--line);
  font-size:.78rem; color:var(--muted); }

/* ---- comparison table (us vs a typical vendor) ---- */
.compare .tbl td:first-child { color:var(--muted); font-weight:550; }
.compare .tbl .us { background:var(--accent-wash); }
.compare .tbl th.us { color:var(--accent-ink); }
.compare .yes { color:var(--pass-ink); font-weight:600; }
.compare .no { color:var(--muted); }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .hero { grid-template-columns:1fr; }
  .hero-wrap { background:none; }
  .edgelog { font-size:.78rem; }
  .showcase { grid-template-columns:1fr; }
  .topbar nav .nav-login { display:none; }
}
/* Narrow screens: keep the brand on its own line instead of letting nav links
   wrap around it. */
@media (max-width: 700px) {
  .topbar { flex-wrap:wrap; row-gap:.1rem; }
  .topbar nav { width:100%; justify-content:flex-start; }
}

/* Пиксель Метрики для <noscript>-визитов: спрятан классом, а не style-атрибутом,
   чтобы не ослаблять style-src инлайнами. */
.metrika-px { position:absolute; left:-9999px; }