/* Systemiz one-pager — shared + per-variation styles.
   Built on the brand design tokens. Three calm/minimal layout directions. */
@import url("assets/colors_and_type.css");

* { box-sizing: border-box; }

/* =========================================================================
   Shared frame — every variation renders into a 1200px-wide dark canvas
   ========================================================================= */
.sz {
  width: 1200px;
  position: relative;
  background: var(--ink-050);
  color: var(--fg-2);
  font-family: var(--font-sans);
  overflow: hidden;
}
.sz .grain {
  position: absolute; inset: 0;
  background-image: url("assets/background-grain.png");
  background-size: cover; background-position: center;
  opacity: 0.55; pointer-events: none; z-index: 0;
}
.sz .cols {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg,
    rgba(255,255,255,0.022) 0, rgba(255,255,255,0.022) 1px,
    transparent 1px, transparent 104px);
  opacity: 0.7; pointer-events: none; z-index: 0;
}
.sz > * { position: relative; z-index: 1; }

/* ---- Nav (shared) ---- */
.sz-nav {
  height: 78px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 56px;
}
.sz-nav .left { display: flex; align-items: center; gap: 11px; }
.sz-nav .left img { height: 24px; width: auto; display: block; }
.sz-nav .wm {
  font: var(--w-light) 19px/1 var(--font-sans);
  letter-spacing: 0.18em; color: var(--fg-1); text-transform: uppercase;
}
.sz-nav .wm .t { color: var(--brand); }
.sz-nav .links { display: flex; gap: 30px; }
.sz-nav .links a {
  font: var(--w-medium) 13px/1 var(--font-sans);
  color: var(--fg-3); text-decoration: none; cursor: pointer;
  transition: color var(--dur-base) var(--ease-out);
}
.sz-nav .links a:hover { color: var(--fg-1); }
.sz-cta {
  height: 40px; padding: 0 20px; border-radius: var(--r-pill);
  background: transparent; border: 1.5px solid var(--brand); color: var(--brand);
  font: var(--w-semibold) 12px/1 var(--font-sans); letter-spacing: 0.02em;
  cursor: pointer; white-space: nowrap;
  transition: all var(--dur-base) var(--ease-out);
  display: inline-flex; align-items: center; gap: 8px;
}
.sz-cta:hover { background: var(--brand); color: #fff; box-shadow: var(--shadow-glow); }
.sz-cta.solid { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.sz-cta.solid:hover { background: var(--brand); border-color: var(--brand); box-shadow: var(--shadow-glow); }
.sz-cta.lg { height: 52px; padding: 0 32px; font-size: 14px; }

.sz-hairline { height: 1px; background: var(--hairline-red); }

.eyebrow {
  font: var(--w-semibold) 11px/1 var(--font-sans);
  letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--brand);
}
.red { color: var(--brand); }
.dim { color: var(--fg-3); }

/* ---- Footer (shared) ---- */
.sz-footer {
  padding: 44px 56px; display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border-faint);
  color: var(--fg-5); font: var(--w-medium) 12px/1.4 var(--font-mono); letter-spacing: 0.04em;
}
.sz-footer .pp { color: var(--fg-4); font-family: var(--font-sans); font-style: italic; }

/* ---- Stats bar (shared) ---- */
.sz-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.sz-stats .stat {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 18px; border-right: 1px solid var(--border-soft);
}
.sz-stats .stat:last-child { border-right: 0; }
.sz-stats .num { font: var(--w-bold) 52px/1 var(--font-sans); letter-spacing: -0.02em; color: var(--brand); }
.sz-stats .lbl { font: var(--w-medium) 13px/1 var(--font-sans); letter-spacing: 0.04em; color: var(--fg-4); }

/* =========================================================================
   VARIATION A — Centered Editorial (faithful to systemiz.com)
   ========================================================================= */
.va-hero { padding: 84px 56px 64px; text-align: center; }
.va-hero .eyebrow { display: block; margin-bottom: 26px; }
.va-hero h1 {
  font: var(--w-light) 72px/1.04 var(--font-sans); letter-spacing: -0.03em;
  color: var(--fg-1); margin: 0 auto; max-width: 860px;
}
.va-hero h1 .dim { color: var(--fg-3); }
.va-hero .sub {
  margin: 28px auto 0; max-width: 600px;
  font: var(--w-regular) 18px/1.6 var(--font-sans); color: var(--fg-3);
}
.va-hero .actions { margin-top: 38px; display: flex; justify-content: center; gap: 14px; }

