/* DataTrend Dynamics — site system ("Proof Column")
   Porcelain base, cobalt accent, Archivo + Chivo Mono, 12-col grid, hairlines.
   Every element rests in its final state in plain CSS; motion is one-shot
   decoration on top, gated by .js + .in (see dtd.js). Shared by every page,
   including the posts the n8n auto-publisher writes. */

/* tracking on .rail-label is animated, so it must be a typed property */
@property --ls {
  syntax: '<length>';
  inherits: false;
  initial-value: 2.4px;
}

:root {
  --base:    #F2F4F7;
  --surface: #E6E9EE;
  --ink:     #0E1116;
  --muted:   #5C6673;
  --accent:  #1B33E0;
  --hair:    rgba(14, 17, 22, .14);

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  --t-mono: 11px;
  --t-body: 15px;
  --t-head: clamp(2.5rem, 6.4vw, 6.6rem);
  --t-h2: clamp(2rem, 4.4vw, 4.2rem);
  --t-h3: clamp(1.25rem, 1.6vw, 1.6rem);
  /* height-capped so the numeral lands inside viewport 1 at 1280x720 */
  --t-numeral: min(26vw, 42vh);

  /* shared by every digit box so all reels sit on one baseline */
  --digit-h: calc(var(--t-numeral) * .8);
  --digit-w: .6em;

  --gutter: clamp(20px, 4vw, 72px);
  --col-gap: clamp(12px, 1.6vw, 28px);
  --stage-pad-top: clamp(var(--s-7), 6vh, var(--s-10));
  --section-pad: clamp(var(--s-8), 11vw, 160px);

  --ease-std: cubic-bezier(0, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--t-body);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.mono {
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-weight: 400;
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-variant-numeric: tabular-nums;
}

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; }
img, svg, video { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--ink); color: var(--base);
  padding: var(--s-3) var(--s-4);
}
.skip:focus { left: var(--s-4); top: var(--s-4); }

.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
.stop { color: var(--accent); }

/* ---------------- buttons ---------------- */

.btn-solid {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  background: var(--ink);
  color: var(--base);
  border: 1px solid var(--ink);
  padding: 14px 22px;
  cursor: pointer;
  transition: background .2s linear, border-color .2s linear, color .2s linear;
}
.btn-solid:hover, .btn-solid:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-solid .arrow { transition: transform .2s var(--ease-std); }
.btn-solid:hover .arrow { transform: translateX(3px); }
.btn-solid[disabled] { opacity: .5; cursor: progress; }

.btn-text {
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.btn-text::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-std);
}
.btn-text:hover::after, .btn-text:focus-visible::after { transform: scaleX(1); }

.ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-5);
}

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

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) 0 var(--s-4);
  border-bottom: 1px solid var(--hair);
}

.logotype {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
}
.nav a {
  color: var(--muted);
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
  transition: color .18s linear;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .26s var(--ease-std);
}
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { color: var(--ink); }
.nav a:hover::after, .nav a:focus-visible::after,
.nav a[aria-current="page"]::after, .nav a.nav-cta::after { transform: scaleX(1); }
.nav a.nav-cta { color: var(--ink); }

/* ---------------- interior page hero ---------------- */

.page-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-6);
  padding: var(--stage-pad-top) 0 var(--s-8);
  border-bottom: 1px solid var(--ink);
}
.page-hero .ph-main { grid-column: 1 / span 8; min-width: 0; }
.page-hero .ph-side { grid-column: 9 / -1; min-width: 0; align-self: end; }
.page-hero h1 {
  font-weight: 700;
  font-size: clamp(2.4rem, 5.6vw, 5.8rem);
  line-height: .93;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.page-hero .lead { margin-top: var(--s-6); max-width: 54ch; color: var(--muted); line-height: 1.6; }
.page-hero .ctas { margin-top: var(--s-6); }

.kicker {
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-5);
}
.kicker .tick {
  width: 28px;
  height: 1px;
  background: var(--accent);
  flex: none;
}

/* ---------------- proof rail + odometer ---------------- */

.rail-kicker {
  color: var(--muted);
  margin: 0 0 var(--s-4);
  font-size: 10px;
}

