/* ============================================================
 * START_MODULE_CONTRACT
 *   PURPOSE: W4 terminal theme (owner UI spec): black background,
 *     amber phosphor (#bf8065), JetBrains Mono self-host (I-W4: NO CDN),
 *     blinking cursor, log lines [OK]/[WARN]/[ERR]/[INFO]/[...],
 *     text progress bar [██████░░░░] 60%, reduced-motion, mobile
 *   SCOPE: styling only; NO inline styles (CSP style-src 'self'),
 *     dynamic width — CSS classes/custom properties (R2-MED-08)
 *   DEPENDS: static/fonts/JetBrainsMono-*.woff2 (OFL)
 *   ROLE: UI_COMPONENT
 * END_MODULE_CONTRACT
 * ============================================================ */

/* ── fonts: self-host, I-W4 (no Google Fonts/CDN) ── */
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── terminal palette (UI spec §2) ── */
:root {
  --bg: #000000;
  --primary: #bf8065;   /* amber phosphor (owner decision 2026-08-24) */
  --secondary: #8a5f46;
  --error: #FF0040;
  --warning: #FFB800;
  --info: #00CCFF;
  --white: #FFFFFF;
  --progress-bg: #1a0f0a;
  --font-mono: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
  /* CRT layer (UI spec §5.6): calibrated for dark amber phosphor (#bf8065) */
  --fx-scanlines: 0.15;
  --fx-bloom: 0.85;
  --fx-sweep: 0.14;
  --fx-noise: 0.06;
  --fx-vignette: 1;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--bg);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: clip; /* decorative "spots" don't create horizontal scroll (clip doesn't break sticky, unlike hidden) */
}

/* ── shared entrances: fade-in + slide-up, stagger (UI spec §4.3) ── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.landing > *, .done-wrap > * {
  animation: fade-up 0.4s ease both;
}
.landing > *:nth-child(2) { animation-delay: 0.15s; }
.landing > *:nth-child(3) { animation-delay: 0.30s; }
.landing > *:nth-child(4) { animation-delay: 0.45s; }
.done-wrap > *:nth-child(2) { animation-delay: 0.15s; }
.done-wrap > *:nth-child(3) { animation-delay: 0.30s; }
.done-wrap > *:nth-child(4) { animation-delay: 0.45s; }

/* ── blinking cursor in the input field: native caret in amber (owner
   decision 2026-08-12: the decorative `_` from the heading was removed, the cursor lives
   in the field where the site is entered). The rule itself is on #domain below (caret-color). */

/* ── work lines "[...]": static (blinking removed, owner decision 2026-08-12) ── */
/* Previously there was @keyframes pulse-wait (opacity 1→0.35) — ALL
   block_start/TLS-hint lines pulsed; the owner asked to remove the blinking.
   Line color .dots — .log-line.dots below (secondary green). */

/* ══════════════════ LANDING (/) ══════════════════ */

.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px;
  text-align: center;
}

.h1 {
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--primary);
  margin-bottom: 12px;
}

.subtitle {
  color: var(--secondary);
  font-size: 15px;
  margin-bottom: 36px;
}

/* ── form: input + button in a row, consent to the RIGHT of the button (D-6) ── */
.scan-form {
  width: 100%;
  max-width: 860px;
}
.form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

#domain {
  width: 400px;
  height: 56px;
  background: var(--bg);
  border: 2px solid var(--primary);
  border-radius: 0;
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  padding: 0 14px;
  caret-color: var(--primary); /* blinking input cursor `_` */
  outline: none;
}
#domain::placeholder { color: var(--secondary); }
#domain:focus { box-shadow: 0 0 10px rgba(191, 128, 101, 0.3); }

#submit-btn {
  width: 100px;
  height: 56px;
  background: var(--bg);
  border: 2px solid var(--primary);
  border-radius: 0;
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
#submit-btn:hover:not(:disabled) {
  background: var(--primary);
  color: #000000;
}
#submit-btn:active:not(:disabled) { transform: scale(0.97); }
#submit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 2026-08-24: consent checkbox removed from the home page (owner decision, Tier 1) */

.prompt {
  color: var(--secondary);
  font-size: 13px;
  margin-top: 18px;
  min-height: 21px;
}

.form-error {
  color: var(--error);
  font-size: 13px;
  margin-top: 12px;
  border: 1px solid var(--error);
  padding: 8px 12px;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere; /* R2-MIN-04: long error texts don't break the layout */
}
.form-error[hidden] { display: none; }

/* ══════════════════ SCANNING (/scan/{id}/{token}) ══════════════════ */

.terminal-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 24px 16px;
  animation: fade-up 0.3s ease both;
}

.terminal-window {
  position: relative;
  overflow: hidden;
  width: 1000px;
  max-width: 100%;
  /* warm backlight in the center of the screen (UI spec §5.6) */
  background: radial-gradient(ellipse at 50% 40%, rgba(191,128,101,0.10), rgba(0,0,0,0) 72%), var(--bg);
  border: 1px solid var(--secondary);
  border-radius: 12px;          /* slight CRT curvature (UI spec §5.6) */
  padding: 24px;
  /* bezel body (UI spec §5.6): reads as a physical monitor */
  box-shadow: 0 0 0 5px #0b0705, 0 0 0 6px #14100c, 0 18px 60px rgba(0,0,0,0.85);
}

.terminal-title {
  color: var(--secondary);
  font-size: 17px;
  margin-bottom: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.log {
  height: 600px;
  overflow-y: auto;
  padding: 4px 2px 12px;
  font-size: 20px;
  line-height: 1.6;
  overflow-wrap: anywhere; /* R2-MIN-04: long error/evidence strings */
}
/* thin amber scrollbar (UI spec §5.4B) */
.log::-webkit-scrollbar { width: 10px; }
.log::-webkit-scrollbar-track { background: var(--bg); }
.log::-webkit-scrollbar-thumb { background: var(--secondary); }

.log-line { color: var(--primary); white-space: pre-wrap; }
.log-line.ok    { color: var(--primary); }
.log-line.warn  { color: var(--warning); }
.log-line.err   { color: var(--error); }
.log-line.info  { color: var(--info); }
.log-line.dots  { color: var(--secondary); }
.log-line.final { color: var(--primary); font-weight: 700; }

/* bloom (phosphor glow, UI spec §5.6): multi-layered, lighter than the text */
.log-line        { text-shadow: 0 0 1px rgba(238,204,176,0.85), 0 0 5px rgba(232,190,156,calc(var(--fx-bloom)*0.9)), 0 0 14px rgba(224,175,140,calc(var(--fx-bloom)*0.55)); }
.log-line.warn   { text-shadow: 0 0 2px rgba(255,184,0,0.6), 0 0 8px rgba(255,184,0,0.35), 0 0 18px rgba(255,184,0,0.22); }
.log-line.err    { text-shadow: 0 0 2px rgba(255,0,64,0.6), 0 0 8px rgba(255,0,64,0.35), 0 0 18px rgba(255,0,64,0.22); }
.log-line.info   { text-shadow: 0 0 2px rgba(0,204,255,0.55), 0 0 8px rgba(0,204,255,0.32), 0 0 18px rgba(0,204,255,0.2); }
.log-line.dots   { text-shadow: 0 0 1px rgba(138,95,70,0.5); }

.progress {
  border-top: 1px solid var(--secondary);
  padding-top: 10px;
  color: var(--primary);
  font-size: 18px;
  white-space: nowrap;
}
.progress-fill   { color: var(--primary); }        /* ████ — #bf8065 */
.progress-empty  { color: var(--progress-bg); }    /* ░░░░ — #1a0f0a */
.progress-pct    { color: var(--secondary); }
.progress-bracket { color: var(--secondary); }

/* ── "constant activity" (owner decision 2026-08-24): shimmer + status bar ──
   Keep the screen alive during long blocks (TLS up to 90 s): the shimmer always
   animates, the status bar shows the current block and elapsed seconds (1/s via JS). */
.scan-shimmer {
  margin: 6px 2px 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(191,128,101,0.45) 50%, transparent 100%);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: -40% 0; }
  100% { background-position: 140% 0; }
}
.scan-status {
  margin-top: 10px;
  color: var(--secondary);
  font-size: 14px;
  letter-spacing: 0.05em;
  min-height: 18px;
}

/* ── "Scan show" (plan v0.3): fixed 60 s scenario ──
   Show work lines (prologue/steps/epilogue) and post-processing are muted,
   so as not to create the impression of "results" (DS-4/I-W3: findings live in the report). */
