/* ==========================================================================
   intactly.ai - editorial system
   Swiss/editorial grid in the same family as the category leader, but colder,
   denser and more instrument-like: this product sells provability, so the page
   should read like a register, not a brochure.
   ========================================================================== */

:root {
  /* Light is the default surface. Every colour used anywhere on the page is defined
     here, so the dark block below only has to redefine tokens - never components. */
  --paper: #f4f3ef;
  --paper-alt: #eceae4;
  --panel: #ffffff;
  --ink: #101217;
  --ink-soft: #3a3f47;
  --muted: #71767f;
  --rule: #dbd8d0;
  --rule-strong: #c3bfb4;

  --brand: #0d5c50;
  --brand-bright: #10796a;
  --brand-wash: #f0f7f5;
  --breach: #a92b12;
  --breach-wash: #fdf4f1;
  --warn: #9a5b00;
  --ok: #0d5c50;

  --mark-bg: #ffe9a8;
  --mark-edge: #d9a900;
  --ok-wash: #eaf3f0;
  --err-wash: #fbeae6;

  --nav-bg: rgba(244, 243, 239, 0.9);
  --shadow: rgba(16, 18, 23, 0.32);
  --on-brand: #ffffff;

  /* Inverted panels (value calculator, commitments, hero preview) are deliberately dark
     in BOTH themes. They need tokens that do not flip, or they invert with the page and
     the design intent is lost. */
  --invert-bg: #101217;
  --invert-fg: #f2f1ed;
  --invert-soft: #c3c7cd;
  --invert-muted: #8d939c;
  --invert-rule: #2a2f37;
  --invert-accent: #5fd3bd;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --gutter: clamp(1.25rem, 4vw, 5rem);
  --maxw: 1180px;
}

/* System dark, unless the reader explicitly chose light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1113;
    --paper-alt: #15181b;
    --panel: #181c20;
    --ink: #e9ecee;
    --ink-soft: #b3bac0;
    --muted: #828a92;
    --rule: #262b30;
    --rule-strong: #394046;

    --brand: #4fd1b8;
    --brand-bright: #6ee4cc;
    --brand-wash: #12211f;
    --breach: #ff7f5f;
    --breach-wash: #251713;
    --warn: #f5b544;
    --ok: #4fd1b8;

    --mark-bg: #4a3c14;
    --mark-edge: #ad8a20;
    --ok-wash: #13241f;
    --err-wash: #2a1512;

    --nav-bg: rgba(15, 17, 19, 0.9);
    --shadow: rgba(0, 0, 0, 0.6);
    --on-brand: #08211c;
  }
}

/* Explicit dark wins in the other direction. */
:root[data-theme="dark"] {
  --paper: #0f1113;
  --paper-alt: #15181b;
  --panel: #181c20;
  --ink: #e9ecee;
  --ink-soft: #b3bac0;
  --muted: #828a92;
  --rule: #262b30;
  --rule-strong: #394046;

  --brand: #4fd1b8;
  --brand-bright: #6ee4cc;
  --brand-wash: #12211f;
  --breach: #ff7f5f;
  --breach-wash: #251713;
  --warn: #f5b544;
  --ok: #4fd1b8;

  --mark-bg: #4a3c14;
  --mark-edge: #ad8a20;
  --ok-wash: #13241f;
  --err-wash: #2a1512;

  --nav-bg: rgba(15, 17, 19, 0.9);
  --shadow: rgba(0, 0, 0, 0.6);
  --on-brand: #08211c;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "kern", "liga", "tnum";
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.04;
}

p { margin: 0 0 1em; }
a { color: inherit; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* --- section scaffolding ------------------------------------------------ */

section { padding-block: clamp(4rem, 9vw, 8.5rem); }
.band-alt { background: var(--paper-alt); }
.band-ink { background: var(--invert-bg); color: var(--invert-fg); }
.band-ink .eyebrow { color: var(--invert-muted); }
.band-ink .rule-short { background: #3a3f47; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.75rem;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
}

.section-head h2 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
}

.section-head .aside {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  padding-top: 0.5rem;
}