.odometer, .odo-sm {
  display: flex;
  align-items: flex-end;
  max-width: 100%;
}
.odo-sm {
  --t-numeral: clamp(4.5rem, 9vw, 8.5rem);
  --digit-h: calc(var(--t-numeral) * .8);
}
.odo-sm .plus {
  font-size: calc(var(--t-numeral) * .5);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  margin-left: .05em;
  padding-bottom: .1em;
}

.digit {
  position: relative;
  overflow: clip;
  display: block;
  height: var(--digit-h);
  width: var(--digit-w);
  flex: none;
  font-size: var(--t-numeral);
  font-weight: 700;
  line-height: .8;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.digit .reel span {
  display: block;
  height: var(--digit-h);
  line-height: var(--digit-h);
  text-align: center;
}
/* every reel rests on its target in plain CSS; the roll is decoration on top */
.reel {
  display: block;
  transform: translateY(calc(var(--t) * -10%));
}

.rule {
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform-origin: left;
  margin-top: var(--s-4);
}

.rail-label {
  --ls: 2.4px;
  margin: var(--s-4) 0 0;
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls);
  color: var(--ink);
}

.rail-stack {
  list-style: none;
  margin: var(--s-7) 0 0;
  padding: 0;
  width: 100%;
  border-top: 1px solid var(--hair);
}
.rail-stack li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hair);
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
}
.rail-stack .k { color: var(--muted); }
.rail-stack .v { color: var(--ink); font-weight: 500; font-size: 12px; text-align: right; }

/* a tonal proof panel, used beside case studies and in page heroes */
.proof-panel {
  background: var(--surface);
  padding: var(--s-6) var(--s-5);
  display: flex;
  flex-direction: column;
}
.proof-panel .rail-stack { margin-top: var(--s-6); }

/* ---------------- sections ---------------- */

.section { padding-top: var(--section-pad); }

.sec-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: end;
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--ink);
  margin-bottom: var(--s-7);
}
.sec-index { grid-column: 1 / span 3; color: var(--muted); display: flex; gap: var(--s-3); align-items: center; }
.sec-index b { color: var(--accent); font-weight: 500; }
.sec-title { grid-column: 4 / -1; }
h2.h2, .sec-title h2 {
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.sec-sub {
  color: var(--muted);
  max-width: 56ch;
  margin-top: var(--s-4);
  line-height: 1.6;
}

/* a 12-col body under a section head: label column + content */
.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-6);
}
.split > .split-label { grid-column: 1 / span 3; color: var(--muted); }
.split > .split-body { grid-column: 4 / -1; min-width: 0; }

/* ledger: numbered rows with a hairline that inks on hover */
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger > li {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--hair);
  position: relative;
}
.ledger > li::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.ledger > li:hover::before { transform: scaleX(1); }
.ledger .idx { grid-column: 1 / span 3; color: var(--muted); padding-top: .4em; }
.ledger h3 {
  grid-column: 4 / span 4;
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
}
.ledger .body { grid-column: 8 / -1; color: var(--muted); line-height: 1.6; max-width: 56ch; }
.ledger .body p + p, .ledger .body ul { margin-top: var(--s-3); }
.ledger .body a { color: var(--ink); border-bottom: 1px solid var(--accent); }

/* definition rows: Situation / Bottleneck / Impact / ROI and similar */
.dl-rows { margin: var(--s-6) 0 0; border-top: 1px solid var(--hair); }
.dl-rows > div {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--hair);
}
.dl-rows dt { color: var(--muted); padding-top: .35em; }
.dl-rows dd { margin: 0; line-height: 1.6; }
.dl-rows .strong dd { font-weight: 600; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .04em;
  border: 1px solid var(--hair);
  padding: 5px 10px;
  color: var(--ink);
  background: var(--base);
}
.hood { margin-top: var(--s-6); }
.hood > .mono { color: var(--muted); display: block; margin-bottom: var(--s-3); }

/* status tag with a pulsing dot */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink);
}
.tag .live {
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 2.4s ease-in-out infinite;
}
.tag.dim { color: var(--muted); }

