/* InstantQuote landing v5: one valve, taken apart and costed as you scroll; then where it works. */

:root {
  --paper: #f1f1ee;
  --paper-2: #f7f7f5;
  --card: #ffffff;
  --ink: #14181d;
  --ink-2: #444c56;
  --ink-3: #66707a;
  --hair: rgba(20, 24, 29, 0.09);
  --hair-2: rgba(20, 24, 29, 0.17);

  /* the demo's own colors for what a number is */
  --measured: #0f6e6a;
  --measured-2: #2a8a84;
  --measured-soft: #d7ebe8;
  --measured-light: #4fb3ab;
  --estimated: #b9770e;
  --estimated-soft: #f6e7cb;
  --loss: #b3412e;

  --graphite: #101317;
  --graphite-2: #161a1f;
  --steel: #9aa3ad;
  --steel-2: #7d8690;
  --on-dark-2: #a9b1ba;

  --f-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --gutter: clamp(20px, 4.5vw, 72px);
  --copy-w: min(38vw, 540px);
  --top-h: 76px;

  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, figure, ul, ol { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--measured); outline-offset: 3px; border-radius: 4px; }
.top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

/* ---------- header: the logo and one button, floating ---------- */

.top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  height: var(--top-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
/* Two backings, light and dark, that crossfade as the page under the header changes; an instant
   swap reads as a flicker on phones. */
.top::before,
.top::after {
  content: "";
  position: absolute;
  inset: 0 0 -24px 0;
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
}
.top::before { background: linear-gradient(rgba(241, 241, 238, 0.94) 55%, transparent); }
.top::after { background: linear-gradient(rgba(16, 19, 23, 0.92) 55%, transparent); }
.top.is-scrolled:not(.on-dark)::before,
.top.is-scrolled.on-dark::after { opacity: 1; }
.top > * { position: relative; z-index: 1; pointer-events: auto; }
/* both logos stay rendered and crossfade, so neither has to decode mid-scroll */
.brand { display: grid; text-decoration: none; padding: 6px 0; border-radius: 4px; }
.logo { grid-area: 1 / 1; height: 22px; width: auto; transition: opacity 260ms ease; }
.logo-light { opacity: 0; }
.top.on-dark .logo-ink { opacity: 0; }
.top.on-dark .logo-light { opacity: 1; }
.top-auth { display: flex; align-items: center; gap: 20px; }
.top-signin {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: color 260ms ease;
}
.top.on-dark .top-signin { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .top-signin:hover { text-decoration: underline; text-underline-offset: 4px; }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 20px;
  border-radius: 6px;
  border: 0;
  font: 500 15px/1 var(--f-sans);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn .arr { width: 15px; height: 15px; flex: none; transition: transform 240ms var(--ease-out); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-light { background: #eceef0; color: var(--ink); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.top.on-dark .btn-ink { background: #eceef0; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn-ink:hover { background: #262d35; }
  .top.on-dark .btn-ink:hover,
  .btn-light:hover { background: #ffffff; }
  .btn:hover .arr { transform: translateX(3px); }
}

.btn-text {
  font: 500 15px/1 var(--f-sans);
  color: var(--ink-2);
  text-decoration: none;
  padding: 10px 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 calc(100% - 4px);
  background-repeat: no-repeat;
  transition: color 200ms ease, background-size 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn-text:hover { color: var(--ink); background-size: 40% 1px; }
}

/* section labels: a short rule and small capitals, like a note on a drawing */
.label {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 11px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
}
.label::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.55; }
.label .n { color: #fff; letter-spacing: 0.04em; }
.label-ink { color: var(--ink-3); }

/* swatches for what a number is: measured / estimated / a leak */
.k { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 1.5px; margin-right: 8px; vertical-align: 0; }
.k-m { background: var(--measured); }
.k-e { background: repeating-linear-gradient(135deg, var(--estimated) 0 2px, var(--estimated-soft) 2px 4px); box-shadow: inset 0 0 0 1px var(--estimated); }
.k-l { background: var(--loss); }

/* ---------- 1. the story ---------- */

.story { position: relative; height: 330vh; height: 330svh; }
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(20, 24, 29, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 24, 29, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(20, 24, 29, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 24, 29, 0.028) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 46% 58% at 69% 52%, #000 22%, transparent 100%);
  mask-image: radial-gradient(ellipse 46% 58% at 69% 52%, #000 22%, transparent 100%);
}

.viz {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: calc(var(--gutter) + var(--copy-w) + 8px);
  margin: 0;
}
.gl,
.leaders,
.balloons,
.viz-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.gl { display: block; opacity: 0; transition: opacity 700ms var(--ease-out); }
.gl.is-ready { opacity: 1; }
.viz-poster { object-fit: contain; opacity: 0; transition: opacity 400ms ease; padding: 90px 4% 40px; }
.no-gl .viz-poster { opacity: 1; }
.no-gl .gl { display: none; }
.leaders { overflow: visible; pointer-events: none; }
.leaders line { stroke: var(--ink); stroke-width: 1; opacity: 0; }
.leaders circle { fill: var(--ink); opacity: 0; }
.balloons { pointer-events: none; }
.balloon {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--ink), 0 1px 2px rgba(20, 24, 29, 0.06), 0 8px 18px -10px rgba(20, 24, 29, 0.35);
  font: 500 11px/1 var(--f-mono);
  color: var(--ink);
  opacity: 0;
  will-change: transform, opacity;
}

.titleblock {
  position: absolute;
  right: 28px;
  bottom: 26px;
  display: flex;
  background: rgba(247, 247, 245, 0.78);
  box-shadow: inset 0 0 0 1px var(--hair-2);
  font: 400 11px/1.25 var(--f-mono);
  color: var(--ink-2);
}
.titleblock span { padding: 7px 12px 8px; }
.titleblock span + span { box-shadow: inset 1px 0 0 var(--hair-2); }
.titleblock em {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.titleblock b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; transition: color 300ms ease; }
.titleblock b.is-on { color: var(--measured); }
.titleblock b.is-up { color: var(--loss); }

/* what the drawing is, for anyone who hasn't stood on a plant floor */
.viz-cap {
  position: absolute;
  left: 34px;
  bottom: 30px;
  max-width: 300px;
  font: 400 12px/1.5 var(--f-mono);
  color: var(--ink-2);
  transition: opacity 300ms ease, transform 400ms var(--ease-out);
}
.viz-cap span {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.is-scrolled .viz-cap { opacity: 0; transform: translateY(8px); }

/* corner registration marks around the drawing */
.marks { position: absolute; inset: calc(var(--top-h) + 6px) 22px 22px 18px; pointer-events: none; }
.marks i { position: absolute; width: 13px; height: 13px; }
.marks i::before,
.marks i::after { content: ""; position: absolute; background: var(--hair-2); }
.marks i::before { left: 6px; top: 0; width: 1px; height: 13px; }
.marks i::after { top: 6px; left: 0; height: 1px; width: 13px; }
.marks i:nth-child(1) { left: 0; top: 0; }
.marks i:nth-child(2) { right: 0; top: 0; }
.marks i:nth-child(3) { left: 0; bottom: 0; }
.marks i:nth-child(4) { right: 0; bottom: 0; }

/* copy column */
.copy {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--gutter);
  width: var(--copy-w);
  display: grid;
  align-content: center;
  padding: calc(var(--top-h) + 12px) 0 44px;
  z-index: 2;
}
.panel { grid-area: 1 / 1; }
.js .panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  filter: blur(6px);
  transition: opacity 420ms var(--ease-out), transform 640ms var(--ease-out), filter 420ms var(--ease-out), visibility 0s linear 640ms;
}
.js .panel.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  transition: opacity 520ms var(--ease-out), transform 760ms var(--ease-out), filter 520ms var(--ease-out), visibility 0s;
}

.panel-hero { display: grid; gap: 24px; justify-items: start; align-content: center; }
h1 {
  font-size: clamp(40px, 4.7vw, 70px);
  line-height: 0.98;
  font-weight: 560;
  letter-spacing: -0.04em;
  text-wrap: balance;
  max-width: 9.5em;
}
.lede { font-size: 17.5px; line-height: 1.6; color: var(--ink-2); max-width: 29em; text-wrap: pretty; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 6px; }

/* swaps: several states stacked in one place, one shown at a time */
.swap { display: grid; }
.swap > * { grid-area: 1 / 1; }
.swap-num { display: inline-grid; justify-items: end; }
.js [data-show] {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(3px);
  transition: opacity 260ms var(--ease-out), transform 420ms var(--ease-out), filter 260ms var(--ease-out);
}
.js [data-show].is-on { opacity: 1; transform: none; filter: none; transition-delay: 90ms; }

/* the sheet */
.panel-sheet { display: grid; gap: 12px; align-content: center; }
.sheet-kicker { font: 500 11px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.sheet-kicker [data-show="update"] { color: var(--loss); }
.sheet-title { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.04; font-weight: 560; letter-spacing: -0.035em; }
.sheet-sub { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); max-width: 31em; }
.sheet-sub b { color: var(--measured); font-weight: 600; }
.sheet-sub b.loss { color: var(--loss); }

.sheet {
  width: 100%;
  margin-top: 6px;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.3;
}
.sheet th {
  padding: 0 0 9px;
  text-align: left;
  font: 500 10px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--hair-2);
}
.sheet td {
  padding: 7px 0;
  vertical-align: baseline;
  border-bottom: 1px dashed var(--hair-2);
  white-space: nowrap;
}
.sheet td b { font-weight: 560; letter-spacing: -0.005em; }
.sheet td .d { margin-left: 8px; font-size: 12.5px; color: var(--ink-3); }
.sheet .chg {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 5px;
  font: 600 10.5px/1 var(--f-mono);
  color: #fff;
  background: var(--loss);
  border-radius: 2px;
}
.sheet .it { width: 44px; font: 500 11px/1.3 var(--f-mono); color: var(--ink-3); }
.sheet .num { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet td.num { font-size: 13px; }
.sheet .num .loss { color: var(--loss); }
.sheet .col-src { padding-left: 10px; padding-right: 14px; }
.sheet td.col-src { font: 400 11px/1.3 var(--f-mono); color: var(--ink-2); }
.sheet .col-src .c { display: inline-flex; align-items: baseline; }
.sheet .pm { display: inline; margin-left: 6px; font-size: 10.5px; color: var(--estimated); }
.row-loss b,
.row-loss td.num { color: var(--loss); }

.js .row .c { display: inline-block; opacity: 0; transform: translateY(6px); transition: opacity 240ms var(--ease-out), transform 420ms var(--ease-out); }
.js .row td:not(.num) .c { display: block; }
.js .row.is-on .c { opacity: 1; transform: none; }
.js .row.is-on td:nth-child(2) .c { transition-delay: 40ms; }
.js .row.is-on td:nth-child(3) .c { transition-delay: 80ms; }
.js .row.is-on td:nth-child(4) .c { transition-delay: 120ms; }

.sheet tfoot td { padding-top: 10px; border-bottom: 0; border-top: 1.5px solid var(--ink); font-weight: 560; }
.sheet tfoot .swap { font-size: 14px; }
.total { display: inline-block; font: 600 17px/1 var(--f-mono); letter-spacing: -0.02em; transform-origin: 100% 70%; transition: transform 600ms var(--ease-out), color 300ms ease; }
.is-done .total { transform: scale(1.24); }
.is-updated .total { color: var(--loss); }
.sheet .total-pm { margin: 0 30px 0 0; }
.js .total-pm { opacity: 0; transition: opacity 300ms ease; }
.is-done .total-pm { opacity: 1; }

/* cost bar, priced against the selling price */
.bar { position: relative; margin-top: 18px; }
.bar::before {
  content: "$148.00 price";
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  font: 500 10.5px/1 var(--f-mono);
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.bar-track {
  position: relative;
  display: flex;
  height: 12px;
  background-image: repeating-linear-gradient(90deg, var(--hair-2) 0 1px, transparent 1px 5%);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.bar-track::after { content: ""; position: absolute; right: -1px; top: -5px; bottom: -5px; width: 1.5px; background: var(--ink); }
.seg { position: relative; flex: 0 0 var(--w); height: 100%; transition: flex-basis 800ms var(--ease-out); }
.is-updated .seg[data-seg="body"],
.is-updated .seg[data-seg="left"] { flex-basis: var(--w2); }
.seg::before {
  content: "";
  position: absolute;
  inset: 0 1px 0 0;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 700ms var(--ease-out);
}
.seg.is-on::before { transform: scaleX(1); }
.seg-m { --c: var(--measured); }
.seg-m.alt { --c: var(--measured-2); }
.is-updated .seg[data-seg="body"] { --c: var(--loss); }
.seg-e { --c: repeating-linear-gradient(135deg, var(--estimated) 0 3px, var(--estimated-soft) 3px 6px); }
.seg-l { --c: var(--loss); }
.seg-left { --c: rgba(15, 110, 106, 0.08); }
.seg-left::before { inset: 0 0 0 1px; box-shadow: inset 0 0 0 1px var(--measured); }
.bar-scale { position: relative; height: 14px; margin-top: 7px; font: 400 10.5px/1 var(--f-mono); color: var(--ink-3); }
.bar-cost,
.bar-left { position: absolute; top: 0; white-space: nowrap; font-weight: 500; opacity: 0; transition: opacity 300ms ease, left 800ms var(--ease-out), right 800ms var(--ease-out); }
.bar-cost { right: calc(100% - var(--x)); padding-right: 8px; color: var(--ink); }
.bar-cost::after { content: ""; position: absolute; right: 0; top: -11px; height: 21px; width: 1.5px; background: var(--ink); }
.bar-left { left: var(--x); padding-left: 7px; color: var(--measured); }
.is-updated .bar-cost { right: calc(100% - var(--x2)); }
.is-updated .bar-left { left: var(--x2); color: var(--loss); }
.is-done .bar-cost,
.is-done .bar-left { opacity: 1; }

.sheet-foot { margin-top: 14px; min-height: 2.6em; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 400 11px/1.4 var(--f-mono); color: var(--ink-3); }
.legend span { display: inline-flex; align-items: center; }
.next { display: flex; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.next .k { margin-top: 5px; }

/* scroll cue */
.scroll-cue {
  position: absolute;
  left: var(--gutter);
  bottom: 26px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 500 10.5px/1 var(--f-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  transition: opacity 300ms ease, transform 400ms var(--ease-out);
}
.scroll-cue i { position: relative; width: 1px; height: 30px; background: var(--hair-2); overflow: hidden; }
.scroll-cue i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 10px;
  background: var(--ink);
  animation: cue 1.8s var(--ease-in-out) infinite;
}
@keyframes cue {
  0% { transform: translateY(-10px); }
  70%, 100% { transform: translateY(30px); }
}
.is-scrolled .scroll-cue { opacity: 0; transform: translateY(8px); pointer-events: none; }

/* ---------- shared section bits ---------- */

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.sec-head { display: grid; gap: 20px; max-width: 760px; }
.sec-head h2,
.cad-copy h2,
.closer h2 {
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 0.98;
  font-weight: 540;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.sec-sub { font-size: 17.5px; line-height: 1.6; max-width: 34em; text-wrap: pretty; }

/* chamfered photo frames, like a machined bezel */
.frame {
  --ch: 20px;
  padding: 1px;
  background: rgba(255, 255, 255, 0.14);
  clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
}
.frame-in {
  position: relative;
  padding: 6px;
  background: var(--graphite-2);
  clip-path: polygon(calc(var(--ch) - 0.4px) 0, 100% 0, 100% calc(100% - var(--ch) + 0.4px), calc(100% - var(--ch) + 0.4px) 100%, 0 100%, 0 calc(var(--ch) - 0.4px));
  overflow: hidden;
}
.frame img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  clip-path: polygon(calc(var(--ch) - 6px) 0, 100% 0, 100% calc(100% - var(--ch) + 6px), calc(100% - var(--ch) + 6px) 100%, 0 100%, 0 calc(var(--ch) - 6px));
  filter: saturate(0.9) contrast(1.04);
  transform: scale(1.06);
}
@supports (animation-timeline: view()) {
  .frame img {
    animation: drift linear both;
    animation-timeline: view();
    animation-range: cover;
  }
  @keyframes drift {
    from { transform: translateY(-3%) scale(1.08); }
    to { transform: translateY(3%) scale(1.08); }
  }
}

/* ---------- 2. four engines on one data layer ---------- */

.engines { background: var(--paper-2); border-top: 1px solid var(--hair); }
.engines .wrap { padding-top: clamp(96px, 14vh, 150px); padding-bottom: clamp(96px, 14vh, 150px); }
.engines .sec-sub { color: var(--ink-2); }

/* drawn like a flow diagram: the four engines in a loop around the one data layer */
.loop {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.56fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(136px, auto) auto auto;
  grid-template-areas:
    "pur costs  mar"
    "reo core   eco"
    "ope orders quo"
    "cap cap    cap";
  margin-top: 56px;
}
.eng-pur { grid-area: pur; --ex: 1; --ey: 1; }
.eng-mar { grid-area: mar; --ex: -1; --ey: 1; }
.eng-quo { grid-area: quo; --ex: -1; --ey: -1; }
.eng-ope { grid-area: ope; --ex: 1; --ey: -1; }
.flow-costs { grid-area: costs; }
.flow-eco { grid-area: eco; }
.flow-orders { grid-area: orders; }
.flow-reo { grid-area: reo; }
.core { grid-area: core; }
.loop-cap { grid-area: cap; }

.eng {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 24px 26px 22px;
  background: var(--card);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--hair-2), 0 1px 2px rgba(20, 24, 29, 0.05), 0 30px 60px -38px rgba(20, 24, 29, 0.35);
}
.eng-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.eng h3 { font-size: 21px; line-height: 1.2; font-weight: 560; letter-spacing: -0.02em; }
.eng-code { font: 500 11px/1 var(--f-mono); letter-spacing: 0.1em; color: var(--ink-3); white-space: nowrap; }
.eng-role { font: 500 11px/1.4 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.eng-sum { margin-top: 2px; font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 30em; text-wrap: pretty; }

/* flow lines: a hairline, an arrowhead and what moves along it */
.flow {
  position: relative;
  font: 500 10.5px/1.35 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.flow i { position: absolute; background: var(--ink); }
.flow i::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--ink);
  border-right: 1.5px solid var(--ink);
}
.flow span { position: absolute; white-space: nowrap; }
/* across: real costs to the right, accepted orders to the left */
.flow-costs i,
.flow-orders i { left: 16px; right: 16px; top: 50%; height: 1px; }
.flow-costs span,
.flow-orders span { left: 0; right: 0; bottom: calc(50% + 10px); text-align: center; }
.flow-costs i::after { right: 0; top: -3px; transform: rotate(45deg); }
.flow-orders i::after { left: 0; top: -3px; transform: rotate(-135deg); }
/* down and up: unit economics down to Quote, reorders up to Purchasing */
.flow-eco i,
.flow-reo i { top: 16px; bottom: 16px; left: 50%; width: 1px; }
.flow-eco span,
.flow-reo span { left: calc(50% + 14px); top: 50%; transform: translateY(-50%); }
.flow-eco i::after { bottom: 0; left: -3px; transform: rotate(135deg); }
.flow-reo i::after { top: 0; left: -3px; transform: rotate(-45deg); }

/* the one data layer every engine reads from and writes to */
.core {
  align-self: center;
  margin: 14px 18px;
  padding: 18px 18px 19px;
  display: grid;
  gap: 8px;
  text-align: center;
  background: var(--graphite);
  color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 24px 48px -28px rgba(16, 19, 23, 0.6);
}
.core-k { font: 600 10.5px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--measured-light); }
.core p + p { font-size: 14px; line-height: 1.45; color: #d5dade; text-wrap: balance; }

.loop-cap { margin-top: 30px; max-width: 64em; font: 400 12px/1.6 var(--f-mono); color: var(--ink-2); }
.loop-cap span {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* on arrival the engines move out from the data layer, the way the valve comes apart */
.js .eng.reveal { transform: translate(calc(var(--ex, 0) * 28px), calc(var(--ey, 0) * 22px)); }
.js .eng.reveal.is-in { transform: none; }
.js .flow.reveal { transform: none; }
.js .core.reveal { transform: scale(0.94); }
.js .core.reveal.is-in { transform: none; }

/* ---------- 3. industries ---------- */

.industries { position: relative; background: var(--graphite); color: #e9ebee; }
.industries .wrap { padding-top: clamp(96px, 15vh, 160px); padding-bottom: clamp(110px, 16vh, 170px); }
.industries .sec-head h2 { color: #fff; }
.industries .sec-sub { color: var(--on-dark-2); }

.ind {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(84px, 14vh, 150px);
}
.ind-media { grid-column: 1 / 8; grid-row: 1; position: relative; }
.ind-copy { grid-column: 8 / 13; grid-row: 1; }
.ind-rev .ind-media { grid-column: 6 / 13; }
.ind-rev .ind-copy { grid-column: 1 / 6; }
.ind-copy h3 {
  margin: 20px 0 18px;
  font-size: clamp(28px, 2.8vw, 42px);
  line-height: 1.04;
  font-weight: 540;
  letter-spacing: -0.035em;
  color: #fff;
  text-wrap: balance;
}
.ind-copy > p { font-size: 16.5px; line-height: 1.65; color: var(--on-dark-2); text-wrap: pretty; }
.tracks { list-style: none; padding: 0; margin-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.tracks li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font: 400 13px/1.35 var(--f-mono);
  color: #d5dade;
}
.tracks li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 1.5px; background: var(--measured-light); }

/* a small piece of the product: what it flagged this week */
.card {
  position: absolute;
  right: -32px;
  bottom: -36px;
  width: min(320px, 72%);
  padding: 14px 16px 12px;
  background: var(--paper-2);
  color: var(--ink);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 28px 56px -24px rgba(0, 0, 0, 0.7);
}
.ind-rev .card { right: auto; left: -32px; }
.card-k {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--hair-2);
  font: 500 10px/1 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.card-t { margin: 10px 0 8px; font-size: 15px; line-height: 1.35; font-weight: 560; letter-spacing: -0.01em; }
.card-t .mono { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--ink-2); }
.card-t .up { color: var(--loss); font-weight: 500; }
.card-l { list-style: none; padding: 0; display: grid; gap: 6px; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.card-l li { display: flex; align-items: baseline; }

/* ---------- 4. measured on site ---------- */

.proof { background: var(--paper); }
.proof .wrap { padding-top: clamp(96px, 14vh, 150px); padding-bottom: clamp(84px, 12vh, 130px); }
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.case {
  display: grid;
  gap: 20px;
  align-content: start;
  padding: 30px 30px 24px;
  background: var(--card);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--hair-2), 0 1px 2px rgba(20, 24, 29, 0.05), 0 30px 60px -38px rgba(20, 24, 29, 0.35);
}
.case-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.case h3 { font-size: 22px; line-height: 1.2; font-weight: 560; letter-spacing: -0.02em; }
.case-meta { margin-top: 7px; font: 500 11px/1.4 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.case-status {
  display: inline-flex;
  align-items: center;
  padding-top: 5px;
  white-space: nowrap;
  font: 500 11px/1 var(--f-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.case-line { font-size: 18px; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
.case-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding-top: 18px; border-top: 1px solid var(--hair-2); }
.case-stats dt { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; font-weight: 560; letter-spacing: -0.03em; color: var(--measured); }
.case-stats dd { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.case-note { font: 400 11px/1.5 var(--f-mono); letter-spacing: 0.04em; color: var(--ink-3); }
.fine { margin-top: 18px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.k-o { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-3); }

/* ---------- 5. how it runs ---------- */

.cadence { background: var(--paper-2); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.cadence .wrap { padding-top: clamp(96px, 15vh, 160px); padding-bottom: clamp(96px, 15vh, 160px); }
.cad-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 104px); align-items: center; }
.cad-copy { display: grid; gap: 20px; }
.cad-copy .sec-sub { color: var(--ink-2); }
.beats { list-style: none; padding: 0; margin-top: 14px; border-top: 1px solid var(--hair-2); }
.beats li { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; padding: 16px 0; border-bottom: 1px dashed var(--hair-2); }
.beats span { font: 500 11px/1.6 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.beats p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }

.note {
  background: var(--card);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--hair-2), 0 1px 2px rgba(20, 24, 29, 0.05), 0 36px 70px -36px rgba(20, 24, 29, 0.45);
  padding: 8px 24px 20px;
}
.note-head {
  display: flex;
  justify-content: space-between;
  padding: 14px 0 12px;
  border-bottom: 1.5px solid var(--ink);
  font: 600 11px/1 var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.note-head span + span { color: var(--ink-3); font-weight: 500; }
.note-sec { padding: 16px 0 4px; }
.note-sec + .note-sec { border-top: 1px dashed var(--hair-2); }
.note-h { margin-bottom: 10px; font: 500 10.5px/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.note ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.note li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 0 4px; font-size: 14px; line-height: 1.35; }
.note li b { font: 500 12.5px/1.35 var(--f-mono); color: var(--ink); white-space: nowrap; }
.note li b.loss { color: var(--loss); }
.note li b.ok { color: var(--measured); }
.note li em { font: normal 500 12.5px/1 var(--f-mono); margin-right: 6px; color: var(--ink-3); }
.note-q { font-size: 15px; line-height: 1.45; font-weight: 560; letter-spacing: -0.01em; }
.note-to { margin-top: 6px; font: 400 11.5px/1.5 var(--f-mono); color: var(--ink-3); }

/* ---------- 6. setup ---------- */

.setup { background: var(--paper); }
.setup .wrap { padding-top: clamp(96px, 14vh, 150px); padding-bottom: clamp(96px, 14vh, 150px); }
.steps {
  position: relative;
  list-style: none;
  padding: 0;
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
/* a dashed drafting line the step numbers sit on */
.steps::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 13px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--hair-2) 0 6px, transparent 6px 11px);
}
.steps li { position: relative; display: grid; gap: 10px; align-content: start; }
.steps .n {
  justify-self: start;
  padding-right: 12px;
  background: var(--paper);
  font: 600 12px/26px var(--f-mono);
  letter-spacing: 0.06em;
  color: var(--ink);
}
.steps h3 { font-size: 19px; line-height: 1.25; font-weight: 560; letter-spacing: -0.015em; }
.steps p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); max-width: 28em; }
.trust {
  list-style: none;
  margin-top: 64px;
  padding: 22px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  border-top: 1px solid var(--hair-2);
}
.trust li { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.trust b { display: block; margin-bottom: 4px; font-weight: 560; color: var(--ink); }

/* ---------- 7. close ---------- */

.closer { background: var(--graphite); color: #fff; }
.closer .wrap { padding-top: clamp(96px, 15vh, 150px); padding-bottom: 28px; }
.closer-in {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 32px 72px;
  align-items: end;
  padding-bottom: clamp(80px, 13vh, 130px);
}
.closer h2 .dim { color: #858e98; }
.closer-cta { display: grid; gap: 22px; justify-items: start; }
.closer-cta p { font-size: 17px; line-height: 1.6; color: var(--on-dark-2); max-width: 26em; }
.closer-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.closer-signin {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 5px;
}
@media (hover: hover) and (pointer: fine) {
  .closer-signin:hover { text-decoration-color: #fff; }
}

.foot {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  font: 400 11px/1.45 var(--f-mono);
  color: var(--steel-2);
}
.foot-logo { height: 18px; width: auto; }
.foot-credit { flex: 1; min-width: 16em; }
.foot-links { display: flex; gap: 16px; }
.foot-links a { color: #c5cbd2; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .foot-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
}

/* entry: a heavy fade-up as things come into view */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition:
    opacity 800ms var(--ease-out) calc(var(--d, 0) * 90ms),
    transform 1000ms var(--ease-out) calc(var(--d, 0) * 90ms),
    filter 800ms var(--ease-out) calc(var(--d, 0) * 90ms);
}
.js .reveal.is-in { opacity: 1; transform: none; filter: none; }

/* ---------- smaller screens ---------- */

@media (max-height: 860px) and (min-width: 761px) {
  .sheet td { padding-top: 5px; padding-bottom: 5px; }
  .sheet-sub { font-size: 14.5px; }
  .panel-sheet { gap: 9px; }
  .bar { margin-top: 14px; }
  h1 { font-size: clamp(38px, 4.3vw, 60px); }
}
@media (max-height: 740px) and (min-width: 761px) {
  .sheet td .d { display: none; }
  .sheet-sub { display: none; }
}

@media (max-width: 1100px) {
  :root { --copy-w: min(42vw, 440px); }
  .titleblock { display: none; }
  .ind-rev .ind-media,
  .ind-media { grid-column: 1 / -1; grid-row: 1; }
  .ind-rev .ind-copy,
  .ind-copy { grid-column: 1 / -1; grid-row: 2; margin-top: 64px; max-width: 640px; }
  .card { right: 20px; bottom: -40px; }
  .ind-rev .card { left: auto; right: 20px; }
  .cad-grid { grid-template-columns: 1fr; }
  .closer-in { grid-template-columns: 1fr; }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eng { padding: 22px 20px 20px; }
  .eng h3 { font-size: 19px; }
  .eng-sum { font-size: 14.5px; }
  .core { margin: 14px 8px; padding: 16px 14px 17px; }
}
@media (max-width: 900px) {
  .cases { grid-template-columns: 1fr; }
}

/* phones and portrait tablets: the drawing on top, the words below */
@media (max-width: 760px), (max-aspect-ratio: 5/6) {
  :root { --top-h: 64px; }
  .logo { height: 19px; }
  .story { height: 300vh; height: 300svh; }
  .viz { left: 0; right: 0; top: calc(var(--top-h) - 6px); bottom: auto; height: 39svh; }
  .marks { inset: 8px 12px 8px 12px; }
  .viz-cap { display: none; }
  .grid-bg { -webkit-mask-image: radial-gradient(ellipse 70% 34% at 50% 30%, #000 20%, transparent 100%); mask-image: radial-gradient(ellipse 70% 34% at 50% 30%, #000 20%, transparent 100%); }
  .copy {
    left: 16px;
    right: 16px;
    width: auto;
    top: calc(var(--top-h) - 6px + 39svh);
    bottom: 0;
    padding: 6px 0 8px;
    align-content: start;
  }
  .panel-hero { gap: 16px; }
  h1 { font-size: clamp(32px, 9vw, 44px); }
  .lede { font-size: 15.5px; }
  .btn { height: 46px; font-size: 14.5px; }
  .cta-row { margin-top: 0; }
  .sheet-title { font-size: 24px; }
  .sheet-sub,
  .sheet-kicker,
  .legend { display: none; }
  .panel-sheet { gap: 6px; }
  .scroll-cue { display: none; }
  .sheet { font-size: 12.5px; }
  .sheet th { padding-bottom: 6px; }
  .sheet td { padding: 3.5px 0; }
  .sheet td .d { display: none; }
  .sheet .col-src { display: none; }
  .sheet td.num { font-size: 12px; }
  .bar { margin-top: 20px; }
  .sheet-foot { margin-top: 12px; min-height: 0; }
  .next { font-size: 12.5px; }

  .sec-sub { font-size: 16px; }
  .ind { margin-top: 72px; }
  .ind-copy,
  .ind-rev .ind-copy { margin-top: 0; }
  .card,
  .ind-rev .card { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: -28px 12px 30px; }
  .ind-copy h3 { margin: 16px 0 14px; }
  .ind-copy > p { font-size: 15.5px; }
  .beats li { grid-template-columns: 1fr; gap: 6px; }
  .note { padding: 6px 16px 16px; }
  .note li { font-size: 13px; grid-template-columns: auto minmax(0, 1fr); }
  .note li b { grid-column: 2; }
  .foot { gap: 8px 16px; font-size: 10px; }

  .cases { margin-top: 32px; gap: 14px; }
  .case { padding: 22px 20px 18px; gap: 16px; }
  .case-top { flex-direction: column; gap: 10px; }
  .case h3 { font-size: 19px; }
  .case-line { font-size: 16px; }
  .case-stats { gap: 10px; }
  .case-stats dt { font-size: 21px; }
  .case-stats dd { font-size: 12px; }
  .steps { grid-template-columns: 1fr; gap: 26px; margin-top: 36px; }
  .steps::before { display: none; }
  .trust { grid-template-columns: 1fr; gap: 16px; margin-top: 44px; }

  /* the loop as one column: Purchasing down to Operations, and the return line up the left side */
  .loop {
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: none;
    margin-top: 36px;
  }
  .eng,
  .flow,
  .core,
  .loop-cap { grid-area: auto; grid-column: 2; }
  .flow-reo { grid-column: 1; grid-row: 1 / 8; }
  .core,
  .loop-cap { grid-column: 1 / -1; }
  .eng { padding: 20px 20px 18px; gap: 8px; }
  .js .eng.reveal { transform: translateY(28px); }
  .flow-costs,
  .flow-eco,
  .flow-orders { height: 56px; }
  .flow-costs i,
  .flow-eco i,
  .flow-orders i { top: 10px; bottom: 10px; left: 24px; right: auto; width: 1px; height: auto; }
  .flow-costs i::after,
  .flow-eco i::after,
  .flow-orders i::after { top: auto; right: auto; bottom: 0; left: -3px; transform: rotate(135deg); }
  .flow-costs span,
  .flow-eco span,
  .flow-orders span { left: 40px; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); text-align: left; }
  .flow-reo i { top: 30px; bottom: 30px; left: 8px; right: 0; width: auto; background: none; border: 1px solid var(--ink); border-right: 0; }
  .flow-reo i::after { top: -4px; right: 0; bottom: auto; left: auto; transform: rotate(45deg); }
  .flow-reo span { left: 2px; top: 50%; padding: 8px 0; background: var(--paper-2); writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); }
  .core { margin: 22px 0 0; text-align: left; }
  .loop-cap { margin-top: 20px; }
}
@media (max-width: 420px) {
  .top .btn-sm { height: 36px; padding: 0 12px; font-size: 13px; }
  .top .btn-sm .arr { display: none; }
  .top-auth { gap: 14px; }
  .top-signin { font-size: 13.5px; }
}

/* ---------- touch screens ----------
   Phones (iOS Safari especially) flicker on blur transitions and on scroll-linked image motion while
   the page is moving, so touch screens fade without blur and keep the photos still. The pinned stage
   gets its own compositing layer so it doesn't repaint as the page scrolls past it. */

@media (hover: none), (pointer: coarse) {
  .js .panel,
  .js .panel.is-on,
  .js [data-show],
  .js [data-show].is-on,
  .js .reveal,
  .js .reveal.is-in { filter: none; }
  .frame img { animation: none; transform: none; filter: none; }
  .stage { will-change: transform; }
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  .js .panel,
  .js .panel.is-on,
  .js [data-show],
  .js [data-show].is-on,
  .js .reveal,
  .js .row .c { transform: none !important; filter: none !important; }
  .js .reveal { transition: opacity 300ms ease; }
  .scroll-cue i::after { animation: none; }
  .frame img { animation: none; transform: scale(1.02); }
}