.va-sec { padding: 76px 56px; }
.va-sec.tight { padding-top: 24px; }
.va-shell { max-width: 1000px; margin: 0 auto; }
.va-h2 {
  font: var(--w-light) 46px/1.12 var(--font-sans); letter-spacing: -0.02em;
  color: var(--fg-1); text-align: center; margin: 0 auto; max-width: 720px;
}
.va-lede {
  margin: 20px auto 0; max-width: 600px; text-align: center;
  font: var(--w-regular) 16px/1.65 var(--font-sans); color: var(--fg-4);
}
.va-divider { width: 1px; height: 40px; background: var(--border-medium); margin: 0 auto; }

/* problems list */
.va-problems { margin: 52px auto 0; max-width: 760px; display: flex; flex-direction: column; }
.va-prob {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 24px 0; border-top: 1px solid var(--border-soft);
}
.va-prob:last-child { border-bottom: 1px solid var(--border-soft); }
.va-prob .ico {
  flex: 0 0 auto; width: 28px; height: 28px; color: var(--brand); margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
}
.va-prob .ico svg { width: 24px; height: 24px; stroke-width: 1.4; }
.va-prob .tx h4 { font: var(--w-semibold) 18px/1.3 var(--font-sans); color: var(--fg-1); margin: 0 0 5px; }
.va-prob .tx p { font: var(--w-regular) 15px/1.55 var(--font-sans); color: var(--fg-4); margin: 0; }
.va-prob-note { margin: 30px auto 0; text-align: center; font: var(--w-light) 22px/1.4 var(--font-sans); color: var(--fg-2); letter-spacing: -0.01em; }

/* phase path */
.va-phases { margin: 54px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.va-phase {
  background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  padding: 26px 22px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-2); transition: all var(--dur-base) var(--ease-out);
}
.va-phase:hover { background: var(--surface-card-hover); border-color: var(--border-medium); }
.va-phase .ico { width: 30px; height: 30px; color: var(--brand); }
.va-phase .ico svg { width: 26px; height: 26px; stroke-width: 1.4; }
.va-phase .ph { font: var(--w-semibold) 10px/1 var(--font-sans); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--fg-5); }
.va-phase .ttl { font: var(--w-semibold) 17px/1.2 var(--font-sans); color: var(--fg-1); }
.va-phase .desc { font: var(--w-regular) 13px/1.55 var(--font-sans); color: var(--fg-4); }

/* qualifier two-column */
.va-qual { margin: 52px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.va-qcard {
  background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  padding: 34px 32px;
}
.va-qcard.yes { border-color: rgba(239,58,76,0.28); }
.va-qcard h3 { display: flex; align-items: center; gap: 10px; font: var(--w-semibold) 16px/1 var(--font-sans); color: var(--fg-1); margin: 0 0 22px; }
.va-qcard h3 .ico { width: 22px; height: 22px; display: flex; }
.va-qcard h3 .ico svg { width: 20px; height: 20px; stroke-width: 1.7; }
.va-qcard.yes h3 .ico { color: var(--brand); }
.va-qcard.no h3 .ico { color: var(--fg-5); }
.va-qlist { display: flex; flex-direction: column; gap: 16px; }
.va-qrow { display: flex; align-items: flex-start; gap: 12px; font: var(--w-regular) 14px/1.5 var(--font-sans); color: var(--fg-3); }
.va-qcard.no .va-qrow { color: var(--fg-5); }
.va-qrow .dot { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; display: flex; }
.va-qrow .dot svg { width: 16px; height: 16px; stroke-width: 1.8; }
.va-qcard.yes .va-qrow .dot { color: var(--brand); }

/* close */
.va-close { padding: 0 56px 0; }
.va-closebox {
  max-width: 1000px; margin: 0 auto; text-align: center;
  border: 1px solid var(--border-soft); border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(20,20,20,0.5), rgba(8,8,8,0.5));
  padding: 64px 48px;
}
.va-closebox h2 { font: var(--w-light) 44px/1.1 var(--font-sans); letter-spacing: -0.02em; color: var(--fg-1); margin: 0 auto; max-width: 620px; }
.va-closebox p { margin: 20px auto 0; max-width: 540px; font: var(--w-regular) 16px/1.6 var(--font-sans); color: var(--fg-4); }
.va-closebox .actions { margin-top: 34px; display: flex; justify-content: center; }
.va-stats-wrap { max-width: 1000px; margin: 56px auto 0; padding: 0 56px; }
.va-stats { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--r-xl); padding: 44px 24px; box-shadow: var(--shadow-2); }

