/* v4b homepage: visual stage and copy follow the approved 2026-10-09 draft. */
.v4b-home {
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font);
  font-size: var(--fs-body);
  line-height:24px;
  word-break:keep-all
}
.v4b-home .shell {
  width:calc(100% - 128px);
  max-width:1312px;
  margin-inline:auto
}
.v4b-home :where(h1,h2,h3,p) {
  margin:0;
  color:inherit
}
.v4b-home .section {
  padding: var(--space-9) 0}
.v4b-home .eyebrow {
  font-size: var(--fs-caption);
  line-height:24px;
  letter-spacing:.12em;
  font-weight:500;
  margin-bottom: var(--space-5);
  color:var(--muted)
}
.v4b-home .section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap: var(--space-7);
  margin-bottom: var(--space-7)}
.v4b-home .section-heading>p {
  max-width:408px;
  color:var(--muted)
}
.v4b-home .button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  text-decoration:none;
  min-height:var(--btn-h-md);
  padding:0 18px;
  gap:8px;
  border-radius:var(--radius-pill);
  font-size:14px;
  font-weight:var(--fw-medium);
  line-height:1.2;
  background:var(--glass-light),var(--secondary-fill);
  box-shadow:var(--secondary-shadow);
  color:var(--ink)
}
.v4b-home .button.primary {
  background:var(--primary-base);
  color:var(--primary-text);
  box-shadow:none
}
.v4b-home .button:hover {
  text-decoration:none;
  background:var(--secondary-hover)
}
.v4b-home .button.primary:hover {
  background:var(--primary-hover)
}
.v4b-home .button svg {
  width:16px;
  height:16px
}
.v4b-home .actions {
  display:flex;
  gap: var(--space-4);
  align-items:center;
  margin-top: var(--space-6)}
.v4b-home svg {
  flex:none
}
.v4b-home .section-heading h2 {
  font-size: var(--fs-h1);
  line-height:56px;
  letter-spacing:-.045em;
  font-weight:var(--fw-medium)}
@media(max-width:700px) {
  .v4b-home .shell {
    width:calc(100% - 48px)
  }
  .v4b-home .section {
    padding: var(--space-8) 0}
  .v4b-home .section-heading {
    display:block;
    margin-bottom: var(--space-6)}
  .v4b-home .section-heading h2 {
    font-size: var(--fs-h2);
    line-height:40px
  }
  .v4b-home .section-heading>p {
    margin-top: var(--space-4)}
}
/* Hero keeps the abstract glass photo behind the text. Color is reserved for the last story state. */ .evolve-hero {
  position:relative;
  isolation:isolate;
  overflow:clip;
  padding: var(--space-9) 0;
  background:var(--canvas)
}
.evolve-hero .actions {
  flex-wrap:wrap
}
.evolve-hero h1 {
  font-size: var(--fs-num-xl);
  line-height:112px;
  letter-spacing:-.06em;
  font-weight:var(--fw-medium)}
.evolve-hero .eyebrow {
  margin-bottom: var(--space-5)}
.hero-description {
  font-size: var(--fs-h3);
  line-height:32px;
  color:var(--muted);
  margin-top: var(--space-6)}
.evolve-hero .actions {
  margin-top: var(--space-6)}
.evolution {
  box-shadow:inset 0 1px 0 var(--line);
  padding: var(--space-8) 0 var(--space-9)}
.evolution-layout {
  display:grid;
  grid-template-columns:640px minmax(0,1fr);
  gap: var(--space-10);
  align-items:start
}
.sticky-evolution {
  position:sticky;
  top:144px
}
.visual-overline {
  font-size: var(--fs-small);
  line-height:24px;
  color:var(--muted);
  margin-bottom: var(--space-4)}
