/* =========================================================
   MAIN & MACHINE — homepage design system
   Where Main Street meets the machine.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* surfaces */
  --paper:      #f4efe4;   /* warm cream — Main Street */
  --paper-2:    #ece5d6;   /* deeper cream panel */
  --paper-card: #fbf8f1;   /* raised card on paper */
  --ink:        #181511;   /* warm machine-shop black */
  --ink-2:      #211d18;   /* raised panel on ink */
  --ink-3:      #2c2720;   /* line / hairline on ink */
  --blueprint:  #d9dee2;   /* cool steel — the Machine */
  --blueprint-2:#cdd4da;

  /* accent — brick / signage rust */
  --accent:      #c14a24;
  --accent-deep: #a23c1b;
  --accent-soft: rgba(193,74,36,0.10);
  --accent-ink:  #e0653a;  /* brighter, for dark backgrounds */

  /* text on paper */
  --tx:        #201c17;
  --tx-mute:   #6f675c;
  --tx-faint:  #978d7f;
  --line:      rgba(32,28,23,0.14);
  --line-soft: rgba(32,28,23,0.08);

  /* text on ink */
  --dtx:       #f4efe4;
  --dtx-mute:  #a59c8e;
  --dtx-faint: #756c5f;
  --dline:     rgba(244,239,228,0.14);
  --dline-soft:rgba(244,239,228,0.07);

  --sans: 'Archivo', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;

  --maxw: 1240px;
  --gutter: clamp(20px, 4vw, 64px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--tx);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 9vw, 140px); }
.section--tight { padding-block: clamp(56px, 6vw, 96px); }

.ink   { background: var(--ink);  color: var(--dtx); }
.paper { background: var(--paper); color: var(--tx); }
.paper-2 { background: var(--paper-2); color: var(--tx); }
.blueprint { background: var(--blueprint); color: var(--tx); }

/* ---------- type ---------- */
.kicker {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
}
.ink .kicker { color: var(--accent-ink); }
.kicker::before { content: "/"; color: currentColor; opacity: .55; font-weight: 700; }
.kicker--plain::before { content: none; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-faint);
}
.ink .eyebrow { color: var(--dtx-faint); }

h1, h2, h3 { font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.h-hero { font-size: clamp(40px, 7vw, 92px); font-weight: 900; letter-spacing: -0.035em; line-height: 0.98; }
.h2     { font-size: clamp(30px, 4.4vw, 60px); }
.h3     { font-size: clamp(22px, 2.4vw, 32px); }
.lead   { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--tx-mute); max-width: 60ch; }
.ink .lead { color: var(--dtx-mute); }

.accent-tx { color: var(--accent); }
.ink .accent-tx { color: var(--accent-ink); }

.mono { font-family: var(--mono); }
.measure { max-width: 56ch; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 700; font-size: 15px;
  padding: 15px 24px; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  letter-spacing: -0.01em;
}
.btn:active { transform: translateY(1px); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-deep); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #000; }
.btn--ghost { background: transparent; color: var(--tx); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--tx); }
.ink .btn--ghost { color: var(--dtx); border-color: var(--dline); }
.ink .btn--ghost:hover { border-color: var(--dtx); }
.btn--lg { padding: 18px 30px; font-size: 16px; }
.btn .arr { transition: transform .2s ease; }
.btn:hover .arr { transform: translateX(3px); }

/* ---------- bits ---------- */
.rule { height: 1px; background: var(--line); border: 0; }
.ink .rule { background: var(--dline); }
.tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 9px; border: 1px solid var(--line); color: var(--tx-mute);
}
.ink .tag { border-color: var(--dline); color: var(--dtx-mute); }

/* numeric ticker */
.tick-num { font-family: var(--sans); font-weight: 900; letter-spacing: -0.03em; line-height: 0.9; }
.tick-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-mute); }
.ink .tick-lbl { color: var(--dtx-mute); }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; gap: 28px; height: 70px; }
.nav__links { display: flex; gap: 24px; margin-left: 8px; }
.nav__links a { font-size: 14.5px; font-weight: 500; color: var(--tx-mute); transition: color .15s; }
.nav__links a:hover { color: var(--tx); }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav__pricing { font-size: 14.5px; font-weight: 600; }
@media (max-width: 920px) { .nav__links { display: none; } }

/* logo / wordmark */
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo__plate {
  width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper); overflow: hidden;
  font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: -0.03em;
  white-space: nowrap; line-height: 1;
}
.logo__plate .amp { color: var(--accent-ink); }
.logo__word { font-weight: 800; font-size: 19px; letter-spacing: -0.03em; white-space: nowrap; }
.logo__word .amp { color: var(--accent); font-weight: 700; padding-inline: 1px; }
.ink .logo__word .amp { color: var(--accent-ink); }
.ink .logo__plate { background: var(--paper); color: var(--ink); }
.ink .logo__plate .amp { color: var(--accent); }

/* =========================================================
   HERO
   ========================================================= */
