/* Compatibility cascade from the live Basis page: historical overrides retain their deliberate order. */
/* stylelint-disable no-duplicate-selectors */

/* basis-landing-v2-20261103l (from basis-restored-20261030c-landing) */

/* basis-landing-20261030a */

/*
 * Basis x Wisslabs landing page
 * Scope: everything lives under .basis so it cannot leak into the Wisslabs overlay.
 * Tokens mirror the live overlay (wisslabs/assets/css/styles.css :root) plus the Wisslabs logo gradient.
 * Motion: CSS + IntersectionObserver only. Content is visible without JS (reveals gate on html.b-js).
 */

.basis {
  --b-bg: #07101f;
  --b-deep: #050b16;
  --b-alt: #0a1628;
  --b-raise: #0c1d37;
  --b-line: rgb(117 251 251 / 12%);
  --b-line-2: rgb(117 251 251 / 26%);
  --b-text: #f5f8ff;
  --b-soft: #cfe1ff;
  --b-muted: #90a6c8;
  --b-blue: #2255f5;
  --b-sky: #5c88da;
  --b-cyan: #75fbfb;

  /* Wisslabs "ai" gradient; first and last stop match so the flow loops seamlessly. */
  --b-grad: linear-gradient(
    100deg,
    #75fbfb 0%,
    #5c88da 25%,
    #2255f5 50%,
    #5c88da 75%,
    #75fbfb 100%
  );
  --b-grad-static: linear-gradient(100deg, #75fbfb, #5c88da 55%, #2255f5);
  --b-display: "Inter Tight", "Manrope", "Segoe UI", sans-serif;
  --b-serif: "Playfair Display", georgia, serif;
  --b-body: "Manrope", "Segoe UI", sans-serif;
  --b-shell: min(1240px, calc(100% - 40px));
  --b-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --b-fast: 200ms;
  --b-med: 420ms;
  --b-slow: 820ms;

  display: block;
  overflow-x: clip;
  background: var(--b-bg);
  color: var(--b-text);
  font-family: var(--b-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

.basis :where(h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote) {
  margin: 0;
  padding: 0;
}

.basis :where(ol, ul) {
  list-style: none;
}

.basis img {
  display: block;
  max-width: 100%;
  height: auto;
}

.basis a {
  color: inherit;
}

.basis :focus-visible {
  outline: 2px solid var(--b-cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

.b-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.b-shell {
  width: var(--b-shell);
  margin-inline: auto;
}

.b-section {
  position: relative;
  padding-block: clamp(80px, 10vw, 136px);
}

.b-center {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* ---------- Type ---------- */
.b-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--b-cyan);
  font-family: var(--b-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.b-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--b-cyan);
  box-shadow: 0 0 0 4px rgb(117 251 251 / 14%);
}

.b-display,
.b-h2 {
  font-family: var(--b-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.b-display {
  font-size: clamp(2.7rem, 6.4vw, 5.6rem);
  line-height: 1.02;
}

.b-h2 {
  font-size: clamp(2.05rem, 4.2vw, 3.6rem);
  line-height: 1.06;
}

.basis h3 {
  font-family: var(--b-display);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.b-lead {
  max-width: 720px;
  margin-top: 22px;
  color: var(--b-soft);
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.b-fine {
  margin-top: 22px;
  color: rgb(144 166 200 / 78%);
  font-size: 13px;
  line-height: 1.5;
}

/* Keyword gradient: flows continuously through every headline keyword. */
.b-kw {
  font-family: var(--b-serif);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding-inline-end: 0.06em;
  background: var(--b-grad);
  background-size: 200% 100%;
  background-clip: text;
  color: transparent;
  box-decoration-break: clone;
  animation: b-grad-flow 9s linear infinite;
}

.b-lead .b-kw,
.b-job__quote .b-kw {
  font-weight: 500;
}

@keyframes b-grad-flow {
  to {
    background-position: -200% 0;
  }
}

/* Section heads */
.b-head {
  max-width: 880px;
}

.b-head--center {
  margin-inline: auto;
  margin-bottom: clamp(48px, 6vw, 72px);
  text-align: center;
}

.b-head--center .b-lead {
  margin-inline: auto;
}

/* ---------- Pills ---------- */
.b-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--b-line-2);
  border-radius: 999px;
  background: rgb(255 255 255 / 4%);
  color: var(--b-soft);
  font-family: var(--b-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition:
    border-color var(--b-fast) ease-out,
    background-color var(--b-fast) ease-out,
    color var(--b-fast) ease-out,
    transform var(--b-fast) var(--b-ease);
}

a.b-pill:hover,
li.b-pill:hover {
  border-color: rgb(117 251 251 / 60%);
  background: rgb(117 251 251 / 8%);
  color: var(--b-text);
  transform: translateY(-1px);
}

.b-pill--current {
  border-color: transparent;
  background: var(--b-grad-static);
  color: #04101f;
}

.b-pill--accent {
  margin-top: 26px;
  border-color: rgb(117 251 251 / 45%);
  color: var(--b-cyan);
}

.b-tag {
  display: inline-block;
  margin-top: 20px;
  padding: 6px 12px;
  border: 1px solid var(--b-line-2);
  border-radius: 999px;
  color: var(--b-cyan);
  font-family: var(--b-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Glassy round buttons ---------- */
.b-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}

.b-btn {
  --mx: 50%;
  --my: 50%;

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  overflow: hidden;
  border: 1px solid rgb(207 225 255 / 24%);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 14%),
    rgb(255 255 255 / 3%)
  );
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 28%),
    inset 0 -1px 0 rgb(255 255 255 / 4%),
    0 12px 32px -16px rgb(34 85 245 / 70%);
  color: var(--b-text);
  font-family: var(--b-display);
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition:
    transform var(--b-med) var(--b-ease),
    box-shadow var(--b-med) var(--b-ease),
    border-color var(--b-fast) ease-out,
    background-color var(--b-fast) ease-out;
}

/* Pointer-tracked sheen */
.b-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    120px circle at var(--mx) var(--my),
    rgb(255 255 255 / 28%),
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--b-med) ease-out;
}

/* Glass highlight sweep */
.b-btn::after {
  content: "";
  position: absolute;
  inset: -2px auto -2px -60%;
  z-index: -1;
  width: 45%;
  background: linear-gradient(
    100deg,
    transparent,
    rgb(255 255 255 / 32%),
    transparent
  );
  transform: skewX(-18deg) translateX(0);
  transition: transform 0s;
}

.b-btn:hover,
.b-btn:focus-visible {
  transform: translateY(-2px);
  border-color: rgb(117 251 251 / 55%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 34%),
    0 18px 42px -16px rgb(34 85 245 / 85%),
    0 0 0 4px rgb(117 251 251 / 8%);
}

.b-btn:hover::before,
.b-btn:focus-visible::before {
  opacity: 1;
}

.b-btn:hover::after,
.b-btn:focus-visible::after {
  transform: skewX(-18deg) translateX(420%);
  transition: transform 900ms var(--b-ease);
}

.b-btn:active {
  transform: translateY(0) scale(0.98);
}

.b-btn--primary {
  border-color: rgb(117 251 251 / 50%);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 22%), rgb(255 255 255 / 0%) 55%),
    linear-gradient(120deg, #2255f5, #3d6cff 55%, #2a8fe6);
}

.b-btn--glass {
  background-color: rgb(12 29 55 / 35%);
}

.b-btn__icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--b-med) var(--b-ease);
}

.b-btn:hover .b-btn__icon,
.b-signal:hover .b-btn__icon {
  transform: translateX(4px);
}

.b-btn:hover .b-btn__icon--down {
  transform: translateY(3px);
}

/* ---------- 01 Hero (split) ---------- */
.b-hero {
  position: relative;
  padding: clamp(28px, 4vw, 44px) 0 clamp(56px, 7vw, 96px);
  background:
    radial-gradient(
      ellipse 42% 48% at 78% 52%,
      rgb(34 85 245 / 34%),
      transparent
    ),
    radial-gradient(
      ellipse 36% 36% at 12% 20%,
      rgb(117 251 251 / 7%),
      transparent
    ),
    linear-gradient(180deg, var(--b-deep), var(--b-bg));
}

.b-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 clamp(36px, 5vw, 56px);
  color: var(--b-muted);
  font-size: 0.8rem;
}

.b-crumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: rgb(144 166 200 / 45%);
}

.b-crumbs a {
  color: var(--b-muted);
  text-decoration: none;
  transition: color var(--b-fast) ease-out;
}

.b-crumbs a:hover {
  color: var(--b-text);
}

.b-crumbs [aria-current] {
  color: var(--b-soft);
}

.b-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}

.b-hero__copy .b-actions {
  justify-content: flex-start;
}

.b-hero .b-display {
  max-width: 680px;
  font-size: clamp(2.6rem, 5.2vw, 4.7rem);
}

.b-hero .b-lead {
  max-width: 600px;
}

/* Floating emblem: the circle floats very slightly; on hover the view pans inside the lens. */
.b-orb {
  position: relative;
  justify-self: end;
  width: min(500px, 100%);
  margin: 0;
}

.b-orb::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(34 85 245 / 55%), transparent 70%);
  filter: blur(40px);
  z-index: -1;
}

.b-orb__float {
  position: relative;
  animation: b-orb-float 7s ease-in-out infinite;
}

@keyframes b-orb-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -6px, 0);
  }
}

.b-orb__lens {
  --px: 0;
  --py: 0;

  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgb(117 251 251 / 18%),
    0 40px 90px -40px rgb(34 85 245 / 90%);
  mask-image: radial-gradient(white, black);
}

.basis .b-orb__lens img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02) translate3d(0, 0, 0);
  transition: transform 900ms var(--b-ease);
  will-change: transform;
}

.b-orb.is-panning .b-orb__lens img {
  transform: scale(1.09)
    translate3d(calc(var(--px) * -2.4%), calc(var(--py) * -2.4%), 0);
  transition-duration: 600ms;
}

.b-orb__sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    220px circle at calc(50% + var(--px, 0) * 40%)
      calc(50% + var(--py, 0) * 40%),
    rgb(255 255 255 / 14%),
    transparent 65%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease-out;
}

.b-orb.is-panning .b-orb__sheen {
  opacity: 1;
}

.b-signal {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  max-width: 600px;
  margin-top: 28px;
  padding: 12px 22px 12px 14px;
  border: 1px solid var(--b-line-2);
  border-radius: 999px;
  background: rgb(12 29 55 / 60%);
  color: var(--b-soft);
  text-decoration: none;
  transition:
    border-color var(--b-fast),
    transform var(--b-med) var(--b-ease),
    background-color var(--b-fast);
}

.b-signal:hover {
  border-color: var(--b-cyan);
  background: rgb(12 29 55 / 90%);
  transform: translateY(-2px);
}

.b-signal__num {
  flex: none;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgb(117 251 251 / 8%);
  font-family: var(--b-display);
  font-size: 20px;
  font-weight: 800;
}

.b-signal__num i {
  font-style: normal;
  color: var(--b-muted);
}

.b-signal__txt {
  font-size: 14px;
  line-height: 1.4;
}

/* ---------- 02 Struggle ---------- */
.b-struggle {
  background:
    radial-gradient(
      ellipse 38% 38% at 82% 45%,
      rgb(34 85 245 / 14%),
      transparent
    ),
    linear-gradient(180deg, var(--b-bg), #08142a 55%, var(--b-bg));
}

.b-pains {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--b-line);
}

.b-pain {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 20px;
  padding: 36px 32px 36px 8px;
  border-bottom: 1px solid var(--b-line);
  transition: background-color var(--b-med) ease-out;
}

.b-pain:nth-child(odd) {
  border-right: 1px solid var(--b-line);
}

.b-pain:nth-child(even) {
  padding-left: 40px;
}

.b-pain::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--b-grad-static);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--b-slow) var(--b-ease);
}

.b-pain:hover {
  background: linear-gradient(180deg, transparent, rgb(34 85 245 / 7%));
}

.b-pain:hover::after {
  transform: scaleX(1);
}

.b-pain__num {
  grid-row: span 2;
  font-family: var(--b-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  background: var(--b-grad-static);
  background-clip: text;
  color: transparent;
  transition: transform var(--b-med) var(--b-ease);
}

.b-pain:hover .b-pain__num {
  transform: translateY(-3px);
}

.b-pain h3 {
  font-size: 21px;
}

.b-pain p {
  margin-top: 10px;
  color: var(--b-muted);
  font-size: 16px;
}

/* ---------- 03 Job (left-aligned quote) ---------- */
.b-job {
  background:
    radial-gradient(
      ellipse 42% 46% at 16% 50%,
      rgb(34 85 245 / 30%),
      transparent
    ),
    radial-gradient(
      ellipse 28% 38% at 88% 50%,
      rgb(117 251 251 / 7%),
      transparent
    ),
    linear-gradient(180deg, var(--b-bg), var(--b-alt) 50%, var(--b-bg));
}

.b-job__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  max-width: 1120px;
}

.b-job__mark {
  width: clamp(48px, 5vw, 68px);
  margin-top: 0.35em;
  fill: var(--b-cyan);
  opacity: 0.9;
  transition: transform var(--b-slow) var(--b-ease);
}

.b-job__inner:hover .b-job__mark {
  transform: translateY(-4px) rotate(-4deg);
}

.b-job__body {
  padding-left: clamp(20px, 3vw, 36px);
  border-left: 2px solid transparent;
  border-image: var(--b-grad-static) 1;
}

.b-job__quote p {
  font-family: var(--b-display);
  font-size: clamp(1.7rem, 3.2vw, 2.85rem);
  font-weight: 650;
  line-height: 1.22;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}

.b-job__label {
  margin-top: 28px;
  color: var(--b-muted);
  font-family: var(--b-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- 04 How it works: accordion + visual stage ---------- */
.b-how {
  background: var(--b-bg);
}

.b-how__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.b-acc {
  border-bottom: 1px solid var(--b-line);
}

.b-acc__item {
  position: relative;
  border-top: 1px solid var(--b-line);
  transition: background-color var(--b-med);
}

.b-acc__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: 0;
  width: 2px;
  background: var(--b-grad-static);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--b-slow) var(--b-ease);
}

.b-acc__item.is-open {
  background: linear-gradient(90deg, rgb(34 85 245 / 14%), transparent 70%);
}

.b-acc__item.is-open::before {
  transform: scaleY(1);
}

.b-acc__h {
  margin: 0;
}

.b-acc__btn {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 24px 8px 24px 22px;
  border: 0;
  background: none;
  color: var(--b-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    color var(--b-fast),
    padding var(--b-med) var(--b-ease);
}

.b-acc__btn:hover {
  color: var(--b-text);
  padding-left: 28px;
}

.b-acc__num {
  flex: none;
  width: 32px;
  font-family: var(--b-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--b-sky);
  font-variant-numeric: tabular-nums;
}

.b-acc__item.is-open .b-acc__num {
  background: var(--b-grad-static);
  background-clip: text;
  color: transparent;
}

.b-acc__title {
  flex: 1;
  font-family: var(--b-display);
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.b-acc__item.is-open .b-acc__title {
  color: var(--b-text);
}

.b-acc__icon {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}

.b-acc__icon::before,
.b-acc__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--b-cyan);
  transition: transform var(--b-med) var(--b-ease);
}