.section-head .aside b { font-style: normal; font-weight: 600; color: var(--brand); }
.band-ink .section-head .aside { color: var(--invert-soft); }
.band-ink .section-head .aside b { color: var(--invert-accent); }

.accent { color: var(--brand); }
.band-ink .accent { color: var(--invert-accent); }
.accent-red { color: var(--breach); }

.rule-short {
  width: 4.5rem;
  height: 2px;
  background: var(--ink);
  margin: 2.25rem 0 0;
}

@media (max-width: 780px) {
  .section-head { grid-template-columns: 1fr; }
}

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

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}

.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.9rem var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 2rem);
  flex-wrap: wrap;
}

.logo {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.03em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo .mark {
  width: 15px; height: 15px;
  border: 2.5px solid var(--brand);
  border-radius: 3px;
  position: relative;
}
.logo .mark::after {
  content: "";
  position: absolute;
  inset: 2.5px;
  background: var(--brand);
  border-radius: 1px;
}
.logo .dot { color: var(--brand); }

.nav-links {
  display: flex;
  gap: clamp(0.85rem, 2vw, 1.75rem);
  margin-left: auto;
  font-size: 0.875rem;
  min-width: 0;
}
/* A nav label is a name, not a sentence. Wrapping "Lines of business" onto two lines
   doubles the height of the bar and reads as a layout bug. */
.nav-links a, .nav .btn, .logo { white-space: nowrap; }
.nav-links a { text-decoration: none; color: var(--ink-soft); }
.nav-links a:hover { color: var(--brand); }

.btn {
  display: inline-block;
  padding: 0.6rem 1.15rem;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

@media (max-width: 900px) {
  .nav-inner { gap: 0.75rem 1rem; }
  .logo { margin-right: auto; }
  /* Second row, full width, scrolled horizontally. Hiding the links entirely - which is
     what this used to do - left a phone visitor with no way to reach any page but the CTA. */
  .nav-links {
    order: 3;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.15rem;
    border-top: 1px solid var(--rule);
    padding-top: 0.7rem;
    gap: 1.25rem;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav .btn { padding: 0.5rem 0.85rem; font-size: 0.75rem; }
  .nav-inner { padding-block: 0.7rem; }
}
@media (max-width: 420px) {
  .nav .themetoggle { padding-inline: 0.5rem; }
  .nav-links { font-size: 0.8125rem; gap: 1.1rem; }
}

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

.hero { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem); }

.hero h1 {
  font-size: clamp(2.6rem, 6.6vw, 5.1rem);
  max-width: 16ch;
  margin-bottom: 1.75rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: end;
}

.hero-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 1.75rem;
}
.hero-sub b { font-style: normal; font-weight: 600; color: var(--brand); }

.hero-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; }

@media (max-width: 780px) { .hero-grid { grid-template-columns: 1fr; } }

/* --- deadline strip ----------------------------------------------------- */

.deadlines {
  border-block: 1px solid var(--rule);
  background: var(--panel);
}
.deadlines .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.deadline {
  padding: 1.4rem 1.5rem;
  border-left: 1px solid var(--rule);
}
.deadline:first-child { border-left: 0; }
.deadline .d-when {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.deadline .d-count {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0.35rem 0 0.2rem;
  font-variant-numeric: tabular-nums;
}
.deadline.past .d-count { color: var(--muted); }
.deadline.near .d-count { color: var(--breach); }
.deadline .d-what { font-size: 0.8125rem; color: var(--ink-soft); line-height: 1.45; }

@media (max-width: 700px) {
  .deadline { border-left: 0; border-top: 1px solid var(--rule); }
  .deadline:first-child { border-top: 0; }
}

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

.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 3.5rem;
}

.product {
  background: var(--panel);
  padding: 2rem 1.75rem 1.9rem;
  display: flex;
  flex-direction: column;
  min-height: 268px;
}

.product .p-idx {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  margin-bottom: 1.1rem;
}
.product h3 { font-size: 1.375rem; margin-bottom: 0.55rem; }
.product .p-role {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.9rem;
}
.product p { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.55; }
.product .p-stat {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.product .p-stat span:last-child { color: var(--muted); }
.product.is-native { background: var(--brand-wash); }
.product.is-native .p-role { color: var(--breach); }

.native-flag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--breach);
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  margin-left: 0.5rem;
  vertical-align: 0.2em;
}