.hero { padding-top: clamp(38px, 3.2vw, 46px); padding-bottom: 0; }
.hero__grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; gap: 40px; } }
.hero h1 { margin: 12px 0 10px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.hero__note { font-family: var(--mono); font-size: 12.5px; color: var(--tx-mute); margin-top: 18px; max-width: 46ch; line-height: 1.6; }

/* operator stat rail */
.statrail { border: 1px solid var(--line); background: var(--paper-card); }
.statrail__row { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.statrail__row:last-child { border-bottom: 0; }
.statrail__k { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-mute); }
.statrail__v { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.statrail__v .accent-tx { font-weight: 900; }

/* operator log strip */
.oplog { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: clamp(56px, 7vw, 96px); }
.oplog__head { display:flex; align-items:center; gap: 14px; padding: 14px 0; }
.oplog__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
@media (max-width: 820px){ .oplog__grid { grid-template-columns: repeat(2,1fr);} }
.oplog__cell { padding: 26px 26px 30px; border-right: 1px solid var(--line-soft); }
.oplog__cell:last-child { border-right: 0; }
@media (max-width: 820px){ .oplog__cell:nth-child(2){border-right:0;} .oplog__cell:nth-child(1),.oplog__cell:nth-child(2){border-bottom:1px solid var(--line-soft);} }
.oplog__cell .tick-num { font-size: clamp(34px, 4vw, 52px); }
.oplog__cell p { font-size: 14px; color: var(--tx-mute); margin-top: 12px; line-height: 1.45; }
.founder { margin-top: 40px; display:flex; gap: 22px; align-items:flex-start; }
.founder p { color: var(--tx-mute); font-size: 15px; max-width: 70ch; }

/* =========================================================
   PATHS — three doors
   ========================================================= */
.head-block { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: end; margin-bottom: 52px; }
@media (max-width: 820px){ .head-block { grid-template-columns: 1fr; gap: 16px; } }

.paths { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; border: 1px solid var(--line); }
@media (max-width: 860px){ .paths { grid-template-columns: 1fr; } }
.path { padding: 32px 30px 34px; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 340px; background: var(--paper-card); transition: background .2s; }
.path:last-child { border-right: 0; }
.path:hover { background: #fff; }
@media (max-width: 860px){ .path { border-right:0; border-bottom: 1px solid var(--line);} .path:last-child{border-bottom:0;} }
.path__no { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--accent); text-transform: uppercase; }
.path h3 { margin: 22px 0 14px; font-size: 23px; line-height: 1.12; font-weight: 800; }
.path p { color: var(--tx-mute); font-size: 15px; flex: 1; }
.path__cta { margin-top: 22px; font-weight: 700; font-size: 14.5px; display:inline-flex; gap: 8px; align-items:center; color: var(--accent); }
.path__cta:hover { gap: 12px; }

/* =========================================================
   COMPETITORS (ink) + data
   ========================================================= */
.ops-strip { display:flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--dline); margin: 36px 0; }
.ops-strip span { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; padding: 16px 22px; border-right: 1px solid var(--dline); color: var(--dtx-mute); }
.ops-strip span b { color: var(--accent-ink); margin-right: 8px; }
.ops-strip span:last-child { border-right: 0; }

.datagrid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; background: var(--dline); border: 1px solid var(--dline); }
@media (max-width: 820px){ .datagrid { grid-template-columns: repeat(2,1fr);} }
.datagrid > div { background: var(--ink); padding: 30px 24px; }
.datagrid .tick-num { font-size: clamp(40px, 4.5vw, 60px); color: var(--accent-ink); }
.datagrid p { font-size: 13.5px; color: var(--dtx-mute); margin-top: 14px; line-height: 1.4; }
.datagrid cite { display:block; font-family: var(--mono); font-size: 11px; color: var(--dtx-faint); margin-top: 8px; font-style: normal; letter-spacing: .06em; }

/* =========================================================
   ROI CALCULATOR (blueprint / machine)
   ========================================================= */
.calc { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 920px){ .calc { grid-template-columns: 1fr; } }
.calc__panel { background: #fff; border: 1px solid var(--blueprint-2); }
.calc__bar { display:flex; justify-content: space-between; align-items:center; padding: 14px 20px; border-bottom: 1px solid var(--blueprint-2); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-mute); }
.calc__body { padding: 24px 26px; }
.calc__row { padding: 18px 0; border-bottom: 1px dashed var(--blueprint-2); }
.calc__row:last-child { border-bottom: 0; }
.calc__row .eyebrow { color: var(--tx-mute); }
.calc__row h4 { font-size: 16px; margin-top: 6px; font-weight: 700; }
.kv { display:flex; justify-content: space-between; font-size: 14px; padding: 5px 0; }
.kv .mono { color: var(--tx-mute); }
.kv b { font-weight: 700; }
.track { height: 6px; background: var(--blueprint); position: relative; margin: 14px 0 4px; }
.track::after { content:""; position:absolute; left:0; top:0; height:100%; width: 46%; background: var(--accent); }
.track .knob { position:absolute; left: 46%; top: 50%; width: 16px; height: 16px; background: var(--ink); transform: translate(-50%,-50%); }
.net { background: var(--ink); color: var(--dtx); padding: 26px; margin-top: 18px; }
.net .big { font-size: clamp(40px, 6vw, 68px); font-weight: 900; color: var(--accent-ink); letter-spacing: -0.03em; line-height: 1; margin: 8px 0; }

/* =========================================================
   SERVICES
   ========================================================= */