.b-acc__icon::after {
  transform: rotate(90deg);
}

.b-acc__item.is-open .b-acc__icon::after {
  transform: rotate(0deg);
}

.b-acc__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 480ms var(--b-ease);
}

.b-acc__inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 8px 0 74px;
}

.b-acc__inner p {
  max-width: 44ch;
  color: var(--b-muted);
  font-size: 16.5px;
  transition:
    opacity 360ms ease-out,
    transform 480ms var(--b-ease);
}

.b-acc__bars {
  display: flex;
  gap: 6px;
  margin: 18px 0 26px;
}

.b-acc__bars i {
  width: 36px;
  height: 3px;
  border-radius: 3px;
  background: rgb(144 166 200 / 28%);
}

.b-acc__bars i.is-on {
  background: var(--b-grad-static);
}

.b-js .b-acc__item:not(.is-open) .b-acc__panel {
  grid-template-rows: 0fr;
}

.b-js .b-acc__item:not(.is-open) .b-acc__inner p {
  opacity: 0;
  transform: translateY(-6px);
}

/* Visual stage */
.b-how__stage {
  position: relative;
  min-height: 380px;
  padding: clamp(24px, 3vw, 36px);
  overflow: hidden;
  border: 1px solid rgb(117 251 251 / 28%);
  border-radius: 24px;
  background:
    radial-gradient(
      ellipse 60% 55% at 85% 10%,
      rgb(34 85 245 / 30%),
      transparent
    ),
    linear-gradient(180deg, #0f274a, #0a1628);
  transition:
    border-color var(--b-med),
    box-shadow var(--b-med);
}

.b-how__stage:hover {
  border-color: rgb(117 251 251 / 50%);
  box-shadow: 0 30px 70px -36px rgb(34 85 245 / 80%);
}

.b-vis {
  position: absolute;
  inset: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 420ms ease-out,
    transform 620ms var(--b-ease);
}

.b-vis.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.b-vis__label {
  margin-bottom: 14px;
  color: var(--b-muted);
  font-family: var(--b-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.b-vis--connect {
  align-items: center;
  text-align: center;
}

.b-sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 440px);
  border-top: 1px solid var(--b-line);
  border-left: 1px solid var(--b-line);
}

.b-sources li {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 16px 8px 14px;
  border-right: 1px solid var(--b-line);
  border-bottom: 1px solid var(--b-line);
  color: var(--b-soft);
  font-family: var(--b-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  transition:
    color var(--b-fast),
    background-color var(--b-fast);
}

.b-sources li:hover {
  background: rgb(117 251 251 / 5%);
  color: var(--b-text);
}

.b-ico {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--b-cyan);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.b-sources__wires {
  display: block;
  width: min(100%, 440px);
  height: 40px;
  overflow: visible;
  fill: none;
  stroke: rgb(117 251 251 / 50%);
  stroke-width: 1.4;
  stroke-dasharray: 3 5;
  vector-effect: non-scaling-stroke;
}

.b-sources__wires path {
  vector-effect: non-scaling-stroke;
}

.b-vis__core {
  display: grid;
  place-items: center;
  padding: 14px 26px;
  border: 1px solid rgb(117 251 251 / 45%);
  border-radius: 16px;
  background: var(--b-raise);
  box-shadow: 0 18px 40px -24px rgb(34 85 245 / 90%);
}

.basis .b-vis__core img {
  width: auto;
  height: 24px;
  filter: brightness(0) invert(1);
}

.b-vis--connect .b-vis__note {
  margin-top: 16px;
}

.b-vis__note {
  color: var(--b-cyan);
  font-family: var(--b-display);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.b-review {
  display: grid;
  gap: 10px;
}

.b-review__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid var(--b-line);
  border-radius: 14px;
  background: rgb(7 16 31 / 60%);
  font-family: var(--b-display);
  font-size: 15px;
  font-weight: 600;
  transition:
    border-color var(--b-fast),
    transform var(--b-med) var(--b-ease);
}

.b-review__row:hover {
  border-color: var(--b-line-2);
  transform: translateX(4px);
}

.b-review__row em {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(117 251 251 / 10%);
  color: var(--b-cyan);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
}

.b-dotc {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--b-sky);
}

.b-dotc--hot {
  background: var(--b-cyan);
  box-shadow: 0 0 0 4px rgb(117 251 251 / 18%);
}

.b-approve {
  position: relative;
  display: grid;
  gap: 14px;
  padding-left: 30px;
}

.b-approve::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--b-grad-static);
}

.b-approve li {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--b-line);
  border-radius: 14px;
  background: rgb(7 16 31 / 60%);
  transition:
    border-color var(--b-fast),
    transform var(--b-med) var(--b-ease);
}

.b-approve li:hover {
  border-color: var(--b-line-2);
  transform: translateX(4px);
}

.b-approve li::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid var(--b-cyan);
  border-radius: 50%;
  background: var(--b-bg);
  transform: translateY(-50%);
}

.b-approve li.is-final::before {
  background: var(--b-cyan);
}

.b-approve b {
  font-family: var(--b-display);
  font-size: 15.5px;
  font-weight: 650;
}

.b-approve span {
  color: var(--b-muted);
  font-size: 13.5px;
}

.b-stack {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--b-line);
  text-align: center;
}

.b-stack__title {
  margin-bottom: 24px;
  color: var(--b-soft);
  font-size: 15px !important;
  font-weight: 600 !important;
}

.b-marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000000 10%,
    #000000 90%,
    transparent
  );
}

.b-marquee__rail {
  display: flex;
  justify-content: center;
}

.b-marquee__track {
  display: flex;
  flex-wrap: wrap;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 24px clamp(40px, 5vw, 72px);
  padding: 10px clamp(20px, 2.5vw, 36px);
}

.b-marquee.is-running .b-marquee__rail {
  justify-content: flex-start;
  width: max-content;
  animation: b-marquee 38s linear infinite;
}

.b-marquee.is-running .b-marquee__track {
  flex-wrap: nowrap;
}

.b-marquee.is-running:hover .b-marquee__rail,
.b-stack.is-paused .b-marquee__rail {
  animation-play-state: paused;
}

@keyframes b-marquee {
  to {
    transform: translateX(-50%);
  }
}

.b-logo {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  height: 48px;
  opacity: 0.88;
  transition: opacity var(--b-fast);
}

.b-logo:hover {
  opacity: 1;
}

.basis .b-logo img {
  width: auto;
}

.basis .b-logo--ns img {
  height: 36px;
}

.basis .b-logo--qb img {
  height: 24px;
}

.basis .b-logo--xero img {
  height: 24px;
}

.basis .b-logo--named img,
.b-logo--named .b-ico {
  width: 30px;
  height: 30px;
}

.b-logo--generic .b-ico {
  padding: 4px;
  border: 1px solid var(--b-line-2);
  border-radius: 8px;
}

.b-logo span {
  color: var(--b-text);
  font-family: var(--b-display);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.b-marquee__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 5px 12px;
  border: 1px solid var(--b-line);
  border-radius: 999px;
  background: none;
  color: var(--b-muted);
  font-family: var(--b-display);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition:
    color var(--b-fast),
    border-color var(--b-fast);
}

.b-marquee__toggle:hover {
  border-color: var(--b-line-2);
  color: var(--b-cyan);
}

.b-marquee__toggle[hidden],
.b-faq__nav[hidden] {
  display: none;
}

.b-marquee__toggle svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.b-marquee__play,
.b-stack.is-paused .b-marquee__pause {
  display: none;
}

.b-stack.is-paused .b-marquee__play {
  display: inline;
  fill: currentcolor;
}

.b-paper {
  display: grid;
  gap: 10px;
}

.b-paper__row {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--b-line);
  border-radius: 14px;
  background: rgb(7 16 31 / 60%);
  font-family: var(--b-display);
  font-size: 15px;
  font-weight: 600;
  transition:
    border-color var(--b-fast),
    transform var(--b-med) var(--b-ease);
}

.b-paper__row:hover {
  border-color: var(--b-line-2);
  transform: translateX(4px);
}

.b-paper__row i {
  height: 6px;
  border-radius: 6px;
  background: var(--b-grad-static);
  transform-origin: left;
  transform: scaleX(var(--fill, 1));
  transition: transform 1.2s var(--b-ease);
}

.b-paper__row:nth-child(1) i {
  --w: 0.92;
}

.b-paper__row:nth-child(2) i {
  --w: 0.78;
}

.b-paper__row:nth-child(3) i {
  --w: 0.86;
}

.b-paper__row:nth-child(4) i {
  --w: 0.7;
}

.b-paper__row i {
  width: calc(var(--w) * 100%);
}

.b-paper__row em {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(117 251 251 / 10%);
  color: var(--b-cyan);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.b-systems {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

/* ---------- 06 Measurement (outcomes base) ---------- */
.b-outcomes {
  background:
    radial-gradient(
      ellipse 44% 38% at 50% 40%,
      rgb(34 85 245 / 18%),
      transparent
    ),
    linear-gradient(180deg, var(--b-bg), var(--b-deep) 50%, var(--b-bg));
}

.b-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.b-metric {
  position: relative;
  padding: 30px 26px;
  border: 1px solid var(--b-line);
  border-radius: 20px;
  background: rgb(12 29 55 / 55%);
  text-align: center;
  transition:
    transform var(--b-med) var(--b-ease),
    border-color var(--b-med),
    background-color var(--b-med);
}

.b-metric:hover {
  transform: translateY(-4px);
  border-color: rgb(117 251 251 / 40%);
  background: rgb(12 29 55 / 90%);
}

.b-metric dt {
  font-family: var(--b-display);
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  background: var(--b-grad);
  background-size: 200% 100%;
  background-clip: text;
  color: transparent;
  animation: b-grad-flow 9s linear infinite;
}

.b-metric dd {
  margin-top: 14px;
  color: var(--b-muted);
  font-size: 15px;
  line-height: 1.5;
}

.b-question {
  max-width: 880px;
  margin: 56px auto 0;
  text-align: center;
}

.b-question h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  text-wrap: balance;
}

.b-question p {
  margin-top: 16px;
  color: var(--b-soft);
}

.b-outcomes .b-fine {
  text-align: center;
}

/* ---------- 02 Case ---------- */
.b-case {
  background:
    radial-gradient(
      ellipse 34% 44% at 72% 50%,
      rgb(117 251 251 / 7%),
      transparent
    ),
    var(--b-bg);
}

.b-case__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.b-case__big {
  font-size: clamp(4rem, 9vw, 7.5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.b-case__big i {
  font-style: normal;
  color: var(--b-muted);
  font-weight: 500;
}

.b-case__unit {
  color: var(--b-muted);
  font-size: 0.6em;
}

.b-case__src {
  margin-top: 14px;
  color: var(--b-muted);
  font-size: 14px;
}

.b-close {
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--b-line);
  border-radius: 24px;
  background: linear-gradient(180deg, rgb(12 29 55 / 80%), rgb(10 22 40 / 80%));
  transition:
    border-color var(--b-med),
    transform var(--b-med) var(--b-ease);
}

.b-close:hover {
  border-color: var(--b-line-2);
  transform: translateY(-3px);
}

.b-close__row {
  display: grid;
  grid-template-columns: 96px 1fr 80px;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.b-close__name {
  color: var(--b-soft);
  font-family: var(--b-display);
  font-size: 14px;
  font-weight: 700;
}

.b-close__val {
  font-family: var(--b-display);
  font-size: 15px;
  font-weight: 700;
  text-align: right;
}

.b-close__val--muted {
  color: rgb(144 166 200 / 70%);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}

.b-close__track,
.b-close__notegrid {
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: 4px;
}

.b-close__track i {
  height: 30px;
  border-radius: 5px;
  background: rgb(144 166 200 / 35%);
  transition:
    background-color 500ms ease-out,
    transform 500ms var(--b-ease),
    opacity 500ms ease-out;
  transition-delay: calc(var(--i, 0) * 45ms);
}

.b-close__track--after i {
  background: var(--b-grad-static);
}

.b-close__track--after i.is-freed {
  background: rgb(117 251 251 / 6%);
  outline: 1px dashed rgb(117 251 251 / 32%);
  outline-offset: -1px;
}

.b-close__track i:hover {
  transform: scaleY(1.18);
}

/* Note row: "Day 1" under cell 1, brace spanning the 14 freed cells (7-20). */
.b-close__row--note {
  align-items: start;
  margin: -6px 0 0;
}

.b-close__scale {
  grid-column: 1 / 7;
  padding-top: 4px;
  color: rgb(144 166 200 / 70%);
  font-size: 12px;
  font-weight: 600;
}

.b-close__brace {
  grid-column: 7 / 21;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.b-close__brace i {
  position: relative;
  width: 100%;
  height: 12px;
  border: 1.5px solid var(--b-cyan);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  opacity: 0.8;
}

.b-close__brace i::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 1.5px;
  height: 7px;
  background: var(--b-cyan);
}

.b-close__brace b {
  max-width: 34ch;
  color: var(--b-cyan);
  font-family: var(--b-display);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
}

.b-close .b-fine {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--b-line);
}

/* Animated state: "with Basis" starts as a full 20-day bar, then 14 cells release. */
.b-js .b-close:not(.is-in) .b-close__track--after i.is-freed {
  background: rgb(144 166 200 / 35%);
  outline-color: transparent;
}

.b-js .b-close:not(.is-in) .b-close__track--before i {
  transform: scaleY(0.2);
  opacity: 0.2;
}

.b-js .b-close .b-close__brace {
  transition:
    opacity 600ms ease-out 1.3s,
    transform 600ms var(--b-ease) 1.3s;
}

.b-js .b-close:not(.is-in) .b-close__brace {
  opacity: 0;
  transform: translateY(-6px);
}

/* ---------- 07 Why ---------- */
.b-why {
  background:
    radial-gradient(
      ellipse 44% 34% at 50% 66%,
      rgb(34 85 245 / 16%),
      transparent
    ),
    linear-gradient(180deg, var(--b-bg), var(--b-alt) 50%, var(--b-bg));
}

.b-pair {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 16px;
}

.b-pair__link {
  align-self: center;
  display: grid;
  place-items: center;
}

.b-pair__link b {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid rgb(117 251 251 / 60%);
  border-radius: 50%;
  background: var(--b-bg);
  font-size: 22px;
  box-shadow: 0 0 0 8px rgb(117 251 251 / 6%);
}

.b-panel {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 34px;
  border: 1px solid var(--b-line);
  border-radius: 24px;
  background: rgb(7 16 31 / 70%);
  transition:
    transform var(--b-med) var(--b-ease),
    border-color var(--b-med),
    box-shadow var(--b-med);
}

.b-panel:hover {
  transform: translateY(-4px);
  border-color: rgb(117 251 251 / 38%);
  box-shadow: 0 30px 70px -36px rgb(34 85 245 / 80%);
}

.b-panel > :not(.b-panel__media) {
  margin-inline: 14px;
}

.b-panel__media {
  position: relative;
  margin-bottom: 26px;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 16 / 8;
}

.b-panel__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgb(7 16 31 / 70%), transparent 55%);
  pointer-events: none;
}