/* =========================================================================
   VARIATION B — The Split (before / after narrative, left-aligned)
   ========================================================================= */
.vb-hero { padding: 80px 64px 60px; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.vb-hero .eyebrow { display: block; margin-bottom: 22px; }
.vb-hero h1 { font: var(--w-light) 60px/1.06 var(--font-sans); letter-spacing: -0.03em; color: var(--fg-1); margin: 0; }
.vb-hero h1 .red { color: var(--brand); }
.vb-hero .sub { margin: 26px 0 0; font: var(--w-regular) 17px/1.6 var(--font-sans); color: var(--fg-3); max-width: 480px; }
.vb-hero .actions { margin-top: 34px; display: flex; gap: 14px; }
.vb-herocard {
  border: 1px solid var(--border-soft); border-radius: var(--r-lg); background: var(--surface-card);
  padding: 30px; box-shadow: var(--shadow-2);
}
.vb-herocard .cap { font: var(--w-semibold) 10px/1 var(--font-sans); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--fg-5); margin-bottom: 18px; }
.vb-mini { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--border-faint); }
.vb-mini:last-child { border-bottom: 0; }
.vb-mini .ico { width: 20px; height: 20px; color: var(--brand); flex: 0 0 auto; }
.vb-mini .ico svg { width: 19px; height: 19px; stroke-width: 1.4; }
.vb-mini span { font: var(--w-regular) 14px/1.4 var(--font-sans); color: var(--fg-3); }

.vb-band { padding: 26px 64px; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); background: rgba(10,10,10,0.4); }
.vb-band p { font: var(--w-light) 26px/1.4 var(--font-sans); letter-spacing: -0.01em; color: var(--fg-2); text-align: center; margin: 0; }

.vb-sec { padding: 72px 64px; }
.vb-head { margin-bottom: 44px; }
.vb-head .eyebrow { display: block; margin-bottom: 16px; }
.vb-head h2 { font: var(--w-light) 44px/1.1 var(--font-sans); letter-spacing: -0.02em; color: var(--fg-1); margin: 0; max-width: 640px; }
.vb-head p { margin: 18px 0 0; max-width: 560px; font: var(--w-regular) 16px/1.6 var(--font-sans); color: var(--fg-4); }