.svc { border: 1px solid var(--line); border-bottom: 0; }
.svc__item { display: grid; grid-template-columns: 220px 1fr 1fr; gap: 0; border-bottom: 1px solid var(--line); }
@media (max-width: 920px){ .svc__item { grid-template-columns: 1fr; } }
.svc__item--feature { background: var(--accent); color: #fff; }
.svc__meta { padding: 34px 28px; border-right: 1px solid var(--line); }
.svc__item--feature .svc__meta { border-color: rgba(255,255,255,0.25); }
.svc__no { font-family: var(--mono); font-size: clamp(46px,5vw,68px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.svc__meta .tick-lbl { margin-top: 18px; display:block; }
.svc__item--feature .tick-lbl, .svc__item--feature .eyebrow { color: rgba(255,255,255,0.8); }
.svc__price { font-weight: 800; font-size: 18px; margin-top: 4px; letter-spacing: -0.02em; }
.svc__main { padding: 34px 30px; border-right: 1px solid var(--line); }
.svc__item--feature .svc__main { border-color: rgba(255,255,255,0.25); }
.svc__main h3 { font-size: 27px; margin-bottom: 8px; }
.svc__tagline { font-weight: 700; font-size: 15px; margin-bottom: 14px; opacity: .9; }
.svc__main p { font-size: 15px; color: var(--tx-mute); }
.svc__item--feature .svc__main p { color: rgba(255,255,255,0.85); }
.svc__list { padding: 34px 30px; }
.svc__list .tick-lbl { display:block; margin-bottom: 16px; }
.svc__list ul { list-style: none; display:flex; flex-direction: column; gap: 12px; }
.svc__list li { font-size: 14.5px; padding-left: 22px; position: relative; line-height: 1.4; }
.svc__list li::before { content: "›"; position:absolute; left: 0; color: var(--accent); font-weight: 700; }
.svc__item--feature .svc__list li::before { color: #fff; }
.svc__cta { margin-top: 22px; font-weight: 700; font-size: 14px; display:inline-flex; gap:8px; align-items:center; color: var(--accent); }
.svc__item--feature .svc__cta { color: #fff; }

/* =========================================================
   HOW WE WORK (ink)
   ========================================================= */
.phases { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; border: 1px solid var(--dline); }
@media (max-width: 860px){ .phases { grid-template-columns: 1fr; } }
.phase { padding: 34px 30px 40px; border-right: 1px solid var(--dline); }
.phase:last-child { border-right: 0; }
@media (max-width: 860px){ .phase { border-right:0; border-bottom: 1px solid var(--dline);} .phase:last-child{border-bottom:0;} }
.phase__no { font-family: var(--mono); font-size: 13px; color: var(--accent-ink); letter-spacing: .12em; }
.phase h3 { font-size: 30px; margin: 20px 0 4px; }
.phase h3 + span { font-family: var(--mono); font-size: 12px; color: var(--dtx-faint); letter-spacing: .08em; text-transform: uppercase; }
.phase > p { color: var(--dtx-mute); font-size: 15px; margin: 18px 0 22px; }
.phase ul { list-style: none; display:flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--dline-soft); padding-top: 18px; }
.phase li { font-family: var(--mono); font-size: 12.5px; color: var(--dtx-mute); padding-left: 18px; position: relative; letter-spacing: .02em; }
.phase li::before { content: "›"; position:absolute; left:0; color: var(--accent-ink); }

/* =========================================================
   STORY / DIFFERENTIATORS
   ========================================================= */
.diffs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; border: 1px solid var(--line); margin-top: 48px; }
@media (max-width: 860px){ .diffs { grid-template-columns: 1fr; } }
.diff { padding: 30px 26px 34px; border-right: 1px solid var(--line); }
.diff:last-child { border-right: 0; }
@media (max-width: 860px){ .diff { border-right:0; border-bottom:1px solid var(--line);} .diff:last-child{border-bottom:0;} }
.diff .tick-lbl { color: var(--accent); }
.diff h3 { font-size: 20px; margin: 16px 0 10px; }
.diff p { font-size: 14.5px; color: var(--tx-mute); }

/* =========================================================
   WHO WE WORK WITH / industries
   ========================================================= */
.profile { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 40px; }
@media (max-width: 720px){ .profile { grid-template-columns: repeat(2,1fr);} }
.profile > div { background: var(--paper-card); padding: 22px 22px 26px; }
.profile .tick-lbl { display:block; margin-bottom: 10px; }
.profile .v { font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }

.industries { border: 1px solid var(--line); }
.ind { display: grid; grid-template-columns: 60px 1.6fr 1fr 1fr auto; gap: 0; align-items: center; padding: 22px 28px; border-bottom: 1px solid var(--line); transition: background .15s; }
.ind:last-child { border-bottom: 0; }
.ind:hover { background: var(--paper-card); }
@media (max-width: 820px){ .ind { grid-template-columns: 40px 1fr; row-gap: 6px; padding: 18px 20px; } .ind__col { display:none; } }
.ind__no { font-family: var(--mono); color: var(--accent); font-size: 13px; }
.ind__name { font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.ind__name span { display:block; font-weight: 400; font-size: 13px; color: var(--tx-mute); margin-top: 3px; letter-spacing: 0; }
.ind__col .tick-lbl { display:block; margin-bottom: 4px; }
.ind__col .mono { font-size: 13px; }
.ind__go { font-family: var(--mono); font-size: 12px; color: var(--accent); display:inline-flex; gap:6px; align-items:center; justify-self:end; }

/* =========================================================
   THREE ENTITIES (family)
   ========================================================= */
.entities { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
@media (max-width: 860px){ .entities { grid-template-columns: 1fr; } }
.entity { border: 1px solid var(--line); padding: 28px 26px 30px; background: var(--paper-card); display:flex; flex-direction:column; }
.entity--here { background: var(--ink); color: var(--dtx); border-color: var(--ink); }
.entity__role { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-mute); display:flex; justify-content: space-between; }
.entity--here .entity__role { color: var(--dtx-mute); }
.entity--here .entity__role .badge { color: var(--accent-ink); }
.entity h3 { font-size: 26px; margin: 18px 0 12px; }
.entity p { font-size: 14px; color: var(--tx-mute); flex:1; }
.entity--here p { color: var(--dtx-mute); }
.entity__stats { display:flex; gap: 26px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.entity--here .entity__stats { border-color: var(--dline); }
.entity__stats .tick-lbl { display:block; }
.entity__stats b { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }

/* =========================================================
   NEWSLETTER (ink)
   ========================================================= */
.news { display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px,4vw,56px); align-items:start; }
@media (max-width: 920px){ .news { grid-template-columns: 1fr; } }
.subcard { border: 1px solid var(--dline); background: var(--ink-2); padding: 30px; }
.subcard .tick-lbl { display:flex; justify-content: space-between; }
.subcard h3 { font-size: 24px; margin: 16px 0 8px; }
.subform { display:flex; gap: 10px; margin-top: 20px; }
@media (max-width: 480px){ .subform { flex-direction: column; } }
.subform input { flex:1; background: var(--ink); border: 1px solid var(--dline); color: var(--dtx); padding: 14px 16px; font-family: var(--sans); font-size: 14px; }
.subform input::placeholder { color: var(--dtx-faint); }
.posts { border: 1px solid var(--dline); }
.posts__bar { display:flex; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--dline); font-family: var(--mono); font-size: 11px; letter-spacing:.12em; text-transform: uppercase; color: var(--dtx-mute); }
.post { display:flex; gap: 18px; align-items:baseline; padding: 18px 20px; border-bottom: 1px solid var(--dline-soft); transition: background .15s; }
.post:last-child { border-bottom: 0; }
.post:hover { background: var(--ink-2); }
.post__no { font-family: var(--mono); font-size: 12px; color: var(--dtx-faint); }
.post__title { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; flex: 1; }
.post__date { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--dtx-faint); white-space: nowrap; }
.post--all { background: var(--ink-2); }
.post--all .post__no, .post--all .post__title { color: var(--accent-ink); }
.post--all:hover { background: var(--ink-3); }

/* =========================================================
   THE AMPERSAND — blog feed (/blog), mirrored from Substack
   ========================================================= */
.feed { display: flex; flex-direction: column; gap: 28px; }
.feed.is-loading { min-height: 40vh; }
.feed__loading { display:flex; align-items:center; justify-content:center; min-height: 30vh; }

/* featured / latest */
.feed__featured { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--paper-card); border: 1px solid var(--line); transition: border-color .15s; }
@media (max-width: 800px){ .feed__featured { grid-template-columns: 1fr; } }
.feed__featured:hover { border-color: var(--tx); }
.feed__featured-img { position: relative; min-height: 320px; background: var(--blueprint-2); overflow: hidden; }
.feed__featured-img img { width: 100%; height: 100%; object-fit: cover; }
.feed__featured-body { padding: clamp(26px, 3.5vw, 44px); display: flex; flex-direction: column; justify-content: center; }
.feed__featured-title { font-size: clamp(26px, 3.2vw, 42px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.04; margin: 14px 0; text-wrap: balance; }
.feed__excerpt { font-size: 16px; line-height: 1.55; color: var(--tx-mute); max-width: 52ch; }
.feed__read { margin-top: 22px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

/* recent grid */
.feed__bar { display:flex; justify-content: space-between; align-items:center; border-top: 1px solid var(--line); padding-top: 22px; }
.feed__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 860px){ .feed__grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .feed__grid { grid-template-columns: 1fr; } }
.feed__card { background: var(--paper-card); display: flex; flex-direction: column; transition: background .15s; }
.feed__card:hover { background: #fff; }
.feed__card-img { position: relative; aspect-ratio: 16 / 9; background: var(--blueprint-2); overflow: hidden; }
.feed__card-img img { width: 100%; height: 100%; object-fit: cover; }
.feed__card-body { padding: 22px 22px 26px; display:flex; flex-direction: column; gap: 8px; flex: 1; }
.feed__date { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--tx-faint); }
.feed__card-title { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.feed__card-excerpt { font-size: 14px; line-height: 1.5; color: var(--tx-mute); }

/* empty-image placeholder — blueprint grid motif */
.feed__featured-img.is-empty, .feed__card-img.is-empty {
  background-color: var(--blueprint);
  background-image: linear-gradient(rgba(74,96,112,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(74,96,112,0.12) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px;
}
.feed__featured-img.is-empty::after, .feed__card-img.is-empty::after {
  content: "&"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--sans); font-weight: 900; font-size: clamp(60px, 8vw, 120px);
  color: transparent; -webkit-text-stroke: 2px rgba(32,28,23,0.14);
}

/* archive link + empty state */
.feed__archive { align-self: flex-start; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.feed__archive:hover { color: var(--accent-deep); }
.feed__empty { background: var(--paper-card); border: 1px solid var(--line); padding: clamp(34px, 5vw, 64px); }
.feed__empty .lead { margin: 18px 0 26px; }

/* subscribe right column on /blog */
.subnote { display:flex; flex-direction: column; justify-content:center; }
.subnote ul { list-style: none; display:flex; flex-direction: column; gap: 12px; margin: 18px 0 22px; }
.subnote li { font-size: 15px; color: var(--dtx-mute); padding-left: 22px; position: relative; line-height: 1.45; }
.subnote li::before { content: "›"; position:absolute; left:0; color: var(--accent-ink); font-weight: 700; }
.subnote .feed__archive { color: var(--accent-ink); }

/* =========================================================
   PROMISE — two columns
   ========================================================= */
.promise { display:grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); }
@media (max-width: 820px){ .promise { grid-template-columns: 1fr; } }
.promise__col { padding: 34px 32px 38px; }
.promise__col--do { border-right: 1px solid var(--line); }
.promise__col--dont { background: var(--ink); color: var(--dtx); }
@media (max-width: 820px){ .promise__col--do { border-right:0; border-bottom:1px solid var(--line);} }
.promise__col h3 { font-size: 20px; margin-bottom: 22px; }
.promise__col ul { list-style: none; display:flex; flex-direction: column; gap: 16px; }
.promise__col li { font-size: 14.5px; line-height: 1.45; padding-left: 26px; position: relative; }
.promise__col--do li::before { content: "+"; position:absolute; left:0; top:-1px; color: var(--accent); font-weight: 800; font-size: 16px; }
.promise__col--dont li { color: var(--dtx-mute); }
.promise__col--dont li::before { content: "\2715"; position:absolute; left:0; color: var(--dtx-faint); font-weight: 700; }

/* =========================================================
   FAQ
   ========================================================= */
.faq { display:grid; grid-template-columns: 1fr 1.5fr; gap: clamp(28px,4vw,56px); align-items:start; }
@media (max-width: 860px){ .faq { grid-template-columns: 1fr; } }
.faq__list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; display:flex; gap: 16px; padding: 22px 4px; align-items:flex-start; }
summary::-webkit-details-marker { display: none; }
summary .q-no { font-family: var(--mono); font-size: 12px; color: var(--accent); padding-top: 3px; }
summary .q-tx { font-weight: 700; font-size: 17px; flex: 1; letter-spacing: -0.01em; }
summary .q-pm { font-family: var(--mono); font-size: 20px; color: var(--tx-mute); transition: transform .2s; }
details[open] summary .q-pm { transform: rotate(45deg); }
details p { padding: 0 4px 24px 44px; color: var(--tx-mute); font-size: 15px; line-height: 1.6; max-width: 70ch; }
.faq__aside { background: var(--ink); color: var(--dtx); padding: 30px; }
.faq__aside p { color: var(--dtx-mute); font-size: 14px; margin: 14px 0 22px; }

/* =========================================================
   FINAL CTA (ink) + timeline
   ========================================================= */
.final h2 { max-width: 16ch; }
.timeline { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; background: var(--dline); border: 1px solid var(--dline); margin-top: 44px; }
@media (max-width: 820px){ .timeline { grid-template-columns: repeat(2,1fr);} }
.tl { background: var(--ink); padding: 24px 22px 28px; }
.tl__t { font-family: var(--mono); font-size: 12px; color: var(--accent-ink); letter-spacing: .1em; }
.tl h4 { font-size: 17px; margin: 14px 0 8px; font-weight: 700; }
.tl p { font-size: 13px; color: var(--dtx-mute); line-height: 1.45; }

/* =========================================================
   FOOTER
   ========================================================= */
.foot { background: var(--ink); color: var(--dtx); padding-top: clamp(56px,7vw,90px); }
.foot__top { display:grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 36px; padding-bottom: 50px; border-bottom: 1px solid var(--dline); }
@media (max-width: 920px){ .foot__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .foot__top { grid-template-columns: 1fr; } }
.foot__brand p { color: var(--dtx-mute); font-size: 14px; max-width: 32ch; margin: 18px 0 24px; }
.foot__brand .entity__stats { border:0; padding:0; margin:0; }
.foot__col h5 { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dtx-faint); margin-bottom: 18px; }
.foot__col ul { list-style: none; display:flex; flex-direction: column; gap: 11px; }
.foot__col a, .foot__col li { font-size: 14px; color: var(--dtx-mute); transition: color .15s; }
.foot__col a:hover { color: var(--dtx); }
.foot__bottom { display:flex; flex-wrap: wrap; gap: 18px; align-items:center; justify-content: space-between; padding: 26px 0 40px; }
.foot__bottom, .foot__bottom a { font-family: var(--mono); font-size: 12px; color: var(--dtx-faint); letter-spacing: .04em; }
.foot__bottom .links { display:flex; gap: 20px; }

/* utility */
.stack-sm > * + * { margin-top: 10px; }
.mt-s { margin-top: 16px; } .mt-m { margin-top: 28px; } .mt-l { margin-top: 44px; }
.flex { display:flex; } .between { justify-content: space-between; } .center { align-items:center; }
.gap-s { gap: 12px; } .wrap-w { flex-wrap: wrap; }

/* =========================================================
   A+ ELEVATION LAYER — craft pass
   Deeper color, paper/ink grain, registration-mark motif,
   blueprint grid, hero ampersand, operator chrome, reveal.
   ========================================================= */
:root{
  /* deepen + warm the core tokens */
  --paper:      #f3ede0;
  --paper-2:    #eae1cf;
  --paper-card: #fbf8f0;
  --ink:        #14110c;
  --ink-2:      #1d1913;
  --ink-3:      #2a251d;
  --accent:      #bd451f;
  --accent-deep: #98330f;
  --accent-ink:  #ec6c3d;
  --amber:       #d68a3a;
  --tx:        #1d1812;
  --line:      rgba(29,24,18,0.16);
  --line-soft: rgba(29,24,18,0.085);
  /* faint film grain, tiled */
  --grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44MicgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScgb3BhY2l0eT0nMC4wNDUnLz48L3N2Zz4=");
}

/* grain on every surface (sits behind content) */
.paper, .paper-2 { background-color: var(--paper); background-image: var(--grain); }
.paper-2 { background-color: var(--paper-2); }
.ink, .foot { background-color: var(--ink); background-image: var(--grain); }
/* machine section gets a faint blueprint grid */
.blueprint{
  background-color: var(--blueprint);
  background-image:
    linear-gradient(rgba(74,96,112,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,96,112,0.10) 1px, transparent 1px),
    var(--grain);
  background-size: 32px 32px, 32px 32px, 180px 180px;
}

/* ---------- registration / crop-mark motif ---------- */
.crop { position: relative; }
.crop::after{
  content:""; position:absolute; inset:-1px; pointer-events:none; z-index:3;
  --c: var(--accent); --l: 14px; --t: 2px;
  background:
    linear-gradient(var(--c),var(--c)) left  top/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) left  top/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right top/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) right top/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) left  bottom/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) left  bottom/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/var(--t) var(--l) no-repeat;
}
.ink .crop::after, .net.crop::after { --c: var(--accent-ink); }