.basis .b-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--b-ease);
}

.b-panel:hover .b-panel__media img {
  transform: scale(1.05);
}

.basis .b-panel__logo {
  width: auto;
  height: 46px;
  margin-bottom: 18px;
  align-self: flex-start;
}

.basis .b-panel__logo--basis {
  height: 26px;
  filter: brightness(0) invert(1);
}

.b-panel h3 {
  font-size: 28px;
}

.b-panel > p {
  margin-top: 12px;
  color: var(--b-soft);
}

.b-checks {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.b-checks li {
  position: relative;
  padding-left: 32px;
  color: var(--b-muted);
  font-size: 15.5px;
  transition:
    color var(--b-fast),
    transform var(--b-fast) var(--b-ease);
}

.b-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.5 2.6 2.6L14 7.5' fill='none' stroke='%2307101f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 16px no-repeat,
    var(--b-grad-static);
}

.b-checks li:hover {
  color: var(--b-text);
  transform: translateX(3px);
}

/* ---------- 10 Deployment: flippable accordion ---------- */
.b-deploy {
  background:
    radial-gradient(
      ellipse 44% 34% at 50% 36%,
      rgb(34 85 245 / 16%),
      transparent
    ),
    var(--b-bg);
}

.b-deck__list {
  display: grid;
  gap: 12px;
}

.b-phase {
  overflow: hidden;
  border: 1px solid var(--b-line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgb(12 29 55 / 85%), rgb(10 22 40 / 85%));
  transition:
    border-color var(--b-med),
    box-shadow var(--b-med),
    background-color var(--b-med);
}

.b-phase:hover {
  border-color: rgb(117 251 251 / 32%);
}

.b-phase.is-open {
  border-color: rgb(117 251 251 / 40%);
  background:
    radial-gradient(
      600px 300px at 90% 0%,
      rgb(34 85 245 / 28%),
      transparent 70%
    ),
    linear-gradient(180deg, #0f274a, #0a1628);
  box-shadow: 0 30px 70px -36px rgb(34 85 245 / 80%);
}

.b-phase__h {
  margin: 0;
}

.b-phase__tab {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 22px 26px;
  border: 0;
  background: none;
  color: var(--b-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.b-phase__num {
  flex: none;
  font-family: var(--b-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: rgb(144 166 200 / 55%);
  transition:
    color var(--b-med),
    transform var(--b-med) var(--b-ease);
}

.b-phase.is-open .b-phase__num {
  background: var(--b-grad-static);
  background-clip: text;
  color: transparent;
}

.b-phase__tab:hover .b-phase__num {
  color: var(--b-cyan);
  transform: translateY(-2px);
}

.b-phase__title {
  flex: 1;
  font-family: var(--b-display);
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.b-phase__chev {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: var(--b-cyan);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(90deg);
  transition: transform var(--b-med) var(--b-ease);
}

.b-phase.is-open .b-phase__chev {
  transform: rotate(-90deg);
}

.b-phase__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  padding: 0 26px 28px;
}

.b-phase__art {
  aspect-ratio: 360 / 220;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--b-line);
  border-radius: 18px;
  background: rgb(7 16 31 / 60%);
}

.b-phase__art svg {
  display: block;
  width: 100%;
  height: auto;
}

.b-phase__art text {
  fill: var(--b-soft);
  font-family: var(--b-display);
  font-size: 13px;
  font-weight: 600;
}

.b-phase__art .a-small {
  fill: var(--b-muted);
  font-size: 11px;
}

.b-phase__art .a-line path,
.b-phase__art .a-loop {
  fill: none;
  stroke: rgb(117 251 251 / 55%);
  stroke-width: 1.6;
  stroke-dasharray: 3 6;
}

.b-phase__art .a-loop-h,
.b-phase__art .a-stop,
.b-phase__art .a-lens-h {
  fill: none;
  stroke: var(--b-cyan);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.b-phase__art .a-node rect,
.b-phase__art .a-lane rect {
  fill: rgb(12 29 55 / 90%);
  stroke: rgb(117 251 251 / 30%);
}

.b-phase__art .a-lane rect {
  fill: rgb(12 29 55 / 50%);
  stroke: rgb(117 251 251 / 14%);
}

.b-phase__art .a-hot,
.b-phase__art .a-gate {
  fill: #2255f5 !important;
  stroke: var(--b-cyan) !important;
}

.b-phase__art .a-ghost {
  fill: none !important;
  stroke-dasharray: 3 4;
}

.b-phase__art .a-core {
  fill: #0f274a;
  stroke: var(--b-cyan);
  stroke-width: 1.5;
}

.b-phase__art .a-muted {
  fill: rgb(144 166 200 / 35%);
}

.b-phase__art .a-lens {
  fill: rgb(117 251 251 / 8%);
  stroke: var(--b-cyan);
  stroke-width: 2.4;
}

/* Output: fitted white chip, sentence case. */
.basis .b-output {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  max-width: 100%;
  gap: 10px;
  margin-top: 18px;
  padding: 10px 16px;
  border-radius: 12px;
  background: #f5f8ff;
  color: #07101f;
  font-family: var(--b-display);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
  box-shadow: 0 14px 30px -18px rgb(117 251 251 / 60%);
}

.b-output b {
  min-width: 0;
  font-weight: 650;
}

.b-output span {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--b-grad-static);
  color: #04101f;
  font-size: 12px;
  font-weight: 700;
}

.b-step__label {
  color: var(--b-cyan);
  font-family: var(--b-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.b-step__act {
  margin-top: 6px;
  color: var(--b-text);
  font-size: 16px;
  line-height: 1.55;
}

.b-step__dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin-top: 16px;
  border-top: 1px solid var(--b-line);
}

.b-step__dl > div {
  padding-top: 12px;
}

.b-step__dl dt {
  color: var(--b-cyan);
  font-family: var(--b-display);
  font-size: 13px;
  font-weight: 700;
}

.b-step__dl dd {
  margin: 4px 0 0;
  color: var(--b-soft);
  font-size: 14.5px;
  line-height: 1.55;
}

.b-step__gate {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 2px solid var(--b-cyan);
  border-radius: 0 10px 10px 0;
  background: rgb(117 251 251 / 6%);
  color: var(--b-text);
  font-size: 14.5px;
}

.b-step__gate span {
  color: var(--b-muted);
  font-family: var(--b-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.b-deck__nav {
  display: none;
}

/* JS enhancement: horizontal flip accordion on desktop, vertical accordion on small screens. */
.b-js .b-phase:not(.is-open) .b-phase__body {
  display: none;
}

@media (width >= 1000px) {
  .b-deck {
    container-type: inline-size;
  }

  .b-js .b-deck__list {
    display: flex;
    gap: 12px;
    height: auto;
    min-height: 560px;
    align-items: stretch;
  }

  /* Same basis for every panel; only flex-grow animates, so widths interpolate smoothly. */
  .b-js .b-phase {
    display: flex;
    flex: 0 0 104px;
    flex-direction: column;
    min-width: 0;
    transition:
      flex-grow 700ms var(--b-ease),
      border-color var(--b-med),
      box-shadow var(--b-med),
      background-color var(--b-med);
  }

  .b-js .b-phase.is-open {
    flex-grow: 1;
  }

  .b-js .b-phase:not(.is-open) .b-phase__h {
    display: flex;
    flex: 1;
  }

  .b-js .b-phase:not(.is-open) .b-phase__tab {
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    padding: 28px 0;
  }

  .b-js .b-phase:not(.is-open):hover {
    background: linear-gradient(
      180deg,
      rgb(15 39 74 / 95%),
      rgb(10 22 40 / 95%)
    );
  }

  .b-js .b-phase:not(.is-open) .b-phase__title {
    flex: none;
    margin-top: 18px;
    font-size: 17px;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }

  .b-js .b-phase:not(.is-open) .b-phase__chev {
    margin-top: auto;
    transform: rotate(0deg);
  }

  .b-js .b-phase.is-open .b-phase__chev {
    display: none;
  }

  .b-js .b-phase.is-open .b-phase__tab {
    padding: 28px 32px 22px;
    cursor: default;
  }

  /* Body keeps its final width during the flip, so content never reflows or "grows". */
  .b-js .b-phase__body {
    width: calc(100cqw - 2 * 104px - 2 * 12px - 2px);
    padding: 0 32px 28px;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
  }

  .b-js .b-phase.is-open .b-phase__body {
    animation: b-phase-in 520ms var(--b-ease) 180ms both;
  }
}

@keyframes b-phase-in {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
}

.b-js .b-deck__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
}

/* Line arrows: no container; shaft extends and head leads on hover. */
.b-arrow {
  display: grid;
  place-items: center;
  width: 76px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--b-cyan);
  cursor: pointer;
}

.b-arrow svg {
  width: 64px;
  height: 24px;
  overflow: visible;
  fill: none;
  stroke: url("#b-arrow-grad");
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.b-arrow__shaft {
  transform-box: fill-box;
  transition: transform 520ms var(--b-ease);
}

.b-arrow__head {
  transition: transform 520ms var(--b-ease);
}

.b-arrow--next .b-arrow__shaft {
  transform-origin: left center;
  transform: scaleX(0.55);
}

.b-arrow--next .b-arrow__head {
  transform: translateX(-26px);
}

.b-arrow--prev .b-arrow__shaft {
  transform-origin: right center;
  transform: scaleX(0.55);
}

.b-arrow--prev .b-arrow__head {
  transform: translateX(26px);
}

.b-arrow:hover .b-arrow__shaft,
.b-arrow:focus-visible .b-arrow__shaft {
  transform: scaleX(1);
}

.b-arrow:hover .b-arrow__head,
.b-arrow:focus-visible .b-arrow__head {
  transform: translateX(0);
}

.b-arrow:active svg {
  transform: scale(0.94);
}

.b-arrow.is-pulse svg {
  animation: b-arrow-pulse 420ms var(--b-ease);
}

@keyframes b-arrow-pulse {
  40% {
    transform: translateX(var(--nudge, 6px));
  }
}

.b-arrow--prev {
  --nudge: -6px;
}

.b-deck__count {
  min-width: 64px;
  color: var(--b-muted);
  font-family: var(--b-display);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.b-deck__count span {
  color: var(--b-text);
}

.b-deck__dots {
  display: flex;
  gap: 6px;
}

.b-deck__dots i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgb(144 166 200 / 35%);
  transition:
    width var(--b-med) var(--b-ease),
    background-color var(--b-med);
}

.b-deck__dots i.is-on {
  width: 26px;
  background: var(--b-grad-static);
}

/* ---------- 11 Fit: one contained card ---------- */
.b-fit {
  background:
    radial-gradient(
      ellipse 36% 42% at 12% 50%,
      rgb(34 85 245 / 20%),
      transparent
    ),
    linear-gradient(180deg, var(--b-bg), var(--b-deep) 50%, var(--b-bg));
}

.b-fitcard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1080px;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--b-line-2);
  border-radius: 24px;
  background: linear-gradient(180deg, rgb(12 29 55 / 80%), rgb(10 22 40 / 80%));
}

.b-fitcol {
  padding: clamp(24px, 3vw, 40px);
}

.b-fitcol--no {
  border-left: 1px solid var(--b-line);
  background: rgb(5 11 22 / 45%);
}

.b-fitcol h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--b-cyan);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.b-fitcol--no h3 {
  color: var(--b-muted);
}

.b-fitcol__ico {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--b-grad-static);
  color: #04101f;
}

.b-fitcol--no .b-fitcol__ico {
  border: 1px solid var(--b-line-2);
  background: none;
  color: var(--b-muted);
}

.b-fitcol__ico svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.b-fitcol li {
  display: grid;
  gap: 3px;
  padding: 15px 0;
  border-bottom: 1px solid var(--b-line);
}

.b-fitcol li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.b-fitcol li b {
  font-family: var(--b-display);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.b-fitcol--no li b {
  color: var(--b-soft);
}

.b-fitcol li span {
  color: var(--b-muted);
  font-size: 14.5px;
  line-height: 1.5;
}

/* ---------- 12 FAQ: master-detail panel (desktop), compact accordion (mobile) ---------- */
.b-faq {
  background: var(--b-bg);
}

.b-faqs {
  max-width: 1080px;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--b-line-2);
  border-radius: 24px;
  background: linear-gradient(180deg, rgb(12 29 55 / 80%), rgb(10 22 40 / 80%));
}

.b-q + .b-q {
  border-top: 1px solid var(--b-line);
}

.b-q summary {
  position: relative;
  padding: 20px 64px 20px 24px;
  cursor: pointer;
  list-style: none;
  font-family: var(--b-display);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.35;
  transition: color var(--b-fast);
}

.b-q summary::-webkit-details-marker {
  display: none;
}

.b-q summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 30px;
  height: 30px;
  border: 1px solid var(--b-line-2);
  border-radius: 50%;
  background:
    linear-gradient(var(--b-cyan), var(--b-cyan)) center / 11px 1.6px no-repeat,
    linear-gradient(var(--b-cyan), var(--b-cyan)) center / 1.6px 11px no-repeat;
  transform: translateY(-50%);
  transition:
    transform var(--b-med) var(--b-ease),
    background-color var(--b-med);
}

.b-q[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  background-color: rgb(117 251 251 / 10%);
}

.b-q summary:hover {
  color: var(--b-cyan);
}

.b-q__a {
  padding: 0 24px 22px;
  color: var(--b-soft);
  font-size: 15.5px;
}

.b-q[open] .b-q__a {
  animation: b-faq-in var(--b-med) var(--b-ease);
}

@keyframes b-faq-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.b-faq__nav {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 14px;
  border-right: 1px solid var(--b-line);
  background: rgb(5 11 22 / 45%);
}

.b-faq__tab {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: baseline;
  padding: 13px 14px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--b-muted);
  font-family: var(--b-display);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--b-fast),
    color var(--b-fast),
    box-shadow var(--b-fast);
}

.b-faq__tab:hover {
  color: var(--b-text);
  background: rgb(255 255 255 / 3%);
}

.b-faq__tab[aria-selected="true"] {
  color: var(--b-text);
  background: rgb(117 251 251 / 8%);
  box-shadow: inset 2px 0 0 var(--b-cyan);
}