/* --- tabs --------------------------------------------------------------- */

.tabpanel-shell {
  border: 1px solid var(--rule);
  background: var(--panel);
  margin-top: 3.5rem;
}

.tablist {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--rule);
}

.tab {
  appearance: none;
  border: 0;
  border-left: 1px solid var(--rule);
  border-top: 3px solid transparent;
  background: transparent;
  padding: 1.15rem 1.25rem 1.05rem;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--muted);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tab:first-child { border-left: 0; }
.tab .t-idx {
  display: block;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.3rem;
}
.tab .t-name { font-size: 1rem; font-weight: 600; letter-spacing: -0.015em; }
.tab[aria-selected="true"] {
  color: var(--ink);
  border-top-color: var(--ink);
  background: var(--paper);
}
.tab:hover { color: var(--ink); }

.tab-body { padding: clamp(1.75rem, 4vw, 3rem); }
.tab-body[hidden] { display: none; }

.tab-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
}
.tab-body h3 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin-bottom: 1rem; }
.tab-body p { font-size: 0.9375rem; color: var(--ink-soft); max-width: 62ch; }

.inloop-label {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.inloop li {
  list-style: none;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  padding: 0.7rem 0;
  border-bottom: 1px dashed var(--rule-strong);
}
.inloop { margin: 0; padding: 0; }
.inloop li:last-child { border-bottom: 0; }
.inloop li small {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
  margin-top: 0.2rem;
}

@media (max-width: 820px) {
  .tablist { grid-template-columns: repeat(2, 1fr); }
  .tab:nth-child(3) { border-left: 0; }
  .tab:nth-child(n + 3) { border-top: 1px solid var(--rule); border-top-width: 1px; }
  .tab[aria-selected="true"] { border-top-color: var(--ink); border-top-width: 3px; }
  .tab-body-grid { grid-template-columns: 1fr; }
}

/* --- comparison table --------------------------------------------------- */

.cmp-scroll { overflow-x: auto; margin-top: 3.5rem; border: 1px solid var(--rule); background: var(--panel); }

table.cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  min-width: 720px;
}

table.cmp th, table.cmp td {
  padding: 0.95rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

table.cmp thead th {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}
table.cmp thead th.us { color: var(--brand); }
table.cmp tbody th {
  font-weight: 600;
  font-size: 0.875rem;
  width: 27%;
  color: var(--ink);
}
table.cmp tbody th small {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 0.2rem;
  line-height: 1.4;
}
table.cmp td { color: var(--ink-soft); }
table.cmp td.us {
  background: var(--brand-wash);
  color: var(--ink);
  border-left: 2px solid var(--brand);
  border-right: 2px solid var(--brand);
  font-weight: 500;
}
table.cmp tbody tr:last-child td.us { border-bottom: 2px solid var(--brand); }
table.cmp tbody tr:first-child td.us { border-top: 2px solid var(--brand); }
table.cmp tr:last-child th, table.cmp tr:last-child td { border-bottom: 0; }

.mark-yes { color: var(--brand); font-weight: 700; }
.mark-no { color: var(--breach); font-weight: 700; }
.mark-part { color: var(--warn); font-weight: 700; }

/* --- solutions matrix --------------------------------------------------- */

.lob-shell { margin-top: 3.5rem; border: 1px solid var(--rule); background: var(--panel); display: grid; grid-template-columns: 15rem minmax(0, 1fr); }
.lob-nav { border-right: 1px solid var(--rule); }
.lob-nav button {
  display: block;
  width: 100%;
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  padding: 0.95rem 1.1rem;
  text-align: left;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
}
.lob-nav button small {
  display: block;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--rule-strong);
  margin-top: 0.15rem;
}
.lob-nav button[aria-selected="true"] {
  color: var(--ink);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}
.lob-nav button[aria-selected="true"] small { color: var(--brand); }
.lob-nav button:hover { color: var(--ink); }