/* case study: story on the left, tonal proof panel on the right */
.case {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-7);
}
.case-main { grid-column: 1 / span 7; min-width: 0; }
.case-proof { grid-column: 9 / -1; align-self: start; }
.case-tag { margin-bottom: var(--s-4); }
.case-title {
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  text-transform: uppercase;
}
.case-title a { border-bottom: 2px solid var(--accent); }
.case-sub { color: var(--muted); margin-top: var(--s-3); }
.case-proof .rail-kicker { margin-bottom: var(--s-3); }
.case-proof .rail-label { font-size: 12px; }
@media (max-width: 1000px) {
  .case-main, .case-proof { grid-column: 1 / -1; }
}

/* generic hairline cards in a grid */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--col-gap);
}
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card {
  border-top: 1px solid var(--ink);
  padding-top: var(--s-5);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.card h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.15;
  margin: var(--s-3) 0;
}
.card p { color: var(--muted); line-height: 1.6; }
.card .chips, .card .ctas { margin-top: var(--s-4); }
.card .mono { color: var(--muted); }

/* plain long-form copy (privacy, terms, about) */
.prose { max-width: 68ch; line-height: 1.75; }
.prose h2 {
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -.015em;
  text-transform: none;
  line-height: 1.2;
  margin: var(--s-7) 0 var(--s-4);
}
.prose h3 { font-size: 1.1rem; font-weight: 600; margin: var(--s-6) 0 var(--s-3); }
.prose p { margin: 0 0 var(--s-4); }
.prose ul, .prose ol { margin: 0 0 var(--s-4); padding-left: 1.25rem; }
.prose li { margin-bottom: var(--s-2); }
.prose a { border-bottom: 1px solid var(--accent); }
.prose strong { font-weight: 600; }

/* FAQ */
.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: 'Chivo Mono', ui-monospace, monospace;
  color: var(--accent);
  font-weight: 400;
  transition: transform .2s var(--ease-std);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 0 var(--s-5); color: var(--muted); line-height: 1.7; max-width: 70ch; }
.faq .answer p + p { margin-top: var(--s-3); }

