/* tensortest.com v2: the light, concept-first homepage. Owner: page builder.
 * Colours come from tokens.css; the hero strip styles itself (strip.css).
 * Budget: 7 font sizes (72 / 40 / 24 / 20 / 17 / 14 / 13 at desktop), radius 0, 1 px hairlines, no gradients,
 * no motion here beyond instant hover/focus/pressed fill swaps. Bricolage for H1/H2 only; Geist Mono for the
 * eyebrow, status tags and small labels (never below 12 px). */

/* ---------- Fonts (self-hosted) and metric-matched fallbacks ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-opsz96-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono-latin-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face { font-family: "BG Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"); font-weight: 700;
  size-adjust: 91.96%; ascent-override: 101.13%; descent-override: 29.36%; line-gap-override: 0%; }
@font-face { font-family: "Geist Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); font-weight: 100 549;
  size-adjust: 105.20%; ascent-override: 95.53%; descent-override: 28.04%; line-gap-override: 0%; }
@font-face { font-family: "Geist Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"); font-weight: 550 900;
  size-adjust: 102.10%; ascent-override: 98.43%; descent-override: 28.89%; line-gap-override: 0%; }
@font-face { font-family: "Geist Mono Fallback"; src: local("Menlo"), local("Menlo-Regular"), local("Courier New"), local("CourierNewPSMT"); font-weight: 100 900;
  size-adjust: 99.66%; ascent-override: 100.84%; descent-override: 29.60%; line-gap-override: 0%; }

/* ---------- Page tokens (layout and type scale only) ---------- */
:root {
  --header-h: 76px;
  --col-gap: 24px;
  --pad: 128px;              /* vertical rhythm between sections */
  --fs-1: 72px;              /* H1, the two figure numbers */
  --fs-2: 40px;              /* H2 */
  --fs-3: 24px;              /* the lead product name */
  --fs-4: 20px;              /* hero sub, product names, lead product line */
  --fs-5: 17px;              /* body */
  --fs-6: 14px;              /* nav, small print, footer */
  --fs-7: 13px;              /* mono labels: eyebrow, tags, axis, toggle */
  --strip-h: 176px;          /* space reserved for the hero strip so nothing jumps */
  --gap-fill: #f8dedb;       /* the claim gap: flat signal at about 16% on paper (no texture, no gradient) */
}
@media (max-width: 1099px) {
  :root { --fs-1: 56px; --pad: 104px; }
}
@media (max-width: 639px) {
  :root { --fs-1: 40px; --fs-2: 32px; --pad: 80px; --header-h: 64px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background: var(--paper); color: var(--ink);
}
body {
  margin: 0; min-width: 320px;
  font-family: var(--font-sans); font-size: var(--fs-5); line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
::selection { background: var(--lemon); color: var(--ink); }
p { text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--cobalt-ink); outline-offset: 2px; }
.band :focus-visible { outline-color: var(--on-cobalt); }
.site-footer :focus-visible { outline-color: var(--night-cobalt); }
main:focus { outline: none; }

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  padding: 12px 16px; background: var(--ink); color: var(--paper);
  font-size: var(--fs-6); font-weight: 500; line-height: 1; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section > .wrap { position: relative; padding-block: var(--pad); }
.arw { display: inline-block; margin-left: .3em; }

/* ---------- Type ---------- */
.h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-1); line-height: 1.02; letter-spacing: -0.03em;
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-2); line-height: 1.08; letter-spacing: -0.02em;
  text-wrap: balance;
}
.eyebrow, .tag {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-7); line-height: 1.4;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.small { font-size: var(--fs-6); color: var(--muted); }

