*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--w-regular) var(--t-16)/var(--lh-body) var(--font-sans);
  font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.mono, .mono-label { font-family: var(--font-mono); }
.mono-label { font-size: var(--t-12); line-height: var(--lh-ui); color: var(--text-3); text-transform: uppercase; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: calc(-1 * var(--hairline)); padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: var(--rule) solid var(--focus); outline-offset: var(--s-2); border-radius: var(--r-4); }
.skip { position: absolute; left: var(--s-16); top: var(--s-8); z-index: 100; padding: var(--s-8) var(--s-16); border-radius: var(--r-8);
  background: var(--surface-2); color: var(--text); transform: translateY(-200%); }
.skip:focus { transform: none; }
.wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--side)); margin-inline: auto; padding-inline: var(--side); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.eyebrow { margin: 0 0 var(--s-24); font: var(--w-regular) var(--t-13)/var(--lh-ui) var(--font-mono); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--new); }
.metal { background: var(--grad-metal); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: var(--metal-pad); margin-bottom: calc(-1 * var(--metal-pad)); }
.display { font-weight: var(--w-semibold); font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--track-display); }
.h2 { font-weight: var(--w-semibold); font-size: var(--t-h2); line-height: var(--lh-heading); letter-spacing: var(--track-h2); }
.h3 { font-weight: var(--w-medium); font-size: var(--t-h3); line-height: var(--lh-heading); letter-spacing: var(--track-h3); }
.closing-h { font-weight: var(--w-semibold); font-size: var(--t-closing); line-height: var(--lh-heading); letter-spacing: var(--track-closing); }
.lead { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--text-2); }
.body-2 { font-size: var(--t-16); line-height: var(--lh-body); color: var(--text-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-10); padding: var(--s-14) var(--s-24);
  border: 0; border-radius: var(--r-pill); font: var(--w-medium) var(--t-16)/var(--lh-btn) var(--font-sans); text-decoration: none;
  white-space: nowrap; cursor: pointer; transition: box-shadow var(--t-hover) var(--ease-out); }
.btn-sm { padding: var(--s-8) var(--s-16); font-size: var(--t-14); }
.btn-primary { background: var(--grad-primary); box-shadow: var(--shadow-primary); color: var(--ink-on-primary); }
.btn-primary:hover { box-shadow: var(--shadow-primary-hover); color: var(--ink-on-primary); }
.btn-secondary { background: var(--grad-secondary); box-shadow: var(--shadow-secondary); color: var(--text); }
.btn-secondary:hover { box-shadow: var(--shadow-secondary-hover); color: var(--text); }
.btn .ico { width: var(--s-14); height: var(--s-14); fill: currentColor; stroke: none; }
.btns { display: flex; flex-wrap: wrap; gap: var(--s-12); }
.site-head { position: sticky; top: 0; z-index: 20; background: var(--glass-header); border-bottom: var(--hairline) solid var(--glass-line); }
.site-head.scrolled { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.head-row { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s-24); }
.logo { display: block; flex: none; }
.logo img { height: var(--logo-h); width: auto; }
.site-nav { display: flex; align-items: center; gap: var(--s-32); font-size: var(--t-15); }
.site-nav a:not(.btn) { color: var(--text-2); text-decoration: none; }
.site-nav a:not(.btn):hover, .site-nav a[aria-current="page"] { color: var(--text); }
.site-nav .btn { font-size: var(--t-15); }
.menu-btn { display: none; width: var(--menu-btn); height: var(--menu-btn); padding: 0; border: 0; background: none; cursor: pointer;
  align-items: center; justify-content: center; }
.menu-btn .ico { width: var(--s-20); height: var(--s-20); fill: none; stroke: var(--text); stroke-width: var(--stroke); stroke-linecap: round; }
.banner { height: var(--banner-h); display: flex; align-items: center; justify-content: center; padding-inline: var(--side);
  font: var(--w-regular) var(--t-12)/var(--lh-ui) var(--font-mono); text-transform: uppercase; color: var(--text-2);
  border-bottom: var(--hairline) solid var(--line); text-align: center; }