.log-line.show-step,
.log-line.show-post { color: var(--secondary); }
/* final show line ("Checks complete" / "Scanning stopped") */
.log-line.show-step.final { color: var(--primary); font-weight: 700; }
/* command lines (dig/sslyze/whois/curl/…) — blue, "raw" terminal */
.log-line.show-cmd { color: var(--info); text-shadow: 0 0 2px rgba(0,204,255,0.5); }
/* progress at 100% — fill glow (state via class, no inline, R2-m3) */
.progress--finished .progress-fill { text-shadow: 0 0 8px rgba(191,128,101,0.7); }
/* active terminal — progress cursor (a11y R2-m4) */
#terminal[aria-busy="true"] { cursor: progress; }

/* ══════════════════ T2 "Scan show" (plan v0.5 §10) ══════════════════
   Amber accent on sensitive zones (lever 2), sub-block chips
   (lever 5) and "scanner pulse" (lever: an honest "work in progress" signal,
   frequency tied to the active phase — JS sets the class t2-live). */
.log-line.t2-accent { color: var(--primary); text-shadow: 0 0 1px rgba(238,204,176,0.85), 0 0 6px rgba(232,190,156,calc(var(--fx-bloom)*0.8)); }
.log-line.t2-broken { color: var(--error); text-shadow: 0 0 2px rgba(255,0,64,0.55); }
/* audit trail (lever: "process → report", honestly) */
.log-line.audit { color: var(--secondary); opacity: 0.72; font-size: 12px; letter-spacing: 0.04em; }

/* web-phase sub-block chips (crawl/paths/vhosts/sec) */
.subblock-row { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 4px 0 10px; }
.subblock-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border: 1px solid var(--secondary); border-radius: 2px;
  font-size: 12px; color: var(--secondary); letter-spacing: 0.03em;
  transition: color 0.2s, border-color 0.2s;
}
.subblock-chip.t2-accent { border-color: rgba(191,128,101,0.55); color: var(--primary); }
.subblock-chip.subblock--active { color: var(--white); border-color: var(--primary); animation: subblock-pulse 1.2s ease-in-out infinite; }
.subblock-chip.subblock--done { color: var(--secondary); opacity: 0.85; }
.subblock-chip.subblock--done::after { content: " ✓"; color: var(--primary); }
.subblock-chip.subblock--error { color: var(--error); border-color: var(--error); }
.subblock-chip.subblock--error::after { content: " — interrupted"; }

/* scanner pulse: the active phase speeds up the shimmer's background "breathing" */
.terminal-wrap.t2-live .scan-shimmer { animation-duration: 0.8s; opacity: 0.95; }
@keyframes subblock-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ══════════════════ RESULT (/scan/{id}/{token}/done) ══════════════════ */

.done-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px;
  text-align: center;
}

.done-title {
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--primary);
  margin-bottom: 36px;
}

.report-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 64px;
  background: var(--primary);   /* the only "filled" element (UI spec §6.3B) */
  color: #000000;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  border: 2px solid var(--primary);
  transition: box-shadow 0.2s, transform 0.2s;
}
.report-btn:hover {
  box-shadow: 0 0 20px rgba(191, 128, 101, 0.5);
  transform: scale(1.02);
}
.report-btn:active { transform: scale(0.98); }

.summary {
  color: var(--secondary);
  font-size: 15px;
  margin-top: 28px;
  min-height: 24px;
}

.new-scan {
  color: var(--secondary);
  font-size: 13px;
  margin-top: 40px;
}
.new-scan:hover { color: var(--primary); }

/* ── CRT overlays (UI spec §5.6): scanlines/glow-line/vignette/noise/glare ── */
.fx-scanlines { position:absolute; inset:0; z-index:5; pointer-events:none; opacity: var(--fx-scanlines); background: repeating-linear-gradient(0deg, rgba(0,0,0,0.42) 0 1px, transparent 1px 3px); }
.fx-sweep { position:absolute; left:0; right:0; top:0; height:120px; z-index:4; pointer-events:none; background: linear-gradient(180deg, transparent, rgba(214,168,140,var(--fx-sweep)) 45%, rgba(214,168,140,calc(var(--fx-sweep)*0.8)) 55%, transparent); animation: crt-sweep 5s linear infinite; }
.fx-vignette { position:absolute; inset:0; z-index:6; pointer-events:none; opacity: var(--fx-vignette); background: radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 46%, rgba(0,0,0,0.62) 100%); }
.fx-noise { position:absolute; inset:-20px; z-index:7; pointer-events:none; opacity: var(--fx-noise); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.7'/></svg>"); animation: crt-noise 0.5s steps(3) infinite; }
.fx-glare { position:absolute; inset:0; z-index:8; pointer-events:none; background: linear-gradient(115deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.0) 34%, rgba(0,0,0,0) 62%, rgba(191,128,101,0.08) 100%); }
@keyframes crt-sweep { from { top:-120px; } to { top:100%; } }   /* top from the container; translateY% from its own height — half the screen */
@keyframes crt-noise { 0%{transform:translate(0,0)} 33%{transform:translate(-12px,8px)} 66%{transform:translate(10px,-10px)} 100%{transform:translate(0,0)} }

/* ── a11y: focus is visible (Tab navigation, UI spec §9.3) ── */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

/* ── R2-MIN-05: prefers-reduced-motion turns animations off ── */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ── mobile <480px (UI spec §9.4): input+button stacked vertically, terminal 100% ── */
@media (max-width: 480px) {
  .h1 { font-size: 24px; }
  .form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  #domain,
  #submit-btn {
    width: 100%;
  }
  .terminal-window { width: 100%; }
  .log { height: 50vh; }
}

/* ══════════════════ LANDING (standard, scope body.landing) ══════════════════
   One-pager marketing landing (/). All rules are scoped under
   body[data-page="landing"] / .landing-* and do NOT leak into the terminal
   scan/report pages (there data-page="scan"/"done"/"report"). Palette: warm light.
   DESIGN SKIN "Warm trustworthy service" (2026-08-26): cream + trust emerald
   + life amber, seamless section transitions (not "boxes"). Hero and menu stay
   terminal (untouched).
   I-W4: no inline styles; states via classes/attributes. */

/* RATIONALE (2026-09-27, R1-R3): the light design-system tokens are shared by the landing AND the internal
   public pages (data-page="public" — pilot /proverka-sajta-onlajn). Blocks .landing-block/
   .landing-card/.landing-cmp/.landing-faq are declared WITHOUT a scope but read these variables, so
   without extending the selector on the new page the background/colors fell apart. Terminal pages
   (scan/done/report/verify) and /methodology (its own dark .methodology) are unaffected. */