/* ---------- operator chrome: slim status bar above nav ---------- */
.topbar{ background: var(--ink); color: var(--dtx-mute); background-image: var(--grain); }
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:36px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing:.16em; text-transform:uppercase; }
.topbar__in .left { display:flex; align-items:center; }
.topbar__in .right { display:flex; gap:22px; }
.topbar a { color: var(--dtx-mute); transition: color .15s; }
.topbar a:hover { color: var(--dtx); }
.topbar .dot{ width:6px; height:6px; border-radius:50%; background: var(--accent-ink); display:inline-block; margin-right:10px; }
@media (prefers-reduced-motion: no-preference){ .topbar .dot{ animation: mm-pulse 2.6s ease-in-out infinite; } }
@keyframes mm-pulse{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(236,108,61,.55); } 50%{ opacity:.45; box-shadow:0 0 0 4px rgba(236,108,61,0); } }
@media (max-width: 680px){ .topbar .hide-sm{ display:none; } .topbar__in{ letter-spacing:.1em; } }

/* ---------- hero ampersand watermark (the pivot) ---------- */
.hero { position: relative; overflow: hidden; }
.hero .wrap { position: relative; z-index: 1; }
.hero__amp{
  position:absolute; right: clamp(-60px,-3vw,-20px); top: clamp(-80px,-7vw,-30px);
  z-index:0; pointer-events:none; user-select:none;
  font-family: var(--sans); font-weight: 900; line-height: .7; letter-spacing: -.04em;
  font-size: clamp(360px, 44vw, 660px);
  color: transparent; -webkit-text-stroke: 2px rgba(189,69,31,0.10);
}
@media (max-width: 940px){ .hero__amp{ opacity:.6; top:-40px; } }