/* Text links: a quiet underline that fills to ink on hover. */
.links a, .build__next a, .band__mail a, .site-footer a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: var(--line-strong);
}
.links a:hover, .build__next a:hover { color: var(--cobalt-ink); text-decoration-color: currentColor; }
.links { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.links a { font-weight: 500; }

/* ---------- Buttons: instant fill swaps, no transitions ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 0; cursor: pointer; white-space: nowrap;
  font-weight: 500; text-decoration: none; line-height: 1;
}
.btn--sm { min-height: 40px; padding: 12px 16px; font-size: var(--fs-6); }
.btn--lg { min-height: 52px; padding: 16px 24px; font-size: var(--fs-5); }
@media (max-width: 359px) { .btn { white-space: normal; text-align: center; line-height: 1.25; } }
.btn--cobalt { background: var(--cobalt); color: var(--on-cobalt); }
.btn--cobalt:hover { background: var(--cobalt-hover); }
.btn--cobalt:active { background: var(--ink); }
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--paper:hover { background: var(--cobalt-tint); }
.btn--paper:active { background: var(--ink); color: var(--paper); }

.btn--line { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--line:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn--line:active { background: var(--ink); color: var(--paper); }

/* ---------- Email chooser: mailto does nothing without a mail app, so every email link opens this ---------- */
.mail-dialog {
  width: min(440px, calc(100% - 2 * var(--gutter))); max-width: none; padding: 0;
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-radius: 0;
}
.mail-dialog::backdrop { background: rgb(15 19 31 / .55); }
.mail-dialog__in { position: relative; padding: 28px; }
.mail-dialog__addr {
  margin-top: 12px; font-family: var(--font-mono); font-size: var(--fs-5); font-weight: 500;
  overflow-wrap: anywhere; user-select: all;
}
.mail-dialog__subject { margin-top: 4px; }
.mail-dialog__subject:empty { display: none; }
.mail-dialog__opts { display: grid; gap: 8px; margin-top: 24px; list-style: none; padding: 0; }
.mail-dialog__opts .btn { width: 100%; }
.mail-dialog__close {
  position: absolute; top: 16px; right: 16px; height: 32px; padding-inline: 12px; cursor: pointer;
  background: transparent; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 0;
  font-family: var(--font-mono); font-size: var(--fs-7); font-weight: 500; letter-spacing: .02em;
}
.mail-dialog__close:hover { border-color: var(--ink); }

/* ---------- Header ---------- */
.site-header__in {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: var(--header-h);
}
.site-header__home { display: block; padding-block: 8px; }
.site-nav { display: flex; align-items: center; gap: 36px; }
.site-nav__list { display: flex; align-items: center; gap: 32px; }
.site-nav__list a {
  display: block; padding-block: 8px;
  font-size: var(--fs-6); font-weight: 500; text-decoration: none;
}
.site-nav__list a:hover { color: var(--cobalt-ink); }
.nav-toggle { display: none; }
.site-nav__list a, .site-nav .btn { white-space: nowrap; }
@media (max-width: 1023px) {
  .site-nav { gap: 24px; }
  .site-nav__list { gap: 22px; }
}

@media (max-width: 1023px) {
  /* No JS: the nav simply wraps under the logo. */
  .site-header__in { flex-wrap: wrap; padding-block: 12px; }
  .site-nav { flex-wrap: wrap; gap: 12px 24px; }
  .site-nav__list { flex-wrap: wrap; gap: 4px 24px; }
  /* JS: a text "Menu" button opens a simple panel. */
  .js .site-header__in { flex-wrap: nowrap; padding-block: 0; }
  .js .nav-toggle {
    display: inline-flex; align-items: center; height: 40px; padding-inline: 14px;
    background: transparent; border: 1px solid var(--line-strong); border-radius: 0; cursor: pointer;
    font-size: var(--fs-6); font-weight: 500;
  }
  .js .nav-toggle:hover { border-color: var(--ink); }
  .js .nav-toggle:active { background: var(--ink); color: var(--paper); }
  .js .site-header { position: relative; z-index: 20; }
  .js .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 24px; background: var(--paper); border-bottom: 1px solid var(--line);
  }
  .js .site-header.is-open .site-nav { display: flex; }
  .js .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .js .site-nav__list a { padding-block: 14px; border-bottom: 1px solid var(--line); font-size: var(--fs-5); }
  .js .site-nav .btn { margin-top: 20px; min-height: 52px; font-size: var(--fs-5); }
}

/* ---------- 1 Hero: real-footage monitor and editing timeline ---------- */
.hero { padding-top: 70px; padding-bottom: 64px; }
.hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
  grid-template-areas: "copy monitor" "timeline timeline";
  gap: 48px 64px;
  align-items: center;
}
.hero__copy { grid-area: copy; min-width: 0; }
.hero__h { max-width: 10em; font-size: 68px; text-wrap: initial; }
.hero__row { margin-top: 26px; }
.hero__sub {
  max-width: 33em; font-size: var(--fs-4); line-height: 1.5; color: var(--muted);
}
.hero__cta { margin-top: 28px; }
@media (max-width: 1199px) {
  .hero { padding-top: 56px; padding-bottom: 56px; }
  .hero__layout { column-gap: 40px; row-gap: 36px; }
  .hero__h { font-size: 56px; }
  .hero__sub { font-size: 18px; }
}
@media (max-width: 899px) {
  .hero__layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "monitor" "timeline"; gap: 30px; }
  .hero__h { max-width: 12em; }
  .hero__sub { max-width: 35em; }
}
@media (max-width: 639px) {
  .hero { padding-top: 36px; padding-bottom: 40px; }
  .hero__layout { row-gap: 26px; }
  .hero__h { font-size: 40px; }
  .hero__row { margin-top: 20px; }
  .hero__sub { font-size: var(--fs-5); }
  .hero__cta { margin-top: 24px; }
}