body[data-page="landing"],
body[data-page="public"] {
  /* warm-trust palette */
  --paper: #faf7f2;
  --card: #fffdf9;
  --tone-1: #f2ede1;
  --tone-2: #efe8da;
  --ink: #2b2a26;
  --ink-soft: #57534a;
  --ink-muted: #5d5a52;
  --teal: #0f766e;
  --teal-deep: #115e59;
  --amber: #d97706;
  --amber-deep: #b45309;
  --coral: #c2410c;
  --olive: #4d7c0f;
  --shadow-card: 0 1px 2px rgba(43, 42, 38, .05), 0 18px 36px -18px rgba(43, 42, 38, .22);
  --radius-card: 20px;
  --landing-bg: #faf7f2;
  --landing-bg-alt: #f5efe4;
  /* landing background system: 9 section tones (plan v0.3) — a smooth light→shadow→light wave (rev. 2026-08-27) */
  --landing-tone-what: #faf7f2;
  --landing-tone-proof: #f8f3eb;
  --landing-tone-how: #f6efe5;
  --landing-tone-report: #f5ede1;
  --landing-tone-forwho: #f3e9da; /* "shadow" peak — in the middle, so the wave stays monotonic */
  --landing-tone-plans: #f5ede1;
  --landing-tone-compare: #f6efe5;
  --landing-tone-limits: #f8f3eb;
  --landing-tone-faq: #faf7f2;
  --landing-text: #2b2a26;
  --landing-muted: #57534a;
  --landing-accent: #0f766e;
  --landing-accent-dark: #115e59;
  --landing-border: rgba(43, 42, 38, 0.09);
  --landing-danger: #c2410c;
  background: var(--landing-bg);
  color: var(--landing-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip; /* colored "spots" run off the viewport edge without horizontal scroll */
}

/* ── hero: TERMINAL (as before, D-5) — dark background, amber text, JetBrains Mono.
   Scope body[data-page="landing"] .landing — hero only; light marketing blocks
   (.landing-*) are unaffected. Children (.h1/.subtitle/#domain/#submit-btn/.prompt/.form-error)
   take the original terminal rules from the block above. ── */
body[data-page="landing"] .landing {
  min-height: calc(100vh - 65px);
  padding: 96px 16px 28px;
  background: var(--bg);
  color: var(--primary);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
body[data-page="landing"] #scan-form {
  scroll-margin-top: 96px; /* CTA anchor "Check website" — under the sticky header */
}

/* ── hero content: centered, the bottom is given to the micro-line and scroll cue ── */
.landing-hero-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ── microcopy under the form (above the scroll cue) ── */
.landing-micro {
  margin-top: 0;
  padding-top: 20px;
  color: var(--secondary);
  font-size: 13px;
}

/* ── scroll cue at the bottom of the hero: "What do we check?" + soft downward animation (pointer to #what) ── */
.landing-scroll {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  color: var(--secondary);
  font-size: 13px;
}
.landing-scroll-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: landing-scroll-bounce 1.8s ease-in-out infinite;
}
@keyframes landing-scroll-bounce {
  0%, 100% { transform: rotate(45deg) translateY(0); opacity: 0.45; }
  50%      { transform: rotate(45deg) translateY(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-scroll-chevron { animation: none; }
}

/* ── "back to top" button (appears on scroll, returns to the hero) — style like "SUBMIT" ── */
.landing-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  background: var(--bg);
  border: 2px solid var(--primary);
  border-radius: 8px;
  color: var(--primary);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.landing-to-top[hidden] { display: none !important; }
.landing-to-top:hover {
  background: var(--primary);
  color: #000000;
}

/* ── sticky header + burger + navigation ── */
.landing-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--secondary);
}
.landing-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.landing-container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
.landing-logo,
.landing-nav a {
  box-sizing: border-box;
}
.landing-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  letter-spacing: 0.02em;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.landing-logo::after {
  content: ".";
  color: var(--secondary);
}
.landing-burger {
  display: none; /* shown on mobile (media query ~840px) */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--secondary);
  border-radius: 10px;
  cursor: pointer;
}
.landing-burger-bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: var(--primary);
}
.landing-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.landing-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 2px;
  color: var(--primary);
  text-decoration: none;
  font-size: 15px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.landing-nav a:hover { color: #e9bd9a; }

/* H-04: active section (aria-current, set by app.js via IntersectionObserver) */
.landing-nav a[aria-current="true"] {
  color: #e9bd9a;
  box-shadow: inset 0 -2px 0 var(--secondary);
}
@media (max-width: 840px) {
  .landing-nav a[aria-current="true"] {
    border-left: 3px solid var(--secondary);
    padding-left: 12px;
    box-shadow: none;
    background: rgba(191, 128, 101, 0.08);
  }
}

/* H-03: compact mode 841-1080px — header on one line, height 64px */
@media (min-width: 841px) and (max-width: 1080px) {
  .landing-header-inner { gap: 10px; }
  .landing-logo { font-size: 18px; }
  .landing-nav { flex-wrap: nowrap; gap: 4px 4px; }
  .landing-nav a { font-size: 14px; letter-spacing: 0; white-space: nowrap; }
}
/* H-06: "Check website" CTA in the header — amber button in terminal style
   (overrides the teal .landing-cta: on the black header amber matches the hero block) */
.landing-nav .landing-header-cta {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  background: var(--primary);
  border-color: var(--primary);
  color: #000;
  border-radius: 8px;
}
.landing-nav .landing-header-cta:hover {
  background: #e9bd9a;
  color: #000;
  border-color: #e9bd9a;
}

/* ── CTA / buttons ── */
.landing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  background: var(--landing-accent);
  border: 1px solid var(--landing-accent);
  border-radius: 10px;
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.landing-cta:hover {
  background: var(--landing-accent-dark);
  color: #ffffff;
}
/* "coming soon" stub: looks like a button but is NOT active (aria-disabled, WITHOUT disabled,
   so that the click is intercepted by JS and shows a message, L3) */
.landing-stub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  background: var(--landing-bg-alt);
  border: 1px dashed #c9c9cc;
  border-radius: 10px;
  color: var(--landing-muted);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: not-allowed;
}

/* ── marketing sections (OUTSIDE <main class="landing">) ── */
.landing-block {
  position: relative;
  background: var(--landing-bg);
  padding: 72px 0;
  scroll-margin-top: 84px; /* anchors under the sticky header */
}
/* ── Landing background system (2026-08-27, plan v0.3, audits R1+R2) ──
   Backgrounds/links only. The section structure and content and the terminal hero/menu are NOT touched. */
/* STEP 0 — replaces the old "design skin" glare system: global ::before/::after
   are reset (background + geometry), so that no section carries remnants of the old "spots". */
.landing-block::before,
.landing-block::after {
  background: none;
  position: absolute;
  z-index: 0;
  pointer-events: none;
  content: "";
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  width: auto;
  height: auto;
  border-radius: 0;
  margin: 0;
}
.landing-block > .landing-container { position: relative; z-index: 1; }
.landing-block--alt { background: var(--landing-bg-alt); }

/* STEP 1 — tone of each section (background-color only, NOT shorthand — otherwise id specificity
   would reset the background-image texture of .landing-block--alt; R1-S3) */
#what     { background-color: var(--landing-tone-what); }
#proof    { background-color: var(--landing-tone-proof); }
#how      { background-color: var(--landing-tone-how); }
#report   { background-color: var(--landing-tone-report); }
#forwho   { background-color: var(--landing-tone-forwho); }
#plans    { background-color: var(--landing-tone-plans); }
#compare  { background-color: var(--landing-tone-compare); }
#limits   { background-color: var(--landing-tone-limits); }
#faq      { background-color: var(--landing-tone-faq); }

/* STEP 2 — atmospheric glows (per-section ::before, alpha ≤0.06; #faq glow removed — owner dec. 2026-08-27) */
#proof::before,  #how::before   { --glow: rgba(217,119,6,.06); }   /* amber — echoes the heading accent */
#report::before, #forwho::before{ --glow: rgba(15,118,110,.05); }  /* teal — secondary accent (trust/report) */
#plans::before   { --glow: rgba(194,65,12,.04); }                  /* coral — slight "heat" near prices/risk */
#proof::before,
#how::before,
#report::before,
#forwho::before,
#plans::before {
  background: radial-gradient(circle, var(--glow) 0%, transparent 65%);
  position: absolute;
  z-index: 0;
  pointer-events: none;
  content: "";
  top: 10%;
  right: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
}

/* STEP 3 — seams between sections (::after, 24px at the bottom, smooth transition into the next tone; R1-C2 full geometry) */
#what::after,
#proof::after,
#how::after,
#report::after,
#forwho::after,
#plans::after,
#compare::after,
#limits::after,
#faq::after {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  content: "";
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: 24px;
  border-radius: 0;
  margin: 0;
}
#what::after    { background: linear-gradient(to bottom, var(--landing-tone-what),    var(--landing-tone-proof)); }
#proof::after   { background: linear-gradient(to bottom, var(--landing-tone-proof),   var(--landing-tone-how)); }
#how::after     { background: linear-gradient(to bottom, var(--landing-tone-how),     var(--landing-tone-report)); }
#report::after  { background: linear-gradient(to bottom, var(--landing-tone-report),  var(--landing-tone-forwho)); }
#forwho::after  { background: linear-gradient(to bottom, var(--landing-tone-forwho),  var(--landing-tone-plans)); }
#plans::after   { background: linear-gradient(to bottom, var(--landing-tone-plans),   var(--landing-tone-compare)); }
#compare::after { background: linear-gradient(to bottom, var(--landing-tone-compare), var(--landing-tone-limits)); }
#limits::after  { background: linear-gradient(to bottom, var(--landing-tone-limits),  var(--landing-tone-faq)); }
#faq::after     { background: linear-gradient(to bottom, var(--landing-tone-faq),     var(--landing-bg-alt)); } /* → footer */

/* STEP 4 — "paper" texture on --alt sections (#how,#forwho,#compare,#faq); crossed diagonals (R1-M3) */
.landing-block--alt {
  background-image:
    repeating-linear-gradient(45deg, rgba(43,42,38,.02) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(-45deg, rgba(43,42,38,.015) 0 1px, transparent 1px 8px);
}

/* STEP 5 — mobile adaptation of the glows (R2-M2): more compact so the "watercolor" doesn't go off-screen */
@media (max-width: 640px) {
  #proof::before,
  #how::before,
  #report::before,
  #forwho::before,
  #plans::before {
    right: -40px;
    width: 240px;
    height: 240px;
  }
}
.landing-block h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 12px;
}
.landing-block h2 em {
  font-style: normal;
  color: var(--amber);
  text-decoration: underline;
  text-decoration-color: rgba(217, 119, 6, .45);
  text-decoration-thickness: 4px;
  text-underline-offset: 7px;
}
.landing-lead {
  color: var(--landing-muted);
  font-size: 16px;
  max-width: 680px;
  margin-bottom: 36px;
}