/* ---------- spec-sheet stat rail ---------- */
.statrail__bar{ display:flex; justify-content:space-between; align-items:center;
  padding: 12px 18px; border-bottom: 1px solid var(--line);
  background: linear-gradient(var(--paper-2), var(--paper-card));
  font-family: var(--mono); font-size: 10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--tx-mute); }
.statrail__bar b{ color: var(--accent); font-weight:700; }
.statrail__row{ transition: background .15s; }
.statrail__row:hover{ background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* ---------- button polish ---------- */
.btn--accent{ box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px -14px rgba(189,69,31,.85); }
.btn--accent:hover{ transform: translateY(-2px); }
.btn--lg .arr{ font-size: 1.1em; }

/* ---------- card hover signature ---------- */
.path{ transition: background .2s ease, box-shadow .2s ease; }
.path:hover{ box-shadow: inset 0 3px 0 var(--accent); }
.datagrid > div{ transition: background .18s ease; }
.datagrid > div:hover{ background: var(--ink-2); }
.tl{ transition: background .18s ease; }
.tl:hover{ background: var(--ink-2); }
.ind:hover{ box-shadow: inset 3px 0 0 var(--accent); }

/* sharper kicker tick */
.kicker::before{ content:""; width:14px; height:2px; background: currentColor; opacity:.8; }
.kicker{ gap:9px; }

/* ---------- scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference){
  .rv{ opacity:0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.22,.72,.2,1), transform .7s cubic-bezier(.22,.72,.2,1); will-change: opacity, transform; }
  .rv.in{ opacity:1; transform: none; }
}

/* keep grain/marks from ever blocking interaction */
.section, .foot, .topbar { position: relative; }

/* =========================================================
   NEW SECTION LAYOUTS (copy rework)
   ========================================================= */

/* ---- 01 the argument: Main / Machine / & ---- */
.argument{ border:1px solid var(--line); background: var(--paper-card); }
.arg{ display:grid; grid-template-columns: 320px 1fr; gap:0; border-bottom:1px solid var(--line); transition: background .18s ease; }
.arg:last-child{ border-bottom:0; }
.arg:hover{ background: #fff; }
.arg--amp{ background: var(--ink); color: var(--dtx); }
.arg--amp:hover{ background: var(--ink); }
.arg__key{ padding:34px 30px; border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:12px; }
.arg--amp .arg__key{ border-color: var(--dline); }
.arg__word{ font-weight:900; font-size: clamp(38px,4.6vw,62px); letter-spacing:-.045em; line-height:.85; }
.arg__word .amp{ color:var(--accent); }
.arg--amp .arg__word .amp{ color: var(--accent-ink); }
.arg__tag{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-faint); }
.arg--amp .arg__tag{ color: var(--dtx-faint); }
.arg__body{ padding:38px 34px; display:flex; align-items:center; }
.arg__body p{ font-size:16.5px; line-height:1.6; color:var(--tx-mute); max-width:66ch; }
.arg--amp .arg__body p{ color: var(--dtx-mute); }
.arg__body p b{ color:var(--tx); font-weight:700; }
.arg--amp .arg__body p b{ color: var(--dtx); }
@media(max-width:760px){ .arg{ grid-template-columns:1fr; } .arg__key{ border-right:0; border-bottom:1px solid var(--line);} .arg--amp .arg__key{ border-color: var(--dline);} }

/* ---- problem: two-figure + prose ---- */
.prose-2{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(28px,4vw,56px); margin-top:44px; }
.prose-2 p{ font-size:16px; line-height:1.62; }
@media(max-width:760px){ .prose-2{ grid-template-columns:1fr; } }

/* ---- why us 2x2 ---- */
.why{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--line); }
.why > div{ padding:32px 30px 36px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition: background .18s ease; }
.why > div:hover{ background: var(--paper-card); }
.why > div:nth-child(2n){ border-right:0; }
.why > div:nth-last-child(-n+2){ border-bottom:0; }
.why .tick-lbl{ color:var(--accent); display:block; margin-bottom:14px; }
.why h3{ font-size:21px; margin-bottom:10px; }
.why p{ font-size:14.5px; color:var(--tx-mute); line-height:1.5; }
@media(max-width:680px){ .why{ grid-template-columns:1fr;} .why>div{border-right:0;} .why>div:nth-last-child(2){border-bottom:1px solid var(--line);} }

