/* Bidform landing page.
   Built from the approved design (reference version 17, 11 November 2026).
   1. Tokens  2. Fonts  3. Base  4. Shared parts  5. Sections  6. Motion  7. Narrower layouts */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --bf-bg: #ffffff;
  --bf-bg-rail: #fafafa;
  --bf-bg-selected: #ededed;
  --bf-line: #ebebeb;
  --bf-line-2: #e1e1e1;
  --bf-ink: #111111;
  --bf-ink-2: #5c5c5c;
  --bf-ink-3: #6b6b6b;
  --bf-ink-4: #b8b8b8;
  --bf-accent: #2456d6;
  --bf-accent-hover: #1e49b8;
  --bf-ok: #1f9d58;
  --bf-warn: #c98f00;
  --bf-bad: #d7382f;
  --bf-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bf-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --bf-ease: cubic-bezier(.2, .7, .2, 1);
  --bf-duration: 120ms;

  --lp-navy: #0f2a66;
  --lp-tint: #eef3fd;
  --lp-tint-line: #d3dffa;
  --lp-hero-gradient:
    radial-gradient(70% 60% at 85% 100%, rgba(74, 124, 255, .45) 0%, rgba(74, 124, 255, 0) 70%),
    linear-gradient(160deg, var(--lp-navy) 0%, var(--lp-navy) 30%, var(--bf-accent) 100%);
  --lp-font-display: "Archivo Expanded", "Archivo Fallback", "Inter", system-ui, sans-serif;
  --lp-code-ink: #6b6b6b; /* snag 7: #767676 was 4.2:1 on the tinted row */
  --lp-shadow-window: 0 1px 2px rgba(17, 17, 17, .08), 0 34px 89px rgba(10, 28, 80, .30);
  --lp-shadow-toast: 0 0 0 1px rgba(17, 17, 17, .08), 0 13px 34px rgba(10, 28, 80, .28);

  /* Layout. --col is the content column: 1260 at 1370 and wider. 100cqw is the page width (body is the container). */
  --gutter: 55px;
  --col: min(1260px, 100cqw - 2 * var(--gutter));
  /* Product windows are pictures: scaled as one unit, never squeezed. tan(atan2(a, b)) is a / b as a plain number. */
  --win-s: min(1, tan(atan2(var(--col), 1260px)));
}