/* ── fluid grids: auto-fit/minmax, no fixed pixel columns ── */
.landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.landing-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.landing-card {
  background: var(--card);
  border: 1px solid rgba(43, 42, 38, .08);
  border-radius: var(--radius-card);
  padding: 20px;
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
}
.landing-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(43, 42, 38, .06), 0 30px 50px -22px rgba(43, 42, 38, .30); }
}
.landing-card h3 {
  font-size: 17px;
  margin-bottom: 8px;
}
.landing-card p {
  color: var(--landing-muted);
  font-size: 14.5px;
}
.landing-more {
  margin-top: 28px;
}
.landing-more a {
  display: inline-block;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--landing-accent);
  border-radius: 8px;
  color: var(--landing-accent);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.landing-more a:hover {
  background: var(--landing-accent);
  color: #fff;
  text-decoration: none;
}
.landing-more a:focus-visible {
  outline: 2px solid var(--landing-accent);
  outline-offset: 2px;
}

/* ── #what (L-PB-02): readability + accent bar (scoped so as not to affect other blocks) ── */
#what .landing-lead { font-size: 18px; line-height: 1.6; margin-bottom: 40px; }
#what .landing-grid { gap: 24px; }
#what .landing-card { position: relative; padding: 28px 24px 24px; }
#what .landing-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(15, 118, 110, 0.08);
  color: var(--landing-accent);
  margin-bottom: 14px;
}
#what .landing-card-icon svg { width: 22px; height: 22px; }
#what .landing-card h3 { font-size: 18px; margin-bottom: 12px; }
#what .landing-card p { font-size: 15px; line-height: 1.6; }
@media (max-width: 840px) {
  #what .landing-lead { font-size: 17px; margin-bottom: 28px; }
  #what .landing-grid { gap: 16px; }
  #what .landing-card { padding: 24px 20px 20px; }
}
@media (max-width: 480px) {
  #what .landing-lead { font-size: 16px; }
  #what .landing-card p { font-size: 14.5px; }
}

/* ── #forwho (L-PB-05): readability + accent bar — paired with #what ── */
#forwho .landing-lead { font-size: 18px; line-height: 1.6; margin-bottom: 40px; }
#forwho .landing-grid { gap: 24px; }
#forwho .landing-card { position: relative; padding: 28px 24px 24px; }
#forwho .landing-card::before { content: ""; display: block; width: 32px; height: 3px; border-radius: 2px; background: var(--landing-accent); margin-bottom: 12px; }
#forwho .landing-card h3 { font-size: 18px; margin-bottom: 12px; }
#forwho .landing-card p { font-size: 15px; line-height: 1.6; }
@media (max-width: 840px) {
  #forwho .landing-lead { font-size: 17px; margin-bottom: 28px; }
  #forwho .landing-grid { gap: 16px; }
  #forwho .landing-card { padding: 24px 20px 20px; }
}
@media (max-width: 480px) {
  #forwho .landing-lead { font-size: 16px; }
  #forwho .landing-card p { font-size: 14.5px; }
}

/* ── #how: 4 steps, warm cards ── */
.landing-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.landing-step {
  background: var(--landing-bg);
  border: 1px solid var(--landing-border);
  border-radius: 12px;
  padding: 20px;
}
.landing-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--landing-accent);
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 12px;
}
.landing-step h3 {
  font-size: 17px;
  margin-bottom: 8px;
}
.landing-step p {
  color: var(--landing-muted);
  font-size: 14.5px;
}

/* ── #how (L-PB-03): warm cards, colored numbers 01–04 along the "cycle track" ── */
#how .landing-steps { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
#how .landing-lead { font-size: 18px; line-height: 1.6; margin-bottom: 40px; }
#how .landing-step {
  position: relative; z-index: 1;
  background: var(--card);
  border: 1px solid rgba(43, 42, 38, .07);
  border-radius: var(--radius-card);
  padding: 26px 24px 28px;
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
}
#how .landing-step:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(43, 42, 38, .06), 0 30px 50px -22px rgba(43, 42, 38, .30); }
#how .landing-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  color: #ffffff; font-size: 19px; font-weight: 800; letter-spacing: .02em;
  margin-bottom: 14px;
}
#how .landing-step:nth-child(1) { border-top: 3px solid var(--teal); }
#how .landing-step:nth-child(2) { border-top: 3px solid var(--amber); }
#how .landing-step:nth-child(3) { border-top: 3px solid var(--coral); }
#how .landing-step:nth-child(4) { border-top: 3px solid var(--olive); }
#how .landing-step:nth-child(1) .landing-step-num { background: var(--teal); box-shadow: 0 10px 18px -10px rgba(15, 118, 110, .75); }
#how .landing-step:nth-child(2) .landing-step-num { background: var(--amber-deep); box-shadow: 0 10px 18px -10px rgba(180, 83, 9, .75); }
#how .landing-step:nth-child(3) .landing-step-num { background: var(--coral); box-shadow: 0 10px 18px -10px rgba(194, 65, 12, .75); }
#how .landing-step:nth-child(4) .landing-step-num { background: var(--olive); box-shadow: 0 10px 18px -10px rgba(77, 124, 15, .75); }
#how .landing-step h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); margin-bottom: 8px; }
#how .landing-step p { font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
#how .landing-steps::before { content: ""; position: absolute; z-index: 0; top: 52px; left: 12.5%; right: 12.5%; border-top: 2px dashed rgba(180, 83, 9, .35); }
@media (max-width: 900px) {
  #how .landing-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  #how .landing-steps::before { display: none; }
  #how .landing-lead { font-size: 17px; margin-bottom: 28px; }
  #how .landing-step { padding: 24px 22px 26px; }
}
@media (max-width: 560px) {
  #how .landing-steps { grid-template-columns: 1fr; gap: 20px; }
  #how .landing-steps::before { display: block; left: 46px; right: auto; top: 0; bottom: 0; border-top: none; border-left: 2px dashed rgba(180, 83, 9, .35); }
  #how .landing-lead { font-size: 16px; }
  #how .landing-step { padding: 22px 20px 24px; }
  #how .landing-step p { font-size: 14.5px; }
}

/* ── #report: demo finding card + tabs (radio, no JS) ── */
.landing-finding {
  background: var(--card);
  border: 1px solid rgba(43, 42, 38, .08);
  border-left: 4px solid var(--landing-danger);
  border-radius: var(--radius-card);
  padding: 20px;
  box-shadow: var(--shadow-card);
}
.landing-finding-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}
.landing-finding-head h3 {
  font-size: 17px;
}
.landing-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.landing-badge--high {
  background: #fbe9e0;
  color: #b33d0c;
}
.landing-finding-text {
  color: var(--landing-text);
  font-size: 15px;
  margin-bottom: 6px;
}
.landing-finding-sec {
  color: var(--landing-muted);
  font-size: 13px;
  margin-top: 10px;
}
.landing-finding-sec code {
  font-family: "JetBrains Mono", Consolas, "Courier New", monospace;
  font-size: 12.5px;
  background: var(--landing-bg-alt);
  border: 1px solid var(--landing-border);
  border-radius: 6px;
  padding: 2px 6px;
  overflow-wrap: anywhere;
}

/* ── #report (L-PB-04): readability on par with #what/#how ── */
#report .landing-finding { padding: 24px; }
#report .landing-finding-text { font-size: 16px; }
#report .landing-finding-sec { font-size: 14px; line-height: 1.6; }

/* ── #report (reframe, L-PB-04): summary line ── */
.landing-report-summary { font-size: 16px; line-height: 1.6; margin: 20px 0; color: var(--landing-text); }
.landing-report-summary b { color: var(--landing-accent); }

/* ── #report: caption + carousel of finding cards ── */
.landing-report-caption { color: var(--landing-muted); font-size: 14px; margin: 26px 0 4px; }
.landing-badge--medium { background: #fdeeda; color: #a04a08; }
.landing-badge--ok { background: #e9f2e9; color: #3f6212; }
.landing-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 8px;
}
@media (max-width: 840px) {
  .landing-report-grid { grid-template-columns: 1fr; }
}
#what .landing-card p.landing-card-sub {
  color: var(--landing-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: -6px 0 10px;
}
.landing-faq summary { cursor: pointer; }
.landing-faq summary:focus-visible { outline: 2px solid var(--landing-accent); outline-offset: 2px; border-radius: 6px; }
.landing-faq summary::marker { color: var(--landing-accent); }

/* ── #compare: table ── */
.landing-cmp-wrap {
  overflow-x: auto;
}
.landing-cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: var(--landing-bg);
}
.landing-cmp th,
.landing-cmp td {
  border: 1px solid var(--landing-border);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}