.b-faq__n {
  color: var(--b-cyan);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.b-faqs.is-tabs {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  min-height: 470px;
}

.b-faqs.is-tabs .b-faq__nav {
  grid-column: 1;
  grid-row: 1;
}

.b-faqs.is-tabs .b-q {
  grid-column: 2;
  grid-row: 1;
  padding: clamp(28px, 3.6vw, 48px);
  border: 0;
}

.b-faqs.is-tabs .b-q summary {
  padding: 0;
  cursor: default;
  font-size: clamp(1.4rem, 2.1vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  pointer-events: none;
}

.b-faqs.is-tabs .b-q summary::after {
  display: none;
}

.b-faqs.is-tabs .b-q summary::before {
  content: attr(data-qnum);
  display: block;
  margin-bottom: 14px;
  color: var(--b-cyan);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.b-faqs.is-tabs .b-q__a {
  padding: 0;
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.7;
}

/* ---------- 02 Case: what was measured ---------- */
.b-proof {
  display: grid;
  margin-top: 28px;
  border-top: 1px solid var(--b-line);
}

.b-proof > div {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--b-line);
  font-size: 15px;
}

.b-proof dt {
  color: var(--b-muted);
  font-family: var(--b-display);
  font-weight: 650;
}

.b-proof dd {
  margin: 0;
  color: var(--b-soft);
}

/* ---------- 06 Measurement ---------- */
.b-measures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
  max-width: 1040px;
  margin-inline: auto;
  counter-reset: b-measure;
}

.b-measures li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 20px 0 20px 52px;
  border-top: 1px solid var(--b-line);
  counter-increment: b-measure;
}

.b-measures li::before {
  content: counter(b-measure, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 21px;
  color: var(--b-cyan);
  font-family: var(--b-display);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.b-measures b {
  font-family: var(--b-display);
  font-size: 18px;
  font-weight: 650;
}

.b-measures span {
  color: var(--b-muted);
  font-size: 15.5px;
}

.b-reported {
  max-width: 1040px;
  margin: clamp(48px, 6vw, 72px) auto 0;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--b-line);
  border-radius: 20px;
  background: rgb(5 11 22 / 50%);
}

.b-reported h3 {
  margin-bottom: 18px;
  color: var(--b-soft);
  font-size: 15px;
  letter-spacing: 0.02em;
}

.b-metrics--secondary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.b-metrics--secondary .b-metric {
  padding: 18px 16px;
  border-radius: 14px;
  background: rgb(12 29 55 / 40%);
}

.b-metrics--secondary .b-metric:hover {
  transform: none;
}

.b-metrics--secondary .b-metric dt {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
}

.b-metrics--secondary .b-metric dd {
  margin-top: 8px;
  font-size: 14px;
}

.b-reported .b-fine {
  margin-top: 16px;
}

/* ---------- 08 Trust and controls ---------- */
.b-trust {
  background:
    radial-gradient(
      ellipse 40% 36% at 50% 30%,
      rgb(117 251 251 / 6%),
      transparent
    ),
    linear-gradient(180deg, var(--b-bg), var(--b-deep) 50%, var(--b-bg));
}

.b-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
  max-width: 1040px;
  margin-inline: auto;
}

.b-controls li {
  display: grid;
  align-content: start;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px 8px;
  padding: 22px 0;
  border-top: 1px solid var(--b-line-2);
}

.b-controls li:last-child {
  grid-column: 1 / -1;
}

.b-controls__num {
  grid-row: span 2;
  color: var(--b-cyan);
  font-family: var(--b-display);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

.b-controls b {
  font-family: var(--b-display);
  font-size: 18.5px;
  font-weight: 650;
}

.b-controls span:not(.b-controls__num) {
  color: var(--b-muted);
  font-size: 15.5px;
}

/* ---------- 09 Engagement stages ---------- */
.b-engage {
  background: var(--b-bg);
}

.b-stages {
  max-width: 1040px;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--b-line-2);
  border-radius: 22px;
  background: rgb(12 29 55 / 55%);
}

.b-stages table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.b-stages thead th {
  padding: 16px 24px;
  border-bottom: 1px solid var(--b-line-2);
  background: rgb(5 11 22 / 60%);
  color: var(--b-cyan);
  font-family: var(--b-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.b-stages tbody th,
.b-stages td {
  padding: 22px 24px;
  border-top: 1px solid var(--b-line);
  vertical-align: top;
}

.b-stages tbody tr:first-child > * {
  border-top: 0;
}

.b-stages tbody th {
  width: 30%;
  font-family: var(--b-display);
  font-size: 18.5px;
  font-weight: 650;
}

.b-stages small {
  display: block;
  margin-top: 4px;
  color: var(--b-muted);
  font-family: var(--b-body);
  font-size: 13px;
  font-weight: 500;
}

.b-stages__n {
  display: block;
  margin-bottom: 6px;
  background: var(--b-grad-static);
  background-clip: text;
  color: transparent;
  font-size: 14px;
  font-weight: 800;
}

.b-stages td {
  color: var(--b-soft);
  font-size: 16px;
}

/* ---------- 13 CTA ---------- */
.b-cta {
  padding-top: 40px;
  background: linear-gradient(180deg, var(--b-bg), var(--b-deep));
}

.b-cta__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 72px);
  border: 1px solid rgb(117 251 251 / 30%);
  border-radius: 32px;
  text-align: center;
}

.basis .b-cta__bg {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -2;
  width: 62%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 60%;
  mask-image: linear-gradient(90deg, transparent, #000000 45%);
  transform: scale(1.04);
  transition: transform 2.4s var(--b-ease);
}

.b-cta__panel:hover .b-cta__bg {
  transform: scale(1.09);
}

.b-cta__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      800px 420px at 50% 30%,
      rgb(7 16 31 / 55%),
      rgb(7 16 31 / 92%) 75%
    ),
    linear-gradient(180deg, rgb(7 16 31 / 60%), rgb(7 16 31 / 90%));
}

.b-cta__body {
  max-width: 860px;
  margin-inline: auto;
}

.b-cta .b-lead {
  margin-inline: auto;
}

.b-cta__ask {
  margin-top: 34px;
  color: var(--b-text);
  font-family: var(--b-display);
  font-weight: 650;
}

.b-cta__topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

/* ---------- Workflow form dialog: house styling over the HubSpot v2 embed (css: "" disables HubSpot's own) ---------- */
.b-term {
  position: fixed;
  width: min(620px, calc(100% - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--b-line-2);
  border-radius: 24px;
  background:
    radial-gradient(
      520px 260px at 100% 0%,
      rgb(34 85 245 / 22%),
      transparent 70%
    ),
    linear-gradient(180deg, #0f274a, #0a1628);
  color: var(--b-text);
  font-family: var(--b-body);
  box-shadow: 0 40px 120px -30px rgb(34 85 245 / 60%);
}

.b-term[open] {
  display: flex;
  flex-direction: column;
  animation: b-term-in 320ms var(--b-ease);
}

.b-term::backdrop {
  background: rgb(3 7 15 / 75%);
  backdrop-filter: blur(6px);
}

@keyframes b-term-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
}

.b-term__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--b-line-2);
  border-radius: 50%;
  background: rgb(7 16 31 / 70%);
  color: var(--b-soft);
  cursor: pointer;
  transition:
    border-color var(--b-fast),
    color var(--b-fast),
    transform var(--b-fast) var(--b-ease);
}

.b-term__close:hover {
  border-color: var(--b-cyan);
  color: var(--b-cyan);
  transform: rotate(90deg);
}

.b-term__close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.b-term__body {
  overflow-y: auto;
  padding: clamp(28px, 4.4vw, 44px);
  overscroll-behavior: contain;
}

.b-term__body .b-eyebrow {
  margin-bottom: 12px;
}

.b-term__title {
  padding-right: 40px;
  font-family: var(--b-display);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.b-term__lead {
  margin-top: 12px;
  color: var(--b-soft);
  font-size: 16px;
  line-height: 1.6;
}

.b-term__form {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--b-line);
}

.b-term__status {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--b-muted);
  font-size: 15px;
}

.b-term__spin {
  width: 18px;
  height: 18px;
  border: 2px solid var(--b-line-2);
  border-top-color: var(--b-cyan);
  border-radius: 50%;
  animation: b-term-spin 800ms linear infinite;
}

@keyframes b-term-spin {
  to {
    transform: rotate(360deg);
  }
}

.b-term__fallback {
  margin-top: 16px;
  color: var(--b-soft);
  font-size: 15px;
}

.b-term__fallback a {
  color: var(--b-cyan);
}

.b-term__fallback[hidden] {
  display: none;
}

/* HubSpot v2 markup */
.b-term .b-form fieldset {
  max-width: none !important;
  margin: 0;
  padding: 0;
  border: 0;
}

.b-term .b-form fieldset.form-columns-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.b-term .b-form fieldset .hs-form-field,
.b-term .b-form fieldset.form-columns-2 .hs-form-field {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
}

.b-term .b-form fieldset .input {
  margin-right: 0 !important;
}

.b-term .hs-form-field {
  margin-bottom: 18px;
}

.b-term .hs-form-field > label {
  display: block;
  margin-bottom: 7px;
  color: var(--b-soft);
  font-family: var(--b-display);
  font-size: 14px;
  font-weight: 600;
}

.b-term .hs-form-required {
  margin-left: 3px;
  color: var(--b-cyan);
}

.b-term .hs-field-desc {
  margin: -2px 0 8px;
  color: var(--b-muted);
  font-size: 13px;
}

.b-term .hs-input:not([type="checkbox"], [type="radio"]) {
  width: 100% !important;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--b-line-2);
  border-radius: 12px;
  background: rgb(7 16 31 / 65%);
  color: var(--b-text);
  font-family: var(--b-body);
  font-size: 16px;
  transition:
    border-color var(--b-fast),
    box-shadow var(--b-fast),
    background-color var(--b-fast);
  appearance: none;
}

.b-term textarea.hs-input {
  min-height: 112px;
  resize: vertical;
}

.b-term select.hs-input {
  padding-right: 44px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--b-cyan) 50%),
    linear-gradient(135deg, var(--b-cyan) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 22px) 52%,
    calc(100% - 17px) 52% !important;
  background-size: 5px 5px !important;
  background-repeat: no-repeat !important;
}

.b-term select.hs-input option {
  background: #0a1628;
  color: var(--b-text);
}

.b-term .hs-input::placeholder {
  color: rgb(144 166 200 / 60%);
}

.b-term .hs-input:hover {
  border-color: rgb(117 251 251 / 45%);
}

.b-term .hs-input:focus {
  border-color: var(--b-cyan);
  outline: none;
  background: rgb(12 29 55 / 90%);
  box-shadow: 0 0 0 3px rgb(117 251 251 / 16%);
}

.b-term .hs-input.invalid.error,
.b-term .hs-input.error {
  border-color: #ff8a8a;
}

.b-term .inputs-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.b-term .hs-form-checkbox-display,
.b-term .hs-form-booleancheckbox-display,
.b-term .hs-form-radio-display {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--b-line);
  border-radius: 12px;
  background: rgb(7 16 31 / 45%);
  color: var(--b-soft);
  font-size: 15px;
  cursor: pointer;
  transition:
    border-color var(--b-fast),
    background-color var(--b-fast),
    color var(--b-fast);
}

.b-term .hs-form-radio-display:hover,
.b-term .hs-form-checkbox-display:hover {
  border-color: var(--b-line-2);
  color: var(--b-text);
}

.b-term .hs-form-radio-display:has(input:checked),
.b-term .hs-form-checkbox-display:has(input:checked) {
  border-color: var(--b-cyan);
  background: rgb(117 251 251 / 8%);
  color: var(--b-text);
}

.b-term .hs-form-booleancheckbox-display {
  align-items: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
}

.b-term input[type="checkbox"],
.b-term input[type="radio"] {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--b-cyan);
}

/* Errors sit on the label row (right side) so a failed field takes no extra height. */
.b-term .hs-form-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: baseline;
}

.b-term .hs-form-field > label {
  grid-column: 1;
  grid-row: 1;
}

.b-term .hs-form-field > legend,
.b-term .hs-form-field > .hs-field-desc {
  grid-column: 1 / -1;
}

.b-term .hs-form-field > .input {
  grid-column: 1 / -1;
}

.b-term .hs-error-msgs,
.b-term .hs-error-msgs.inputs-list {
  display: block;
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}

.b-term .hs-error-msgs li {
  margin: 0;
  padding: 0;
}

.b-term .hs-error-msg,
.b-term .hs-main-font-element.hs-error-msg {
  display: block;
  margin: 0;
  color: #ff9d9d;
  font-family: var(--b-display);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.b-term .hs-error-msg[data-short]:not([data-short=""]) {
  font-size: 0;
}

.b-term .hs-error-msg[data-short]:not([data-short=""])::after {
  content: attr(data-short);
  font-size: 12.5px;
}

.b-money:has(+ .hs-input.error) .b-money__view {
  border-color: #ff8a8a;
}

/* Revenue: visible formatted field mirrors the hidden numeric HubSpot input. */
.b-money {
  position: relative;
}

.b-money::before {
  content: "$";
  position: absolute;
  left: 16px;
  top: 50%;
  color: var(--b-cyan);
  font-weight: 600;
  transform: translateY(-50%);
  pointer-events: none;
}

.b-term .b-money .hs-input.b-money__view {
  padding-left: 30px;
  font-variant-numeric: tabular-nums;
}

.b-term .hs_error_rollup {
  display: none;
}

.b-term .legal-consent-container,
.b-term .hs-richtext {
  color: var(--b-muted);
  font-size: 13px;
  line-height: 1.55;
}

.b-term .legal-consent-container a,
.b-term .hs-richtext a {
  color: var(--b-cyan);
}

.b-term .hs-submit .actions {
  margin: 10px 0 0;
  padding: 0;
}

.b-term .hs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--b-grad-static);
  color: #04101f;
  font-family: var(--b-display);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform var(--b-fast) var(--b-ease),
    box-shadow var(--b-fast);
  appearance: none;
}

.b-term .hs-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -14px rgb(117 251 251 / 80%);
}

.b-term .hs-button:focus-visible {
  outline: 2px solid var(--b-cyan);
  outline-offset: 3px;
}

.b-term .submitted-message {
  padding: 20px;
  border: 1px solid rgb(117 251 251 / 35%);
  border-radius: 16px;
  background: rgb(117 251 251 / 6%);
  color: var(--b-text);
  font-size: 16px;
}

html.b-term-lock {
  overflow: hidden;
}