/* forms */
.f-field { display: flex; flex-direction: column; gap: var(--s-2); }
.f-field label { color: var(--muted); }
.f-field input, .f-field select, .f-field textarea {
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: var(--s-3) 0;
  outline: none;
  transition: border-color .2s linear;
}
.f-field textarea { resize: vertical; min-height: 7rem; }
.f-field select { cursor: pointer; }
.f-field input:focus, .f-field select:focus, .f-field textarea:focus { border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.f-field input::placeholder, .f-field textarea::placeholder { color: #98A1AC; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6) var(--col-gap);
}
.form-grid .full { grid-column: 1 / -1; }
.form-status { min-height: 1.5em; color: var(--muted); }
.form-status.ok { color: var(--accent); }
.form-status.err { color: #B42318; }

/* tables */
.table-wrap { overflow-x: auto; margin: var(--s-5) 0 var(--s-6); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-wrap th, .table-wrap td {
  text-align: left;
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom: 1px solid var(--hair);
  vertical-align: top;
}
.table-wrap th {
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--ink);
}


/* pricing cards (engagements + services) */
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); padding-top: var(--s-7); }
.pricing-card { display: flex; flex-direction: column; border-top: 1px solid var(--ink); padding: var(--s-5) 0 0; min-width: 0; }
.pricing-card.featured { background: var(--ink); color: var(--base); border-top-color: var(--accent); padding: var(--s-6) var(--s-5) var(--s-6); }
.pricing-badge { color: var(--accent); }
.pricing-card.featured .pricing-badge { color: #8FA0FF; }
.pricing-name { font-size: var(--t-h3); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; margin: var(--s-3) 0 var(--s-5); }
.pricing-amount { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 700; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.pricing-amount span { font-family: 'Chivo Mono', ui-monospace, monospace; font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pricing-card.featured .pricing-amount span { color: #9AA3AE; }
.pricing-description { margin-top: var(--s-5); color: var(--muted); line-height: 1.6; font-size: 14px; }
.pricing-card.featured .pricing-description { color: #B4BCC6; }
.pricing-features { list-style: none; margin: var(--s-5) 0 var(--s-6); padding: 0; border-top: 1px solid var(--hair); }
.pricing-card.featured .pricing-features { border-top-color: rgba(242,244,247,.16); }
.pricing-features li { padding: var(--s-3) 0 var(--s-3) var(--s-5); border-bottom: 1px solid var(--hair); font-size: 14px; line-height: 1.45; position: relative; }
.pricing-card.featured .pricing-features li { border-bottom-color: rgba(242,244,247,.16); }
.pricing-features li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 10px; height: 1px; background: var(--accent); }
.pricing-cta { margin-top: auto; align-self: flex-start; }
.pricing-card.featured .btn-solid { background: var(--base); color: var(--ink); border-color: var(--base); }
.pricing-card.featured .btn-solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 1000px) { .pricing-grid { grid-template-columns: 1fr; row-gap: var(--s-7); } }

/* ---------------- closing band + footer ---------------- */

.closer {
  margin-top: var(--section-pad);
  background: var(--ink);
  color: var(--base);
  padding: var(--section-pad) 0 var(--s-8);
}
.closer .mono { color: #9AA3AE; }
.closer h2 {
  font-weight: 700;
  font-size: clamp(2.6rem, 7.4vw, 7.6rem);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin: var(--s-5) 0 var(--s-6);
  max-width: 14ch;
}
.closer p { color: #B4BCC6; max-width: 50ch; line-height: 1.6; }
.closer .ctas { margin-top: var(--s-6); }
.closer .btn-solid { background: var(--base); color: var(--ink); border-color: var(--base); }
.closer .btn-solid:hover, .closer .btn-solid:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; }
.closer .btn-text { color: var(--base); }

.site-footer {
  background: var(--ink);
  color: #B4BCC6;
  border-top: 1px solid rgba(242, 244, 247, .14);
  padding: var(--s-8) 0 var(--s-6);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: var(--s-6);
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--base);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
}
.footer-tag { margin-top: var(--s-4); max-width: 40ch; line-height: 1.6; }
.footer-loc { margin-top: var(--s-4); color: #7F8894; }
.footer-head { color: #7F8894; margin-bottom: var(--s-4); }
.footer-col a {
  display: block;
  padding: 4px 0;
  color: #D7DCE2;
  transition: color .18s linear;
}
.footer-col a:hover, .footer-col a:focus-visible { color: #fff; }
.footer-bottom {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(242, 244, 247, .14);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  color: #7F8894;
}
.footer-bottom a:hover { color: #fff; }

/* ================= blog: index cards ================= */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-7) var(--col-gap);
}
.blog-card {
  border-top: 1px solid var(--ink);
  padding-top: var(--s-4);
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
}
.blog-card::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.blog-card:hover::before, .blog-card:focus-within::before { transform: scaleX(1); }
/* the auto-publisher still writes an emoji tile; the system has no place for it */
.blog-card .blog-image { display: none; }
.blog-card .blog-content { display: flex; flex-direction: column; flex: 1; }
.blog-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.blog-tag { color: var(--accent); }
.blog-title {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.25;
  margin: var(--s-4) 0 var(--s-3);
}
.blog-excerpt {
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-read-more {
  margin-top: auto;
  padding-top: var(--s-4);
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  align-self: flex-start;
}
/* whole card is the hit area */
.blog-read-more::after { content: ""; position: absolute; inset: 0; }
.blog-card .material-symbols-outlined { display: none; }
.blog-read-more { display: inline-flex; gap: var(--s-2); }
.blog-read-more::before { content: "\2192"; order: 2; }

/* ================= blog: article ================= */

/* header and body share one left edge: an 880px column, prose capped at 720 */
.post { max-width: 880px; margin: 0 auto; }
.article-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--stage-pad-top) 0 var(--s-7);
}
.article-header > * { max-width: 100%; }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--muted);
  margin-bottom: var(--s-6);
  justify-self: start;
  transition: color .18s linear;
}
.back-link:hover { color: var(--ink); }
.back-link::before { content: "\2190"; }
.back-link .material-symbols-outlined { display: none; }
.article-badge { display: block; color: var(--accent); margin-bottom: var(--s-4); }
.article-title {
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.article-dek {
  margin-top: var(--s-5);
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  color: var(--muted);
  line-height: 1.6;
  max-width: 62ch;
}
.article-meta {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--hair);
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.article-meta span:first-child { color: var(--ink); }

.article-body {
  max-width: 720px;
  padding-bottom: var(--s-9);
  font-size: 17px;
  line-height: 1.75;
  color: #1F252D;
}
.article-body > p, .article-body > ul, .article-body > ol { margin: 0 0 var(--s-5); }
.article-body h2 {
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: var(--s-8) 0 var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink);
}
.article-body h3 {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: var(--s-6) 0 var(--s-3);
}
.article-body strong { font-weight: 600; color: var(--ink); }
.article-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.article-body a:hover { color: var(--accent); }
/* a few older posts hard-code the previous magenta on links */
.article-body a[style] { color: var(--ink) !important; }
.article-body a[style]:hover { color: var(--accent) !important; }
.article-body ul, .article-body ol { padding-left: 1.25rem; }
.article-body li { margin-bottom: var(--s-2); }
.article-body li::marker { color: var(--accent); }
.article-body code {
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: .86em;
  background: var(--surface);
  padding: .1em .35em;
}
.article-body pre {
  background: var(--ink);
  color: #E6E9EE;
  padding: var(--s-5);
  overflow-x: auto;
  margin: 0 0 var(--s-5);
  font-size: 13px;
  line-height: 1.6;
}
.article-body pre code { background: none; padding: 0; color: inherit; }
/* long identifiers and inline JSON must wrap on phones, not widen the page */
.article-body { overflow-wrap: break-word; }
.article-body code, .article-body em { overflow-wrap: anywhere; }
.article-body pre code { overflow-wrap: normal; }

.tldr {
  background: var(--surface);
  border-left: 2px solid var(--accent);
  padding: var(--s-5) var(--s-5);
  margin: 0 0 var(--s-7);
}
.tldr-label { display: block; color: var(--accent); margin-bottom: var(--s-3); }
.tldr p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink); }

