/*
 * Alternate Noumetic skin. This file changes colors and type only; all layout,
 * shape, spacing, and motion continue to come from landing.css.
 */

.landing-refresh {
  --paper: #f7f9fc;
  --paper-2: #eaf0f7;
  --paper-raised: #ffffff;
  --ink: #172d3d;
  --ink-2: #21394b;
  --ink-3: #2e4658;
  --ink-dim: #536878;
  --ink-faint: #5d7180;
  --amber: #8db7f0;
  --amber-deep: #3f6fae;
  --amber-soft: rgba(141, 183, 240, 0.17);
  --night-dim: #c6d1df;
  --night-faint: #9aaabd;
  --hairline: rgba(23, 45, 61, 0.13);
  --hairline-soft: rgba(23, 45, 61, 0.07);
  --hairline-strong: rgba(23, 45, 61, 0.27);
  --hairline-light: rgba(247, 249, 252, 0.13);
  --hairline-light-strong: rgba(247, 249, 252, 0.26);

  --display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Source Code Pro", "SFMono-Regular", Consolas, monospace;

  --shadow-card: 0 1px 0 rgba(23, 45, 61, 0.04), 0 12px 32px -16px rgba(23, 45, 61, 0.2);
  --shadow-float: 0 1px 0 rgba(23, 45, 61, 0.05), 0 40px 90px -40px rgba(23, 45, 61, 0.42);
}

html.landing-refresh,
.landing-refresh body {
  background-color: var(--paper);
}

/* Let italic glyph overhangs breathe inside the word-reveal clipping mask. */
.landing-refresh em .w {
  padding-inline: 0.08em;
  margin-inline: -0.08em;
}

/* Recolor the few effects in landing.css that use literal colors. */
.landing-refresh .btn--primary {
  box-shadow: 0 10px 24px -12px rgba(23, 45, 61, 0.58);
}

.landing-refresh .btn--primary:hover {
  box-shadow: 0 16px 30px -12px rgba(23, 45, 61, 0.68);
}

.landing-refresh .btn--paper {
  box-shadow: 0 16px 40px -16px rgba(141, 183, 240, 0.4);
}

.landing-refresh .hero__glow {
  background: radial-gradient(circle at center, rgba(141, 183, 240, 0.22), rgba(141, 183, 240, 0.06) 40%, transparent 70%);
}

.landing-refresh .hero__kicker-dot {
  box-shadow: 0 0 0 0 rgba(63, 111, 174, 0.5);
  animation-name: landing-refresh-pulse;
}

@keyframes landing-refresh-pulse {
  0% { box-shadow: 0 0 0 0 rgba(63, 111, 174, 0.45); }
  70% { box-shadow: 0 0 0 10px rgba(63, 111, 174, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 111, 174, 0); }
}

.landing-refresh .catalog__query {
  width: fit-content;
}

.landing-refresh .catalog__query-v {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  text-wrap: balance;
}

.landing-refresh .catalog__root-v {
  font-size: 16px;
}

.landing-refresh .catalog__root {
  box-shadow: 0 18px 40px -22px rgba(23, 45, 61, 0.52);
}

/* Keep the full branch rail neutral; color only the active route. */
.landing-refresh .catalog.is-asking .catalog__branches::before {
  background-color: var(--hairline-strong);
}

.landing-refresh .catalog__branches::after {
  content: "";
  position: absolute;
  top: 0;
  height: 1px;
  background-color: var(--amber-deep);
  opacity: 0;
  pointer-events: none;
  transition: left 0.4s ease, width 0.4s ease, opacity 0.25s ease;
}

.landing-refresh .catalog.is-asking .catalog__branches::after {
  opacity: 1;
}

/* Highlight from the root drop (50%) to the lit branch center.
   Column index covers both catalogs; named branches keep older browsers safe. */
.landing-refresh .catalog:has(.catalog__branch:nth-child(1).is-lit) .catalog__branches::after,
.landing-refresh .catalog[data-branch="optik"] .catalog__branches::after,
.landing-refresh .catalog[data-branch="vision"] .catalog__branches::after,
.landing-refresh .catalog[data-branch="workflow"] .catalog__branches::after {
  left: 12.5%;
  width: 37.5%;
}