.demo-head .head-row { height: var(--demo-header-h); }
.demo-head .logo img { height: var(--logo-h-demo); }
.crumbs { display: flex; align-items: center; gap: var(--s-12); min-width: 0; }
.crumbs ol { display: flex; gap: var(--s-12); min-width: 0; }
.crumbs li { font: var(--w-regular) var(--t-12)/var(--lh-ui) var(--font-mono); text-transform: uppercase; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs li::before { content: "/ "; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.head-actions { display: flex; align-items: center; gap: var(--s-24); font-size: var(--t-14); }
.head-actions a:not(.btn), .head-actions .linkish { color: var(--text-2); text-decoration: none; }
.head-actions a:not(.btn):hover { color: var(--text); }
.head-actions .btns { gap: var(--s-12); }
.site-foot { border-top: var(--hairline) solid var(--line); margin-top: var(--s-128); }
.foot-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-24); padding-block: var(--s-40) var(--s-56);
  font-size: var(--t-14); line-height: var(--lh-ui); color: var(--text-3); }
.foot-row .logo { margin-bottom: var(--s-12); }
.foot-row .logo img { height: var(--logo-h-foot); }
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--s-16) var(--s-24); }
.foot-nav a { color: var(--text-2); text-decoration: none; }
.foot-nav a:hover { color: var(--text); }
.card { background: var(--grad-card); border: var(--hairline) solid var(--line-card); box-shadow: var(--shadow-card); border-radius: var(--r-16); }
.lift { transition: transform var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out); }
.lift:hover { transform: translateY(var(--rise)); border-color: var(--line-3); }
.tag { display: inline-flex; align-items: center; padding: var(--s-4) var(--s-8); border: var(--hairline) solid; border-radius: var(--r-6);
  font: var(--w-medium) var(--t-12)/var(--lh-tight) var(--font-mono); text-transform: uppercase; white-space: nowrap;
  box-shadow: var(--shadow-tag); }
.tag-growth { color: var(--growth); border-color: var(--growth-line); background: var(--grad-tag-growth); }
.tag-new { color: var(--new); border-color: var(--new-line); background: var(--grad-tag-new); }
.tag-neutral { color: var(--text-4); border-color: var(--neutral-line); background: var(--grad-tag-neutral); }
.tag-manual { color: var(--text-4); border-color: var(--icon); border-style: dashed; background: var(--grad-tag-neutral); }
.pill { display: inline-flex; padding: var(--s-8) var(--s-12); border-radius: var(--r-pill); background: var(--grad-pill); box-shadow: var(--shadow-pill);
  font: var(--w-regular) var(--t-12)/var(--lh-tight) var(--font-mono); color: var(--text-2); text-transform: uppercase; white-space: nowrap; }
.icon-tile { width: var(--icon-tile); height: var(--icon-tile); border-radius: var(--r-12); display: flex; align-items: center; justify-content: center;
  background: var(--grad-icon); box-shadow: var(--shadow-icon); }
.icon-tile .ico { width: var(--icon-glyph); height: var(--icon-glyph); fill: none; stroke: var(--new); stroke-width: var(--stroke);
  stroke-linejoin: round; stroke-linecap: round; }
.chev { width: var(--chevron); height: var(--chevron); fill: none; stroke: var(--icon); stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.value { padding: var(--s-32); }
.value .icon-tile { margin-bottom: var(--s-24); }
.value .h3 { margin-bottom: var(--s-12); }
.frame-fig { min-width: 0; }
.frame { position: relative; height: var(--frame-h); border-radius: var(--r-10); overflow: hidden; background: var(--ct-bg); }
.frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--shadow-frame); pointer-events: none; }
.frame > .ct { position: absolute; inset: 0; overflow: hidden; container-type: size; --zn: var(--z, 3.4); }
.frame > .ct img { position: absolute; max-width: none; width: calc(var(--zn) * 100cqw); height: calc(var(--zn) * 100cqw);
  left: calc(50cqw - var(--x) * var(--zn) * 100cqw); top: calc(50cqh - var(--y) * var(--zn) * 100cqw); }
.frame-label { position: absolute; left: var(--s-12); top: var(--s-12); z-index: 1; padding: var(--s-2) var(--s-4); border-radius: var(--r-4);
  background: var(--scrim); font: var(--w-regular) var(--t-12)/var(--lh-ui) var(--font-mono); text-transform: uppercase; color: var(--text-2); }
