/* raggate marketing site — shared styles.
   Light "ledger" identity, mono display, verdict-red accent: deliberately unlike
   the dark-SOC look of the category, and matching the HTML report a buyer
   actually receives. No JS anywhere, no external resources, both colour schemes,
   reduced-motion respected. */

:root {
  --paper: #f7f8f7;
  --card: #ffffff;
  --ink: #15181b;
  --muted: #5c6670;
  --line: #dbe0e2;
  --line-strong: #b8c0c4;
  --verdict: #b42318;          /* the accent IS the product's job: finding red */
  --verdict-soft: #fbeae8;
  --pass: #0e7a55;
  --pass-soft: #e5f3ed;
  --code-bg: #101418;
  --code-ink: #e8edf2;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0e1113;
    --card: #16191c;
    --ink: #e9edf0;
    --muted: #9aa5ad;
    --line: #262b30;
    --line-strong: #3a4147;
    --verdict: #ff6b5e;
    --verdict-soft: #2a1614;
    --pass: #4ec38f;
    --pass-soft: #12251d;
    --code-bg: #0a0d10;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

a { color: var(--ink); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--verdict); }

/* ---------------------------------------------------------------- top nav */

.nav {
  border-bottom: 1px solid var(--line);
  background: var(--card);
  position: sticky;
  top: 0;
  z-index: 10;
}
.nav .wrap { display: flex; align-items: center; gap: 22px; height: 60px; }
.nav .brand {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  text-decoration: none;
  margin-right: auto;
}
.nav .brand span { color: var(--verdict); }
.nav a.navlink {
  font-size: 14.5px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.nav a.navlink:hover, .nav a.navlink[aria-current="page"] { color: var(--ink); }
.nav a.signin {
  font-size: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 6px 12px;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .nav { position: static; }
  .nav .wrap { flex-wrap: wrap; height: auto; padding: 12px 18px; gap: 12px 16px; }
  .nav .brand { margin-right: 0; width: 100%; }
  .nav a.navlink, .nav a.signin { font-size: 13.5px; }
}

/* ------------------------------------------------------------- typography */

h1 {
  font-size: clamp(30px, 5vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  font-weight: 700;
}
h1 .q { color: var(--verdict); }
h2 {
  font-size: clamp(23px, 3vw, 31px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  font-weight: 700;
}
h3 { font-size: 18.5px; margin: 0 0 8px; font-weight: 650; }
p { margin: 0 0 14px; }
.lead { font-size: 18.5px; color: var(--muted); max-width: 68ch; }
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.small { font-size: 14px; color: var(--muted); }
code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--verdict-soft);
  padding: 1px 5px;
  border-radius: 4px;
}

section { padding: 62px 0; border-bottom: 1px solid var(--line); }
section.hero { padding: 60px 0 46px; }
@media (max-width: 760px) { section { padding: 42px 0; } }

/* ------------------------------------------------------------------ hero */

.herogrid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .herogrid { grid-template-columns: 1fr; gap: 28px; } }

/* Grid and flex children default to min-width:auto, so a wide <pre> inside one
   stretches its track and pushes the whole page wider than the viewport. Letting
   them shrink is what keeps the terminal blocks scrolling inside themselves
   instead of scrolling the page sideways on a phone. */
.herogrid > *, .cards > *, .tiers > *, .stats > *, .rupture > * { min-width: 0; }
.term, .tablewrap, figure, pre { max-width: 100%; }

.btnrow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.btn {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 7px;
  text-decoration: none;
  border: 1px solid var(--line-strong);
}
.btn.primary { background: var(--verdict); border-color: var(--verdict); color: #fff; }
.btn.ghost { background: transparent; }

/* --------------------------------------------------------------- terminal */

.term {
  background: var(--code-bg);
  color: var(--code-ink);
  border-radius: 9px;
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: 12.6px;
  line-height: 1.62;
  overflow-x: auto;
  border: 1px solid var(--line-strong);
}
.term pre { margin: 0; white-space: pre; }
.term .c { color: #7d8b98; }               /* comment / chrome */
.term .fail { color: #ff8a7d; font-weight: 700; }
.term .ok { color: #6fdba4; font-weight: 700; }
.term .k { color: #9ecbff; }
.termcap { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* ------------------------------------------------------------ stats strip */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  overflow: hidden;
}
.stats div { padding: 16px 18px; border-right: 1px solid var(--line); }
.stats div:last-child { border-right: none; }
.stats b { display: block; font-family: var(--mono); font-size: 21px; letter-spacing: -0.02em; }
.stats span { font-size: 13px; color: var(--muted); }
@media (max-width: 860px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stats div { border-bottom: 1px solid var(--line); }
  .stats div:nth-child(2n) { border-right: none; }
}
@media (max-width: 460px) { .stats { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ cards */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cards.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .cards, .cards.two { grid-template-columns: 1fr; } }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 20px;
}
.card .step {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--verdict);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.card p:last-child { margin-bottom: 0; }
.card ul { margin: 10px 0 0; padding-left: 20px; }
.card li { margin-bottom: 5px; font-size: 15.5px; }

/* ------------------------------------------------------------- price grid */

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
@media (max-width: 860px) { .tiers { grid-template-columns: 1fr; } }
.tier {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.tier.hot { border-color: var(--verdict); box-shadow: 0 0 0 3px var(--verdict-soft); }
.tname { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.price { font-size: 38px; font-weight: 700; letter-spacing: -0.03em; margin: 6px 0 2px; }
.per { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.tier ul { margin: 0 0 18px; padding-left: 20px; }
.tier li { font-size: 15px; margin-bottom: 6px; }
.tier .btn { margin-top: auto; text-align: center; }

/* ------------------------------------------------ the rupture (signature) */
/* A document crossing from its source system into an index, losing its ACL at
   the boundary. Static CSS only — no JS, nothing to break in a static render. */

.rupture {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 26px 0 0;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow-x: auto;
}
.rupture .zone { min-width: 150px; }
.rupture .zlabel {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.rupture .doc {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 7px;
}
.rupture .doc.verdictdoc {
  background: var(--verdict);
  border-color: var(--verdict);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.rupture .chip { font-size: 11.5px; font-family: var(--mono); border-radius: 999px; padding: 3px 9px; display: inline-block; }
.rupture .chip.keep { background: var(--pass-soft); color: var(--pass); }
.rupture .chip.lost { background: var(--verdict-soft); color: var(--verdict); text-decoration: line-through; }
.rupture .cut { text-align: center; color: var(--verdict); font-size: 19px; padding: 0 2px; }
@media (max-width: 760px) {
  .rupture { grid-template-columns: 1fr; gap: 6px; }
  .rupture .cut { transform: rotate(90deg); padding: 4px 0; }
}

/* -------------------------------------------------------------- callouts */

.note {
  border: 1px solid var(--line);
  border-left: 4px solid var(--verdict);
  background: var(--card);
  border-radius: 0 9px 9px 0;
  padding: 16px 20px;
  margin: 20px 0;
}
.note.calm { border-left-color: var(--line-strong); }
.note b { font-weight: 700; }

table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--card);
        border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
tr:last-child td { border-bottom: none; }
.tablewrap { overflow-x: auto; }

figure { margin: 20px 0 0; }
figure img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
}
figcaption { font-size: 13.5px; color: var(--muted); margin-top: 8px; }

/* ---------------------------------------------------------------- footer */

footer { padding: 34px 0 46px; font-size: 14.5px; color: var(--muted); }
footer .fgrid { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; }
footer a { color: var(--muted); }
footer .fnote { width: 100%; font-size: 13px; margin-top: 6px; }