.landing-cmp thead th {
  background: var(--landing-bg-alt);
  font-weight: 600;
}
.landing-cmp tbody th {
  font-weight: 600;
  white-space: nowrap;
}
.landing-cmp .landing-cmp-best {
  color: var(--landing-accent);
}
/* L-PB-06: highlight "our" product column (2nd column) — conversion accent */
#compare .landing-cmp thead th:nth-child(2) { background: rgba(15, 118, 110, 0.08); }
#compare .landing-cmp tbody td:nth-child(2) { background: rgba(15, 118, 110, 0.045); }

/* ── #plans: 3 pricing columns ── */
.landing-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  align-items: stretch;
}
.landing-plan {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid rgba(43, 42, 38, .08);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.landing-plan--featured {
  border: 2px solid var(--landing-accent);
  box-shadow: 0 10px 28px rgba(15, 118, 110, 0.16);
}
.landing-plan h3 {
  font-size: 18px;
}
.landing-plan-sub {
  color: var(--landing-muted);
  font-size: 13.5px;
  margin-top: 2px;
}
.landing-price {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  margin: 14px 0 4px;
}
.landing-price-unit {
  font-size: 15px;
  font-weight: 400;
  color: var(--landing-muted);
  margin-left: 4px;
}
.landing-price-ladder {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 14px 0 2px;
}
.landing-price-old,
.landing-price-mid {
  color: var(--landing-muted);
  font-size: 15px;
  text-decoration: line-through;
}
.landing-price-new {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}
.landing-price-note {
  color: var(--landing-muted);
  font-size: 13px;
}
.landing-plan ul {
  list-style: none;
  margin: 16px 0 24px;
  flex: 1;
}
.landing-plan li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: 14.5px;
}
.landing-plan li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--landing-accent);
  font-weight: 700;
}
.landing-plans-note {
  margin-top: 20px;
  color: var(--landing-muted);
  font-size: 13.5px;
}
/* L-PB-07: feature readability paired with the other blocks + emphasis on the featured plan */
#plans .landing-plan li { font-size: 15px; line-height: 1.6; }
#plans .landing-plan--featured { background: rgba(15, 118, 110, 0.05); }

/* ── #limits: "What we do / What we don't do" + "Data and law" ── */
.landing-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.landing-do,
.landing-dont {
  list-style: none;
  margin-top: 8px;
}
.landing-do li,
.landing-dont li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: 14.5px;
  color: var(--landing-muted);
}
.landing-do li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--olive);
  font-weight: 700;
}
.landing-dont li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: var(--coral);
  font-weight: 700;
}
.landing-card--law {
  margin-top: 16px;
}
.landing-card--law p {
  color: var(--landing-text);
}
/* L-PB-08: card padding paired with the other blocks + list readability */
#limits .landing-card { padding: 24px; }
#limits .landing-do li,
#limits .landing-dont li { font-size: 15px; line-height: 1.6; }
/* L-PB-08: 2 cards (do/don't) — exactly 2 columns, no empty 3rd cell */
#limits .landing-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 840px) {
  #limits .landing-cols { grid-template-columns: 1fr; }
}

/* ── #faq ── */
.landing-faq {
  display: grid;
  gap: 12px;
}
.landing-faq details {
  background: var(--landing-bg);
  border: 1px solid var(--landing-border);
  border-radius: 12px;
  padding: 16px 20px;
}
.landing-faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  min-height: 44px;
  display: flex;
  align-items: center;
  list-style: none;
}
.landing-faq summary::-webkit-details-marker { display: none; }
.landing-faq summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--landing-muted);
  transition: transform 0.15s ease;
}
.landing-faq details[open] summary::after { transform: rotate(180deg); }
.landing-faq summary:focus-visible { outline: 2px solid var(--landing-accent); outline-offset: 2px; }
.landing-faq details p {
  color: var(--landing-muted);
  font-size: 15px;
  line-height: 1.6;
  margin-top: 8px;
}

/* ── footer ── */
.landing-footer {
  background: var(--landing-bg-alt);
  border-top: none; /* 2026-08-27: 1px line removed — the #faq→footer seam is seamless (owner dec., R2-M1) */
  padding: 48px 0 40px;
  font-size: 14px;
  color: var(--landing-muted);
}
.landing-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-bottom: 28px;
}
.landing-footer h3 {
  font-size: 15px;
  color: var(--landing-text);
  margin-bottom: 10px;
}
.landing-footer a {
  display: block;
  padding: 6px 0;
  color: var(--landing-muted);
  text-decoration: none;
}
.landing-footer a:hover { color: var(--landing-accent); }
.landing-footer p { margin-bottom: 4px; }
.landing-footer-gov {
  margin-top: 10px;
  font-size: 13px;
}
.landing-footer-note {
  border-top: 1px solid var(--landing-border);
  padding-top: 16px;
  font-size: 13px;
}
/* ── social links in the footer (Zen / VKontakte): monochrome, hover → accent ── */
.landing-footer .landing-social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.landing-footer .landing-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--landing-border);
  color: var(--landing-muted);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.landing-footer .landing-social a:hover {
  color: var(--landing-accent);
  border-color: var(--landing-accent);
  background-color: rgba(0, 0, 0, 0.04);
}
.landing-footer .landing-social a:focus-visible {
  outline: 2px solid var(--landing-accent);
  outline-offset: 2px;
}
.landing-footer .landing-social svg {
  display: block;
  width: 17px;
  height: 17px;
}

/* ── modals (dialog; hidden → display:none!important so flex can't override it) ── */
.landing-modal[hidden] {
  display: none !important;
}
.landing-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(26, 26, 26, 0.55); /* backdrop: a click on it closes (JS) */
}
.landing-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--landing-bg);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}
.landing-modal-dialog h3 {
  font-size: 20px;
  margin-bottom: 8px;
  padding-right: 32px;
}
.landing-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--landing-bg-alt);
  border: 1px solid var(--landing-border);
  border-radius: 10px;
  color: var(--landing-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.landing-modal-close:hover {
  color: var(--landing-text);
  border-color: var(--landing-muted);
}
.landing-modal-note {
  margin: 12px 0 4px;
  padding: 10px 12px;
  background: var(--landing-bg-alt);
  border-left: 3px solid var(--landing-accent);
  border-radius: 8px;
  font-size: 14px;
  color: var(--landing-text);
}
.landing-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

/* ── CHECK SELECTION modal: terminal style of the hero block (2026-09-01).
   Scope ONLY #tier-modal — the lead modal stays light ("warm service").
   Elements mirror the hero visuals: dark background, 2px amber border, JetBrains Mono,
   buttons like "SUBMIT" (inverted on hover). ── */
#tier-modal .landing-modal-dialog {
  background: var(--bg);
  border: 2px solid var(--primary);
  border-radius: 0;
  font-family: var(--font-mono);
  color: var(--primary);
  box-shadow: 0 0 0 1px var(--secondary), 0 18px 60px rgba(0, 0, 0, 0.85);
}
#tier-modal .landing-modal-dialog h3 {
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#tier-modal .landing-modal-note {
  background: rgba(191, 128, 101, 0.08);
  border-left: 3px solid var(--primary);
  color: var(--primary);
}
#tier-modal .landing-modal-close {
  background: var(--bg);
  border: 1px solid var(--primary);
  border-radius: 0;
  color: var(--primary);
  font-family: var(--font-mono);
}
#tier-modal .landing-modal-close:hover {
  background: var(--primary);
  color: #000;
  border-color: var(--primary);
}
#tier-modal .landing-modal-actions .landing-cta {
  width: 100%;
  background: var(--bg);
  border: 2px solid var(--primary);
  border-radius: 0;
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: normal;
  line-height: 1.3;
  text-align: center;
}
#tier-modal .landing-modal-actions .landing-cta:hover {
  background: var(--primary);
  color: #000;
  border-color: var(--primary);
}
.landing-lead-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}
/* ── Expert request: honeypot and consent checkbox (2026-09-27) ──
   honeypot: a real input field, invisible to humans and unreachable from the keyboard
   (tabindex="-1" + aria-hidden in the markup); a bot that fills in every field gives itself away.
   Hidden via CSS, NOT an inline style — CSP style-src 'self' without 'unsafe-inline' (I-W4). */
.lead-trap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.landing-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;          /* tap target per the guideline (≥44px) */
  padding: 4px 0;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;          /* inside .landing-field label the weight is 600 — here it's regular text */
  cursor: pointer;
}
.landing-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--landing-accent);
}
.landing-check a { color: var(--landing-accent); }
.landing-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.landing-field label {
  font-size: 14px;
  font-weight: 600;
}
.landing-field input,
.landing-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--landing-border);
  border-radius: 10px;
  background: var(--landing-bg);
  color: var(--landing-text);
  font-family: inherit;
  font-size: 15px;
}
.landing-field textarea {
  min-height: 88px;
  resize: vertical;
}
.landing-field input:focus,
.landing-field textarea:focus {
  outline: 2px solid var(--landing-accent);
  outline-offset: 1px;
}