.landing-refresh .catalog:has(.catalog__branch:nth-child(2).is-lit) .catalog__branches::after,
.landing-refresh .catalog[data-branch="trenn"] .catalog__branches::after,
.landing-refresh .catalog[data-branch="motion"] .catalog__branches::after,
.landing-refresh .catalog[data-branch="customer"] .catalog__branches::after {
  left: 37.5%;
  width: 12.5%;
}

.landing-refresh .catalog:has(.catalog__branch:nth-child(3).is-lit) .catalog__branches::after,
.landing-refresh .catalog[data-branch="mess"] .catalog__branches::after,
.landing-refresh .catalog[data-branch="sense"] .catalog__branches::after,
.landing-refresh .catalog[data-branch="data"] .catalog__branches::after {
  left: 50%;
  width: 12.5%;
}

.landing-refresh .catalog:has(.catalog__branch:nth-child(4).is-lit) .catalog__branches::after,
.landing-refresh .catalog[data-branch="prep"] .catalog__branches::after,
.landing-refresh .catalog[data-branch="control"] .catalog__branches::after,
.landing-refresh .catalog[data-branch="platform"] .catalog__branches::after {
  left: 50%;
  width: 37.5%;
}

.landing-refresh .catalog__item.is-focus .catalog__frame {
  box-shadow: 0 0 0 1px rgba(63, 111, 174, 0.5), 0 20px 40px -22px rgba(23, 45, 61, 0.42);
}

.landing-refresh .catalog__frame {
  background-color: #edf2f8;
}

.landing-refresh .problem__glow,
.landing-refresh .ns-halo {
  background: radial-gradient(circle, rgba(141, 183, 240, 0.2), rgba(141, 183, 240, 0.05) 45%, transparent 70%);
}

.landing-refresh .compare__card--with {
  border-color: rgba(141, 183, 240, 0.48);
  box-shadow: 0 0 0 1px rgba(141, 183, 240, 0.14), 0 40px 100px -50px rgba(141, 183, 240, 0.46);
}

.landing-refresh .compare__card--with .compare__a {
  background-color: rgba(141, 183, 240, 0.11);
}

.landing-refresh .ns-core {
  box-shadow: 0 30px 60px -30px rgba(23, 45, 61, 0.58);
}

.landing-refresh .ns-core:hover,
.landing-refresh .ns-core.is-selected,
.landing-refresh .ns-core.is-previewed {
  box-shadow: 0 0 0 5px var(--amber-soft), 0 30px 60px -30px rgba(23, 45, 61, 0.58);
}

.landing-refresh .step__ghost {
  color: rgba(23, 45, 61, 0.07);
}

.landing-refresh .q-dim { fill: rgba(23, 45, 61, 0.2); }
.landing-refresh .q-dim-soft { fill: rgba(23, 45, 61, 0.1); }

.landing-refresh .callout__glow {
  background: radial-gradient(circle, rgba(141, 183, 240, 0.18), rgba(141, 183, 240, 0.04) 45%, transparent 70%);
}

.landing-refresh .callout__lead {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 16px;
  align-items: baseline;
  padding-left: 0;
}

.landing-refresh .callout__num {
  position: static;
}

.landing-refresh .modal {
  box-shadow: 0 60px 120px -40px rgba(23, 45, 61, 0.48);
}

.landing-refresh .modal::backdrop {
  background-color: rgba(23, 45, 61, 0.48);
}

.landing-refresh .field input:focus {
  box-shadow: 0 0 0 4px rgba(23, 45, 61, 0.06);
}