.frame-label .lbl-short { display: none; }
.frame-ms { margin-top: var(--s-10); font: var(--w-regular) var(--t-13)/var(--lh-ui) var(--font-mono); color: var(--text); }
.frame-ms.none { color: var(--text-3); }
.frames { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--frame-gap); }
.frame .inset { position: absolute; right: var(--s-12); bottom: var(--s-12); z-index: 1; width: var(--inset-w); height: var(--inset-h);
  border-radius: var(--r-4); overflow: hidden; border: var(--hairline) solid var(--line-3); background: var(--ct-bg); }
.frame .inset > .ct { position: absolute; inset: 0; overflow: hidden; container-type: size; --zn: 1; }
.frame .inset > .ct img { position: absolute; max-width: none; width: 100cqw; height: 100cqw; left: 0; top: calc(50cqh - 50cqw); }
.frame .inset .box { position: absolute; left: calc(var(--x) * 100%); top: calc(50% + (var(--y) - 0.5) * var(--inset-w)); width: var(--s-8); height: var(--s-8);
  transform: translate(-50%, -50%); border: var(--hairline) solid var(--growth); }
.fcard { padding: var(--s-24); border-radius: var(--r-20); }
.fcard-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-8) var(--s-16); margin-bottom: var(--s-20); }
.fcard-title { display: flex; align-items: center; gap: var(--s-12); font-weight: var(--w-medium); font-size: var(--t-18); line-height: var(--lh-ui); }
.fcard-meta { font: var(--w-regular) var(--t-13)/var(--lh-ui) var(--font-mono); color: var(--text-2); }
.curve { position: relative; height: var(--curve-h); margin-top: var(--s-16); border-radius: var(--r-10); box-shadow: var(--shadow-curve-box);
  background: var(--grad-curve-box-neutral); }
.curve-growth { background: var(--grad-curve-box-growth); }
.curve-new { background: var(--grad-curve-box-new); }
.curve-axis { position: absolute; left: var(--s-16); top: var(--s-14); font: var(--w-regular) var(--t-12)/var(--lh-tight) var(--font-mono);
  text-transform: uppercase; color: var(--text-3); }
.curve-base { position: absolute; left: 0; right: 0; top: calc(var(--curve-h) * 110 / 132); border-top: var(--hairline) solid var(--line); }
.curve-draw { position: absolute; inset: 0; }
.curve .seg { position: absolute; top: 0; height: 100%; max-width: none; overflow: visible;
  left: calc((100% - (var(--n) - 1) * var(--frame-gap)) / var(--n) * (var(--i) + 0.5) + var(--i) * var(--frame-gap));
  width: calc((100% - (var(--n) - 1) * var(--frame-gap)) / var(--n) + var(--frame-gap)); }
.curve .seg .fill { fill: var(--grad-curve-fill-neutral); }
.curve .seg .line { fill: none; stroke: var(--text-4); stroke-width: var(--stroke); }
.curve-growth .seg .fill { fill: var(--grad-curve-fill); }
.curve-growth .seg .line { stroke: var(--growth); }
.curve-growth .seg { filter: var(--shadow-curve); }
.curve-new .seg .fill { fill: var(--grad-curve-fill-new); }
.curve-new .seg .line { stroke: var(--new); }
.curve-new .seg { filter: var(--shadow-curve-new); }
.curve .pt { position: absolute; width: var(--point); height: var(--point); border-radius: var(--r-round); transform: translate(-50%, -50%);
  left: calc((100% - (var(--n) - 1) * var(--frame-gap)) / var(--n) * (var(--i) + 0.5) + var(--i) * var(--frame-gap));
  top: var(--y); background: var(--text-4); }
.curve .pt.last { width: var(--point-last); height: var(--point-last); background: var(--neutral-point); border: var(--rule) solid var(--text-4); }
.curve-growth .pt { background: var(--growth); }
.curve-growth .pt.last { background: var(--growth-point); border-color: var(--growth); }
.curve-new .pt { background: var(--new); }
.curve-new .pt.last { background: var(--new-point); border-color: var(--new); }
.curve .cv { position: absolute; white-space: nowrap; font: var(--w-regular) var(--t-13)/var(--lh-tight) var(--font-mono); color: var(--text-2);
  left: calc((100% - (var(--n) - 1) * var(--frame-gap)) / var(--n) * (var(--i) + 0.5) + var(--i) * var(--frame-gap) + var(--s-16));
  top: calc(var(--y) - var(--s-24)); }