/* ── responsive: ~840px — grids in 1 column, burger, hero form stacked ── */
@media (max-width: 840px) {
  .landing-burger {
    display: inline-flex;
  }
  .landing-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* H-02: terminal dark panel (was white --landing-bg → contrast failure) */
    background: var(--bg);
    border-bottom: 1px solid var(--secondary);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6);
    padding: 8px 20px 16px;
    /* H-05: don't clip items on short/landscape screens */
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .landing-nav--open {
    display: flex;
  }
  .landing-nav a {
    display: flex;
    width: 100%;
    min-height: 44px;
    padding: 12px 0;
    justify-content: flex-start;
    /* H-02: divider in terminal tone (was #f0f0f1) */
    border-bottom: 1px solid rgba(138, 95, 70, 0.35);
  }
  .landing-nav a:last-child {
    border-bottom: 0;
  }
  .landing-nav .landing-cta {
    margin-top: 12px;
    border-bottom: none;
  }
  body[data-page="landing"] .landing {
    padding: 72px 16px 48px;
  }
  body[data-page="landing"] .h1 {
    font-size: 28px;
  }
  /* hero form stacked (previously only <480px) */
  body[data-page="landing"] .form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  body[data-page="landing"] #domain,
  body[data-page="landing"] #submit-btn {
    width: 100%;
  }
  .landing-block {
    padding: 48px 0;
  }
  .landing-grid,
  .landing-grid--3,
  .landing-steps,
  .landing-plans,
  .landing-cols {
    grid-template-columns: 1fr;
  }
  .landing-cmp {
    font-size: 13.5px;
    min-width: 640px;
  }
}

/* ── ~480px: tighter spacing/fonts ── */
@media (max-width: 480px) {
  body[data-page="landing"] {
    font-size: 15px;
  }
  .landing-block {
    padding: 40px 0;
  }
  .landing-block h2 {
    font-size: 24px;
  }
  .landing-container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .landing-plan {
    padding: 20px;
  }
  .landing-modal {
    padding: 12px;
  }
  .landing-modal-dialog {
    padding: 20px;
  }
}

/* ── #proof (social proof, 2026-08-27): "What we found" → "What we did" → card ── */
/* Semantic logic: the main block is "What we found" (severity scale, critical — accent),
   the secondary context is "What we did" (trust, muted). */
#proof .landing-proof-group { margin-bottom: 30px; }
#proof .landing-proof-group:last-child { margin-bottom: 0; }
#proof .landing-proof-group-title {
  font-size: 17px; font-weight: 700; color: var(--landing-text);
  margin: 0 0 12px;
}
#proof .landing-proof-group-title em { font-style: normal; color: var(--amber); text-decoration: underline; }

#proof .landing-proof-row { display: grid; gap: 16px; }
#proof .landing-proof-row--main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#proof .landing-proof-row--sev { grid-template-columns: repeat(3, minmax(0, 1fr)); }

#proof .landing-proof {
  background: var(--card);
  border: 1px solid rgba(43, 42, 38, .08);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#proof .landing-proof-value { font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }

/* "What we did" — secondary context: number on the left, text on the right, muted */
#proof .landing-proof--main {
  flex-direction: row; align-items: center; gap: 16px; padding: 22px;
}
#proof .landing-proof--main .landing-proof-value { font-size: 40px; color: var(--landing-muted); }
#proof .landing-proof--main .landing-proof-label { font-size: 15px; font-weight: 600; color: var(--landing-text); }

/* "What we found" — severity scale: colored cards + badge. Critical — accent. */
#proof .landing-proof--sev { gap: 10px; }
#proof .landing-proof--sev .landing-proof-value { font-size: 40px; }
#proof .landing-proof-badge {
  align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .01em;
  padding: 3px 9px; border-radius: 999px; line-height: 1.2;
}
#proof .landing-proof--critical { border-color: rgba(166, 27, 27, .30); background: #fff7f6; }
#proof .landing-proof--critical .landing-proof-value { font-size: 48px; color: #A61B1B; }
#proof .landing-proof--critical .landing-proof-badge { background: rgba(166, 27, 27, .12); color: #A61B1B; }
#proof .landing-proof--high .landing-proof-value { color: #B45309; }
#proof .landing-proof--high .landing-proof-badge { background: rgba(180, 83, 9, .13); color: #B45309; }
#proof .landing-proof--medium .landing-proof-value { color: #6E6A5B; }
#proof .landing-proof--medium .landing-proof-badge { background: rgba(110, 106, 91, .14); color: #6E6A5B; }

#proof .landing-proof-label { color: var(--landing-muted); font-size: 14px; line-height: 1.4; }

/* caption "TOP-3 vulnerabilities:" — top margin so it doesn't stick to the cards */
#proof .landing-proof-caption { font-size: 17px; font-weight: 700; color: var(--landing-text); margin: 48px 0 12px; }

/* "as in the report" card: metric next to the heading, progress bar, structured list */
#proof .landing-proof-card {
  background: var(--card); border: 1px solid rgba(43, 42, 38, .08);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 24px;
}
#proof .landing-proof-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
#proof .landing-proof-card-title { font-size: 20px; color: var(--landing-text); margin: 0; }
#proof .landing-proof-card-count { font-size: 16px; font-weight: 700; color: var(--landing-accent-dark); white-space: nowrap; }
#proof .landing-proof-card-bar { height: 6px; border-radius: 999px; background: rgba(43, 42, 38, .10); overflow: hidden; margin: 4px 0 18px; }
#proof .landing-proof-card-bar-fill { display: block; height: 100%; background: var(--landing-accent); border-radius: 999px; }
#proof .landing-proof-card-item { margin: 0 0 14px; max-width: 65ch; }
#proof .landing-proof-card-item-title { font-size: 14px; font-weight: 700; color: var(--landing-text); margin: 0 0 4px; }
#proof .landing-proof-card-item-text { font-size: 15px; color: var(--landing-muted); line-height: 1.5; margin: 0; }
#proof .landing-proof-card-item--key { padding: 12px 14px; background: rgba(15, 118, 110, .07); border-radius: 12px; max-width: 65ch; }
#proof .landing-proof-card-item--key .landing-proof-card-item-text { color: var(--landing-text); }

/* "TOP-3 vulnerabilities" carousel: one slide per screen, arrows + dots (a11y) */
#proof .landing-carousel { position: relative; }
#proof .landing-carousel-track { position: relative; display: grid; }
#proof .landing-carousel-slide { grid-area: 1 / 1; visibility: hidden; }
#proof .landing-carousel-slide.is-active { visibility: visible; animation: lc-in 0.3s ease; }
@keyframes lc-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
#proof .landing-carousel-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
#proof .landing-carousel-nav {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--landing-bg); border: 1px solid var(--landing-border); border-radius: 50%;
  color: var(--landing-text); font-size: 20px; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
#proof .landing-carousel-nav:hover { background: var(--landing-accent); color: #fff; border-color: var(--landing-accent); }
#proof .landing-carousel-nav:focus-visible { outline: 2px solid var(--landing-accent); outline-offset: 2px; }
#proof .landing-carousel-dots { display: flex; align-items: center; gap: 6px; }
#proof .landing-carousel-dot { position: relative; width: 44px; height: 44px; padding: 0; background: transparent; border: none; cursor: pointer; }
#proof .landing-carousel-dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid var(--landing-border); background: transparent; transition: background .2s, border-color .2s; }
#proof .landing-carousel-dot:hover::before { border-color: var(--landing-accent); }
#proof .landing-carousel-dot.is-active::before { background: var(--landing-accent); border-color: var(--landing-accent); }

@media (max-width: 720px) {
  #proof .landing-proof-row--main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  #proof .landing-proof-row--sev { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  #proof .landing-proof { padding: 16px; }
  #proof .landing-proof--sev .landing-proof-value { font-size: 34px; }
  #proof .landing-proof--critical .landing-proof-value { font-size: 42px; }
  #proof .landing-proof-card { padding: 18px; }
}
@media (max-width: 420px) {
  #proof .landing-proof-row--main { grid-template-columns: 1fr; }
  #proof .landing-proof--main { gap: 12px; }
  #proof .landing-proof-card-head { flex-direction: column; gap: 4px; align-items: flex-start; }
}

