/* ------------------------------------------------------------------ */
/* Patch marketing site — patch.tridant.io                             */
/* Same discipline as the demo app:                                    */
/*   · exactly ONE hairline weight (1px) — --line containers,          */
/*     --line-soft dividers; nothing ever doubles up                   */
/*   · emphasis = background tint or ink, never a fatter edge          */
/*   · no decorative glow; 4px spacing grid; radii 4px / 3px           */
/*   · IBM Plex; weights 400/500/600/700; one micro-caps label spec    */
/*     (10.5px / 600 / 0.08em); numerals tabular                       */
/* ------------------------------------------------------------------ */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2"); }

:root {
  --bg: #131313;
  --panel: #171717;
  --panel-2: #1e1e1e;
  --panel-3: #272727;
  --line: #333333;
  --line-soft: #232323;

  --ink: #f2f2f2;
  --ink-2: #a0a0a0;
  --ink-3: #6b6b6b;

  --ok: #46a35a;

  /* the patch — the only warm color on the page */
  --olive: #5c5a33;
  --tan: #c9ab7c;

  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --r: 4px;
  --r-sm: 3px;
}

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--bg); }

body {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
::selection { background: var(--tan); color: #131313; }

.label {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}

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

/* ---------- topbar ---------- */

.topbar { border-bottom: 1px solid var(--line-soft); }
.topbar-in {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 28px; height: 28px; display: block; }
.brand b { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }
.topbar-phone {
  margin-left: auto;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 5px 10px;
}
.topbar-phone:hover { color: var(--ink); background: var(--panel-2); }

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

.hero { padding: 96px 0 72px; }
.hero-patch { width: 132px; height: 132px; margin-bottom: 36px; }
h1 {
  margin: 0 0 16px;
  font-size: 42px; line-height: 1.12; font-weight: 700; letter-spacing: -0.015em;
  max-width: 21ch;
}
.hero-sub {
  margin: 0 0 36px;
  font-size: 17px; line-height: 1.55; color: var(--ink-2);
  max-width: 58ch;
}
.hero-sub b { color: var(--ink); font-weight: 500; }

.cta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cta {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  border-radius: var(--r-sm);
  padding: 11px 18px;
  font-size: 14.5px; font-weight: 600;
}
.cta-primary { background: var(--ink); color: #131313; }
.cta-primary:hover { background: #ffffff; }
.cta-primary .num { font-family: var(--mono); font-weight: 600; }
.cta-secondary { border: 1px solid var(--line); color: var(--ink-2); }
.cta-secondary:hover { color: var(--ink); background: var(--panel-2); }
.cta-note { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-3); }

.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); flex: none;
}

/* ---------- demo screenshot ---------- */

.shot { display: block; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.shot img { display: block; width: 100%; height: auto; }
.shot:hover { border-color: var(--ink-3); }
.shot-cap { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-2); max-width: 62ch; }
.shot-cap a { color: var(--ink); }

/* ---------- section scaffold ---------- */

section { border-top: 1px solid var(--line-soft); padding: 56px 0; }
.sec-label { margin: 0 0 28px; }
h2 {
  margin: 0 0 12px;
  font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em;
}
.sec-body { color: var(--ink-2); max-width: 62ch; margin: 0; }
.sec-body b { color: var(--ink); font-weight: 500; }

/* ---------- capability rows (spec sheet) ---------- */

.rows { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.row { display: grid; grid-template-columns: 168px 1fr; }
.row + .row { border-top: 1px solid var(--line-soft); }
.row-k {
  padding: 18px 20px;
  background: var(--panel);
  border-right: 1px solid var(--line-soft);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2);
  padding-top: 21px;
}
.row-v { padding: 18px 20px; }
.row-v p { margin: 0; color: var(--ink-2); }
.row-v p b { color: var(--ink); font-weight: 500; }
.row-v .fine { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }

/* ---------- invariant strip ---------- */

.invariants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.inv {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 20px;
  background: var(--panel);
}
.inv h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.inv p { margin: 0; font-size: 13.5px; color: var(--ink-2); }

/* ---------- api / mono block ---------- */

.mono-block {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel);
  padding: 18px 20px;
  font-family: var(--mono); font-size: 13px; line-height: 1.7;
  color: var(--ink-2);
  overflow-x: auto;
}
.mono-block .c { color: var(--ink-3); }
.mono-block .k { color: var(--tan); }

/* ---------- IDEA section ---------- */

.idea-card {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel);
  padding: 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.idea-card .meta { flex: 1; min-width: 240px; }
.idea-card .meta h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.idea-card .meta p { margin: 0; font-size: 13.5px; color: var(--ink-2); }

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

footer { border-top: 1px solid var(--line-soft); padding: 28px 0 48px; }
.foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-3);
}
.foot a { color: var(--ink-3); text-decoration: none; }
.foot a:hover { color: var(--ink-2); }
.foot .sep { color: var(--line); }
.foot .right { margin-left: auto; font-family: var(--mono); }

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  .hero { padding: 64px 0 56px; }
  h1 { font-size: 32px; }
  .hero-patch { width: 104px; height: 104px; }
  .row { grid-template-columns: 1fr; }
  .row-k { border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 12px 20px 10px; }
  .row-v { padding: 14px 20px 18px; }
  .invariants { grid-template-columns: 1fr; }
}