.lob-body { padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.lob-body h3 { font-size: 1.5rem; margin-bottom: 0.35rem; }
.lob-reg {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 1.25rem;
}
.lob-body > p { font-size: 0.9375rem; color: var(--ink-soft); max-width: 60ch; }

.lob-clocks { margin-top: 1.5rem; border-top: 1px solid var(--rule); }
.lob-clock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px dashed var(--rule-strong);
  align-items: baseline;
}
.lob-clock .c-name { font-size: 0.875rem; font-weight: 500; }
.lob-clock .c-cite {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--muted);
  font-weight: 400;
  margin-top: 0.15rem;
}
.lob-clock .c-dur {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--breach);
}

@media (max-width: 800px) {
  .lob-shell { grid-template-columns: 1fr; }
  .lob-nav { border-right: 0; border-bottom: 1px solid var(--rule); display: flex; overflow-x: auto; }
  .lob-nav button { border-bottom: 0; border-left: 0; border-top: 3px solid transparent; white-space: nowrap; width: auto; }
  .lob-nav button[aria-selected="true"] { border-left-color: transparent; border-top-color: var(--brand); }
}

/* --- ROI calculator ----------------------------------------------------- */

.calc {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: 1px;
  background: var(--invert-rule);
  border: 1px solid var(--invert-rule);
}
.calc-inputs, .calc-out { background: var(--invert-bg); padding: clamp(1.5rem, 3vw, 2.25rem); }

.field { margin-bottom: 1.5rem; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--invert-muted);
  margin-bottom: 0.5rem;
}
.field .fval {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--invert-fg);
  margin-bottom: 0.4rem;
}
.field input[type="range"] {
  width: 100%;
  appearance: none;
  height: 2px;
  background: #3a3f47;
  outline: none;
  margin: 0.6rem 0 0;
}
.field input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--invert-accent);
  cursor: pointer;
  border: 0;
}
.field input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--invert-accent);
  cursor: pointer;
  border: 0;
}

.calc-out { display: flex; flex-direction: column; }
.calc-rows { flex: 1; }
.calc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--invert-rule);
  align-items: baseline;
}
.calc-row .r-label { font-size: 0.875rem; color: var(--invert-soft); }
.calc-row .r-label small {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: #71767f;
  margin-top: 0.15rem;
  line-height: 1.4;
}
.calc-row .r-val {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--invert-fg);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.calc-row.total { border-bottom: 0; padding-top: 1.35rem; }
.calc-row.total .r-label { color: var(--invert-fg); font-weight: 600; font-size: 1rem; }
.calc-row.total .r-val { font-size: 1.6rem; color: var(--invert-accent); letter-spacing: -0.02em; }

.calc-note {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--invert-rule);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--invert-muted);
}
.calc-note b { color: var(--invert-soft); font-weight: 600; }

@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }

/* --- evidence / anchor demo -------------------------------------------- */

.evidence {
  margin-top: 3.5rem;
  border: 1px solid var(--rule);
  background: var(--panel);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.ev-doc { border-right: 1px solid var(--rule); padding: 1.75rem; }
.ev-doc + .ev-doc { border-right: 0; }
.ev-head {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.ev-page {
  font-family: var(--serif);
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--ink-soft);
}
.ev-page mark {
  background: var(--mark-bg);
  color: var(--ink);
  padding: 0.1em 0.15em;
  box-shadow: 0 0 0 1px var(--mark-edge);
  border-radius: 1px;
}
.ev-finding {
  grid-column: 1 / -1;
  border-top: 1px solid var(--rule-strong);
  background: var(--breach-wash);
  padding: 1.5rem 1.75rem;
}
.ev-finding .f-kind {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--breach);
  padding: 0.2rem 0.5rem;
  border-radius: 2px;
}
.ev-finding h4 { font-size: 1.0625rem; margin: 0.85rem 0 0.5rem; }
.ev-finding p { font-size: 0.875rem; color: var(--ink-soft); margin-bottom: 1rem; }
.f-factors { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.85rem; }
.f-factor {
  padding-top: 0.55rem;
  border-top: 1px solid var(--rule-strong);
}
.f-factor .k {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 0.2rem;
}
.f-factor .v { font-size: 0.8125rem; color: var(--ink); line-height: 1.45; }
.f-factor.benign { border-top-color: var(--brand); }