@media (max-width: 900px) {
  /* Keep the active route lit on the 2-col rails. */
  .landing-refresh .catalog__branches::after {
    display: block;
  }

  .landing-refresh .catalog.is-asking .catalog__branches::before {
    background-color: var(--hairline-strong);
  }

  .landing-refresh .catalog.is-asking .catalog__branch.is-lit::before {
    background-color: var(--amber-deep);
  }

  /* Top-row centers are at 25% and 75%; root drop is at 50%. */
  .landing-refresh .catalog:has(.catalog__branch:nth-child(1).is-lit) .catalog__branches::after,
  .landing-refresh .catalog[data-branch="optik"] .catalog__branches::after,
  .landing-refresh .catalog[data-branch="vision"] .catalog__branches::after,
  .landing-refresh .catalog[data-branch="workflow"] .catalog__branches::after {
    left: 25%;
    width: 25%;
  }

  .landing-refresh .catalog:has(.catalog__branch:nth-child(2).is-lit) .catalog__branches::after,
  .landing-refresh .catalog[data-branch="trenn"] .catalog__branches::after,
  .landing-refresh .catalog[data-branch="motion"] .catalog__branches::after,
  .landing-refresh .catalog[data-branch="customer"] .catalog__branches::after {
    left: 50%;
    width: 25%;
  }

  /* Bottom row uses its own rail on column 3 — hide the top-rail highlight. */
  .landing-refresh .catalog:has(.catalog__branch:nth-child(3).is-lit) .catalog__branches::after,
  .landing-refresh .catalog:has(.catalog__branch:nth-child(4).is-lit) .catalog__branches::after,
  .landing-refresh .catalog[data-branch="mess"] .catalog__branches::after,
  .landing-refresh .catalog[data-branch="sense"] .catalog__branches::after,
  .landing-refresh .catalog[data-branch="prep"] .catalog__branches::after,
  .landing-refresh .catalog[data-branch="control"] .catalog__branches::after,
  .landing-refresh .catalog[data-branch="data"] .catalog__branches::after,
  .landing-refresh .catalog[data-branch="platform"] .catalog__branches::after {
    opacity: 0;
  }

  /* Bottom-rail active half: left (col 3) or right (col 4). */
  .landing-refresh .catalog.is-asking:has(.catalog__branch:nth-child(3).is-lit) .catalog__branch:nth-child(3)::after,
  .landing-refresh .catalog.is-asking[data-branch="mess"] .catalog__branch:nth-child(3)::after,
  .landing-refresh .catalog.is-asking[data-branch="sense"] .catalog__branch:nth-child(3)::after,
  .landing-refresh .catalog.is-asking[data-branch="data"] .catalog__branch:nth-child(3)::after {
    background: linear-gradient(
      to right,
      var(--amber-deep) 0%,
      var(--amber-deep) 50%,
      var(--hairline-strong) 50%,
      var(--hairline-strong) 100%
    );
  }

  .landing-refresh .catalog.is-asking:has(.catalog__branch:nth-child(4).is-lit) .catalog__branch:nth-child(3)::after,
  .landing-refresh .catalog.is-asking[data-branch="prep"] .catalog__branch:nth-child(3)::after,
  .landing-refresh .catalog.is-asking[data-branch="control"] .catalog__branch:nth-child(3)::after,
  .landing-refresh .catalog.is-asking[data-branch="platform"] .catalog__branch:nth-child(3)::after {
    background: linear-gradient(
      to right,
      var(--hairline-strong) 0%,
      var(--hairline-strong) 50%,
      var(--amber-deep) 50%,
      var(--amber-deep) 100%
    );
  }

  /* Light the middle spine when a bottom-row category is active. */
  .landing-refresh .catalog.is-asking:has(.catalog__branch:nth-child(3).is-lit) .catalog__branch:nth-child(1)::after,
  .landing-refresh .catalog.is-asking:has(.catalog__branch:nth-child(4).is-lit) .catalog__branch:nth-child(1)::after,
  .landing-refresh .catalog.is-asking[data-branch="mess"] .catalog__branch:nth-child(1)::after,
  .landing-refresh .catalog.is-asking[data-branch="sense"] .catalog__branch:nth-child(1)::after,
  .landing-refresh .catalog.is-asking[data-branch="prep"] .catalog__branch:nth-child(1)::after,
  .landing-refresh .catalog.is-asking[data-branch="control"] .catalog__branch:nth-child(1)::after,
  .landing-refresh .catalog.is-asking[data-branch="data"] .catalog__branch:nth-child(1)::after,
  .landing-refresh .catalog.is-asking[data-branch="platform"] .catalog__branch:nth-child(1)::after {
    background-color: var(--amber-deep);
  }
}