.evolve-visual {
  width:640px
}
.diagram-canvas {
  width:640px;
  height:480px;
  position:relative
}
.evolve-lines {
  position:absolute;
  inset:0;
  width:640px;
  height:480px;
  overflow:visible;
  fill:none;
  stroke:var(--n-400);
  stroke-width:1
}
.evolve-lines path {
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset .6s cubic-bezier(.22,1,.36,1),stroke .6s;
  opacity:0
}
.evolve-lines path.is-present {
  stroke-dashoffset:0;
  opacity:1
}
.company-shape {
  position:absolute;
  left:208px;
  top:128px;
  width:224px;
  height:224px;
  border-radius: var(--radius-panel);
  background:var(--secondary-fill);
  box-shadow:inset 0 0 0 1px var(--surface-raised),var(--shadow);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: var(--space-5);
  gap: var(--space-4);
  transition:background .7s,box-shadow .7s
}
.company-symbol {
  width:48px;
  height:48px;
  color:var(--muted);
  transition:color .7s
}
.label-space {
  height:88px;
  width:224px;
  position:relative
}
.company-label {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:32px;
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;
  transition:opacity .18s ease
}
.company-label.is-active {
  opacity:1;
  transition-delay:.22s
}
.company-label .ready-word {
  font-size: var(--fs-h3);
  line-height:24px;
  letter-spacing:-.04em;
  font-weight:400;
  white-space:nowrap
}
.ready-suffix {
  display:inline;
  font-size:inherit;
  line-height:inherit;
  letter-spacing:inherit
}
.company-fixed {
  position:absolute;
  top:32px;
  left:0;
  width:100%;
  text-align:center;
  font-size: var(--fs-h2);
  line-height:40px;
  font-weight:400;
  letter-spacing:-.04em
}
.evolve-node {
  position:absolute;
  width:160px;
  height:128px;
  border-radius: var(--radius-card);
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: var(--space-2);
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s .15s,transform .6s .15s cubic-bezier(.22,1,.36,1);
  pointer-events:none
}
.evolve-node.is-present {
  opacity:1;
  transform:translateY(0)
}
.readiness-icon {
  width:64px;
  height:64px;
  object-fit:contain;
  filter:grayscale(1);
  transition:filter .25s ease
}
.is-complete .readiness-icon {
  filter:none
}
.evolve-node>span {
  font-size: var(--fs-body);
  line-height:24px
}
.en-0 {
  left:32px;
  top:32px
}
.en-1 {
  left:448px;
  top:32px
}
.en-2 {
  left:448px;
  top:320px
}
.en-3 {
  left:32px;
  top:320px
}
.is-complete .company-shape {
  background:color-mix(in srgb,var(--accent) 10%,var(--surface-raised));
  box-shadow:inset 0 0 0 1px var(--accent),var(--shadow)
}
.is-complete .company-symbol {
  color:var(--accent)
}
.is-complete .company-label[data-label="5"] .ready-word {
  color:var(--product-accent-ink);
  font-weight:500
}
.is-complete .evolve-lines {
  stroke:var(--accent);
  stroke-width:1.5
}
.evolve-step {
  min-height:736px;
  padding: var(--space-9) 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  scroll-margin-top: var(--space-9)}
.evolve-step.step-0 {
  min-height:560px;
  padding-top: var(--space-8)}
.evolve-step.step-5 {
  min-height:736px
}
.step-copy .eyebrow {
  font-size: var(--fs-small);
  letter-spacing:0;
  line-height:24px;
  margin-bottom: var(--space-5)}
.step-copy h2 {
  font-size: var(--fs-h1);
  line-height:48px;
  font-weight:var(--fw-medium);
  letter-spacing:-.04em
}
.step-description {
  font-size: var(--fs-lead);
  line-height:32px;
  color:var(--muted);
  margin-top: var(--space-5)}
.readiness-list {
  margin: var(--space-6) 0 0}
.readiness-row {
  display:grid;
  grid-template-columns:96px 1fr;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  box-shadow:inset 0 1px 0 var(--line);
  font-size: var(--fs-body);
  line-height:24px
}
.readiness-row dt {
  font-weight:500
}
.readiness-row dd {
  margin:0;
  color:var(--muted)
}
.closing-line {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  box-shadow:inset 0 1px 0 var(--line);
  font-size: var(--fs-body);
  line-height:24px
}
.mobile-stage {
  display:none
}
.applications {
  background:var(--surface)
}
.application-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap: var(--space-6)}
.application-grid article {
  padding-top: var(--space-5);
  box-shadow:inset 0 1px 0 var(--line)
}
.application-grid h3 {
  font-size: var(--fs-h3);
  line-height:32px;
  margin-bottom: var(--space-4)}
.application-grid p {
  color:var(--muted);
  line-height:24px
}
.application-grid span {
  display:block;
  font-size: var(--fs-small);
  color:var(--muted);
  margin-top: var(--space-5)}
.application-note {
  font-size: var(--fs-caption);
  line-height:24px;
  color:var(--muted);
  margin-top: var(--space-6)}