.concept-sketch-wrap { margin: var(--s-7) 0; }
.concept-sketch-wrap svg {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
  border: 1px solid var(--hair);
}
.concept-sketch-wrap text { font-family: 'Kalam', 'Comic Sans MS', cursive; }
.sketch-caption {
  margin-top: var(--s-3);
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: var(--t-mono);
  letter-spacing: .06em;
  color: var(--muted);
}
.sketch-caption em { font-style: normal; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--col-gap);
  margin: var(--s-7) 0;
}
.stat-box { border-top: 1px solid var(--ink); padding-top: var(--s-4); }
.stat-value {
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  margin-top: var(--s-3);
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}

.pull-quote {
  margin: var(--s-8) 0;
  padding: var(--s-5) 0 var(--s-5) var(--s-5);
  border-left: 2px solid var(--accent);
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--ink);
}
.pull-quote p { margin: 0; }

.further-reading { margin: var(--s-8) 0 0; border-top: 1px solid var(--ink); }
.fr-label { display: block; color: var(--muted); padding: var(--s-4) 0; }
.further-reading > a {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--hair);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
  color: var(--ink);
}
.further-reading > a::after { content: "\2192"; color: var(--accent); flex: none; }
.further-reading > a:hover { color: var(--accent); }
.fr-source { margin-top: var(--s-4); font-size: 13px; color: var(--muted); }
.fr-source a { color: var(--muted); }

.article-cta {
  margin-top: var(--s-8);
  background: var(--ink);
  color: var(--base);
  padding: var(--s-7) var(--s-6);
}
.article-cta h3 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 var(--s-4);
  color: var(--base);
}
.article-cta p { color: #B4BCC6; margin-bottom: var(--s-6); font-size: 15px; line-height: 1.65; }
/* the generated posts call their CTA .btn-primary */
.article-cta .btn-primary, .article-body .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  text-decoration: none;
  background: var(--base);
  color: var(--ink);
  border: 1px solid var(--base);
  padding: 14px 22px;
  transition: background .2s linear, border-color .2s linear, color .2s linear;
}
.article-cta .btn-primary::after { content: "\2192"; }
.article-cta .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.article-cta .material-symbols-outlined { display: none; }