@media (width <= 560px) {
  .b-term {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .b-term__close {
    top: 12px;
    right: 12px;
  }

  .b-term .b-form fieldset.form-columns-2,
  .b-term .inputs-list {
    grid-template-columns: 1fr;
  }
}

/* ---------- Opening + scroll reveals (JS only) ---------- */
.b-js .basis [data-intro] {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
}

.b-js .basis.is-ready [data-intro] {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 620ms var(--b-ease),
    transform 620ms var(--b-ease),
    filter 620ms var(--b-ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}

.b-js .basis [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
}

.b-js .basis [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 760ms var(--b-ease),
    transform 760ms var(--b-ease),
    border-color var(--b-med),
    box-shadow var(--b-med),
    background-color var(--b-med);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.b-js .basis [data-reveal].is-visible:hover {
  transition-delay: 0ms;
}

/* Infinite loops only run while their section is on screen (saves main-thread paint work). */
.b-js
  .basis
  :is(.b-hero, .b-section):not(.is-live)
  :is(.b-kw, .b-metric dt, .b-orb__float, .b-marquee__rail) {
  animation-play-state: paused;
}

/* Bento paper bars fill when visible */
.b-js .basis .b-vis--prepare:not(.is-on) .b-paper__row i {
  --fill: 0;
}

/* ---------- Responsive ---------- */
@media (width <= 1080px) {
  .b-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 960px) {
  .b-hero__grid {
    grid-template-columns: 1fr;
  }

  .b-duo {
    justify-self: center;
    width: min(440px, 92%);
  }

  .b-how__grid {
    grid-template-columns: 1fr;
  }

  .b-how__stage {
    min-height: 340px;
  }

  .b-case__inner {
    grid-template-columns: 1fr;
  }

  .b-pair {
    grid-template-columns: 1fr;
  }

  .b-pair__link {
    margin-block: -34px;
    z-index: 1;
  }

  .b-phase__body {
    grid-template-columns: 1fr;
  }

  .b-phase__art {
    max-width: 460px;
  }

  .b-measures,
  .b-controls {
    grid-template-columns: 1fr;
  }
}

@media (width <= 760px) {
  .basis {
    font-size: 16px;
  }

  .b-signal {
    flex-wrap: wrap;
    border-radius: 22px;
  }

  .b-pains {
    grid-template-columns: 1fr;
  }

  .b-pain,
  .b-pain:nth-child(even) {
    grid-template-columns: 48px 1fr;
    padding: 28px 4px;
    border-right: 0;
  }

  .b-acc__inner {
    padding-left: 60px;
  }

  .b-how__stage {
    min-height: 320px;
  }

  .b-paper__row {
    grid-template-columns: 1fr auto;
  }

  .b-paper__row i {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .b-metrics {
    gap: 12px;
  }

  .b-metric {
    padding: 22px 14px;
  }

  .b-job__inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .b-close__row {
    grid-template-columns: 1fr auto;
    row-gap: 8px;
  }

  .b-close__track,
  .b-close__notegrid {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 3px;
  }

  .b-close__row--note > span:first-child,
  .b-close__row--note .b-close__val--muted {
    display: none;
  }

  .b-close__track i {
    height: 24px;
    border-radius: 3px;
  }

  .b-close__brace b {
    font-size: 12.5px;
  }

  .b-phase__tab {
    padding: 18px;
  }

  .b-phase__body {
    padding: 0 18px 22px;
  }

  .b-phase__title {
    font-size: 18px;
  }

  .b-step__dl {
    grid-template-columns: 1fr;
  }

  .b-fitcard {
    grid-template-columns: 1fr;
  }

  .b-fitcol--no {
    border-left: 0;
    border-top: 1px solid var(--b-line);
  }

  .b-sources li {
    font-size: 13px;
  }

  .b-metrics--secondary {
    grid-template-columns: 1fr;
  }

  .b-proof > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  /* Stage table stacks into labelled rows. */
  .b-stages thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .b-stages tr,
  .b-stages tbody th,
  .b-stages td {
    display: block;
    width: auto;
  }

  .b-stages tbody tr + tr {
    border-top: 1px solid var(--b-line-2);
  }

  .b-stages tbody th {
    padding: 20px 20px 6px;
    border-top: 0;
  }

  .b-stages td {
    padding: 10px 20px;
    border-top: 0;
  }

  .b-stages td:last-child {
    padding-bottom: 20px;
  }

  .b-stages td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--b-cyan);
    font-family: var(--b-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .b-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .b-btn {
    justify-content: center;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .basis *,
  .basis *::before,
  .basis *::after {
    animation: none !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .b-js .basis [data-intro],
  .b-js .basis [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ---------- 2026-10-27 scope narrowing: credentials, team, tiers, helps, optional ---------- */
.b-gl {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.b-hero .b-display {
  max-width: 720px;
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  line-height: 1.04;
}

/* Hero credentials: the four proof points the document keeps prominent */
.b-creds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  max-width: 620px;
  margin-top: 32px;
  border-top: 1px solid var(--b-line-2);
}

.b-creds li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--b-line);
}

.b-creds .b-gl {
  margin-top: 2px;
  color: var(--b-cyan);
}

.b-creds span {
  display: grid;
  gap: 2px;
  color: var(--b-muted);
  font-size: 13.5px;
  line-height: 1.4;
}

.b-creds b {
  color: var(--b-text);
  font-family: var(--b-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Team: core roles vs roles added by scope */
.b-team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1080px;
  margin: clamp(32px, 4vw, 48px) auto 0;
  overflow: hidden;
  border: 1px solid var(--b-line-2);
  border-radius: 20px;
  background: rgb(12 29 55 / 55%);
}

.b-team__col {
  padding: clamp(20px, 2.6vw, 30px);
}

.b-team__col--add {
  border-left: 1px solid var(--b-line);
  background: rgb(5 11 22 / 45%);
}

.b-team h3 {
  margin-bottom: 14px;
  color: var(--b-cyan);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.b-team__col--add h3 {
  color: var(--b-muted);
}

.b-team ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.b-team li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  border: 1px solid var(--b-line-2);
  border-radius: 999px;
  color: var(--b-text);
  font-size: 14.5px;
}

.b-team li .b-gl {
  width: 17px;
  height: 17px;
  color: var(--b-cyan);
}

.b-team__col--add li {
  border-style: dashed;
  color: var(--b-soft);
}

.b-team__col--add li .b-gl {
  color: var(--b-muted);
}

/* Trust: shared-responsibility tiers */
.b-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1160px;
  margin-inline: auto;
}

.b-tier {
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--b-line);
  border-radius: 20px;
  background: linear-gradient(180deg, rgb(12 29 55 / 80%), rgb(10 22 40 / 60%));
}

.b-tier--wiss {
  border-color: rgb(117 251 251 / 36%);
  background:
    radial-gradient(
      420px 220px at 100% 0%,
      rgb(34 85 245 / 24%),
      transparent 70%
    ),
    linear-gradient(180deg, rgb(12 29 55 / 90%), rgb(10 22 40 / 70%));
}

.b-tier header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--b-line);
}

.b-tier__ico {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--b-line-2);
  border-radius: 12px;
  color: var(--b-cyan);
}

.b-tier__who {
  color: var(--b-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.b-tier h3 {
  font-size: 20px;
  line-height: 1.25;
}

.b-tier ul {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.b-tier li {
  position: relative;
  padding-left: 18px;
  color: var(--b-soft);
  font-size: 15.5px;
  line-height: 1.5;
}

.b-tier li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--b-grad-static);
}

/* What Wiss helps clients do */
.b-helps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
  max-width: 1040px;
  margin-inline: auto;
}

.b-helps li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid var(--b-line-2);
  color: var(--b-soft);
  font-size: 16.5px;
}

.b-helps li > .b-gl {
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 10px;
  background: rgb(117 251 251 / 8%);
  color: var(--b-cyan);
}

.b-helps__opt {
  grid-column: 1 / -1;
  color: var(--b-muted) !important;
}

.b-helps__opt > .b-gl {
  border: 1px dashed var(--b-line-2);
  background: none !important;
  color: var(--b-muted) !important;
}

.b-helps__opt b {
  color: var(--b-text);
  font-weight: 650;
}

/* Optional expanded support (deployment section) */
.b-optional {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  margin-top: 24px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px dashed var(--b-line-2);
  border-radius: 22px;
  background: rgb(5 11 22 / 50%);
}

.b-tag {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--b-line-2);
  border-radius: 999px;
  color: var(--b-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.b-optional h3 {
  margin-top: 12px;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
}

.b-optional__head p:last-child {
  margin-top: 8px;
  color: var(--b-muted);
  font-size: 15.5px;
}

.b-optional__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
}

.b-optional__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--b-soft);
  font-size: 15px;
}

.b-optional__list .b-gl {
  color: var(--b-sky);
}

@media (width <= 999px) {
  .b-tiers {
    grid-template-columns: 1fr;
    max-width: 640px;
  }

  .b-optional {
    grid-template-columns: 1fr;
  }
}

@media (width <= 760px) {
  .b-team,
  .b-helps {
    grid-template-columns: 1fr;
  }

  .b-team__col--add {
    border-left: 0;
    border-top: 1px solid var(--b-line);
  }
}

@media (width <= 480px) {
  .b-creds,
  .b-optional__list {
    grid-template-columns: 1fr;
  }
}

/* ---------- 2026-10-27 hero duo: two marks, opening animation ---------- */
.b-duo {
  --d: 0.56;

  position: relative;
  justify-self: end;
  width: min(520px, 100%);
  margin: 0;
}

.b-duo__pair {
  position: relative;
  aspect-ratio: 1.74;
  isolation: isolate;
}

.b-duo__glow {
  position: absolute;
  inset: 4% 18%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgb(34 85 245 / 55%),
    rgb(117 251 251 / 8%) 70%,
    transparent
  );
  filter: blur(36px);
  z-index: -1;
}

.b-duo__c {
  position: absolute;
  top: 0;
  display: grid;
  place-items: center;
  width: calc(var(--d) * 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  mix-blend-mode: screen;
}

.b-duo__c::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 22%, rgb(255 255 255 / 16%), transparent 42%),
    linear-gradient(150deg, #2a4fd8 0%, #1b2f8f 55%, #121d5c 100%);
  box-shadow:
    inset 0 0 0 1.5px rgb(117 251 251 / 42%),
    inset 0 -18px 40px rgb(5 11 22 / 35%),
    0 30px 70px -30px rgb(34 85 245 / 90%);
  opacity: 0.86;
}

.b-duo__c--wiss {
  left: 0;
}

.b-duo__c--basis {
  right: 0;
}

.b-duo__c img,
.b-duo__c svg {
  position: relative;
  width: 40%;
  height: auto;
  filter: drop-shadow(0 6px 18px rgb(5 11 22 / 45%));
}

.b-duo__c--basis svg {
  width: 37%;
}

.b-duo__lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(22px, 3vw, 34px);
  color: var(--b-cyan);
  font-size: 20px;
}

.b-duo__lockup img {
  width: auto;
  height: 40px;
}

.basis .b-duo__lockup .b-duo__basis {
  height: 27px;
  filter: brightness(0) invert(1);
}