.evolve-contact {
  text-align:center
}
.evolve-contact h2 {
  margin-bottom: var(--space-5)}
.evolve-contact p:not(.eyebrow) {
  color:var(--muted)
}
.evolve-contact .button {
  margin-top: var(--space-6)}
.snapshot * {
  transition:none!important
}
@media(max-width:1399px) and (min-width:961px) {
  .evolution-layout {
    grid-template-columns:512px minmax(0,1fr);
    gap: var(--space-7)}
  .sticky-evolution .evolve-visual {
    transform:scale(.8);
    transform-origin:top left;
    margin-bottom: calc(var(--space-9) * -1)}
  .evolve-hero h1 {
    font-size: var(--fs-num-xl);
    line-height:96px
  }
  .step-copy h2 {
    font-size: var(--fs-h2);
    line-height:40px
  }
  .readiness-row {
    grid-template-columns:80px 1fr;
    gap: var(--space-4)}
}
@media(min-width:961px) and (max-height:780px) {
  .sticky-evolution {
    top:104px
  }
}
@media(max-width:960px) {
  .evolution-layout {
    display:block
  }
  .sticky-evolution {
    display:none
  }
  .mobile-stage {
    display:block;
    margin-bottom: var(--space-6)}
  .evolve-step {
    min-height:0;
    padding: var(--space-8) 0;
    display:block;
    box-shadow:inset 0 1px 0 var(--line)
  }
  .evolve-step.step-0,.evolve-step.step-5 {
    min-height:0
  }
  .evolve-step.step-0 {
    padding-top:0;
    box-shadow:none
  }
  .evolve-visual {
    margin:auto
  }
  .evolution {
    padding: var(--space-7) 0 0}
  .step-copy {
    max-width:640px;
    margin:auto
  }
  .snapshot .evolve-node:not(.is-present) {
    display:none
  }
  .snapshot .evolve-lines path:not(.is-present) {
    display:none
  }
}
@media(max-width:700px) {
  .evolve-hero {
    padding: var(--space-8) 0}
  .evolve-hero h1 {
    font-size: var(--fs-h1);
    line-height:56px;
    max-width:342px
  }
  .hero-description {
    font-size: var(--fs-lead);
    line-height:32px;
    margin-top: var(--space-5)}
  .hero-description br {
    display:none
  }
  .evolve-hero .actions {
    margin-top: var(--space-6)}
  .evolve-hero .eyebrow {
    margin-bottom: var(--space-5)}
  .evolution {
    padding-top: var(--space-6)}
  .evolve-step {
    padding: var(--space-7) 0}
  .evolve-step.step-0 {
    padding-top:0
  }
  .evolve-visual {
    width:336px
  }
  .diagram-canvas {
    width:336px;
    height:368px
  }
  .evolve-lines {
    width:336px;
    height:368px
  }
  .company-shape {
    left:96px;
    top:128px;
    width:144px;
    height:112px;
    border-radius: var(--radius-card);
    padding: var(--space-2);
    gap:0
  }
  .company-symbol {
    width:24px;
    height:24px
  }
  .label-space {
    width:144px;
    height:72px
  }
  .company-label .ready-word {
    font-size: var(--fs-body);
    line-height:16px
  }
  .ready-suffix {
    font-size:inherit;
    line-height:inherit
  }
  .company-fixed {
    top:32px;
    font-size: var(--fs-h3);
    line-height:32px
  }
  .evolve-node {
    width:144px;
    height:104px;
    border-radius: var(--radius-md);
    gap:0
  }
  .evolve-node>span {
    font-size: var(--fs-caption);
    line-height:24px
  }
  .readiness-icon {
    width:56px;
    height:56px
  }
  .en-0 {
    left:8px;
    top:8px
  }
  .en-1 {
    left:184px;
    top:8px
  }
  .en-2 {
    left:184px;
    top:256px
  }
  .en-3 {
    left:8px;
    top:256px
  }
  .mobile-stage {
    margin-bottom: var(--space-6)}
  .step-copy h2 {
    font-size: var(--fs-h2);
    line-height:40px
  }
  .step-description {
    font-size: var(--fs-lead);
    line-height:32px
  }
  .step-copy .eyebrow {
    margin-bottom: var(--space-4)}
  .readiness-list {
    margin-top: var(--space-5)}
  .readiness-row {
    grid-template-columns:80px 1fr;
    gap: var(--space-4);
    padding: var(--space-4) 0}
  .application-grid {
    grid-template-columns:1fr;
    gap: var(--space-6)}
  .application-note {
    margin-top: var(--space-6)}
  .evolve-contact h2 {
    font-size: var(--fs-h2);
    line-height:40px
  }
  .evolve-contact h2 br {
    display:none
  }
}
@media(max-width:375px) {
  .evolve-visual {
    width:288px
  }
  .diagram-canvas {
    transform:scale(.8571428571);
    transform-origin:top left;
    margin-bottom: calc(var(--space-7) * -1)}
  .visual-caption {
    padding-inline:0
  }
}
@media(prefers-reduced-motion:reduce) {
  .company-label,.evolve-node,.company-symbol,.company-shape,.evolve-lines path {
    transition:none!important
  }
  .evolve-node,.company-label {
    transform:none!important
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto!important
  }
  .v4b-home *, .v4b-home *::before,.v4b-home *::after {
    animation-duration:0.01ms!important;
    transition-duration:0.01ms!important
  }
}
body.public-site .v4b-home .hero-description {
  margin-top: var(--space-6);
  font-size: var(--fs-h3);
  line-height:32px
}
.v4b-home .application-grid h3 {
  margin-bottom: var(--space-4)}