/* raster illustrations + lightbox (13 hand-published posts) */
.post-illustration { margin: var(--s-7) 0; }
.post-illustration .img-frame { position: relative; border: 1px solid var(--hair); background: #fff; cursor: zoom-in; overflow: hidden; }
.post-illustration img { display: block; width: 100%; height: auto; transition: transform .5s var(--ease-out); }
.post-illustration .img-frame:hover img { transform: scale(1.015); }
.post-illustration figcaption, .post-illustration .img-caption {
  margin-top: var(--s-3);
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: var(--t-mono);
  letter-spacing: .06em;
  color: var(--muted);
}
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(14, 17, 22, .92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
  cursor: zoom-out;
}
.lightbox-overlay.active { display: flex; }
.lightbox-overlay img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox-close {
  position: absolute; top: var(--s-4); right: var(--s-5);
  color: var(--base); font-size: 2rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { color: #fff; }

/* numbered bug list (schema-drift post) */
.bug-list { list-style: none; padding: 0 !important; margin: var(--s-5) 0; border-top: 1px solid var(--hair); }
.bug-list li { position: relative; padding: var(--s-4) 0 var(--s-4) 2.75rem; border-bottom: 1px solid var(--hair); margin: 0; }
.bug-list li::marker { content: none; }
.bug-list .bug-num { position: absolute; left: 0; top: var(--s-4); font-family: 'Chivo Mono', ui-monospace, monospace; color: var(--accent); font-size: 13px; padding-top: .2em; }
.bug-list strong { font-weight: 600; display: block; margin-bottom: var(--s-1); }

/* ================= motion =================
   One-shot entrances only. .js is set by an inline head script; .in is set
   by dtd.js when a block scrolls into view. Without either, nothing hides. */

@keyframes roll  { from { transform: translateY(0); } }
@keyframes draw  { from { transform: scaleX(0); } }
@keyframes fill  { to   { transform: scaleX(1); } }
@keyframes track { from { --ls: 6.6px; } }
@keyframes rise  { from { opacity: 0; transform: translateY(14px); } }
@keyframes pulse { 50% { opacity: .35; } }

.js [data-reveal] .rv {
  animation: rise .7s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * .08s);
}
/* above the fold the text must paint on frame one (it is the LCP), so the
   heroes only lift into place; they never start transparent */
@keyframes lift { from { transform: translateY(14px); } }
.js .page-hero .rv, .js .founder .rv, .js .article-header .rv { animation-name: lift; }
.js [data-reveal] .reel { animation: roll 1.05s var(--ease-out) .35s backwards; }
.js [data-reveal] .rule { animation: draw .44s cubic-bezier(.33, 1, .68, 1) .35s backwards; }
.js [data-reveal] .rail-label { animation: track .9s cubic-bezier(.33, 1, .68, 1) .43s backwards; }
.js [data-reveal]:not(.in) .rv,
.js [data-reveal]:not(.in) .reel,
.js [data-reveal]:not(.in) .rule,
.js [data-reveal]:not(.in) .rail-label { animation-play-state: paused; }

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

@media (max-width: 1000px) {
  :root { --t-numeral: 30vw; }
  .page-hero .ph-main, .page-hero .ph-side { grid-column: 1 / -1; }
  .sec-index { grid-column: 1 / -1; margin-bottom: var(--s-4); }
  .sec-title { grid-column: 1 / -1; }
  .split > .split-label, .split > .split-body { grid-column: 1 / -1; }
  .ledger .idx { grid-column: 1 / span 2; }
  .ledger h3 { grid-column: 3 / -1; }
  .ledger .body { grid-column: 3 / -1; margin-top: var(--s-3); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .cards, .cards.two, .blog-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; gap: var(--s-5); }
}

@media (max-width: 620px) {
  :root { --t-numeral: 36vw; --t-head: clamp(2.4rem, 11.5vw, 4.5rem); }
  .topbar { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  /* reserve the two lines Chivo Mono wraps to, so the font swap can't shift the page */
  .nav ul { flex-wrap: wrap; gap: var(--s-3) var(--s-5); min-height: 52px; align-content: flex-start; }
  .ctas { gap: var(--s-4); }
  .ctas .btn-solid { width: 100%; justify-content: space-between; }
  .rail-label { letter-spacing: .22em; }
  .ledger .idx { grid-column: 1 / -1; padding: 0 0 var(--s-2); }
  .ledger h3, .ledger .body { grid-column: 1 / -1; }
  .dl-rows > div { grid-template-columns: 1fr; gap: var(--s-2); }
  .footer-grid { grid-template-columns: 1fr; }
  .article-body { font-size: 16px; }
  .article-cta { padding: var(--s-6) var(--s-5); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .001ms !important;
  }
}