/* Opening: the circles start apart and small, glide together, the overlap brightens, then the lockup rises. */
@keyframes b-duo-in-l {
  from {
    opacity: 0;
    transform: translate3d(32%, 6%, 0) scale(0.82);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes b-duo-in-r {
  from {
    opacity: 0;
    transform: translate3d(-32%, -6%, 0) scale(0.82);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes b-duo-mark {
  from {
    opacity: 0;
    transform: scale(0.6) rotate(-12deg);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes b-duo-glow {
  from {
    opacity: 0;
    transform: scale(0.6);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes b-duo-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    filter: blur(6px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes b-duo-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -7px, 0);
  }
}

.b-js .basis:not(.is-ready) .b-duo__c,
.b-js .basis:not(.is-ready) .b-duo__glow,
.b-js .basis:not(.is-ready) .b-duo__lockup {
  opacity: 0;
}

.b-js .basis.is-ready .b-duo__c--wiss {
  animation: b-duo-in-l 1300ms var(--b-ease) 250ms both;
}

.b-js .basis.is-ready .b-duo__c--basis {
  animation: b-duo-in-r 1300ms var(--b-ease) 250ms both;
}

.b-js .basis.is-ready .b-duo__c :is(img, svg) {
  animation: b-duo-mark 900ms var(--b-ease) 850ms both;
}

.b-js .basis.is-ready .b-duo__glow {
  animation: b-duo-glow 1600ms ease-out 700ms both;
}

.b-js .basis.is-ready .b-duo__lockup {
  animation: b-duo-rise 900ms var(--b-ease) 1250ms both;
}

.b-js .basis.is-ready .b-duo__pair {
  animation: b-duo-float 8s ease-in-out 2.4s infinite;
}

.b-js .basis .b-hero:not(.is-live) .b-duo__pair {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .b-js
    .basis
    .b-duo
    :is(.b-duo__c, .b-duo__glow, .b-duo__lockup, .b-duo__pair, img, svg) {
    opacity: 1;
    animation: none !important;
  }
}

@media (width <= 520px) {
  .b-duo__lockup img {
    height: 32px;
  }

  .basis .b-duo__lockup .b-duo__basis {
    height: 22px;
  }
}

/* ---------- 2026-10-27 inline closing form ---------- */
.b-cta__body {
  max-width: 980px;
}

.b-term--inline {
  position: relative;
  display: block;
  width: min(760px, 100%);
  max-height: none;
  margin: clamp(32px, 4vw, 44px) auto 0;
  padding: clamp(22px, 3.6vw, 40px);
  overflow: visible;
  text-align: left;
  box-shadow: 0 30px 90px -40px rgb(34 85 245 / 70%);
}

.b-term--inline .b-term__lead {
  margin-top: 0;
  text-align: center;
}

.b-term--inline .b-term__form {
  margin-top: 22px;
}

.b-term--inline .b-term__status {
  justify-content: center;
  min-height: 120px;
}

.b-term--inline .b-term__fallback {
  margin-top: 12px;
  text-align: center;
}

@media (width <= 560px) {
  .b-term.b-term--inline {
    width: 100%;
    height: auto;
    max-height: none;
    margin: 28px 0 0;
    padding: 20px 16px;
    border: 1px solid var(--b-line-2);
    border-radius: 20px;
  }

  .b-cta__panel {
    padding-inline: 14px;
  }
}

/* ---------- 2026-10-27 hero lockup ---------- */
.b-duo__lockup {
  gap: clamp(10px, 1.6vw, 16px);
}

/* The trimmed Wisslabs art keeps the glow above the i: letters fill the lower 74%, so lift it to centre the letters. */
.basis .b-duo__lockup .b-duo__wl {
  height: 36px;
  transform: translateY(-4.5px);
}

.basis .b-duo__lockup .b-duo__basis {
  height: 25px;
}

.b-duo__x {
  display: block;
  flex: none;
  width: 76px;
}

.b-duo__x svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (width <= 520px) {
  .basis .b-duo__lockup .b-duo__wl {
    height: 29px;
    transform: translateY(-3.5px);
  }

  .basis .b-duo__lockup .b-duo__basis {
    height: 20px;
  }

  .b-duo__x {
    width: 60px;
  }
}

/* ---------- 2026-10-27 shared form: pop-up + compact layout ---------- */

/* Pop-up: sized to its content, never taller than the screen. */
.b-term.b-term--modal {
  width: min(720px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
}

.b-term--modal .b-term__body {
  padding: clamp(22px, 3vw, 32px);
}

.b-term--modal .b-term__title {
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
}

.b-term--modal .b-term__lead {
  margin-top: 8px;
  font-size: 15px;
}

.b-term__slot .b-term__form {
  margin-top: 18px;
  padding-top: 18px;
}

.b-term__slot .b-term__status {
  min-height: 0;
}

.b-term.b-term--inline {
  width: min(820px, 100%);
}

/* One field grid: fieldsets dissolve so every field flows into two columns; choice groups and submit span both. */
.b-term .b-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
}

.b-term .b-form fieldset,
.b-term .b-form fieldset.form-columns-1,
.b-term .b-form fieldset.form-columns-2 {
  display: contents;
}

.b-term
  .b-form
  :is(
    .hs-fieldtype-radio,
    .hs-fieldtype-checkbox,
    .hs-fieldtype-textarea,
    .hs_submit,
    .hs_error_rollup,
    .legal-consent-container,
    .hs-richtext
  ) {
  grid-column: 1 / -1;
}

.b-term .hs-form-field {
  margin-bottom: 12px;
}

.b-term .hs-form-field > label {
  margin-bottom: 5px;
  font-size: 13.5px;
}

.b-term .hs-input:not([type="checkbox"], [type="radio"]) {
  min-height: 44px;
  padding: 10px 14px;
  font-size: 15.5px;
}

.b-term .hs-fieldtype-radio .inputs-list,
.b-term .hs-fieldtype-checkbox .inputs-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.b-term .hs-form-radio-display,
.b-term .hs-form-checkbox-display {
  padding: 9px 12px;
  font-size: 14.5px;
}

.b-term .hs_submit {
  margin-top: 4px;
}

/* Keep room for the "$" prefix after the tighter input padding above. */
.b-term
  .b-money
  .hs-input.b-money__view:not([type="checkbox"], [type="radio"]) {
  padding-left: 30px;
}

@media (width <= 560px) {
  .b-term.b-term--modal {
    width: 100%;
    max-height: 100dvh;
  }

  .b-term--modal .b-term__body {
    padding: 18px 16px 20px;
  }

  .b-term .b-form {
    column-gap: 10px;
  }

  .b-term .b-form :is(.hs_email, .hs_company, [class*="industry"]) {
    grid-column: 1 / -1;
  }

  .b-term .hs-form-field {
    margin-bottom: 10px;
  }

  .b-term .hs-input:not([type="checkbox"], [type="radio"]) {
    min-height: 42px;
    padding: 9px 12px;
  }

  .b-term .hs-fieldtype-radio .inputs-list,
  .b-term .hs-fieldtype-checkbox .inputs-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .b-term .hs-form-radio-display,
  .b-term .hs-form-checkbox-display {
    padding: 7px 10px;
    font-size: 13.5px;
    line-height: 1.3;
  }

  .b-term--modal .b-term__body > .b-eyebrow {
    display: none;
  }

  .b-term--modal .b-term__title {
    padding-right: 48px;
    font-size: 1.35rem;
  }

  .b-term--modal .b-term__lead {
    font-size: 14px;
    line-height: 1.45;
  }

  .b-term__slot .b-term__form {
    margin-top: 12px;
    padding-top: 12px;
  }
}

/* ---------- 2026-10-27 hero headline: two lines + larger year ---------- */
.b-hero__copy {
  container-type: inline-size;
}

/* The longest line ("accounting environments") is ~11.6em wide in Inter Tight at this tracking,
   so 8.2cqi keeps each line inside the copy column at every width; capped for very wide screens. */
.b-hero .b-display {
  max-width: none;
  font-size: min(8.2cqi, 4.1rem);
  line-height: 1.04;
}

.b-h1__line {
  display: block;
  white-space: nowrap;
}

.b-hero .b-display .b-h1__since {
  display: inline-block;
  margin-top: 0.06em;
  font-size: 1.32em;
  line-height: 1.02;
}

/* ---------- 2026-10-27 hero polish ---------- */
.b-hero .b-crumbs {
  margin-bottom: clamp(24px, 3vw, 36px);
}

@media (width >= 961px) {
  .b-hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(32px, 5vw, 72px);
  }
}

/* Headline: slightly looser tracking and leading so the two sans lines breathe, and a year that is larger
   but sits in the same rhythm (tighter top, matching leading) instead of floating as a separate block. */
.b-hero .b-display {
  font-size: min(7.9cqi, 4rem);
  letter-spacing: -0.026em;
  line-height: 1.07;
}

.b-hero .b-display .b-h1__since {
  margin-top: 0;
  font-size: 1.2em;
  line-height: 1.05;
  letter-spacing: -0.005em;
}

.b-hero .b-lead {
  max-width: 560px;
  margin-top: 18px;
}

.b-hero__copy .b-actions {
  margin-top: 28px;
}

/* Credentials: a light 2x2 (no table rules, one vertical divider) instead of a heavy bordered table. */
.b-hero .b-creds {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 0;
  max-width: 600px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--b-line);
}

.b-hero .b-creds li {
  gap: 10px;
  padding: 0 16px 0 0;
  border-bottom: 0;
}

.b-hero .b-creds li:nth-child(even) {
  padding: 0 0 0 22px;
  border-left: 1px solid var(--b-line);
}

.b-hero .b-creds .b-gl {
  width: 18px;
  height: 18px;
}

.b-hero .b-creds b {
  font-size: 15px;
}

.b-hero .b-creds span {
  font-size: 12.5px;
  line-height: 1.4;
}

/* Visual: a touch smaller and centred against the copy block. */
@media (width >= 961px) {
  .b-duo {
    justify-self: center;
    width: min(480px, 100%);
  }
}

/* Tablet/phone: the visual stacks under the copy, centred and sized to the screen (a later base rule pinned it right). */
@media (width <= 960px) {
  .b-duo {
    justify-self: center;
    width: min(440px, 92%);
    margin-top: 8px;
  }
}

@media (width <= 480px) {
  .b-hero .b-creds li:nth-child(even) {
    padding-left: 14px;
  }

  .b-hero .b-creds b {
    font-size: 13.5px;
  }
}

/* 2026-10-30 checklist: process fallback and readable scope qualifications. */
.b-process .b-approve {
  margin: 0 0 24px;
  list-style: none;
}

.b-process .b-approve li {
  flex-wrap: wrap;
  gap: 4px 16px;
}

.b-process .b-approve b {
  font-size: clamp(15px, 1.3vw, 18px);
}

.b-process .b-approve span {
  color: var(--b-soft);
}

.b-stack__scope {
  max-width: 760px;
  margin: -8px auto 24px;
  color: var(--b-muted);
  font-size: 14px;
}

.b-hero .b-display > .b-kw {
  display: block;
}

@media (width <= 560px) {
  .b-process {
    padding: 22px 18px;
  }

  .b-process .b-approve li {
    padding: 12px 14px;
  }

  .b-hero .b-display {
    font-size: clamp(26px, 7.9cqi, 38px);
  }
}

/* Restore the original visual system; accommodate approved longer content. */
.b-reported--measures .b-metric dt {
  font-size: clamp(23px, 2.5vw, 34px);
  line-height: 1.15;
}

.b-reported--measures .b-metric dd {
  max-width: 30ch;
  margin-inline: auto;
}

.b-timing {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  gap: 24px 48px;
  align-items: center;
  margin-top: 40px;
  padding: 28px 0;
  border-top: 1px solid var(--b-line-2);
  border-bottom: 1px solid var(--b-line);
  background: radial-gradient(
    ellipse at left,
    rgb(117 251 251 / 4.5%),
    transparent 70%
  );
}

.b-timing__title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.b-timing__title .b-gl {
  width: 36px;
  height: 36px;
  flex: none;
  color: var(--b-cyan);
}

.b-timing h3 {
  font-size: clamp(21px, 2vw, 28px);
}

.b-timing p {
  margin: 0;
  color: var(--b-soft);
  line-height: 1.65;
  max-width: 62ch;
}

.b-scope-note {
  color: var(--b-soft);
  margin-top: 20px;
  max-width: 76ch;
  margin-inline: auto;
  line-height: 1.65;
}

.b-term .b-form .hs_industry {
  width: 100%;
}

@media (width <= 700px) {
  .b-timing {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 24px 0;
  }
}

/* ---------- v2: custom deployment form ---------- */
.b-form__opt {
  margin-left: 6px;
  color: var(--b-muted);
  font-size: 12px;
  font-weight: 500;
}

.b-term .b-form .hs-fieldtype-textarea textarea.hs-input {
  min-height: 84px;
  line-height: 1.5;
}

.b-form__hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.b-term .b-form .b-form__legal {
  grid-column: 1 / -1;
  margin: 2px 0 14px;
  color: var(--b-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.b-term .b-form .b-form__legal a {
  color: var(--b-soft);
}

.b-term .b-form .hs-error-msgs[hidden] {
  display: none;
}

.b-term .b-form .hs-button:disabled {
  cursor: progress;
  opacity: 0.7;
}

.b-form__status {
  grid-column: 1 / -1;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--b-line-2);
  border-radius: 14px;
  background: rgb(117 251 251 / 6%);
  color: var(--b-text);
  font-size: 14.5px;
}

.b-form__status.is-pending {
  border-color: rgb(255 214 102 / 45%);
  background: rgb(255 214 102 / 7%);
}

.b-form__status[hidden] {
  display: none;
}

/* Compact grid: names and email/company in halves, the three dropdowns share one row,
   ERP choices wrap as chips, and the description box is short. */
.b-term.b-term--modal {
  width: min(760px, calc(100% - 32px));
}

.b-term .b-form.b-form {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.b-term .b-form > .hs-form-field {
  grid-column: span 3;
}

.b-term .b-form > :is(.hs_industry, .hs_revenue, .hs_team) {
  grid-column: span 2;
}

.b-term
  .b-form
  > :is(
    .hs-fieldtype-radio,
    .hs-fieldtype-textarea,
    .b-form__legal,
    .hs_submit,
    .b-form__status
  ) {
  grid-column: 1 / -1;
}

.b-term .b-form .hs-fieldtype-radio .inputs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.b-term .b-form .hs-form-radio-display {
  padding: 8px 13px;
  font-size: 14px;
}

.b-term .b-form .hs-fieldtype-textarea textarea.hs-input {
  min-height: 64px;
}

@media (width <= 560px) {
  .b-term .b-form.b-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .b-term .b-form > .hs-form-field,
  .b-term .b-form > :is(.hs_revenue, .hs_team) {
    grid-column: span 1;
  }

  .b-term
    .b-form
    > :is(
      .hs_email,
      .hs_company,
      .hs_industry,
      .hs_revenue,
      .hs_team,
      .hs-fieldtype-radio,
      .hs-fieldtype-textarea,
      .b-form__legal,
      .hs_submit,
      .b-form__status
    ) {
    grid-column: 1 / -1;
  }

  .b-term .b-form .hs-form-radio-display {
    padding: 7px 11px;
    font-size: 13.5px;
  }

  /* Half-width fields: the error sits under the label instead of beside it. */
  .b-term .b-form .hs-error-msgs {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: -2px 0 4px;
    text-align: left;
  }

  .b-term .b-form .hs-error-msg {
    white-space: normal;
  }
}

/* ---------- v2 design: section 02 link ---------- */
.b-textlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 6px 0;
  color: var(--b-cyan);
  font-family: var(--b-display);
  font-size: 15.5px;
  font-weight: 650;
  text-decoration: none;
  border-bottom: 1px solid rgb(117 251 251 / 35%);
  transition:
    color var(--b-fast),
    border-color var(--b-fast),
    gap var(--b-fast) var(--b-ease);
}

.b-textlink svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.b-textlink:hover,
.b-textlink:focus-visible {
  gap: 14px;
  color: var(--b-text);
  border-color: var(--b-text);
}

/* ---------- v2 design: workflow showcase ---------- */
.b-wf {
  --wf-dur: 5600ms;
  --wf-r: 14px;

  margin: 0;
  padding: 10px;
  border: 1px solid var(--b-line-2);
  border-radius: 24px;
  background:
    radial-gradient(
      600px 300px at 100% 0%,
      rgb(34 85 245 / 18%),
      transparent 70%
    ),
    linear-gradient(180deg, rgb(12 29 55 / 90%), rgb(7 16 31 / 90%));
  box-shadow: 0 40px 100px -50px rgb(34 85 245 / 80%);
}

.b-wf .b-gl {
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
}

.b-wf .b-gl--fill {
  fill: currentcolor;
  stroke: none;
}

/* segmented step control: each segment fills while its step plays */
.b-wf__segs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.b-wf__seg {
  display: grid;
  gap: 6px;
  padding: 10px 12px 12px;
  border: 1px solid transparent;
  border-radius: var(--wf-r);
  background: rgb(5 11 22 / 45%);
  color: var(--b-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--b-fast),
    border-color var(--b-fast),
    color var(--b-fast);
}

.b-wf__seg:hover {
  color: var(--b-soft);
}

.b-wf__seg[aria-selected="true"] {
  border-color: var(--b-line-2);
  background: rgb(15 39 74 / 75%);
  color: var(--b-text);
}

.b-wf__seg:focus-visible {
  outline: 2px solid var(--b-cyan);
  outline-offset: 2px;
}

.b-wf__seg-n {
  color: var(--b-cyan);
  font-family: var(--b-display);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.b-wf__seg-t {
  font-family: var(--b-display);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.25;
}

.b-wf__seg-bar {
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: rgb(255 255 255 / 8%);
}

.b-wf__seg-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--b-cyan), var(--b-blue));
}

.b-wf__seg.is-done .b-wf__seg-bar i {
  width: 100%;
}

.b-wf__seg[aria-selected="true"] .b-wf__seg-bar i {
  animation: b-wf-fill var(--wf-dur) linear forwards;
}

.b-wf.is-paused .b-wf__seg[aria-selected="true"] .b-wf__seg-bar i,
.b-wf.is-static .b-wf__seg[aria-selected="true"] .b-wf__seg-bar i {
  animation-play-state: paused;
}

.b-wf.is-static .b-wf__seg[aria-selected="true"] .b-wf__seg-bar i {
  animation: none;
  width: 100%;
}

@keyframes b-wf-fill {
  to {
    width: 100%;
  }
}

/* panel */
.b-wf__panel {
  border: 1px solid var(--b-line);
  border-radius: 18px;
  background: rgb(5 11 22 / 55%);
  overflow: hidden;
}

/* All panels share one grid cell, so the card always takes the tallest step's height (no jump while playing). */
.b-wf__stack {
  display: grid;
}

.b-wf__panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-rows: 1fr auto;
}

/* The Wisslabs base sets [hidden] { display: none !important }; keep hidden panels in the grid cell but invisible. */
.b-wf .b-wf__panel[hidden] {
  display: grid !important;
  visibility: hidden;
}

.b-wf__panel.is-in .b-wf__viz {
  animation: b-wf-in 480ms var(--b-ease) both;
}

@keyframes b-wf-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.b-wf__viz {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 296px;
  padding: 22px;
}

.b-wf__foot {
  min-height: 74px;
}

.b-wf__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--b-line);
}