/* Heading clips: flat colour, one twelve-frame reveal, static without JS. */
.clip {
  --clip: var(--lemon); --clip-ink: var(--ink);
  display: inline-block; position: relative; isolation: isolate;
  white-space: nowrap; padding: .02em .12em .065em; margin: 0 -.015em;
  line-height: .96; color: var(--clip-ink);
}
.clip--signal { --clip: var(--signal-ink); --clip-ink: #fff; }
.clip::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--clip); transform-origin: left center;
}
.clip::after {
  content: ""; position: absolute; top: -.04em; bottom: -.05em;
  left: 0; width: 2px; background: var(--ink); opacity: 0;
}
html.clips-js[data-motion="on"] .clip:not(.is-cut) { color: inherit; }
html.clips-js[data-motion="on"] .clip:not(.is-cut)::before { transform: scaleX(0); }
html.clips-js[data-motion="on"] .clip.is-playing::before { animation: clip-wipe .5s steps(12, end) forwards; }
html.clips-js[data-motion="on"] .clip.is-playing::after { opacity: 1; animation: clip-head .5s steps(12, end) forwards; }
@keyframes clip-wipe { to { transform: scaleX(1); } }
@keyframes clip-head { to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .clip::before { transform: none !important; animation: none !important; }
  .clip::after { display: none; }
  .clip { color: var(--clip-ink) !important; }
}

/* ---------- 2 Proof: "said done vs done" ---------- */
.proof__head .h2 { margin-top: 16px; }
.gap { margin-top: 64px; }
.gap__chart { display: grid; gap: 40px; }
.gap__row {
  display: grid; grid-template-columns: 264px 1fr; column-gap: var(--col-gap);
  grid-template-areas: "num label" "num track"; align-items: end;
}
/* Each number sits right-aligned against its own bar, one gutter away, so each pair reads as one row. */
.gap__num {
  grid-area: num; align-self: end; justify-self: end;
  font-size: var(--fs-1); font-weight: 500; line-height: .86; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.gap__row--res .gap__num { color: var(--jade-ink); }
.gap__label { grid-area: label; padding-bottom: 12px; font-size: var(--fs-5); line-height: 1.3; }
.gap__ci { margin-left: .4em; color: var(--muted); font-variant-numeric: tabular-nums; }
.gap__track { grid-area: track; position: relative; height: 32px; background: var(--surface); }
.gap__bar { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 1%); background: var(--ink); }
.gap__row--res .gap__bar { background: var(--jade); }
/* The claim gap: from where resolved runs stop to where claims reach. Signal red, no number. */
.gap__miss {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%);
  background: var(--gap-fill); box-shadow: inset 0 0 0 1.5px var(--signal);
}
/* 95% CI whisker on the resolved bar. */
.gap__whisker {
  position: absolute; top: 50%; height: 2px; margin-top: -1px;
  left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%);
  background: var(--ink);
}
.gap__whisker::before, .gap__whisker::after {
  content: ""; position: absolute; top: -7px; width: 2px; height: 16px; background: var(--ink);
}
.gap__whisker::before { left: 0; }
.gap__whisker::after { right: 0; }
.gap__axis {
  display: flex; justify-content: space-between;
  margin: -28px 0 0 calc(264px + var(--col-gap));
  font-family: var(--font-mono); font-size: var(--fs-7); color: var(--muted);
}
.gap__cap { display: grid; grid-template-columns: 264px 1fr; column-gap: var(--col-gap); margin-top: 56px; }
.gap__cap > * { grid-column: 2; max-width: 44em; }
.gap__cap p:first-child { color: var(--muted); }
.gap__cap .links { margin-top: 24px; }

@media (max-width: 1099px) {
  .gap__row, .gap__cap { grid-template-columns: 200px 1fr; }
  .gap__axis { margin-left: calc(200px + var(--col-gap)); }
}
@media (max-width: 767px) {
  .gap { margin-top: 44px; }
  .gap__chart { gap: 32px; }
  .gap__row { grid-template-columns: 1fr; grid-template-areas: "num" "label" "track"; }
  .gap__num { justify-self: start; font-size: var(--fs-2); line-height: 1; margin-bottom: 6px; }
  .gap__label { padding-bottom: 10px; }
  .gap__track { height: 24px; }
  .gap__whisker { height: 1.5px; margin-top: -.75px; }
  .gap__whisker::before, .gap__whisker::after { width: 1.5px; height: 10px; top: -4.25px; }
  .gap__axis { margin: -20px 0 0; }
  .gap__cap { display: block; margin-top: 40px; }
}