/* ---- bio ---- */
.bio{ display:grid; grid-template-columns: 320px 1fr; gap: clamp(28px,4vw,60px); align-items:start; }
.bio__card{ border:1px solid var(--line); background:var(--paper-card); padding:30px; }
.bio__name{ font-weight:800; font-size:27px; letter-spacing:-.02em; }
.bio__role{ font-family:var(--mono); font-size:12px; color:var(--tx-mute); letter-spacing:.04em; margin-top:12px; line-height:1.7; }
.bio__prose p{ font-size:18px; line-height:1.6; color:var(--tx-mute); max-width:60ch; }
.bio__prose p b{ color: var(--tx); font-weight:700; }
.bio__prose p + p{ margin-top:20px; }
.bio__press{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:var(--tx-faint); text-transform:uppercase; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); line-height:2.1; }
@media(max-width:760px){ .bio{ grid-template-columns:1fr; } }

/* ---- the math ---- */
.math{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px,4vw,56px); align-items:stretch; }
.math__fig{ background:var(--ink); color:var(--dtx); padding: clamp(34px,4vw,52px); display:flex; flex-direction:column; justify-content:center; }
.math__big{ font-weight:900; font-size: clamp(60px,9vw,116px); letter-spacing:-.045em; line-height:.85; color:var(--accent-ink); }
.math__cap{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--dtx-mute); margin-top:18px; }
.math__side{ display:flex; flex-direction:column; justify-content:center; }
.math__side p{ font-size:17px; line-height:1.6; color:var(--tx-mute); }
@media(max-width:760px){ .math{ grid-template-columns:1fr; } }