/* before/after split table */
.vb-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border-soft); border-radius: var(--r-lg); overflow: hidden; }
.vb-ba .col { padding: 0; }
.vb-ba .col.before { background: rgba(8,8,8,0.5); }
.vb-ba .col.after { background: rgba(20,16,16,0.5); border-left: 1px solid var(--border-soft); }
.vb-ba .colhead { padding: 24px 30px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 10px; }
.vb-ba .colhead .k { font: var(--w-semibold) 11px/1 var(--font-sans); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.vb-ba .before .colhead .k { color: var(--fg-4); }
.vb-ba .after .colhead .k { color: var(--brand); }
.vb-ba .colhead .ico { width: 18px; height: 18px; display: flex; }
.vb-ba .colhead .ico svg { width: 18px; height: 18px; stroke-width: 1.5; }
.vb-row { padding: 19px 30px; border-bottom: 1px solid var(--border-faint); font: var(--w-regular) 14.5px/1.5 var(--font-sans); }
.vb-row:last-child { border-bottom: 0; }
.vb-ba .before .vb-row { color: var(--fg-4); }
.vb-ba .after .vb-row { color: var(--fg-2); }
.vb-ba .before .vb-row .t { color: var(--fg-5); font-weight: var(--w-semibold); display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 5px; }
.vb-ba .after .vb-row .t { color: var(--brand); font-weight: var(--w-semibold); display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 5px; }

/* solution steps (horizontal connected) */
.vb-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.vb-step { padding: 0 26px; position: relative; }
.vb-step:not(:last-child)::after { content: ""; position: absolute; top: 14px; right: -1px; width: 1px; height: calc(100% - 14px); background: var(--border-soft); }
.vb-step .n { font: var(--w-medium) 13px/1 var(--font-mono); color: var(--brand); margin-bottom: 18px; display: block; }
.vb-step .ico { width: 28px; height: 28px; color: var(--fg-2); margin-bottom: 16px; }
.vb-step .ico svg { width: 26px; height: 26px; stroke-width: 1.4; }
.vb-step h4 { font: var(--w-semibold) 17px/1.2 var(--font-sans); color: var(--fg-1); margin: 0 0 9px; }
.vb-step p { font: var(--w-regular) 13.5px/1.55 var(--font-sans); color: var(--fg-4); margin: 0; }

/* qualifier inline */
.vb-qual { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.vb-qcol h3 { display: flex; align-items: center; gap: 10px; font: var(--w-semibold) 15px/1 var(--font-sans); margin: 0 0 24px; }
.vb-qcol.yes h3 { color: var(--fg-1); }
.vb-qcol.no h3 { color: var(--fg-4); }
.vb-qcol h3 .ico { width: 20px; height: 20px; display: flex; }
.vb-qcol h3 .ico svg { width: 20px; height: 20px; stroke-width: 1.7; }
.vb-qcol.yes h3 .ico { color: var(--brand); }
.vb-qrow { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--border-faint); font: var(--w-regular) 14px/1.5 var(--font-sans); }
.vb-qcol.yes .vb-qrow { color: var(--fg-3); }
.vb-qcol.no .vb-qrow { color: var(--fg-5); }
.vb-qrow .dot { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 3px; display: flex; }
.vb-qrow .dot svg { width: 15px; height: 15px; stroke-width: 1.8; }
.vb-qcol.yes .vb-qrow .dot { color: var(--brand); }

.vb-close { padding: 70px 64px; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; border-top: 1px solid var(--border-soft); }
.vb-close h2 { font: var(--w-light) 40px/1.12 var(--font-sans); letter-spacing: -0.02em; color: var(--fg-1); margin: 0; max-width: 560px; }
.vb-close p { margin: 16px 0 0; max-width: 520px; font: var(--w-regular) 15px/1.6 var(--font-sans); color: var(--fg-4); }
.vb-statsrow { padding: 0 64px 64px; }
.vb-stats { border-top: 1px solid var(--border-soft); padding-top: 48px; }

/* =========================================================================
   VARIATION C — The Ledger (numbered operator document, left-aligned)
   ========================================================================= */
.vc-hero { padding: 88px 72px 56px; }
.vc-hero .eyebrow { display: block; margin-bottom: 28px; }
.vc-hero h1 { font: var(--w-light) 66px/1.05 var(--font-sans); letter-spacing: -0.03em; color: var(--fg-1); margin: 0; max-width: 940px; }
.vc-hero h1 .red { color: var(--brand); }
.vc-hero .sub { margin: 28px 0 0; max-width: 620px; font: var(--w-regular) 18px/1.6 var(--font-sans); color: var(--fg-3); }
.vc-hero .actions { margin-top: 38px; display: flex; gap: 14px; align-items: center; }
.vc-hero .meta { font: var(--w-medium) 12px/1 var(--font-mono); color: var(--fg-5); letter-spacing: 0.04em; }

.vc-sec { padding: 60px 72px; border-top: 1px solid var(--border-soft); }
.vc-sechead { display: flex; align-items: baseline; gap: 22px; margin-bottom: 40px; }
.vc-sechead .idx { font: var(--w-medium) 13px/1 var(--font-mono); color: var(--brand); padding-top: 4px; }
.vc-sechead .tx h2 { font: var(--w-light) 38px/1.1 var(--font-sans); letter-spacing: -0.02em; color: var(--fg-1); margin: 0; }
.vc-sechead .tx p { margin: 14px 0 0; max-width: 620px; font: var(--w-regular) 15px/1.6 var(--font-sans); color: var(--fg-4); }

/* ledger of problems */
.vc-ledger { display: flex; flex-direction: column; }
.vc-litem { display: grid; grid-template-columns: 56px 1fr 200px; gap: 24px; align-items: center; padding: 22px 0; border-top: 1px solid var(--border-soft); }
.vc-litem:last-child { border-bottom: 1px solid var(--border-soft); }
.vc-litem .ln { font: var(--w-medium) 12px/1 var(--font-mono); color: var(--fg-5); }
.vc-litem .desc { font: var(--w-regular) 16px/1.5 var(--font-sans); color: var(--fg-2); }
.vc-litem .tag { justify-self: end; font: var(--w-medium) 11px/1.3 var(--font-mono); color: var(--brand); text-align: right; letter-spacing: 0.02em; text-transform: uppercase; }

/* stepped path with vertical connector */
.vc-path { display: flex; flex-direction: column; }
.vc-pstep { display: grid; grid-template-columns: 56px 1fr; gap: 24px; position: relative; padding-bottom: 30px; }
.vc-pstep:last-child { padding-bottom: 0; }
.vc-pstep .marker { position: relative; display: flex; flex-direction: column; align-items: center; }
.vc-pstep .marker .dot {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-medium);
  background: var(--surface-card); display: flex; align-items: center; justify-content: center;
  color: var(--brand); flex: 0 0 auto; z-index: 1;
}
.vc-pstep .marker .dot svg { width: 19px; height: 19px; stroke-width: 1.5; }
.vc-pstep .marker .line { width: 1px; flex: 1; background: var(--border-soft); margin-top: 4px; }
.vc-pstep:last-child .marker .line { display: none; }
.vc-pstep .body { padding-top: 7px; }
.vc-pstep .body .k { font: var(--w-semibold) 10px/1 var(--font-sans); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--fg-5); }
.vc-pstep .body h4 { font: var(--w-semibold) 19px/1.2 var(--font-sans); color: var(--fg-1); margin: 8px 0 7px; }
.vc-pstep .body p { font: var(--w-regular) 14.5px/1.6 var(--font-sans); color: var(--fg-4); margin: 0; max-width: 680px; }