.curve-growth .cv.last { color: var(--growth); }
.curve-new .cv.last { color: var(--new); }
.curve-neutral .cv.last { color: var(--text); }
.curve .seg-pct { position: absolute; white-space: nowrap; transform: translateX(-50%); top: var(--y); font: var(--w-regular) var(--t-12)/var(--lh-tight) var(--font-mono); color: var(--text-4);
  left: calc((100% - (var(--n) - 1) * var(--frame-gap)) / var(--n) * (var(--i) + 1) + (var(--i) + 0.5) * var(--frame-gap)); }
.fcard-meta .total { color: var(--text); white-space: nowrap; }
.wl-row { display: grid; grid-template-columns: var(--row-who) minmax(0, 1fr) var(--s-24); align-items: center; gap: var(--s-24);
  padding: var(--s-22) var(--s-24); border-bottom: var(--hairline) solid var(--line); text-decoration: none; color: var(--text); }
.wl-row:last-child { border-bottom: 0; }
.wl-row.selected { background: var(--grad-row-selected); }
.who-name { font-weight: var(--w-medium); font-size: var(--t-16); line-height: var(--lh-ui); }
.who-meta { margin-top: var(--s-4); font-size: var(--t-13); line-height: var(--lh-ui); color: var(--text-3); }
.wl-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); }
.wl-tags > .mono-label:first-child { margin-right: var(--s-4); }
.thead { display: grid; gap: var(--s-16); padding: var(--s-12) var(--s-24); border-bottom: var(--hairline) solid var(--line); }
.thead > span { font: var(--w-regular) var(--t-12)/var(--lh-ui) var(--font-mono); text-transform: uppercase; color: var(--text-3); }
.f-row { display: grid; gap: var(--s-16); align-items: center; padding: var(--s-16) var(--s-24); border-bottom: var(--hairline) solid var(--line);
  text-decoration: none; color: var(--text); }