/* ---- ROI calculator ---- */
.tab{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.roi{ border:1px solid var(--ink); background: var(--paper-card); }
.roi__bar{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding: 12px 18px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.roi__id{ display:inline-flex; align-items:center; gap:9px; color:var(--tx); }
.roi__id--mute{ color: var(--tx-faint); letter-spacing:.1em; }
.roi__dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block; }
@media (prefers-reduced-motion: no-preference){ .roi__dot{ animation: mm-pulse 2.6s ease-in-out infinite; } }

.roi__grid{ display:grid; grid-template-columns: 1fr 1fr; }
@media(max-width:760px){ .roi__grid{ grid-template-columns:1fr; } }

.roi__inputs{ padding: clamp(22px,3vw,30px); border-right:1px solid var(--line); }
@media(max-width:760px){ .roi__inputs{ border-right:0; border-bottom:1px solid var(--line); } }
.roi__field + .roi__field{ margin-top:28px; }
.roi__field .tick-lbl{ display:block; margin-bottom:12px; }

.roi__selectwrap{ position:relative; }
.roi__select{
  appearance:none; -webkit-appearance:none; width:100%;
  background: var(--paper); color: var(--tx); border:1px solid var(--line);
  font-family: var(--sans); font-size:15px; font-weight:600; letter-spacing:-.01em;
  padding: 13px 40px 13px 14px; cursor:pointer; transition: border-color .15s; }
.roi__select:hover{ border-color: var(--tx-mute); }
.roi__select:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.roi__caret{ position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--accent); font-size:12px; }
.roi__note{ margin-top:9px; font-size:12.5px; line-height:1.45; color: var(--tx-faint); }

.roi__sliderhead{ display:flex; align-items:flex-end; justify-content:space-between; }
.roi__sliderhead .tick-lbl{ margin-bottom:0; }
.roi__count{ font-size:21px; font-weight:700; letter-spacing:-.02em; color:var(--tx); line-height:1; }
.roi__range{ -webkit-appearance:none; appearance:none; width:100%; height:4px; margin-top:16px;
  background: var(--line); cursor:pointer; }
.roi__range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px;
  background: var(--accent); border:0; cursor:pointer; border-radius:0; transition: background .15s; }
.roi__range::-moz-range-thumb{ width:18px; height:18px; background: var(--accent); border:0; cursor:pointer; border-radius:0; }
.roi__range:hover::-webkit-slider-thumb{ background: var(--accent-deep); }
.roi__range:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.roi__scale{ display:flex; justify-content:space-between; margin-top:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; color: var(--tx-faint); }

.roi__assume{ margin-top:28px; padding-top:22px; border-top:1px solid var(--line); }
.roi__assume .tick-lbl{ display:block; margin-bottom:14px; }
.roi__assume ul{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.roi__assume li{ display:flex; justify-content:space-between; gap:14px; font-size:12.5px; color: var(--tx-mute); }

.roi__output{ padding: clamp(22px,3vw,30px); display:flex; flex-direction:column; }
.roi__output > .tick-lbl{ display:block; margin-bottom:16px; }
.roi__rows{ list-style:none; }
.roi__rows li{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding: 13px 0; border-bottom:1px solid var(--line-soft); }
.roi__rows li:first-child{ padding-top:0; }
.roi__rows li span:first-child{ font-size:14px; color: var(--tx-mute); }
.roi__rows li span:last-child{ font-size:18px; font-weight:700; letter-spacing:-.01em; }
.roi__pos{ color: var(--tx); }
.roi__neg{ color: var(--accent); }

.roi__net{ margin-top:20px; padding-top:20px; border-top:2px solid var(--ink); }
.roi__nethead{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.roi__nethead span:last-child{ color: var(--tx-faint); letter-spacing:.1em; }
.roi__big{ margin-top:12px; font-weight:900; font-size: clamp(46px,6.5vw,68px);
  line-height:.9; letter-spacing:-.045em; color: var(--accent); }
.roi__disclaim{ margin-top:18px; font-size:12.5px; line-height:1.5; color: var(--tx-faint); }

.roi__foot{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding: 12px 18px; border-top:1px solid var(--line); background: var(--paper-2);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--tx-faint); }
.roi__foot b{ color: var(--tx); font-weight:700; }
@media(max-width:520px){ .roi__bar, .roi__foot{ flex-direction:column; align-items:flex-start; gap:5px; } }

.roi__cta{ margin-top:32px; display:flex; align-items:center; gap:clamp(20px,3vw,36px); flex-wrap:wrap; }
.roi__cta p{ flex:1; min-width:280px; font-size:15px; line-height:1.55; color: var(--tx-mute); }

/* ---- closer line ---- */
.closer{ margin-top:40px; padding-top:30px; border-top:1px solid var(--dline); display:flex; gap:22px; align-items:flex-start; }
.closer .kicker{ white-space:nowrap; }
.closer p{ font-size:16.5px; color:var(--dtx-mute); max-width:74ch; line-height:1.55; }
.closer p b{ color: var(--dtx); font-weight:700; }
@media(max-width:620px){ .closer{ flex-direction:column; gap:12px; } }

/* =========================================================
   HERO ANIMATION — word rise + breathing ampersand
   ========================================================= */
/* real whitespace lives between the word spans (for screen readers + crawlers);
   the negative top/bottom margins give ascenders/descenders room inside overflow:hidden,
   and word-spacing carries the visual gap so the gap stays consistent. */
.hero__title{ word-spacing: .04em; }
.hero__title .w{ display:inline-block; overflow:hidden; vertical-align:top; padding:.04em 0 .14em; margin:-.04em 0 -.14em; }
.hero__title .wi{ display:inline-block; }
@media (prefers-reduced-motion: no-preference){
  .hero__title .wi{ transform: translateY(120%); transition: transform .9s cubic-bezier(.16,.84,.3,1); }
  .hero__title.in .wi{ transform: translateY(0); }
  .hero__title .w:nth-child(1) .wi{ transition-delay: .10s; }
  .hero__title .w:nth-child(2) .wi{ transition-delay: .17s; }
  .hero__title .w:nth-child(3) .wi{ transition-delay: .24s; }
  .hero__title .w:nth-child(4) .wi{ transition-delay: .31s; }
  .hero__title .w:nth-child(5) .wi{ transition-delay: .40s; }
  .hero__title .w:nth-child(6) .wi{ transition-delay: .47s; }
  .hero__amp{ animation: ampDrift 16s ease-in-out infinite; transform-origin: 70% 30%; }
}
@keyframes ampDrift{
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-16px) scale(1.035); }
}