/* 2. Fonts ----------------------------------------------------------------- */
@font-face {
  font-family: "Archivo Expanded";
  src: url("/assets/fonts/archivo-125-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Arial resized to Archivo's measurements, so headings keep their size and line breaks while the font loads. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  font-weight: 500;
  size-adjust: 128.46%;
  ascent-override: 68.35%;
  descent-override: 16.35%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 3. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: #fff;
  color: var(--bf-ink);
  font-family: var(--bf-font-sans);
  font-size: 16px;
  line-height: normal; /* the design sets 1.55 on paragraphs only; single lines are "normal" */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  container-type: inline-size;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol { margin: 0; }
[hidden] { display: none !important; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img { display: block; max-width: none; }
a { color: var(--bf-accent); transition: color var(--bf-duration) var(--bf-ease); }
a:hover { color: var(--bf-accent-hover); }
main:focus { outline: none; }
button { font: inherit; }

:focus-visible { outline: 2px solid var(--bf-accent); outline-offset: 2px; }
.on-dark :focus-visible, .site-header :focus-visible, .hero :focus-visible, .sec-team :focus-visible, .cta :focus-visible { outline-color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.skip {
  position: absolute; left: 13px; top: -100px; z-index: 100;
  background: #fff; color: var(--bf-ink); padding: 8px 13px; border-radius: 3px;
  font-size: 14px; font-weight: 500; text-decoration: none;
}
.skip:focus { top: 13px; outline: 2px solid var(--bf-accent); outline-offset: 2px; }

.wrap { width: var(--col); margin-inline: auto; }
.disp {
  font-family: var(--lp-font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.04;
}
.h-42 { font-size: 42px; }
.h-40 { font-size: 40px; }
.h-44 { font-size: 44px; }
.balance { text-wrap: balance; }

/* 4. Shared parts ---------------------------------------------------------- */
.ui, .ui-flat {
  background: #fff;
  border-radius: 3px;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  color: var(--bf-ink);
  font-feature-settings: "cv11", "ss01", "tnum";
}
.ui { box-shadow: var(--lp-shadow-window); }
.ui-flat { border: 1px solid var(--lp-tint-line); }
/* Heights below include the border, as the design draws them (its boxes are content-box: 42 + 1px line = 43). */
.row { display: flex; align-items: center; gap: 13px; height: 43px; padding: 0 21px; border-top: 1px solid var(--bf-line); }
.row-t { flex: 1; min-width: 0; }
.dot { width: 7px; height: 7px; border-radius: 999px; flex: none; display: inline-block; }
.ok { background: var(--bf-ok); }
.warn { background: var(--bf-warn); }
.bad { background: var(--bf-bad); }
.info { background: var(--bf-accent); }
.off { background: #fff; box-shadow: inset 0 0 0 1px #8b8b8b; }
.mono { font-family: var(--bf-font-mono); font-size: 11px; color: var(--lp-code-ink); font-feature-settings: normal; }
.meta { color: var(--bf-ink-3); }
.sep { color: var(--bf-ink-4); }
.lbl { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--bf-ink-3); }
.fwd { color: var(--bf-accent); font-weight: 500; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 13px; border-radius: 3px;
  font: 500 13px/1 var(--bf-font-sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--bf-duration) var(--bf-ease), color var(--bf-duration) var(--bf-ease), border-color var(--bf-duration) var(--bf-ease);
}
.btn-p { background: var(--bf-accent); color: #fff; border: 1px solid var(--bf-accent); }
a.btn-p:hover, button.btn-p:hover { background: var(--bf-accent-hover); border-color: var(--bf-accent-hover); color: #fff; }
.btn-p-hover { background: var(--bf-accent-hover); border-color: var(--bf-accent-hover); }
.btn-d { background: #fff; color: var(--bf-ink); border: 1px solid var(--bf-line-2); }
.btn-w { background: #fff; color: var(--lp-navy); border: 1px solid #fff; }
a.btn-w:hover, button.btn-w:hover { background: var(--lp-tint); border-color: var(--lp-tint); color: var(--lp-navy); }
.btn-o { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .4); }
.btn-o:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.btn-lg { height: 46px; padding: 0 21px; font-size: 15px; }
.btn-sm { height: 28px; font-size: 12.5px; }
.btn-block { display: flex; width: 100%; }
.btn[disabled] { cursor: progress; opacity: .8; }
.arrow { display: inline-block; }

.av2 {
  width: 22px; height: 22px; border-radius: 999px; background: #e9e9e9; color: #4a4a4a;
  font: 600 9px/1 var(--bf-font-sans); display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.av2.me { background: var(--bf-accent); color: #fff; }
.av2.lg { width: 26px; height: 26px; font-size: 10px; }
.av2.ghost { background: transparent; border: 1px dashed var(--bf-ink-4); }
.av2.ext { background: #fff; box-shadow: inset 0 0 0 1px #8b8b8b; }

/* 5. Sections -------------------------------------------------------------- */

/* Navigation: full width, 55px from each edge, scrolls away with the page. */
.site-header { position: relative; z-index: 3; color: #fff; }
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 21px;
  height: 65px; padding: 0 var(--gutter); border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.wordmark { color: #fff; font-weight: 600; font-size: 21px; letter-spacing: -0.02em; text-decoration: none; line-height: 1; }
.wordmark:hover { color: #fff; }
.nav-links { display: flex; gap: 34px; font-size: 13px; }
.nav-links a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.nav-links a:hover { color: #fff; }
.nav-cta { display: flex; gap: 8px; }

/* 1. Hero. The gradient sits behind the navigation and the hero and stops at the middle of the product window. */
.hero {
  --win-h: calc(560px * var(--win-s));
  position: relative; isolation: isolate; color: #fff; text-align: center;
}
.hero::before {
  content: ""; position: absolute; z-index: -1;
  inset: -65px 0 calc(var(--win-h) / 2) 0;
  background: var(--lp-hero-gradient);
}
.hero-copy { padding: 0 var(--gutter); }
.status-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 76px;
  font-size: 13px; color: rgba(255, 255, 255, .85); text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .35); padding-bottom: 2px;
}
.status-link:hover { color: #fff; }
.hero h1 { margin: 21px auto 0; max-width: 1000px; font-size: 56px; }
.hero-lede { margin: 21px auto 0; max-width: 620px; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .8); }
.join { width: 520px; max-width: 100%; margin: 34px auto 0; }
.hero-form { display: flex; gap: 8px; }
.hero-form { align-items: flex-start; }
.hero-form .btn { flex: none; height: 48px; }
.field {
  height: 46px; flex: 1; min-width: 0; padding: 0 13px; border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .10); color: #fff;
  font: 400 15px var(--bf-font-sans);
}
.field::placeholder { color: rgba(255, 255, 255, .7); } /* snag 4 */
.hero-note { margin-top: 13px; font-size: 13px; color: rgba(255, 255, 255, .7); }
.form-msg { font-size: 13px; text-align: left; }
.form-msg:empty { display: none; }
.hero .form-msg { margin-top: 8px; color: #fff; }
.join.is-done .form-msg { margin-top: 0; font-size: 15px; text-align: center; }
.field[aria-invalid="true"], .cta-field[aria-invalid="true"] { border-color: #fff; box-shadow: inset 0 0 0 1px #fff; }

.facts { display: flex; justify-content: center; margin: 55px auto 0; font-size: 13px; color: rgba(255, 255, 255, .75); text-align: left; }
.facts li { padding: 0 34px; border-left: 1px solid rgba(255, 255, 255, .22); display: flex; flex-direction: column; }
.facts li:first-child { border-left: 0; }
.facts strong { color: #fff; font-weight: 500; }

.win-fit { position: relative; z-index: 2; width: var(--col); margin: 20px auto 0; text-align: left; }
.win-fit--hero { height: var(--win-h); }
.win-scale { width: 1260px; transform: scale(var(--win-s)); transform-origin: 0 0; }

/* Overview window */
.win-hero { display: flex; height: 560px; }
.rail { width: 220px; flex: none; background: var(--bf-bg-rail); border-right: 1px solid var(--bf-line); padding: 21px 13px; border-radius: 3px 0 0 3px; }
.rail-brand { font-weight: 600; font-size: 15px; padding: 0 8px 21px; }
.rail-item { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; color: var(--bf-ink-2); }
.rail-item.is-on, .lib-item.is-on { background: var(--bf-bg-selected); border-radius: 3px; font-weight: 500; color: var(--bf-ink); }
.rail-item .n, .lib-item .n { margin-left: auto; font-size: 12px; color: var(--bf-ink-3); font-weight: 400; }
.rail .rail-lbl { padding: 21px 8px 5px; }
.ov-main { flex: 1; min-width: 0; padding: 55px 55px 0; }
.ov-date { font-size: 12.5px; }
.ov-greet { font-size: 34px; font-weight: 600; letter-spacing: -0.028em; line-height: 1.1; margin-top: 8px; }
.ov-lede { margin-top: 13px; font-size: 15px; color: var(--bf-ink-2); max-width: 560px; }
.ov-stats { display: flex; align-items: center; gap: 21px; height: 46px; margin-top: 34px; border-top: 1px solid var(--bf-line); border-bottom: 1px solid var(--bf-line); }
.stat { display: flex; align-items: center; gap: 8px; }
.stat strong { font-weight: 500; display: inline-block; min-width: 1ch; }
.ov-stats .fwd { margin-left: auto; }
.ov-h { display: flex; align-items: baseline; gap: 13px; margin-top: 34px; }
.ov-h-t { font-size: 15px; font-weight: 600; }
.tr { display: flex; align-items: center; gap: 13px; height: 56px; border-top: 1px solid var(--bf-line); }
.tr-first { margin-top: 13px; }
.tr-name { flex: 1; min-width: 0; }
.tr-title { font-weight: 450; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-sub { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-date { width: 96px; flex: none; }
.tr-segs { width: 112px; flex: none; display: flex; gap: 2px; }
.seg { position: relative; height: 3px; width: 9px; border-radius: 1px; display: inline-block; background: var(--bf-line-2); }
.seg i { position: absolute; inset: 0; border-radius: 1px; }
.tr-status { width: 152px; flex: none; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ov-side { width: 300px; flex: none; border-left: 1px solid var(--bf-line); padding: 55px 34px 0; }
.nd { display: flex; gap: 13px; margin-top: 21px; }
.nd-rule { padding-top: 21px; border-top: 1px solid var(--bf-line); }
.nd-day { text-align: center; width: 34px; flex: none; }
.nd-n { font-weight: 600; font-size: 21px; line-height: 1; }
.is-next .nd-n { color: var(--bf-accent); }
.nd-m { font-size: 10px; letter-spacing: .06em; }
.nd-t { font-weight: 450; }

/* 2. Product */
.sec-product { padding-top: 80px; }
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 21px; align-items: end; }
.sec-head h2 { grid-column: span 7; }
.sec-lede { grid-column: 9 / span 4; font-size: 16px; line-height: 1.55; color: var(--bf-ink-2); }
.sec-lede--navy { color: rgba(255, 255, 255, .8); }

.cards { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 21px; margin-top: 55px; }
.card { background: var(--lp-tint); border: 1px solid var(--lp-tint-line); border-radius: 3px; padding: 34px; overflow: hidden; position: relative; }
.card-title { font-weight: 600; font-size: 21px; letter-spacing: -0.012em; }
.card-title--lg { font-size: 24px; letter-spacing: -0.02em; }
.card-text { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--bf-ink-2); }
.card-lib { grid-column: span 7; height: 700px; padding: 34px 0 0 34px; }
.card-lib .card-copy { padding-right: 34px; }
.card-lib .card-text { max-width: 560px; }
.cards-side { grid-column: span 5; display: flex; flex-direction: column; gap: 21px; }
.card-prog { height: 400px; }
.card-rev { height: 279px; }

/* Fragments keep their designed size; the card cuts them off. */
.frag { position: absolute; }
.frag-lib { left: 34px; right: -1px; top: 150px; bottom: -1px; min-width: 693px; border-radius: 3px 0 0 0; display: flex; }
.frag-side { left: 34px; right: -40px; min-width: 519px; }
.frag-prog { top: 170px; padding-right: 40px; }
.frag-rev { top: 150px; padding: 21px 61px 21px 21px; overflow: hidden; }

.lib-rail { width: 160px; flex: none; background: var(--bf-bg-rail); border-right: 1px solid var(--bf-line); padding: 13px 8px; }
.lib-rail .rail-lbl { padding: 0 8px 8px; }
.lib-item { display: flex; align-items: center; height: 28px; padding: 0 8px; color: var(--bf-ink-2); }
.lib-main { flex: 1; min-width: 0; padding: 13px 21px; }
.lib-head { display: flex; align-items: center; justify-content: space-between; height: 34px; }
.lib-h { font-weight: 600; font-size: 15px; }
.lib-h .meta { font-weight: 400; font-size: 13px; }
.lib-head--cv { height: 43px; margin-top: 13px; border-top: 1px solid var(--bf-line); padding-top: 8px; }
.cs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 8px; }
.cs { border: 1px solid var(--bf-line-2); border-radius: 3px; overflow: hidden; }
.photo {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #e6e6e6; color: #767676;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5;
}
.photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo:has(img) .photo-ph, .head:has(img) > span { visibility: hidden; } /* the caption returns only if the picture fails */
.cs-body { padding: 13px; }
.cs-title { display: flex; justify-content: space-between; align-items: center; font-weight: 500; }
.cs-sub { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-figs { display: flex; gap: 21px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--bf-line); }
.fig { font-weight: 600; font-size: 15px; line-height: 1; }
.fig-l { font-size: 11px; }
.cs-foot { font-size: 12px; margin-top: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv { display: flex; align-items: center; gap: 8px; height: 49px; border-top: 1px solid var(--bf-line); }
.head {
  position: relative; width: 34px; height: 34px; border-radius: 999px; overflow: hidden; flex: none;
  background: #e6e6e6; color: var(--bf-ink-2); font-size: 11px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
}
.head img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.head::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #d6d6d6; }
.cv-who { flex: 1; min-width: 0; white-space: nowrap; }
.cv-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.cv-role { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 3px; flex: none; white-space: nowrap;
  border: 1px solid #cfe8da; font-size: 11.5px; color: #166b3c; background: #fff;
}
.chip-warn { border-color: #e4c98a; color: #8a6100; }
.cv-rev { font-size: 12px; min-width: 92px; flex: none; text-align: right; white-space: nowrap; } /* snag 3: as wide as its text */
.cv-due { color: #8a6100; }

.file { display: flex; align-items: center; gap: 13px; padding: 13px 21px; border-bottom: 1px solid var(--bf-line); }
.ico { width: 36px; height: 42px; border: 1px solid #c9c9c9; border-radius: 2px; position: relative; flex: none; background: var(--bf-bg-rail); }
.ico::after { content: ""; position: absolute; right: -1px; top: -1px; width: 10px; height: 10px; background: #fff; border-left: 1px solid #c9c9c9; border-bottom: 1px solid #c9c9c9; }
.file-who { flex: 1; min-width: 0; position: relative; }
.file-name { font-weight: 500; }
.file-meta { font-size: 12px; }
.upbar { position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: var(--bf-line-2); border-radius: 1px; overflow: hidden; }
.upbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bf-accent); }

.rev-head { display: flex; align-items: center; gap: 13px; }
.rev-t { font-weight: 450; flex: 1; }
.rev-st .cell { gap: 8px; }
.rev-p { margin-top: 13px; font-size: 13px; color: var(--bf-ink-2); }
.rev-p strong { color: var(--bf-ink); font-weight: 500; }
.rev-btns { display: flex; gap: 8px; margin-top: 13px; }

/* 3. Team */
.sec-team { margin-top: 144px; background: var(--lp-navy); color: #fff; padding: 110px 0 200px; }
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 21px; margin-top: 55px; }
.step-bar { height: 2px; background: rgba(255, 255, 255, .22); }
.step-fill { display: block; height: 2px; background: #fff; }
.step-h { display: flex; align-items: baseline; gap: 13px; margin-top: 13px; font-weight: 600; font-size: 16px; }
.step-n { color: #c9d7f7; }
.step-p { margin: 5px 0 0 28px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .85); }

.stage-fit { --stage-h: calc(517px * var(--win-s)); position: relative; margin-top: 34px; height: var(--stage-h); }
.stage-scale { width: 1260px; transform: scale(var(--win-s)); transform-origin: 0 0; }
.stage { position: relative; }
.stage-ui { height: 517px; }
.stage-top { display: flex; align-items: center; justify-content: space-between; gap: 21px; height: 45px; padding: 0 21px; border-bottom: 1px solid var(--bf-line); white-space: nowrap; }
.sep2 { color: var(--bf-ink-4); margin: 0 8px; }
.ink { color: var(--bf-ink); }
.stage-close { font-size: 12.5px; }
.stage-body { display: flex; }
.team-pane { width: 300px; flex: none; padding: 21px; background: var(--bf-bg-rail); border-right: 1px solid var(--bf-line); border-radius: 0 0 0 3px; }
.team-head { display: flex; align-items: center; gap: 8px; height: 26px; }
.team-h { font-size: 15px; font-weight: 600; }
.team-add { margin-left: auto; }
.people { margin-top: 13px; }
.prow { display: flex; align-items: center; gap: 8px; height: 49px; border-top: 1px solid var(--bf-line); }
.prow--first { border-top: 0; height: 48px; }
.pwho { flex: 1; min-width: 0; }
.nm { font-weight: 500; line-height: 1.3; white-space: nowrap; }
.rl { font-size: 12px; color: var(--bf-ink-3); line-height: 1.3; white-space: nowrap; }
.pgroup { display: flex; align-items: baseline; gap: 8px; margin-top: 13px; padding: 13px 0 5px; border-top: 1px solid var(--bf-line); }
.pg-only { margin-left: auto; }
.sections-pane { flex: 1; min-width: 0; }
.sec-bar { display: flex; align-items: center; gap: 13px; height: 48px; padding: 0 21px; }
.sec-bar-h { font-size: 15px; font-weight: 600; }
.sgs { display: flex; gap: 3px; width: 200px; margin-left: 8px; }
.sg { position: relative; height: 3px; flex: 1; background: var(--bf-line-2); border-radius: 1px; }
.sg i { position: absolute; inset: 0; border-radius: 1px; }
.sec-count { margin-left: auto; text-align: right; }
.srow { height: 45px; }
.srow-h { height: 35px; color: var(--bf-ink-3); font-size: 12px; font-weight: 500; }
.c-no { width: 24px; flex: none; }
.c-sec { flex: 1; min-width: 0; font-weight: 450; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow-h .c-sec { font-weight: 500; }
.c-ans { width: 130px; flex: none; }
.c-own, .c-rev { width: 150px; flex: none; }
.c-due { width: 64px; flex: none; }
.c-st { width: 100px; flex: none; }
.c-v { width: 24px; flex: none; }
.cell { display: flex; align-items: center; gap: 8px; white-space: nowrap; min-width: 0; }
.more { height: 45px; font-size: 12.5px; gap: 8px; }
.toast { position: absolute; z-index: 5; right: -21px; bottom: -120px; width: 320px; box-shadow: var(--lp-shadow-toast); }
.toast-top { display: flex; align-items: center; gap: 13px; padding: 13px 21px; border-bottom: 1px solid var(--bf-line); }
.bf { width: 30px; height: 30px; border-radius: 3px; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; letter-spacing: -0.02em; flex: none; }
.toast-who { flex: 1; min-width: 0; }
.toast-app { font-weight: 600; }
.toast-to, .toast-now { font-size: 12px; }
.toast-body { padding: 13px 21px 18px; }
.toast-t { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.toast-p { margin-top: 5px; color: var(--bf-ink-2); }
.tl-pause { margin-top: 21px; }
.sec-team { padding-bottom: 147px; } /* 200 in the design, less the Pause button below the stage */

/* 4. Portal rules */
.sec-portal { padding-top: 144px; }
.portal {
  background: var(--lp-tint); border: 1px solid var(--lp-tint-line); border-radius: 3px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 21px; padding: 89px;
}
.portal-copy { grid-column: span 5; }
.portal-lede { margin-top: 21px; }
.portal-btn { margin-top: 34px; }
.portal-ui { grid-column: 7 / span 6; position: relative; overflow: hidden; align-self: start; }
.portal-head { display: flex; align-items: center; justify-content: space-between; height: 45px; padding: 0 21px; border-bottom: 1px solid var(--bf-line); }
.portal-h { font-weight: 600; font-size: 15px; }
.portal-head .meta { font-size: 12.5px; }
.portal-head + .scan + .prule { border-top: 0; }
.portal-foot { padding: 13px 21px; border-top: 1px solid var(--bf-line); display: flex; align-items: center; gap: 13px; font-size: 12.5px; }
.portal-foot .fwd { margin-left: auto; font-size: 13px; }

/* 4b. Templates: Datum pages live, in three contractors' brands (styles for the pages are in datum.css) */
.sec-brand { padding-top: 144px; padding-bottom: 36px; }
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps--light .step { opacity: 1; }
.steps--light .step-bar { background: var(--bf-line-2); }
.steps--light .step-fill { background: var(--bf-accent); }
.steps--light .step-n { color: var(--lp-code-ink); }
.steps--light .step-h { color: color-mix(in srgb, var(--bf-ink) calc(var(--on) * 100%), var(--bf-ink-3)); }
.steps--light .step-p { color: var(--bf-ink-2); }
.dm-clip { margin-top: 34px; }

/* 5. Waitlist and footer */
.sec-cta { padding-top: 144px; }
.cta {
  position: relative; overflow: hidden; background: var(--lp-navy); color: #fff; border-radius: 3px; padding: 89px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 21px; align-items: center;
}
.houses { position: absolute; right: -40px; bottom: -40px; width: 480px; opacity: .18; }
.cta-copy { grid-column: span 7; position: relative; }
.cta-copy h2:focus { outline: none; }
.cta-lede { margin-top: 21px; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .78); max-width: 560px; }
.cta-form { grid-column: 9 / span 4; position: relative; }
.cta-form .join { width: auto; margin: 0; }
.cta-label { display: block; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .9); }
.cta-field {
  display: block; height: 44px; width: 100%; margin-top: 8px; padding: 0 13px; border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, .4); /* snag 5 */
  background: rgba(255, 255, 255, .08); color: #fff; font: 400 15px var(--bf-font-sans);
}
.cta-field::placeholder { color: rgba(255, 255, 255, .7); } /* snag 4 */
.cta-form .btn-block { margin-top: 13px; }
.cta-form .form-msg { margin-top: 8px; color: #fff; }
.cta-form .join.is-done .form-msg { text-align: left; }
.cta-privacy { margin-top: 13px; font-size: 13px; color: rgba(255, 255, 255, .78); }
.cta-privacy a { color: #fff; text-underline-offset: 3px; }
.cta-privacy a:hover { color: var(--lp-tint); }
.cta-points { display: flex; flex-direction: column; gap: 8px; margin-top: 21px; font-size: 13px; color: rgba(255, 255, 255, .78); }
.cta-points li { display: flex; align-items: center; gap: 8px; }
.cta-points .dot { background: #9db6f0; }

.site-footer { padding: 34px 0 89px; }
.foot { display: flex; justify-content: space-between; gap: 21px; font-size: 12.5px; color: var(--bf-ink-3); }
.foot-links { display: flex; gap: 21px; }
.foot-links a { color: var(--bf-ink-3); text-decoration: none; }
.foot-links a:hover { color: var(--bf-ink); }

/* 6. Motion -----------------------------------------------------------------
   One number, --t (0 to 100), drives each animated window. Every moving part is a formula of it,
   so any moment can be held still. Elements carry their own start (--a) and end (--b).
   The resting value of --t is the approved picture: 100 for the walk-throughs, 93 for the team stage.
   Without JavaScript, with reduced motion and in print, the rest value is all anyone sees. */
.wt { --t: 100; --end: 1; --loop: 0; --bdef: 1000; }
.tl { --t: 93; --loop: 1; --bdef: 98; --end: clamp(0, calc((98 - var(--t)) / 1.5), 1); }
/* With the script running, windows wait at the start so nothing flashes before they play. */
@media (prefers-reduced-motion: no-preference) {
  .js .wt, .js .tl { --t: 0; }
}
@media print {
  .wt { --t: 100 !important; }
  .tl { --t: 93 !important; }
}

.tin {
  --p: clamp(0, calc((var(--t) - var(--a)) / 2.5), 1);
  --e: calc(1 - (1 - var(--p)) * (1 - var(--p)));
  opacity: min(var(--e), var(--end));
  transform: translateY(calc((1 - var(--e)) * 8px));
}
.twin { opacity: min(clamp(0, calc((var(--t) - var(--a)) / 1.2), 1), clamp(0, calc((var(--b, var(--bdef)) - var(--t)) / 1.2), 1)); }
.tbase { opacity: max(clamp(0, calc((var(--a) - var(--t)) / 1.2), 1), calc(clamp(0, calc((var(--t) - 98) / 1.2), 1) * var(--loop))); }
.twin2 {
  opacity: max(
    min(clamp(0, calc((var(--t) - var(--a)) / 1.2), 1), clamp(0, calc((var(--b) - var(--t)) / 1.2), 1)),
    min(clamp(0, calc((var(--t) - var(--a2)) / 1.2), 1), clamp(0, calc((var(--b2, var(--bdef)) - var(--t)) / 1.2), 1))
  );
}
.stk { display: grid; align-items: center; }
.stk > * { grid-area: 1 / 1; }

/* Team stage */
.fly {
  position: relative; z-index: 3;
  --p: clamp(0, calc((var(--t) - var(--a)) / 3), 1);
  --e: calc(var(--p) * var(--p) * (3 - 2 * var(--p)));
  opacity: min(clamp(0, calc(var(--p) * 6), 1), var(--end));
  transform: translate(calc((1 - var(--e)) * var(--dx, 0px)), calc((1 - var(--e)) * var(--dy, 0px))) scale(calc(1.3 - 0.3 * var(--e)));
}
.hl { --on: min(clamp(0, calc((var(--t) - var(--a)) / 1.5), 1), clamp(0, calc((var(--b, 98) - var(--t)) / 1.5), 1)); background-color: rgb(36 86 214 / calc(0.06 * var(--on))); }
.step { --on: min(clamp(0, calc((var(--t) - var(--a)) / 1.5), 1), clamp(0, calc((var(--b) - var(--t)) / 1.5), 1)); opacity: calc(0.62 + 0.38 * var(--on)); }
.step-fill { opacity: var(--end); width: calc(clamp(0, calc((var(--t) - var(--a)) / (var(--b) - var(--a))), 1) * 100%); }
.toast {
  --in: clamp(0, calc((var(--t) - var(--a)) / 1.8), 1);
  opacity: min(var(--in), clamp(0, calc((var(--b) - var(--t)) / 1.5), 1));
  transform: translateY(calc((1 - var(--in)) * 13px));
}
.is-measuring .fly, .is-measuring .tin { transform: none !important; }

/* Walk-throughs */
.wfill { width: calc(clamp(0, calc((var(--t) - var(--a)) / (var(--b) - var(--a))), 1) * 100%); }
.drop {
  --p: clamp(0, calc((var(--t) - var(--a)) / 4), 1);
  --e: calc(1 - (1 - var(--p)) * (1 - var(--p)) * (1 - var(--p)));
  opacity: var(--e);
  transform: translateY(calc((1 - var(--e)) * -21px));
}
/* Photographs arrive with a slow settle, like a page coming into focus. */
.kb {
  --p: clamp(0, calc((var(--t) - var(--a)) / 14), 1);
  --e: calc(1 - (1 - var(--p)) * (1 - var(--p)));
  opacity: clamp(0, calc((var(--t) - var(--a)) / 4), 1);
  transform: scale(calc(1.08 - 0.08 * var(--e)));
}
/* A pending check: a ring that turns while it waits. */
.spin {
  width: 9px; height: 9px; margin: -1px; border-radius: 999px; flex: none;
  border: 1.5px solid var(--bf-line-2); border-top-color: var(--bf-accent);
  transform: rotate(calc(var(--t) * 24deg));
}
.stk .dot, .stk .spin { justify-self: center; }
/* The amber chip lands with one soft ring, then rests. */
.pulse { --q: clamp(0, calc((var(--t) - var(--a)) / 10), 1); box-shadow: 0 0 0 calc(var(--q) * 8px) rgb(201 143 0 / calc((1 - var(--q)) * .35)); }
.scan {
  position: absolute; left: 0; right: 0; top: 45px; height: 43px; pointer-events: none; z-index: 1;
  --p: clamp(0, calc((var(--t) - var(--a)) / (var(--b) - var(--a))), 1);
  background: linear-gradient(180deg, rgb(36 86 214 / 0), rgb(36 86 214 / .07) 50%, rgb(36 86 214 / 0));
  opacity: min(clamp(0, calc((var(--t) - var(--a)) / 2), 1), clamp(0, calc((var(--b) - var(--t)) / 3), 1));
  transform: translateY(calc(var(--p) * 6 * 43px));
}
.flash { --on: clamp(0, calc((var(--t) - var(--a)) / 2), 1); --off: clamp(0, calc((var(--t) - var(--a) - 6) / 10), 1); }
.flash-bad { background-color: rgb(215 56 47 / calc(0.08 * var(--on) * (1 - var(--off)))); }
.flash-warn { background-color: rgb(201 143 0 / calc(0.08 * var(--on) * (1 - var(--off)))); }
/* A pointer that travels to the button and rests on it. */
.cursor {
  position: absolute; left: 0; top: 0; width: 16px; height: 20px; z-index: 4; pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M1.5 1.5v14.2l3.6-3.4 2.5 5.9 2.6-1.1-2.5-5.8 5-.2z' fill='%23111' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E");
  --p: clamp(0, calc((var(--t) - var(--a)) / (var(--b) - var(--a))), 1);
  --e: calc(var(--p) * var(--p) * (3 - 2 * var(--p)));
  opacity: min(clamp(0, calc((var(--t) - var(--a) + 4) / 4), 1), clamp(0, calc((98 - var(--t)) / 4), 1));
  transform: translate(calc(var(--x0) + (var(--x1) - var(--x0)) * var(--e)), calc(var(--y0) + (var(--y1) - var(--y0)) * var(--e)));
}

/* 7. Narrower layouts ------------------------------------------------------- */
@media (max-width: 1199px) {
  :root { --gutter: 34px; }
}

@media (max-width: 1023px) {
  :root { --gutter: 34px; }
  .nav-links { gap: 21px; }
  .sec-head { display: block; }
  .sec-head .sec-lede { margin-top: 21px; max-width: 620px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .card-lib { grid-column: 1 / -1; }
  .cards-side { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .card-prog, .card-rev { height: auto; padding: 34px 0 0 34px; }
  .card-prog > .card-title, .card-prog > .card-text, .card-rev > .card-title, .card-rev > .card-text { padding-right: 34px; }
  .frag-side { position: relative; inset: auto; margin-top: 21px; margin-bottom: -1px; }
  .portal { display: block; padding: 55px; }
  .portal-ui { margin-top: 55px; }
  .cta { display: block; padding: 55px; }
  .cta-form { margin-top: 34px; max-width: 420px; }
  .houses { width: 360px; }

  /* Team: the stage is redrawn for the width instead of being shrunk. People sit in a strip above the sections. */
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: 8px; row-gap: 0; margin-top: 34px; }
  .steps > li { display: contents; }
  .steps > li:nth-child(1) .step-bar { grid-column: 1; }
  .steps > li:nth-child(2) .step-bar { grid-column: 2; }
  .steps > li:nth-child(3) .step-bar { grid-column: 3; }
  .steps > li:nth-child(4) .step-bar { grid-column: 4; }
  .steps > li:nth-child(5) .step-bar { grid-column: 5; }
  .step-bar { grid-row: 1; }
  .step-h { grid-column: 1 / -1; grid-row: 2; opacity: var(--on); }
  .step-p { grid-column: 1 / -1; grid-row: 3; opacity: var(--on); margin-left: 28px; max-width: 520px; }

  .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sec-brand { padding-top: 89px; padding-bottom: 0; }

  .stage-fit { height: auto; }
  .stage-scale { width: auto; transform: none; }
  .stage-ui { height: auto; container-type: inline-size; }
  .stage-body { flex-direction: column; }
  .team-pane { width: auto; border-right: 0; border-bottom: 1px solid var(--bf-line); border-radius: 0; padding: 13px 13px 16px; }
  .people { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .prow, .prow--first { height: auto; border-top: 0; }
  .pwho, .prole { display: none; }
  .pgroup { margin: 0 0 0 5px; padding: 0 0 0 13px; border-top: 0; border-left: 1px solid var(--bf-line-2); align-self: stretch; align-items: center; }
  .pgroup .pg-only { display: none; }
  .sec-bar { flex-wrap: wrap; height: auto; padding: 13px; row-gap: 8px; }
  .sgs { width: auto; flex: 1 1 120px; margin-left: 0; }
  .srow-h { display: none; }
  .srow, .more { padding: 0 13px; gap: 8px; }
  .c-ans, .c-due, .c-v { display: none; }
  .c-own, .c-rev { width: 22px; }
  .who, .c-own .meta { display: none; }
  .c-st { width: 104px; }
  /* Notifications land on the stage itself, like a notification on a phone, so they never cover the Pause button. */
  .toast { right: 8px; bottom: 8px; width: min(320px, calc(100% - 16px)); }
  .sec-team { padding-bottom: 89px; }
  @container (min-width: 640px) {
    .c-own, .c-rev { width: 134px; }
    .who, .c-own .meta { display: inline; }
    .c-due { display: block; width: 56px; }
  }
  @container (min-width: 820px) {
    .c-v { display: block; }
  }
}

@media (max-width: 767px) {
  :root { --gutter: 16px; }
  .nav { height: 57px; gap: 13px; }
  .nav-links { display: none; }
  .wordmark { font-size: 19px; }
  .hero::before { inset-block-start: -57px; }
  .status-link { margin-top: 44px; display: inline; font-size: 13px; }
  .status-link .arrow { margin-left: 4px; }
  .hero h1 { font-size: clamp(30px, 8.6cqw, 44px); margin-top: 21px; }
  .hero-lede { font-size: 16px; }
  .join { margin-top: 28px; }
  .facts { flex-direction: column; align-items: stretch; margin-top: 34px; text-align: left; gap: 13px; max-width: 360px; }
  .facts li { padding: 0 0 0 13px; border-left: 1px solid rgba(255, 255, 255, .22); }
  .facts li:first-child { border-left: 1px solid rgba(255, 255, 255, .22); }

  /* A phone shows the overview window at a size that can be read, cut off like the fragments: rail hidden to the left, the right column cut. */
  .hero { --win-s: .74; --win-h: calc(560px * var(--win-s)); }
  .win-fit--hero { width: auto; margin: 34px 0 0 var(--gutter); overflow: hidden; border-radius: 3px 0 0 3px; box-shadow: var(--lp-shadow-window); }
  .win-hero { box-shadow: none; }
  .win-fit--hero .win-scale { transform: scale(var(--win-s)) translateX(-221px); }

  .h-42, .h-40, .h-44 { font-size: clamp(28px, 8cqw, 34px); }
  .sec-product { padding-top: 55px; }
  .sec-head .sec-lede { font-size: 15px; }
  .cards { display: flex; flex-direction: column; margin-top: 34px; }
  .cards-side { display: flex; }
  /* Cards: the fragment follows the copy and still runs off the right and bottom edges. */
  .card-lib, .card-prog, .card-rev { height: auto; padding: 21px 0 0 21px; }
  .card-lib .card-copy, .card-prog > .card-title, .card-prog > .card-text, .card-rev > .card-title, .card-rev > .card-text { padding-right: 21px; }
  .card-title--lg { font-size: 21px; }
  .card-title { font-size: 19px; }
  .frag { position: relative; inset: auto; margin-top: 21px; margin-bottom: -1px; }
  .frag-lib { height: 470px; margin-left: -182px; } /* the rail sits off the left edge; the case studies lead */

  .sec-team { margin-top: 89px; padding: 72px 0 72px; }
  .step-p { margin-left: 0; }
  .step-h { font-size: 15px; }
  .crumb-x { display: none; }
  .stage-top { padding: 0 13px; }

  .sec-portal { padding-top: 89px; }
  .portal { padding: 34px 21px; }
  .portal-ui { margin: 34px -21px -35px; border-radius: 0 0 3px 3px; border-inline: 0; }
  .portal-ui .row, .portal-head, .portal-foot { padding-inline: 16px; }
  .portal-ui .row-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .portal-foot { flex-wrap: wrap; row-gap: 5px; }

  .sec-cta { padding-top: 89px; }
  .cta { padding: 34px 21px 55px; }
  .cta-form { max-width: none; }
  .houses { width: 280px; right: -60px; bottom: -50px; }
  .site-footer { padding-bottom: 55px; }
  .foot { flex-direction: column; gap: 8px; }
}

@media (max-width: 419px) {
  .hero-form { flex-direction: column; align-items: stretch; }
  .hero-form .field { flex: none; width: 100%; }
  .hero-form .btn { width: 100%; height: 46px; }
  .nav .btn { padding: 0 10px; font-size: 12.5px; }
}

/* Plain pages: the privacy notice and the reply a form gets without JavaScript. */
.plain { background: #fff; }
.plain-main { width: min(680px, 100cqw - 2 * var(--gutter)); margin: 0 auto; padding: 55px 0 89px; font-size: 16px; line-height: 1.6; color: var(--bf-ink); }
.plain-mark { display: inline-block; color: var(--bf-ink); font-weight: 600; font-size: 21px; letter-spacing: -0.02em; text-decoration: none; margin-bottom: 55px; }
.plain-mark:hover { color: var(--bf-ink); }
.plain-msg { font-size: 19px; margin-bottom: 21px; }
.legal h1 { font-size: clamp(30px, 7cqw, 40px); }
.legal h1 + .meta { margin-top: 13px; font-size: 14px; }
.legal h2 { margin-top: 44px; font-size: 18px; font-weight: 600; }
.legal p, .legal ul { margin-top: 13px; color: var(--bf-ink-2); }
.legal strong { color: var(--bf-ink); font-weight: 500; }
.legal ul { padding-left: 21px; }
.plain-back { margin-top: 55px !important; }
.draft-flag { margin-bottom: 34px; padding: 13px 16px; border: 1px solid #e4c98a; border-radius: 3px; background: #fdf7e8; color: #8a6100 !important; font-size: 14px; }

@media print {
  .site-header .nav-cta, .skip, .tl-pause { display: none; }
  .sec-team, .cta { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}