/* ── Paywall front (R5): ownership verification (screen 1 of the polygon) ── */
.verify-body{padding:26px 24px;color:var(--amber,#bf8065);font-family:var(--mono,ui-monospace,monospace)}
.verify-h1{font-size:24px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber,#bf8065);margin:0 0 8px;text-align:left}
.verify-sub{color:var(--amber2,#8a5f46);font-size:13px;margin:0 0 20px;max-width:560px;text-align:left}
.verify-steps{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px;font-size:12px}
.verify-step{padding:5px 10px;border:1px solid #3a2a20;border-radius:4px;color:var(--amber2,#8a5f46)}
.verify-step.on{color:var(--amber,#bf8065);border-color:var(--amber,#bf8065)}
.verify-field{margin-bottom:14px;max-width:460px}
.verify-label{font-size:12px;color:var(--amber2,#8a5f46);margin-bottom:6px;display:block}
.verify-input{width:100%;background:#000;color:var(--amber,#bf8065);border:2px solid var(--amber,#bf8065);border-radius:0;padding:12px 13px;font-family:var(--mono,ui-monospace,monospace);font-size:16px;outline:none}
.verify-input::placeholder{color:#4a3328}
.verify-input:focus{box-shadow:0 0 10px rgba(191,128,101,.28)}
.verify-code{letter-spacing:.3em}
.verify-row{display:flex;gap:10px;align-items:stretch;max-width:460px;margin:0 0 10px;flex-wrap:wrap}
.verify-btn{background:#000;color:var(--amber,#bf8065);border:2px solid var(--amber,#bf8065);border-radius:0;padding:12px 16px;font-family:var(--mono,ui-monospace,monospace);font-weight:700;letter-spacing:.06em;font-size:12px;cursor:pointer;transition:.18s;white-space:nowrap}
.verify-btn:hover{background:var(--amber,#bf8065);color:#000}
.verify-btn--primary{background:var(--amber,#bf8065);color:#000}
.verify-btn:disabled{opacity:.35;cursor:not-allowed;background:#000;color:var(--amber,#bf8065)}
.verify-btn--primary:disabled{background:#000;color:var(--amber,#bf8065)}
.verify-msg{color:var(--amber2,#8a5f46);font-size:12px;margin:6px 0 0;min-height:14px}
.verify-msg.ok{color:#7fbf7f}
.verify-msg.err{color:#c06b5a}
.verify-note{color:var(--amber2,#8a5f46);font-size:12px;margin-top:14px}
/* "To home page" — terminal link-button (fixed top-left, doesn't interfere with window centering) */
.verify-back{position:fixed;top:16px;left:16px;z-index:10;display:inline-flex;align-items:center;gap:6px;color:var(--amber2,#8a5f46);font-family:var(--mono,ui-monospace,monospace);font-size:13px;text-decoration:none;padding:6px 12px;border:1px solid var(--amber,#bf8065);border-radius:4px;background:transparent;transition:.15s;max-width:fit-content}
.verify-back:hover{background:var(--amber,#bf8065);color:#000;text-decoration:none}
.verify-consent{display:flex;gap:10px;align-items:flex-start;max-width:460px;margin:0 0 16px;font-size:13px;color:var(--amber2,#8a5f46);text-align:left;cursor:pointer;line-height:1.45}
/* native input hidden but still focusable/in the a11y tree */
.verify-consent-input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
/* custom box — terminal square: black background, amber border */
.verify-consent-box{flex:0 0 20px;width:20px;height:20px;margin-top:1px;border:2px solid var(--amber,#bf8065);background:#000;position:relative;transition:background .15s ease,border-color .15s ease}
/* checkmark (L-shaped, pure CSS — no inline) when checked */
.verify-consent-input:checked+.verify-consent-box{background:var(--amber,#bf8065)}
.verify-consent-input:checked+.verify-consent-box::after{content:'';position:absolute;left:6px;top:1px;width:5px;height:9px;border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* focus ring (a11y) */
.verify-consent-input:focus-visible+.verify-consent-box{box-shadow:0 0 0 2px rgba(191,128,101,.35)}
/* ── Paywall front (R5): teaser block in done (counters + index + price) ── */
/* v0.7.1: teaser in terminal aesthetic (like verify) — dark card,
   amber accent, colored severity badges (were white on white = "unstyled").
   CSP style-src 'self' — no inline. */
.done-body{padding:20px 4px 4px;font-family:var(--mono,ui-monospace,monospace)}
.paywall-teaser{max-width:560px;margin:4px auto 0}
.pv-steps{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;font-size:12px}
.pv-step{padding:5px 10px;border:1px solid #3a2a20;border-radius:4px;color:var(--amber2,#8a5f46)}
.pv-step.on{color:var(--amber,#bf8065);border-color:var(--amber,#bf8065)}
.pv-step.cur{color:var(--amber,#bf8065);border-color:var(--amber,#bf8065);background:rgba(191,128,101,.12)}
.pv-head h2{font-size:20px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--amber,#bf8065);margin:0 0 6px;text-align:left}
.pv-head p{color:var(--amber2,#8a5f46);font-size:13px;margin:0 0 16px;text-align:left}
.pv-sev{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.pv-sev-badge{padding:6px 12px;border-radius:4px;font-size:12px;font-weight:600;color:#fff}
.pv-sev-badge.pv-sev-a{background:#9b1c1c}   /* critical */
.pv-sev-badge.pv-sev-b{background:#c0392b}   /* high */
.pv-sev-badge.pv-sev-c{background:#c07a30}   /* medium */
.pv-sev-badge.pv-sev-d{background:#8a5f46}   /* low */
.pv-sev-badge.pv-sev-e{background:#4a3328}   /* info */
.pv-risk{font-size:14px;margin:0 0 6px;color:var(--amber2,#8a5f46)}
.pv-risk b{font-size:22px;color:var(--amber,#bf8065)}
.pv-price{font-size:14px;margin:0 0 18px;color:var(--amber2,#8a5f46)}
.pv-price b{font-size:18px;color:var(--amber,#bf8065)}
.pv-actions{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 4px}
.pv-btn{display:inline-block;background:var(--amber,#bf8065);color:#000;padding:13px 22px;border:2px solid var(--amber,#bf8065);border-radius:0;font-weight:700;font-size:13px;letter-spacing:.06em;font-family:var(--mono,ui-monospace,monospace);cursor:pointer;text-decoration:none}
.pv-btn:hover{background:#000;color:var(--amber,#bf8065)}
.pv-cols{color:var(--amber2,#8a5f46);font-size:12px;margin-top:14px;max-width:560px;text-align:left}
/* ── /methodology: full list of checks (2026-09-03) ── */
.methodology{max-width:1160px;margin:0 auto;padding:48px 24px 64px;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--amber2,#8a5f46)}
.methodology-home{display:inline-block;margin:0 0 22px;background:transparent;color:var(--amber,#bf8065);border:1px solid var(--amber,#bf8065);border-radius:4px;padding:10px 18px;font-family:var(--mono,ui-monospace,monospace);font-weight:700;font-size:12px;letter-spacing:.06em;text-decoration:none;transition:.18s}
.methodology-home:hover{background:var(--amber,#bf8065);color:#000}
.methodology-hero{max-width:720px;margin-bottom:40px}
.methodology-hero h1{font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--amber,#bf8065);margin:0 0 12px}
.methodology-hero p{font-size:16px;line-height:1.65;color:var(--amber2,#8a5f46);margin:0}
.methodology-tier{margin-bottom:48px}
.methodology-tier-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.methodology-tier-head h2{font-size:22px;font-weight:700;color:var(--amber,#bf8065);margin:0;letter-spacing:-.01em}
.methodology-tier-tag{font-family:var(--mono,ui-monospace,monospace);font-size:12px;font-weight:700;letter-spacing:.12em;padding:4px 10px;border:1px solid var(--amber,#bf8065);border-radius:4px;color:var(--amber,#bf8065)}
.methodology-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:20px}
.methodology-card{background:#0c0c0c;border:1px solid #2a1f16;border-radius:10px;padding:22px 20px;display:flex;flex-direction:column}
.methodology-card h3{font-size:17px;font-weight:700;color:var(--amber,#bf8065);margin:0 0 8px;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.methodology-card .methodology-n{font-family:var(--mono,ui-monospace,monospace);font-size:12px;color:var(--amber2,#8a5f46);font-weight:600}
.methodology-card .methodology-desc{font-size:14px;line-height:1.55;color:#c9b39b;margin:0 0 16px}
.methodology-checks{display:flex;flex-direction:column;gap:6px;margin-top:auto}
.check-row{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-top:1px dashed #2a1f16}
.check-row:first-child{border-top:none}
.check-id{font-family:var(--mono,ui-monospace,monospace);font-size:12px;color:var(--amber,#bf8065);flex:0 0 auto;min-width:110px}
.check-title{font-size:13.5px;color:var(--amber2,#8a5f46);line-height:1.4}
.methodology-back{margin:8px 0 0;font-size:14px}
.methodology-back a{color:var(--amber,#bf8065);text-decoration:none}
.methodology-back a:hover{text-decoration:underline}
@media (max-width:760px){.methodology{padding:32px 16px 48px}.methodology-hero h1{font-size:28px}.methodology-grid{grid-template-columns:1fr}}
/* ── Cookie notice (152-FZ, 2026-09-03) ── */
.cookie-notice{position:fixed;left:0;right:0;bottom:0;z-index:1000;background:#0c0c0c;border-top:1px solid var(--amber,#bf8065);padding:16px 20px;box-shadow:0 -6px 20px rgba(0,0,0,.45)}
.cookie-notice-body{max-width:1160px;margin:0 auto;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cookie-notice-text{font-size:13.5px;line-height:1.5;color:var(--amber2,#8a5f46);margin:0;max-width:820px}
.cookie-notice-text a{color:var(--amber,#bf8065);text-decoration:underline}
/* Две РАВНОПРАВНЫЕ кнопки согласия (Accept all / Reject) — одинаковый вес, без «тёмного» паттерна. */
.cookie-notice-actions{flex:0 0 auto;display:flex;gap:10px;flex-wrap:wrap}
.cookie-notice-btn{flex:0 0 auto;background:transparent;color:var(--amber,#bf8065);border:1px solid var(--amber,#bf8065);border-radius:4px;padding:9px 18px;font-family:var(--mono,ui-monospace,monospace);font-weight:700;font-size:12px;letter-spacing:.06em;cursor:pointer;transition:.18s}
.cookie-notice-btn:hover{background:var(--amber,#bf8065);color:#000}
@media (max-width:640px){.cookie-notice-body{flex-direction:column;align-items:flex-start;gap:12px}.cookie-notice-actions{width:100%}}


/* ══════════════════ INTERNAL PUBLIC PAGES (body[data-page="public"]) ══════════════════
   Pilot — /proverka-sajta-onlajn (2026-09-27). THE FIRST SCREEN IS TERMINAL, as on the home page
   (owner decision 2026-09-27 reverses the earlier part of R1 "the hero is not carried over"): dark background,
   amber mono text, the same form — its styles are GLOBAL (style.css:98-175), no need to override.
   The other blocks are light landing ones (.landing-block/.landing-card/.landing-cmp/.landing-faq)
   with a light palette (see the token block above).
   Only two accents are kept: K5 (steps) and K7 (FAQ marker). Chips K3 and the light form K1 were CANCELLED
   by the owner on 2026-09-27 ("remove the cells in the cards, make it like the home page").
   Palette on light: amber #bf8065 fails the 4.5:1 contrast → deep #8a5f46 (R5).
   Prohibited (R6): CRT overlays on light blocks, $/"root" symbols, fake log lines. */

body[data-page="public"] { overflow-x: clip; }

/* ── hero: same rules as the home hero (terminal block) + offset under the sticky header ── */
body[data-page="public"] .landing {
  min-height: calc(100vh - 65px);
  padding: 96px 16px 28px;
  background: var(--bg);
  color: var(--primary);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
body[data-page="public"] #scan-form { scroll-margin-top: 96px; }
/* ── compact first screen of the page WITHOUT a form (/pricing, 2026-09-27, decision R12).
   Reason: the base scope above sets min-height: calc(100vh - 65px) — with a single heading that is an
   empty dark screen across the whole viewport, and the pricing tiers slide below the fold; the owner chose "no form"
   precisely so that the prices are visible right away. We let the height fall back to auto and turn centering off. ── */
body[data-page="public"] .landing--compact {
  min-height: 0;
  justify-content: flex-start;
  padding: 120px 16px 40px;
}
body[data-page="public"] .landing--compact .subtitle { margin-bottom: 0; }
/* logo of the skeleton header — monospace (the header is terminal, like the home page) */
body[data-page="public"] .landing-logo { font-family: var(--font-mono); }

/* ── K5 (R4): "How it works" — status squares + guide line ── */
body[data-page="public"] .terminal-steps { list-style: none; margin: 0; padding: 0; }
body[data-page="public"] .terminal-steps li { position: relative; padding-left: 44px; min-height: 36px; }
body[data-page="public"] .terminal-steps li::before {
  content: ""; position: absolute; left: 6px; top: .42em; width: 11px; height: 11px;
  border: 2px solid #8a5f46; border-radius: 3px; background: #fff;
}
body[data-page="public"] .terminal-steps li:last-child::before { background: #8a5f46; }
body[data-page="public"] .terminal-steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 11px; top: 1.55em; bottom: -.85em; width: 1px;
  background: rgba(138, 95, 70, .3);
}

/* ── K7 (R4): FAQ — its own disclosure marker.
   Geometry (owner fix 2026-09-27): the marker was ABOVE the line text — we align it to the center
   of the question line via top:50% + translateY(-50%) (summary is flex with min-height 44px).
   The base rule .landing-faq summary::after (above in the file) sets content "▾", margin-left:auto
   and rotate(180deg) on [open] — our scope is more specific but must reset the inherited values. ── */
body[data-page="public"] .landing-faq summary { position: relative; padding-left: 30px; list-style: none; }
body[data-page="public"] .landing-faq summary::-webkit-details-marker { display: none; }
body[data-page="public"] .landing-faq summary::after {
  content: ""; position: absolute; right: auto; margin: 0;
  left: 6px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid #8a5f46; border-bottom: 2px solid #8a5f46;
  transform: translateY(-50%) rotate(-45deg);
  transform-origin: center; transition: transform .2s ease;
}
body[data-page="public"] .landing-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
body[data-page="public"] .landing-faq summary:focus-visible {
  outline: 3px solid rgba(138, 95, 70, .55); outline-offset: 3px; border-radius: 6px;
}

/* ── articles (/articles, /articles/<slug>, 2026-09-27): readable column of long text.
   The body of the material arrives as an HTML fragment from content/articles/<slug>.html — we set the typography
   here once, so the author of the text doesn't carry classes in the markup. Light palette (R5): the accents are
   #8a5f46, not amber #bf8065. Scope only body[data-page="public"]. ── */
body[data-page="public"] .article-body {
  max-width: 760px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.65;
  color: var(--landing-text);
}
body[data-page="public"] .article-body > *:first-child { margin-top: 0; }
body[data-page="public"] .article-body h2 { margin: 34px 0 12px; font-size: 25px; line-height: 1.3; }
body[data-page="public"] .article-body h3 { margin: 26px 0 10px; font-size: 20px; line-height: 1.35; }
body[data-page="public"] .article-body p,
body[data-page="public"] .article-body li { font-size: 17px; }
body[data-page="public"] .article-body p { margin: 0 0 15px; }
body[data-page="public"] .article-body ul,
body[data-page="public"] .article-body ol { margin: 0 0 18px; padding-left: 24px; }
body[data-page="public"] .article-body li { margin-bottom: 8px; }
body[data-page="public"] .article-body a { color: #8a5f46; text-decoration: underline; }
body[data-page="public"] .article-body strong { font-weight: 700; }
body[data-page="public"] .article-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 16px; }
body[data-page="public"] .article-body th,
body[data-page="public"] .article-body td { padding: 8px 10px; border-bottom: 1px solid var(--landing-border); text-align: left; }
body[data-page="public"] .article-body th { font-weight: 700; }
body[data-page="public"] .article-body blockquote {
  margin: 0 0 18px; padding: 10px 16px; border-left: 3px solid #8a5f46;
  background: var(--landing-bg-alt); border-radius: 0 8px 8px 0;
}
body[data-page="public"] .articles-list-note { max-width: 760px; margin: 20px auto 0; }

@media (max-width: 640px) {
  body[data-page="public"] .article-body { font-size: 16px; }
  body[data-page="public"] .article-body p,
  body[data-page="public"] .article-body li { font-size: 16px; }
  body[data-page="public"] .article-body h2 { font-size: 22px; }
}

/* ── mobile: hero form stacked (like the home page at ≤640px) ── */
@media (max-width: 640px) {
  body[data-page="public"] .form-row { flex-direction: column; align-items: stretch; gap: 10px; }
  body[data-page="public"] #domain,
  body[data-page="public"] #submit-btn { width: 100%; }
}

/* ── a11y ── */
@media (prefers-reduced-motion: reduce) {
  body[data-page="public"] .landing-faq summary::after { transition: none; }
}
@media (prefers-contrast: high) {
  body[data-page="public"] .terminal-steps li::before { border-color: #1a1a1a; }
  body[data-page="public"] .terminal-steps li:last-child::before { background: #1a1a1a; }
  body[data-page="public"] .landing-faq summary::after { border-color: #1a1a1a; }
}