.v4b-home .evolve-contact h2 {
  margin-bottom: var(--space-5);
  font-size: var(--fs-h1);
  line-height:56px
}
@media(max-width:700px) {
  body.public-site .v4b-home .hero-description {
    margin-top: var(--space-5);
    font-size: var(--fs-lead);
    line-height:32px
  }
  .v4b-home .evolve-contact h2 {
    font-size: var(--fs-h2);
    line-height:40px
  }
}
body[data-page-group="home"] .xk-gnav-mark-ink {
  content:url("/assets/wordmark-ink-home.webp")
}
@media(min-width:961px) {
  body[data-page-group="home"] .xk-company-nav .xk-gnav-shell {
    width:calc(100% - 128px);
    max-width:1312px
  }
}
.snapshot .company-label.is-active {
  transition:none
}
.step-product-link {
  display:inline-flex;
  align-items:center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-2) 0;
  color:var(--ink);
  font-size: var(--fs-body);
  font-weight:500;
  text-decoration:none;
  border-bottom:1px solid var(--line-strong)
}
.step-product-link:hover {
  border-bottom-color:currentColor
}
.step-product-link svg {
  width:20px;
  height:20px
}
.restored-home .home-paths {
  padding: var(--space-9) 0 0;
  background:var(--canvas)
}
.restored-home .home-paths .hp-paths {
  margin:0
}
@media(min-width:701px) and (max-width:960px) {
  .company-site .restored-home .hp-path {
    padding: var(--space-6)}
  .company-site .restored-home .hp-path h2 {
    font-size: var(--fs-display)}
}
@media(max-width:700px) {
  .restored-home .home-paths {
    padding: var(--space-8) 0 0}
}

/* Product cards: one card per product, open the app or read the product page. */
.product-cards {
  background:var(--canvas);
  box-shadow:inset 0 1px 0 var(--line)
}
.product-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap: var(--space-5)}
.product-card {
  display:flex;
  flex-direction:column;
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line)
}
.product-visual {
  display:grid;
  place-items:center;
  height:240px;
  border-radius: var(--radius-md);
  background:var(--canvas);
  box-shadow:inset 0 0 0 1px var(--line)
}
.product-visual img {
  width:128px;
  height:128px;
  filter:drop-shadow(var(--depth-1))
}
.product-card h3 {
  margin-top: var(--space-6);
  font-size: var(--fs-h2);
  line-height:36px;
  font-weight:var(--fw-medium);
  letter-spacing:-.02em
}
.product-card>p {
  flex:1;
  margin-top: var(--space-3);
  color:var(--muted);
  font-size: var(--fs-lead);
  line-height:28px
}
.product-actions {
  display:grid;
  gap: var(--space-3);
  margin-top: var(--space-6)}
.v4b-home .product-actions .button {
  width:100%
}
@media(max-width:900px) {
  .product-grid {
    grid-template-columns:minmax(0,1fr)
  }
}
@media(max-width:700px) {
  .product-card {
    padding: var(--space-5)}
  .product-visual {
    height:184px
  }
  .product-visual img {
    width:88px;
    height:88px
  }
  .product-card h3 {
    margin-top: var(--space-5);
    font-size: var(--fs-h3);
    line-height:32px
  }
}