.b-wf__foot p {
  margin: 0;
  color: var(--b-soft);
  font-size: 14.5px;
  line-height: 1.5;
}

.b-wf__owner {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--b-line-2);
  border-radius: 999px;
  color: var(--b-text);
  font-family: var(--b-display);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.b-wf__owner .b-gl {
  width: 15px;
  height: 15px;
  color: var(--b-cyan);
}

/* 01 sources + beams */
.b-wf__viz--src {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px 64px;
}

.b-wf__beams {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.b-wf__srcs {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  max-width: 220px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.b-wf__src {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--b-line-2);
  border-radius: 12px;
  background: #0a1628;
  color: var(--b-text);
  font-family: var(--b-display);
  font-size: 14px;
  font-weight: 600;
}

.b-wf__src .b-gl {
  color: var(--b-cyan);
}

.b-wf__hub {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin-right: 12px;
  border: 1px solid rgb(117 251 251 / 45%);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #2a4fd8, #13246b 70%);
  box-shadow:
    0 0 0 8px rgb(34 85 245 / 12%),
    0 20px 50px -14px rgb(34 85 245 / 90%);
}

.b-wf__hub-mark {
  width: 38px;
  height: 38px;
  fill: #ffffff;
}

.b-wf__hub-ring {
  position: absolute;
  inset: -9px;
  border: 1px solid rgb(117 251 251 / 35%);
  border-radius: 50%;
  animation: b-wf-ring 2.8s ease-out infinite;
}

@keyframes b-wf-ring {
  from {
    opacity: 0.9;
    transform: scale(0.92);
  }

  to {
    opacity: 0;
    transform: scale(1.25);
  }
}

.b-wf__lock {
  position: absolute;
  right: 22px;
  bottom: 18px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--b-muted);
  font-size: 12.5px;
}

.b-wf__lock .b-gl {
  width: 14px;
  height: 14px;
  color: var(--b-cyan);
}

/* 02 prepare bars */
.b-wf__bars {
  display: grid;
  gap: 16px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.b-wf__bars li {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 150px;
  gap: 16px;
  align-items: center;
}

.b-wf__lbl {
  color: var(--b-text);
  font-family: var(--b-display);
  font-size: 14px;
  font-weight: 600;
}

.b-wf__track {
  height: 8px;
  overflow: hidden;
  border-radius: 8px;
  background: rgb(255 255 255 / 7%);
}

.b-wf__track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--b-blue),
    var(--b-sky) 60%,
    var(--b-cyan)
  );
  box-shadow: 0 0 14px rgb(117 251 251 / 35%);
}

.b-wf__clip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--b-muted);
  font-size: 12.5px;
  opacity: 0;
  transform: translateX(-4px);
}

.b-wf__clip .b-gl {
  width: 14px;
  height: 14px;
  color: var(--b-cyan);
}

.b-wf__panel.is-in .b-wf__track i {
  animation: b-wf-bar 900ms var(--b-ease) calc(250ms + var(--i) * 260ms)
    forwards;
}

.b-wf__panel.is-in .b-wf__clip {
  animation: b-wf-pop 360ms var(--b-ease) calc(1000ms + var(--i) * 260ms)
    forwards;
}

@keyframes b-wf-bar {
  to {
    width: 100%;
  }
}

@keyframes b-wf-pop {
  to {
    opacity: 1;
    transform: none;
  }
}

/* 03 review queue */
.b-wf__queue {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.b-wf__queue li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--b-line);
  border-radius: 12px;
  background: #0a1628;
}

.b-wf__panel.is-in .b-wf__queue li {
  animation: b-wf-pop-in 420ms var(--b-ease) calc(150ms + var(--i) * 140ms) both;
}

@keyframes b-wf-pop-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.b-wf__ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgb(117 251 251 / 8%);
  color: var(--b-cyan);
}

.b-wf__queue li.is-warn {
  border-color: rgb(255 200 107 / 35%);
}

.b-wf__queue li.is-warn .b-wf__ico {
  background: rgb(255 200 107 / 10%);
  color: #ffc86b;
}

.b-wf__pill {
  padding: 4px 10px;
  border: 1px solid var(--b-line-2);
  border-radius: 999px;
  color: var(--b-soft);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.b-wf__pill--warn {
  border-color: rgb(255 200 107 / 45%);
  color: #ffd897;
}

.b-wf__spark {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
}

.b-wf__spark i {
  width: 6px;
  height: calc(var(--h) * 100%);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--b-cyan), var(--b-blue));
  transform-origin: bottom;
}

.b-wf__panel.is-in .b-wf__spark i {
  animation: b-wf-grow 520ms var(--b-ease) calc(700ms + var(--i) * 90ms) both;
}

@keyframes b-wf-grow {
  from {
    transform: scaleY(0.1);
  }
}

/* 04 approval track */
.b-wf__viz--app {
  display: grid;
  align-content: center;
  gap: 26px;
}

.b-wf__trackwrap {
  position: relative;
}

.b-wf__track4 {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.b-wf__line {
  position: absolute;
  top: 17px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: rgb(255 255 255 / 8%);
}

.b-wf__line i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--b-cyan), var(--b-blue));
}

.b-wf__track4 li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.b-wf__dot {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--b-line-2);
  border-radius: 50%;
  background: #0a1628;
  color: transparent;
}

.b-wf__dot .b-gl {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}

.b-wf__track4 .b-wf__lbl {
  font-size: 13px;
}

.b-wf__panel.is-in .b-wf__line i {
  animation: b-wf-bar 1600ms var(--b-ease) 200ms forwards;
}

.b-wf__panel.is-in .b-wf__dot {
  animation: b-wf-check 380ms var(--b-ease) calc(250ms + var(--i) * 420ms)
    forwards;
}

@keyframes b-wf-check {
  to {
    border-color: transparent;
    background: linear-gradient(145deg, #2255f5, #1b3fbf);
    color: #ffffff;
    box-shadow: 0 0 0 5px rgb(34 85 245 / 18%);
  }
}

.b-wf__final {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: center;
  margin: 0;
  padding: 12px 18px;
  border: 1px solid rgb(117 251 251 / 35%);
  border-radius: 14px;
  background: rgb(117 251 251 / 6%);
  opacity: 0;
}

.b-wf__final .b-gl {
  width: 22px;
  height: 22px;
  color: var(--b-cyan);
}

.b-wf__final span {
  display: grid;
}

.b-wf__final b {
  font-family: var(--b-display);
  font-size: 15px;
}

.b-wf__final small {
  color: var(--b-muted);
  font-size: 12.5px;
}

.b-wf__panel.is-in .b-wf__final {
  animation: b-wf-pop 420ms var(--b-ease) 2000ms forwards;
}

/* static (reduced motion / no JS): show the finished state */
.b-wf.is-static .b-wf__track i,
.b-wf.is-static .b-wf__line i {
  width: 100%;
}

.b-wf.is-static .b-wf__clip,
.b-wf.is-static .b-wf__final {
  opacity: 1;
  transform: none;
}

.b-wf.is-static .b-wf__dot {
  border-color: transparent;
  background: linear-gradient(145deg, #2255f5, #1b3fbf);
  color: #ffffff;
}

.b-wf.is-static .b-wf__hub-ring {
  animation: none;
}

html:not(.b-js) .b-wf__panel[hidden] {
  display: block;
}

@media (width <= 640px) {
  .b-wf__segs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .b-wf__seg {
    padding: 8px 8px 10px;
  }

  .b-wf__seg-t {
    display: none;
  }

  .b-wf__viz {
    min-height: 290px;
    padding: 18px 14px;
  }

  .b-wf__foot {
    min-height: 112px;
  }

  .b-wf__viz--src {
    gap: 16px 28px;
  }

  .b-wf__hub {
    width: 64px;
    height: 64px;
    margin-right: 4px;
  }

  .b-wf__hub-mark {
    width: 28px;
    height: 28px;
  }

  .b-wf__bars li {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
  }

  .b-wf__bars .b-wf__track {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .b-wf__foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .b-wf *,
  .b-textlink {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- v2 design: deployment timing (original title + sentence, restyled) ---------- */
.b-timing.b-timing--v2 {
  position: relative;
  grid-template-columns: minmax(220px, 0.62fr) minmax(0, 1.38fr);
  gap: 20px 40px;
  padding: clamp(22px, 2.8vw, 32px) clamp(22px, 3vw, 36px)
    clamp(22px, 2.8vw, 32px) clamp(26px, 3.2vw, 40px);
  border: 1px solid var(--b-line-2);
  border-radius: 20px;
  background:
    radial-gradient(
      420px 200px at 0% 50%,
      rgb(117 251 251 / 8%),
      transparent 70%
    ),
    linear-gradient(180deg, rgb(12 29 55 / 70%), rgb(7 16 31 / 70%));
  overflow: hidden;
}

.b-timing.b-timing--v2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--b-cyan), var(--b-blue));
}

.b-timing--v2 .b-timing__title {
  gap: 14px;
}

.b-timing--v2 .b-timing__title .b-gl {
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--b-line-2);
  border-radius: 12px;
  background: rgb(117 251 251 / 6%);
}

.b-timing--v2 h3 {
  font-size: clamp(19px, 1.7vw, 23px);
}

.b-timing--v2 p {
  font-size: 16px;
}

@media (width <= 700px) {
  .b-timing.b-timing--v2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

/* Basis partner preview: retain the original surface; reveal their film on intent. */
.b-basis-preview {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.b-basis-preview__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.035);
  transition:
    opacity 650ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
  z-index: 0;
}

.b-basis-preview > .b-basis-preview__video,
.b-basis-preview > .b-basis-preview__shade,
.b-basis-preview > .b-basis-preview__toggle {
  margin: 0;
}

.b-basis-preview__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(5 11 22 / 10%) 0%,
    rgb(5 11 22 / 22%) 24%,
    rgb(5 11 22 / 90%) 43%,
    rgb(5 11 22 / 96%) 100%
  );
  opacity: 0;
  transition: opacity 650ms ease;
}

.b-basis-preview > .b-panel__media,
.b-basis-preview > .b-panel__logo,
.b-basis-preview > h3,
.b-basis-preview > p,
.b-basis-preview > .b-checks,
.b-basis-preview__link {
  position: relative;
  z-index: 2;
}

.b-basis-preview > .b-panel__media {
  transition:
    opacity 650ms ease,
    transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.b-basis-preview.is-video-visible > .b-panel__media {
  opacity: 0;
  transform: scale(1.02);
}

.b-basis-preview.is-video-visible > .b-basis-preview__video {
  opacity: 1;
  transform: scale(1);
}

.b-basis-preview.is-video-visible > .b-basis-preview__shade {
  opacity: 1;
}

.b-basis-preview.is-video-visible {
  border-color: rgb(117 251 251 / 45%);
}

.b-basis-preview.is-video-visible > .b-checks {
  color: #dbe8fc;
}

.b-basis-preview__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  color: var(--b-cyan);
  font-weight: 700;
  font-size: 15px;
}

.b-basis-preview__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

.b-basis-preview__link {
  position: static !important;
}

.b-basis-preview__link > span,
.b-basis-preview__link > svg {
  position: relative;
  z-index: 2;
}

.b-basis-preview__link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.6;
  transition: transform 350ms ease;
}

.b-basis-preview:hover .b-basis-preview__link svg {
  transform: translate(2px, -2px);
}

.b-basis-preview__link:focus-visible {
  outline: none;
}

.b-basis-preview__link:focus-visible::after {
  outline: 2px solid var(--b-cyan);
  outline-offset: -4px;
  border-radius: 22px;
}