/* qualifier ledger split */
.vc-qual { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; }
.vc-qcol h3 { display: flex; align-items: center; gap: 10px; font: var(--w-semibold) 13px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 22px; }
.vc-qcol.yes h3 { color: var(--brand); }
.vc-qcol.no h3 { color: var(--fg-4); }
.vc-qcol h3 .ico { width: 18px; height: 18px; display: flex; }
.vc-qcol h3 .ico svg { width: 18px; height: 18px; stroke-width: 1.8; }
.vc-qrow { padding: 14px 0; border-top: 1px solid var(--border-faint); font: var(--w-regular) 15px/1.5 var(--font-sans); }
.vc-qcol.yes .vc-qrow { color: var(--fg-2); }
.vc-qcol.no .vc-qrow { color: var(--fg-5); }

.vc-close { padding: 64px 72px; border-top: 1px solid var(--border-soft); display: grid; grid-template-columns: 1fr 360px; gap: 60px; align-items: center; }
.vc-close h2 { font: var(--w-light) 42px/1.1 var(--font-sans); letter-spacing: -0.02em; color: var(--fg-1); margin: 0; }
.vc-close p { margin: 18px 0 28px; font: var(--w-regular) 15px/1.6 var(--font-sans); color: var(--fg-4); max-width: 520px; }
.vc-close .pp { font: var(--w-regular) 13px/1.5 var(--font-sans); font-style: italic; color: var(--fg-5); margin-top: 18px; }
.vc-stats { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border-soft); border-radius: var(--r-lg); overflow: hidden; background: var(--surface-card); }
.vc-stats .stat { display: flex; align-items: baseline; justify-content: space-between; padding: 22px 28px; border-bottom: 1px solid var(--border-faint); }
.vc-stats .stat:last-child { border-bottom: 0; }
.vc-stats .num { font: var(--w-bold) 34px/1 var(--font-sans); letter-spacing: -0.02em; color: var(--brand); }
.vc-stats .lbl { font: var(--w-medium) 13px/1 var(--font-sans); color: var(--fg-4); letter-spacing: 0.03em; }

/* =========================================================================
   Teammate review edits — Variation B
   ========================================================================= */
/* Chris: third stat ("Consultations") number → white */
.vb-stats .sz-stats .stat:nth-child(3) .num { color: var(--fg-1); }

/* Chris: hero "Book a free Systems Audit" CTA → black fill, red text */
[data-comment-anchor="62cf0adcb0-button-22-13"].sz-cta.solid,
[data-comment-anchor="62cf0adcb0-button-22-13"].sz-cta.solid:hover {
  background: var(--ink-000);
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: none;
}