@media (max-width: 760px) {
  .evidence { grid-template-columns: 1fr; }
  .ev-doc { border-right: 0; border-bottom: 1px solid var(--rule); }
}

/* --- guarantees --------------------------------------------------------- */

.guarantees {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1px;
  background: var(--invert-rule);
  border: 1px solid var(--invert-rule);
}
.guarantee { background: var(--invert-bg); padding: 1.75rem 1.5rem; }
.guarantee .g-num {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--invert-accent);
  letter-spacing: 0.1em;
  margin-bottom: 0.9rem;
}
.guarantee h3 { font-size: 1.0625rem; color: var(--invert-fg); margin-bottom: 0.5rem; }
.guarantee p { font-size: 0.8125rem; color: var(--invert-soft); line-height: 1.6; margin: 0; }

/* --- CTA ---------------------------------------------------------------- */

.cta { text-align: center; }
.cta h2 { font-size: clamp(2rem, 5vw, 3.6rem); max-width: 20ch; margin: 0 auto 1.5rem; }
.cta p { font-family: var(--serif); font-style: italic; font-size: 1.0625rem; color: var(--ink-soft); max-width: 52ch; margin: 0 auto 2.25rem; }
.cta .hero-cta { justify-content: center; }

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

footer { border-top: 1px solid var(--rule); padding-block: 3rem 2.5rem; font-size: 0.8125rem; }
.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.foot-grid h4 {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 0.9rem;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 0.5rem; color: var(--ink-soft); }
.foot-grid a { text-decoration: none; }
.foot-grid a:hover { color: var(--brand); }

.foot-bar {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  color: var(--muted);
  font-size: 0.75rem;
}
.badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; }
.badge {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  border: 1px solid var(--rule-strong);
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
  color: var(--ink-soft);
}
.badge.pending { color: var(--muted); border-style: dashed; }