.b-basis-preview__toggle {
  position: absolute;
  z-index: 4;
  top: 32px;
  right: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid rgb(207 225 255 / 40%);
  border-radius: 999px;
  background: rgb(5 11 22 / 78%);
  backdrop-filter: blur(12px);
  color: #f5f8ff;
  box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.b-basis-preview__toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.b-basis-preview__toggle .b-preview-play {
  fill: currentcolor;
  stroke: none;
}

.b-basis-preview__toggle .b-preview-pause {
  display: none;
}

.b-basis-preview.is-video-playing .b-preview-play {
  display: none;
}

.b-basis-preview.is-video-playing .b-preview-pause {
  display: block;
}

.b-basis-preview.has-video-error .b-basis-preview__toggle {
  display: none;
}

@media (width <= 700px) {
  .b-basis-preview__toggle {
    top: 28px;
    right: 28px;
  }

  .b-basis-preview__shade {
    background: linear-gradient(
      180deg,
      rgb(5 11 22 / 10%),
      rgb(5 11 22 / 30%) 24%,
      rgb(5 11 22 / 94%) 42%,
      rgb(5 11 22 / 97%)
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .b-basis-preview__video,
  .b-basis-preview__shade,
  .b-basis-preview > .b-panel__media,
  .b-basis-preview__link svg {
    transition: none !important;
    transform: none !important;
  }
}

/* stylelint-enable no-duplicate-selectors */

/* Main-only continuation: shared comparison templates are not modified. */
.basis-main {
  position: relative;
  isolation: isolate;
  background: #07101f;
}

.basis-main > .b-why,
.basis-main > .b-hero {
  background: transparent !important;
}

.basis-main .b-duo__glow {
  display: none;
}

.basis-main .b-duo__c {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.basis-main .b-duo__pair {
  animation: none !important;
}

.basis-main .b-btn,
.basis-main .b-panel,
.basis-main .b-phase,
.basis-main .b-tier,
.basis-main .b-close,
.basis-main .b-term {
  box-shadow: none !important;
}

.basis-main .b-basis-preview__video,
.basis-main .b-basis-preview__shade {
  margin: 0;
}

.basis-main .b-video-help {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.basis-main .b-head,
.basis-main .b-case__copy,
.basis-main .b-hero__copy {
  position: relative;
  z-index: 1;
}

.basis-prototype-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 5%;
  background: #07101f;
  border-bottom: 1px solid #23374b;
  font:
    15px Manrope,
    sans-serif;
}

.basis-prototype-header a,
.basis-prototype-footer a {
  color: #d8dfe2;
}

.basis-prototype-header nav {
  display: flex;
  gap: 24px;
}

.basis-prototype-footer {
  padding: 32px 5%;
  background: #07101f;
  color: #c5d2e0;
  font:
    14px Manrope,
    sans-serif;
}

.basis-skip {
  position: absolute;
  top: -100px;
  left: 20px;
  z-index: 1000;
}

.basis-skip:focus {
  top: 10px;
  padding: 12px;
  background: white;
  color: #101820;
}

body:has(.basis-main) {
  margin: 0;
  background: #07101f;
}

.basis-main
  :is(
    .b-wf,
    .b-how__stage,
    .b-fitcard,
    .b-question,
    .b-team,
    .b-cta__panel,
    .b-duo__pair,
    .b-duo__lockup
  ) {
  box-shadow: none !important;
}

/* Primary inquiry label contrast: normal-size white text needs 4.5:1 in every state. */
.basis-main .b-btn--primary {
  background: linear-gradient(120deg, #1846ba, #2357bf 55%, #1f63ac);
  color: var(--b-text);
}

/* The inherited white spotlight/sweep can wash out the label on hover or keyboard focus. */
.basis-main .b-btn--primary::before,
.basis-main .b-btn--primary::after {
  display: none;
}

/* Wiss screen: stable image frame, official foreground mark, soft upward figures. */
.basis-main .b-wiss-screen {
  position: relative;
  isolation: isolate;
}

.basis-main .b-wiss-screen > .b-panel__media {
  opacity: 1;
  transform: none;
  z-index: 0;
}

.basis-main .b-wiss-screen .b-panel__media img {
  transform: scale(1);
  transition: transform 1.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.basis-main .b-wiss-screen.is-screen-active .b-panel__media img {
  transform: scale(1.035);
}

.basis-main .b-wiss-screen > .b-panel__logo {
  position: relative;
  z-index: 3;
  width: 150px;
  height: auto;
  max-height: none;
  object-fit: contain;
  opacity: 1;
  filter: none;
  margin: 0 0 20px;
}

.basis-main .b-wiss-screen__numbers {
  position: absolute;
  inset: 270px 18px 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  color: #8ba9df;
  mask-image: linear-gradient(
    transparent,
    #000000 20%,
    #000000 75%,
    transparent
  );
  transition: opacity 0.7s ease;
}

.basis-main .b-wiss-screen__numbers > div {
  animation: wiss-screen-ledger-rise 18s linear infinite;
  animation-play-state: paused;
}

.basis-main .b-wiss-screen__numbers span {
  display: block;
  height: 54px;
  white-space: pre;
  font:
    20px/54px ui-monospace,
    Consolas,
    monospace;
  letter-spacing: 15px;
  text-align: center;
}

.basis-main .b-wiss-screen.is-screen-active .b-wiss-screen__numbers {
  opacity: 0.075;
}

.basis-main .b-wiss-screen.is-screen-active .b-wiss-screen__numbers > div {
  animation-play-state: running;
}

@keyframes wiss-screen-ledger-rise {
  to {
    transform: translateY(-50%);
  }
}

@media (prefers-reduced-motion: reduce), (hover: none) {
  .basis-main .b-wiss-screen.is-screen-active .b-panel__media img {
    transform: none;
  }

  .basis-main .b-wiss-screen__numbers {
    display: none;
  }
}

/* Main hero memory flash: the right grid column contains every faded pixel. */
.basis-main .b-hero [data-hero-memory] {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  isolation: isolate;
}

.basis-main .b-hero .b-hero-memory {
  position: absolute;
  inset: -32px 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  mask-image: radial-gradient(
    ellipse 75% 66% at 54% 48%,
    #000000 24%,
    rgb(0 0 0 / 80%) 48%,
    transparent 76%
  );
}

.basis-main .b-hero .b-hero-memory__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(7px) saturate(0.78);
  transform: scale(1.035);
  transition:
    opacity 600ms ease-out,
    filter 800ms ease-out,
    transform 1100ms ease-out;
}

.basis-main .b-hero .b-hero-memory__frame.is-active {
  opacity: 0.72;
  filter: blur(3px) saturate(0.88);
  transform: scale(1);
}

.basis-main .b-hero .b-hero-memory__frame img,
.basis-main .b-hero .b-hero-memory__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.basis-main .b-hero .b-hero-memory__frame video {
  opacity: 0;
  transition: opacity 450ms ease-out;
}

.basis-main .b-hero .b-hero-memory__frame.is-playing video {
  opacity: 1;
}

.basis-main .b-hero [data-hero-memory] .b-duo__pair {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}

.basis-main .b-hero .b-duo__c {
  appearance: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  mix-blend-mode: normal;
}

.basis-main .b-hero .b-duo__c:focus-visible {
  outline: 2px solid var(--b-cyan);
  outline-offset: 6px;
}

@media (width <= 960px) {
  .basis-main .b-hero [data-hero-memory] {
    width: min(440px, 92%);
  }

  .basis-main .b-hero .b-hero-memory {
    inset-block: -24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .basis-main .b-hero .b-hero-memory__frame,
  .basis-main .b-hero .b-hero-memory__frame video {
    transition: none;
    transform: none;
  }
}

/* Nov 5: original Wiss ledger artwork and official wordmark share one stable media frame. */
.basis-main .b-wiss-ledger > .b-panel__media {
  position: relative;
  z-index: 2;
  aspect-ratio: 16 / 9;
  isolation: isolate;
  overflow: hidden;
  opacity: 1;
  transform: none;
}

.basis-main .b-wiss-ledger > .b-panel__media::after {
  content: none;
}

.basis-main .b-wiss-ledger .b-wiss-ledger__still {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.basis-main .b-wiss-ledger__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 450ms ease;
}

.basis-main .b-wiss-ledger.is-wiss-video-playing .b-wiss-ledger__video {
  opacity: 0.21;
}

.basis-main .b-wiss-ledger__logo {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  width: clamp(136px, 28%, 184px);
  padding: 10px 12px;
  border-radius: 3px;
  background: rgb(7 16 31 / 90%);
  pointer-events: none;
}

.basis-main .b-wiss-ledger .b-panel__media .b-wiss-ledger__wordmark {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

@media (width <= 600px) {
  .basis-main .b-wiss-ledger__logo {
    left: 14px;
    bottom: 14px;
    width: 148px;
    padding: 8px 10px;
  }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .basis-main .b-wiss-ledger__video {
    display: none;
    transition: none;
  }

  .basis-main
    .b-wiss-ledger.is-screen-active
    .b-panel__media
    .b-wiss-ledger__still {
    transform: none;
  }
}

/* ===== Nov 5b: wand-light helix, full-bleed hero films, in-frame card films ===== */

/* Section grounds match the page ground, so they become transparent and the
   helix canvas (z-index 0) shows between them. Cards keep their own surfaces. */
.basis-main > section {
  background-color: transparent !important;
}

/* Hero film layer: owned by the hero section, full width, unblurred. */
.basis-main .b-hero.has-hero-film {
  isolation: isolate;
}

.basis-main .b-hero > .b-hero-memory {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  mask-image: none;
}

.basis-main .b-hero > .b-hero-memory::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 700ms ease;
  background:
    linear-gradient(
      90deg,
      rgb(7 16 31 / 94%) 0%,
      rgb(7 16 31 / 86%) 36%,
      rgb(7 16 31 / 42%) 64%,
      rgb(7 16 31 / 22%) 100%
    ),
    linear-gradient(
      180deg,
      rgb(7 16 31 / 50%) 0%,
      transparent 20%,
      transparent 72%,
      #07101f 100%
    );
}

.basis-main .b-hero > .b-hero-memory .b-hero-memory__frame {
  filter: none;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.basis-main .b-hero > .b-hero-memory .b-hero-memory__frame.is-active {
  opacity: 1;
  filter: none;
  transform: scale(1);
}

/* Circles: the hovered circle fills with its own film, the other recedes. */
.basis-main .b-hero .b-duo__pair .b-duo__c {
  overflow: hidden;
  text-decoration: none;
  transition:
    opacity 600ms ease,
    scale 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 700ms ease;
}

.basis-main .b-hero .b-duo__film {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition:
    opacity 600ms ease,
    transform 1200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.basis-main .b-hero .b-duo__c :is(img, svg) {
  z-index: 1;
  transition:
    opacity 500ms ease,
    scale 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.basis-main .b-hero .b-duo__c.is-filming .b-duo__film {
  opacity: 1;
  transform: scale(1);
}

.basis-main .b-hero .b-duo__c.is-film-playing :is(img, svg) {
  scale: 0.82;
}

.basis-main .b-hero .b-duo__c.is-filming {
  z-index: 2;
  scale: 1.03;
  box-shadow:
    0 0 0 1px rgb(117 251 251 / 55%),
    0 0 36px 4px rgb(117 251 251 / 22%);
}

.basis-main .b-hero .b-duo__pair:has(.is-filming) .b-duo__c:not(.is-filming) {
  /* The intro keyframes fill "both", so only !important can dim after them. */
  opacity: 0.5 !important;
}

@media (width <= 960px) {
  .basis-main .b-hero > .b-hero-memory::after {
    background: rgb(7 16 31 / 82%);
  }
}

/* Wiss x Basis cards: each film plays inside its own media frame at full strength. */
.basis-main .b-film {
  position: relative;
  aspect-ratio: 16 / 9;
  isolation: isolate;
  overflow: hidden;
  border-radius: 16px;
  background: #0a1628;
}

.basis-main .b-basis-preview > .b-panel__media.b-film,
.basis-main .b-basis-preview.is-video-visible > .b-panel__media.b-film,
.basis-main .b-wiss-ledger > .b-panel__media.b-film {
  z-index: 2;
  opacity: 1;
  transform: none;
}

.basis-main .b-film::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(0deg, rgb(7 16 31 / 62%), transparent 42%);
  pointer-events: none;
}

.basis-main .b-film .b-film__still {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.basis-main .b-film .b-film__video,
.basis-main .b-wiss-ledger .b-film .b-wiss-ledger__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  mix-blend-mode: normal;
  transform: scale(1.06);
  transition:
    opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1600ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.basis-main .b-basis-preview.is-video-visible .b-film .b-film__video,
.basis-main .b-wiss-ledger.is-wiss-video-playing .b-film .b-wiss-ledger__video {
  opacity: 1;
  transform: scale(1);
}

.basis-main .b-basis-preview.is-video-visible .b-film .b-film__still,
.basis-main .b-wiss-ledger.is-screen-active .b-film .b-film__still {
  transform: scale(1.04);
}

.basis-main .b-basis-preview.is-video-visible > .b-checks {
  color: inherit;
}

/* Official wordmark sits directly on the film's bottom scrim; no backing box. */
.basis-main .b-wiss-ledger .b-film .b-wiss-ledger__logo {
  z-index: 3;
  padding: 0;
  border-radius: 0;
  background: none;
  filter: drop-shadow(0 2px 12px rgb(7 16 31 / 55%));
}

@media (prefers-reduced-motion: reduce) {
  .basis-main .b-hero .b-duo__film {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .basis-main .b-film .b-film__video {
    display: none;
  }

  .basis-main .b-hero > .b-hero-memory .b-hero-memory__frame,
  .basis-main .b-hero .b-duo__c,
  .basis-main .b-film .b-film__still {
    transition: none;
    transform: none;
  }
}

/* Section tints stay, but their opaque base gradients become translucent so the
   helix reads through every band instead of being painted over. */
.basis-main > .b-struggle {
  background-image:
    radial-gradient(38% 38% at 82% 45%, rgb(34 85 245 / 14%), transparent),
    linear-gradient(transparent, rgb(8 20 42 / 45%) 55%, transparent) !important;
}

.basis-main > .b-job {
  background-image:
    radial-gradient(42% 46% at 16% 50%, rgb(34 85 245 / 30%), transparent),
    radial-gradient(28% 38% at 88% 50%, rgb(117 251 251 / 7%), transparent),
    linear-gradient(transparent, rgb(10 22 40 / 45%) 50%, transparent) !important;
}

.basis-main > :is(.b-outcomes, .b-trust, .b-fit) {
  background-image:
    var(--b-section-tint, none),
    linear-gradient(transparent, rgb(5 11 22 / 45%) 50%, transparent) !important;
}

.basis-main > .b-outcomes {
  --b-section-tint: radial-gradient(
    44% 38% at 50% 40%,
    rgb(34 85 245 / 18%),
    transparent
  );
}

.basis-main > .b-trust {
  --b-section-tint: radial-gradient(
    40% 36% at 50% 30%,
    rgb(117 251 251 / 6%),
    transparent
  );
}

.basis-main > .b-fit {
  --b-section-tint: radial-gradient(
    36% 42% at 12% 50%,
    rgb(34 85 245 / 20%),
    transparent
  );
}

.basis-main > .b-cta {
  background-image: linear-gradient(transparent, rgb(5 11 22 / 50%)) !important;
}

/* Hero atmosphere: soft, blurred Wiss-blue/cyan fields behind the hero (user-directed). */
.basis-main .b-hero::before {
  content: "";
  position: absolute;
  inset: -10% -5% 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 74% 42%, rgb(34 85 245 / 42%), transparent 70%),
    radial-gradient(
      28% 34% at 92% 18%,
      rgb(117 251 251 / 16%),
      transparent 70%
    ),
    radial-gradient(34% 40% at 12% 78%, rgb(92 136 218 / 22%), transparent 70%),
    radial-gradient(26% 30% at 40% 8%, rgb(34 85 245 / 18%), transparent 70%),
    radial-gradient(34% 52% at 4% 46%, rgb(92 136 218 / 26%), transparent 72%);
  filter: blur(48px);
}

/* Intro/hover highlight: a soft glow on the active circle and a fade behind the pair. */
.basis-main .b-hero .b-duo__pair::before {
  content: "";
  position: absolute;
  inset: -18% -10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgb(34 85 245 / 38%),
    rgb(117 251 251 / 10%) 55%,
    transparent
  );
  filter: blur(28px);
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}

.basis-main
  .b-hero
  .b-duo__pair:is([data-active="wiss"], [data-active="basis"])::before {
  opacity: 1;
}

.basis-main .b-hero.is-hero-film > .b-hero-memory::after {
  opacity: 1;
}

/* Phones: centred hero header and copy; smaller eyebrow without the dot. */
@media (width <= 767px) {
  .basis-main .b-hero .b-crumbs {
    justify-content: center;
  }

  .basis-main .b-hero .b-hero__copy {
    text-align: center;
  }

  .basis-main .b-hero .b-hero__copy > .b-eyebrow {
    justify-content: center;
    font-size: 11px;
    letter-spacing: 0.14em;
  }

  .basis-main .b-hero .b-hero__copy > .b-eyebrow::before {
    content: none;
  }

  .basis-main .b-hero .b-display,
  .basis-main .b-hero .b-lead {
    margin-inline: auto;
  }

  .basis-main .b-hero .b-hero__copy > .b-actions {
    justify-content: center;
  }

  .basis-main .b-hero .b-hero__copy > .b-creds {
    text-align: left;
  }

  .basis-main .b-hero .b-display > .b-kw {
    font-size: 1.14em;
  }
}