/* =========================================================
   HERO — "We build" fast-scan row
   ========================================================= */
.hero__build{
  list-style:none; display:flex; flex-wrap:wrap; align-items:center;
  row-gap:6px; margin:0 0 12px;
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--tx);
}
.hero__build li{ display:inline-flex; align-items:center; }
.hero__build li::before{ content:"·"; margin:0 7px; color:var(--accent); font-weight:700; }
.hero__build li:first-child::before{ content:none; }
.hero__build__lead{ color:var(--tx-faint); }

/* =========================================================
   EXAMPLE BUILDS — concrete proof module (section 03)
   ========================================================= */
.builds{ border:1px solid var(--line); margin-top:48px; background:var(--paper-card); }
.builds__bar{
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding:14px 22px; border-bottom:1px solid var(--line);
  background:linear-gradient(var(--paper-2), var(--paper-card));
}
.builds__bar .tick-lbl:first-child{ color:var(--accent); }
.builds__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:860px){ .builds__grid{ grid-template-columns:1fr; } }
.build{ padding:30px 26px 32px; border-right:1px solid var(--line); transition:background .18s ease; }
.build:last-child{ border-right:0; }
.build:hover{ background:#fff; box-shadow:inset 0 3px 0 var(--accent); }
@media (max-width:860px){ .build{ border-right:0; border-bottom:1px solid var(--line);} .build:last-child{ border-bottom:0; } }
.build__no{ font-family:var(--mono); font-size:12px; color:var(--tx-faint); letter-spacing:.12em; }
.build .tick-lbl{ display:block; color:var(--accent); margin:10px 0 12px; }
.build h3{ font-size:19px; line-height:1.18; margin-bottom:10px; }
.build p{ font-size:14.5px; color:var(--tx-mute); line-height:1.5; }
.build__win{
  display:block; margin-top:16px; padding-top:14px; border-top:1px dashed var(--line);
  font-family:var(--mono); font-size:12px; letter-spacing:.02em; line-height:1.5; color:var(--tx);
}
.builds__note{
  padding:16px 22px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; line-height:1.6; color:var(--tx-faint);
}

/* =========================================================
   MOBILE TIGHTENING PASS
   Scoped to small screens — desktop layout is untouched.
   ========================================================= */
@media (max-width: 640px){
  /* shorter operator chrome + sticky header */
  .topbar__in{ height:32px; font-size:10px; letter-spacing:.08em; }
  .nav__inner{ height:56px; gap:14px; }

  /* keep the nav CTA obvious but less dominant on small screens */
  .nav__inner{ gap:10px; }
  .logo__word{ font-size:16.5px; }
  .nav__right .btn--accent{ padding:9px 13px; font-size:12.5px; box-shadow:none; white-space:nowrap; }

  /* hero: more breathing room around headline + CTAs */
  .hero h1{ margin:18px 0 20px; }
  .hero__build{ margin:18px 0 22px; font-size:11.5px; letter-spacing:.07em; }
  .hero__build li::before{ margin:0 9px; }
  .hero__cta{ gap:12px; margin-top:26px; }
  .hero__cta .btn{ flex:1 1 100%; justify-content:center; }
  .hero__note{ margin-top:16px; }

  /* large value blocks: keep interior padding generous, not cramped */
  .arg__key{ padding:24px 22px; }
  .arg__body{ padding:24px 22px; }
  .build{ padding:26px 22px 28px; }
  .svc__meta{ padding:26px 22px; }
  .svc__main{ padding:26px 22px; }
  .svc__list{ padding:26px 22px; }
  .math__fig{ padding:30px 24px; }
}

/* very small phones (~360–390px): guard against tight chrome text */
@media (max-width: 430px){
  .topbar__in{ letter-spacing:.06em; gap:10px; }
  .topbar__in .right{ gap:0; }
  .topbar__in .right .hide-sm{ display:none; }
  .hero__build{ letter-spacing:.06em; }
}