/* ---------- 3 What we build ---------- */
.build__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); }
.build__h { grid-column: 1 / span 4; }
.build__body { grid-column: 5 / span 8; }
.offer {
  display: grid; grid-template-columns: 72px 1fr; column-gap: var(--col-gap);
  padding-block: 32px; border-top: 1px solid var(--line);
}
.offer:first-child { border-top: 0; padding-top: 6px; }
.offer__mark { grid-row: 1; height: 12px; margin-top: 7px; }
.offer--lead .offer__mark { margin-top: 9px; }
.offer__mark--cobalt { width: 48px; background: var(--cobalt); }
.offer__mark--jade { width: 32px; background: var(--jade); }
.offer__mark--lemon { width: 24px; background: var(--lemon); }
.offer__name {
  grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  font-size: var(--fs-4); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
}
.offer--lead .offer__name { font-size: var(--fs-3); }
.offer__name .tag { font-weight: 500; letter-spacing: .06em; }
.offer--lead .tag { color: var(--ink); }
.offer__line { grid-column: 2; margin-top: 8px; max-width: 40em; color: var(--muted); }
.offer--lead .offer__line { font-size: var(--fs-4); line-height: 1.5; color: var(--ink); margin-top: 10px; }
.build__next { margin-top: 16px; padding-left: calc(72px + var(--col-gap)); font-weight: 500; }
.build__body .small { margin-top: 8px; padding-left: calc(72px + var(--col-gap)); }

@media (max-width: 1099px) {
  .build__h { grid-column: 1 / -1; margin-bottom: 40px; }
  .build__body { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .offer { grid-template-columns: 1fr; padding-block: 28px; }
  .offer__mark { margin: 0 0 14px; }
  .offer--lead .offer__mark { margin: 0 0 14px; }
  .offer__name, .offer__line { grid-column: 1; }
  .offer--lead .offer__name { font-size: var(--fs-4); }
  .offer--lead .offer__line { font-size: var(--fs-5); }
  .build__next, .build__body .small { padding-left: 0; }
  .build__next { margin-top: 28px; }
}

/* ---------- 4 Team and research ---------- */
.team__grid {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); align-items: center;
}
.team__text { grid-column: 1 / span 5; padding-right: 24px; }
.team__photo {
  grid-column: 6 / span 7; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; background: var(--surface);
}
.team__cred { margin-top: 24px; color: var(--muted); }
.team__names { margin-top: 28px; }
.team__names li { font-weight: 500; line-height: 1.7; }
.team__names .team__yc { margin-top: 8px; font-weight: 400; color: var(--muted); }
.team__text .links { margin-top: 28px; }
@media (max-width: 899px) {
  .team__text { grid-column: 1 / -1; padding-right: 0; }
  .team__photo { grid-column: 1 / -1; margin-top: 48px; }
}

/* ---------- 5 Closing band (cobalt, the only colour band) ---------- */
.band { background: var(--cobalt); color: var(--on-cobalt); }
.band__in {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); align-items: end;
  padding-block: 112px;
}
.band__h { grid-column: 1 / span 7; max-width: 16em; }
.band__act { grid-column: 9 / span 4; justify-self: end; display: grid; justify-items: start; gap: 16px; }
.band__mail { font-size: var(--fs-6); color: var(--on-cobalt-muted); }
.band__mail a { color: var(--on-cobalt); text-decoration-color: var(--on-cobalt-muted); }
.band__mail a:hover { text-decoration-color: var(--on-cobalt); }
@media (max-width: 1099px) {
  .band__h { grid-column: 1 / -1; }
  .band__act { grid-column: 1 / -1; justify-self: start; margin-top: 36px; }
}
@media (max-width: 639px) { .band__in { padding-block: 80px; } }

/* ---------- Footer (ink) ---------- */
.site-footer { background: var(--ink); color: var(--night-text); font-size: var(--fs-6); }
.site-footer .wrap { padding-block: 56px 40px; }
.site-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.site-footer__home img { display: block; width: 155px; height: 28px; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 0 28px; }
.site-footer__nav a { display: inline-block; min-width: 24px; padding-block: 4px; text-align: center; }
.site-footer a { text-decoration-color: var(--night-line-strong); }
.site-footer a:hover { text-decoration-color: var(--night-text); }
.site-footer__home { text-decoration: none; }
.site-footer__base {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px 32px;
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--night-line); color: var(--night-muted);
}
.motion-toggle {
  display: none; height: 32px; padding-inline: 12px; cursor: pointer;
  background: transparent; color: var(--night-text); border: 1px solid var(--night-line-strong); border-radius: 0;
  font-family: var(--font-mono); font-size: var(--fs-7); font-weight: 500; letter-spacing: .02em;
}
.js .motion-toggle { display: inline-flex; align-items: center; }
.motion-toggle:hover { border-color: var(--night-text); }
.motion-toggle:active { background: var(--night-text); color: var(--ink); }
@media (max-width: 899px) {
  .site-footer__base { grid-template-columns: 1fr; justify-items: start; }
}