.f-row:last-child { border-bottom: 0; }
.f-row.selected { background: var(--grad-row-selected); }
.f-name { font-size: var(--t-15); line-height: var(--lh-ui); }
.f-visits { font: var(--w-regular) var(--t-13)/var(--lh-ui) var(--font-mono); color: var(--text-2); }
.thumb { position: relative; width: var(--thumb); height: var(--thumb); border-radius: var(--r-6); overflow: hidden; background: var(--ct-bg); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--shadow-frame); }
.sentence { padding: var(--s-16); border-radius: var(--r-8); border: var(--hairline) solid transparent; font-size: var(--t-16); line-height: var(--lh-report); color: var(--text-2); }
.sentence.selected { background: var(--surface-2); border-color: var(--line-3); color: var(--text); }
.step { align-items: start; }
.step-copy { grid-column: span 4; }
.step-copy .num { margin-bottom: var(--s-12); font: var(--w-regular) var(--t-13)/var(--lh-ui) var(--font-mono); color: var(--new); }
.step-copy .h2 { margin-bottom: var(--s-16); }
.step-visual { grid-column: span 8; min-width: 0; }
.stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: var(--hairline) solid var(--line-3); }
.stages li { padding: var(--s-24) var(--s-24) 0 0; }
.stages li.here { border-top: var(--rule) solid var(--new); margin-top: calc(-1 * var(--hairline)); }
.stage-top { display: flex; align-items: center; gap: var(--s-10); height: var(--s-24); margin-bottom: var(--s-24); }
.stage-top .n { font: var(--w-regular) var(--t-13)/var(--lh-ui) var(--font-mono); color: var(--text-3); }
.stages li.here .stage-top .n { color: var(--new); }
.stages .h3 { margin-bottom: var(--s-12); }
.founder { padding: var(--s-32); }
.avatar { width: var(--avatar); height: var(--avatar); margin-bottom: var(--s-24); border-radius: var(--r-round); overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: var(--grad-icon); border: var(--hairline) solid var(--new-line);
  box-shadow: var(--shadow-avatar); font: var(--w-medium) var(--t-18)/var(--lh-tight) var(--font-mono); color: var(--new); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.founder-name { font-weight: var(--w-medium); font-size: var(--t-h3); line-height: var(--lh-heading); letter-spacing: var(--track-h3); }
.founder .role { margin: var(--s-8) 0 var(--s-20); font: var(--w-regular) var(--t-13)/var(--lh-ui) var(--font-mono); color: var(--new); }
.founder .bio { font-size: var(--t-16); line-height: var(--lh-body); color: var(--text-2); }
.audience { border-top: var(--hairline) solid var(--line-3); }
.audience li { padding: var(--s-24) 0; border-bottom: var(--hairline) solid var(--line); }
.audience h2 { margin-bottom: var(--s-8); font: var(--w-regular) var(--t-12)/var(--lh-ui) var(--font-mono); text-transform: uppercase; color: var(--new); }
.audience p { font-size: var(--t-18); line-height: var(--lh-lead); }
.credits { border-top: var(--hairline) solid var(--line-3); }
.credit { padding: var(--s-16) 0; border-bottom: var(--hairline) solid var(--line); font-size: var(--t-15); line-height: var(--lh-body); }
.credit .name { grid-column: span 4; font-weight: var(--w-medium); }
.credit .lic { grid-column: span 2; font: var(--w-regular) var(--t-13)/var(--lh-body) var(--font-mono); color: var(--text-2); }
.credit .src { grid-column: span 6; color: var(--text-2); }
.credit a { color: var(--text-2); }
.credit a:hover { color: var(--new); }
.closing { position: relative; overflow: hidden; padding: var(--s-80) var(--s-64); border-radius: var(--r-24); text-align: center;
  background: var(--grad-panel); }
.closing .mark { height: var(--mark-h); width: auto; margin: 0 auto var(--s-32); }
.closing .closing-h { max-width: calc(var(--container) * 0.64); margin: 0 auto var(--s-16); }
.closing p { max-width: calc(var(--container) * 0.44); margin: 0 auto var(--s-36); font-size: var(--t-18); line-height: var(--lh-lead); color: var(--text-2); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 1023px) {
  .step-copy, .step-visual { grid-column: 1 / -1; }
  .step-copy { margin-bottom: var(--s-32); }
  .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-40); }
  .stages li:nth-child(4) { border-top: var(--hairline) solid var(--line-3); }
  .stages li:nth-child(5) { border-top: var(--hairline) solid var(--line-3); }
  .credit .name { grid-column: span 5; }
  .credit .lic { grid-column: span 7; }
  .credit .src { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .site-nav { display: none; }
  .js .menu-btn { display: inline-flex; margin-right: calc(-1 * var(--s-12)); }
  html:not(.js) .head-row { height: auto; flex-wrap: wrap; padding-block: var(--s-16); }
  html:not(.js) .site-nav { display: flex; flex-wrap: wrap; gap: var(--s-12) var(--s-20); }
  .site-head.open .site-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; left: 0; right: 0;
    top: 100%; padding: var(--s-8) var(--side) var(--s-24); background: var(--bg); border-bottom: var(--hairline) solid var(--line); }
  .site-head.open .site-nav a:not(.btn) { padding: var(--s-14) 0; border-bottom: var(--hairline) solid var(--line); font-size: var(--t-18); }
  .site-head.open .site-nav .btn { margin-top: var(--s-20); font-size: var(--t-16); padding: var(--s-14) var(--s-24); }
  .demo-head .logo img { height: var(--logo-h-demo); }
  .foot-row { flex-direction: column; padding-block: var(--s-32) var(--s-48); }
  .foot-row .logo img { height: var(--logo-h-demo); }
  .wl-row { grid-template-columns: minmax(0, 1fr) var(--s-24); padding: var(--s-16); gap: var(--s-10) var(--s-16); }
  .wl-row .who { grid-column: 1; }
  .wl-row .wl-what { grid-column: 1; grid-row: 2; }
  .wl-row .chev { grid-column: 2; grid-row: 1 / span 2; }
  .stages { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .stages li { padding-bottom: var(--s-24); border-top: var(--hairline) solid var(--line-3); }
  .stages li.here { border-top: var(--rule) solid var(--new); }
  .founder { padding: var(--s-24); }
  .closing { padding: var(--s-48) var(--s-20); border-radius: var(--r-16); }
  .closing .mark { height: var(--s-48); margin-bottom: var(--s-24); }
  .frame-label .lbl-long { display: none; }
  .frame-label .lbl-short { display: inline; }
}