.disclaimer {
  margin-top: 1.25rem;
  font-size: 0.6875rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 90ch;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ==========================================================================
   Landing page - hero, trust strip, problem stats, product preview
   Added when the page was rebuilt as a proper landing page: the original
   opened with argument. A B2B buyer needs to see the thing first.
   ========================================================================== */

.hero-lede {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: end;
  margin-bottom: 3.25rem;
}
@media (max-width: 820px) { .hero-lede { grid-template-columns: 1fr; } }

.hero-lede h1 {
  font-size: clamp(2.5rem, 6.2vw, 4.6rem);
  max-width: 15ch;
  margin-bottom: 0;
  text-wrap: balance;
}

/* --- product preview -------------------------------------------------- */

.preview {
  border: 1px solid var(--rule-strong);
  border-radius: 5px;
  overflow: hidden;
  background: #0f1115;
  box-shadow: 0 24px 60px -20px var(--shadow), 0 2px 8px rgba(16, 18, 23, 0.08);
}

.pv-chrome {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  background: #161920;
  border-bottom: 1px solid #262b35;
}
.pv-dot { width: 9px; height: 9px; border-radius: 50%; background: #2f3541; }
.pv-title {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: #6b7280;
  letter-spacing: 0.06em;
  margin-left: 0.35rem;
}
.pv-live {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: #4fd1b8;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.pv-live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4fd1b8;
}

.pv-body { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; }
@media (max-width: 760px) { .pv-body { grid-template-columns: 1fr; } }

.pv-queue { border-right: 1px solid #262b35; }
@media (max-width: 760px) { .pv-queue { border-right: 0; border-bottom: 1px solid #262b35; } }

.pv-row {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid #1f242d;
}
.pv-row:last-child { border-bottom: 0; }
.pv-row.sel { background: #1c2029; box-shadow: inset 0 0 0 1px #2f3a3d; }

.pv-urg {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  text-align: center;
  padding: 0.12rem 0;
  border-radius: 2px;
}
.pv-urg.b { background: #3d1e18; color: #ff6b52; }
.pv-urg.a { background: #3a2d13; color: #f5b544; }
.pv-urg.o { background: #262b35; color: #a2a9b4; }

.pv-what { min-width: 0; }
.pv-what .w1 {
  font-size: 0.78rem;
  color: #e8eaed;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pv-what .w2 {
  font-family: var(--mono);
  font-size: 0.625rem;
  color: #6b7280;
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pv-due {
  font-family: var(--mono);
  font-size: 0.6875rem;
  white-space: nowrap;
}
.pv-due.over { color: #ff6b52; }
.pv-due.soon { color: #f5b544; }
.pv-due.ok { color: #6b7280; }

.pv-side { padding: 0.9rem; }
.pv-side .s-lab {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.6rem;
}
.pv-fact {
  background: rgba(245, 181, 68, 0.08);
  border-radius: 2px;
  padding: 0.35rem 0.5rem;
  margin-bottom: 0.7rem;
}
.pv-fact .f1 { font-family: var(--mono); font-size: 0.5625rem; color: #6b7280; margin-bottom: 0.15rem; }
.pv-fact .f2 { font-size: 0.72rem; color: #b9c3c0; line-height: 1.45; }
.pv-verdict {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid #262b35;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4fd1b8;
}

.pv-caption {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--muted);
  margin-top: 0.9rem;
  letter-spacing: 0.02em;
}

/* --- trust strip ------------------------------------------------------- */

.builtfor { border-block: 1px solid var(--rule); background: var(--panel); padding-block: 1.6rem; }
.builtfor .bf-lab {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.bf-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.55rem;
}
.bf-item {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 0.3rem 0.55rem;
  white-space: nowrap;
}

/* --- problem stats ------------------------------------------------------ */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 3.25rem;
}
.stat { background: var(--panel); padding: 1.6rem 1.4rem; }
.stat .st-n {
  font-size: clamp(2.1rem, 4.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--breach);
}
.stat .st-t { font-size: 0.875rem; color: var(--ink); margin-top: 0.6rem; font-weight: 600; }
.stat .st-s { font-size: 0.8125rem; color: var(--ink-soft); margin-top: 0.3rem; line-height: 1.5; }
.stat .st-c {
  font-family: var(--mono);
  font-size: 0.625rem;
  color: var(--muted);
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
}

/* --- lead form ---------------------------------------------------------- */

.leadform {
  margin-top: 3rem;
  border: 1px solid var(--rule-strong);
  background: var(--panel);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: left;
  max-width: 46rem;
  margin-inline: auto;
}

.lf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
}
.lf-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .lf-grid { grid-template-columns: 1fr; } }

.lf-field label {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.lf-field input,
.lf-field select,
.lf-field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 0.6rem 0.7rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lf-field textarea { resize: vertical; min-height: 5.5rem; }
.lf-field input:focus,
.lf-field select:focus,
.lf-field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(13, 92, 80, 0.13);
}
.lf-field .req { color: var(--breach); }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.lf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lf-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.lf-actions .btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.lf-privacy { font-size: 0.75rem; color: var(--muted); line-height: 1.5; flex: 1; min-width: 14rem; }

.lf-msg { margin-top: 1rem; font-size: 0.875rem; padding: 0.8rem 1rem; border-radius: 2px; display: none; }
.lf-msg.ok { display: block; background: var(--ok-wash); border: 1px solid var(--brand); color: var(--ink); }
.lf-msg.err { display: block; background: var(--err-wash); border: 1px solid var(--breach); color: var(--ink); }

.foot-bar .venture { color: var(--muted); }
.foot-bar .venture strong { color: var(--ink-soft); font-weight: 600; }

/* --- theme toggle -------------------------------------------------------- */

.themetoggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  appearance: none;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.themetoggle:hover { color: var(--brand); border-color: var(--brand); }
.themetoggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.themetoggle svg { width: 13px; height: 13px; fill: currentColor; stroke: currentColor; }
.themetoggle svg [stroke-width] { stroke: currentColor; fill: none; }
@media (max-width: 560px) { .themetoggle .tt-label { display: none; } }

/* Instrument links go to the regulator, so they need to look like links. */
.foot-grid ul.instruments a { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 2px; }
.foot-grid ul.instruments a:hover { color: var(--brand); text-decoration-color: var(--brand); }
.foot-grid ul.instruments li { line-height: 1.55; }