/* v2 page sections below the hero. Loaded on v2.html only; every rule is
   prefixed .v2- so the live site is untouched. Brand: pale ground,
   Feature Display numerals, Aeonik labels, #0047ff as the one accent. */

/* Pin the light theme on v2. home.js animates these variables inline on
   <html> while the (now removed) Problem section is in view; !important
   in a stylesheet beats an inline declaration, so the flip can't take. */
html {
  --_colors---background: #f0f1fa !important;
  --_colors---black: #080807 !important;
  --_colors---white-full: #ffffff !important;
}

.v2-shell {
  width: min(73.75rem, calc(100% - 3rem));
  margin-inline: auto;
}

@media screen and (max-width: 767px) {
  .v2-shell {
    width: calc(100% - 2rem);
  }
}

.v2-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  font-family: Aeonik, Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5b6480;
}

.v2-label::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #0047ff;
}

/* ---------- numbers band ---------- */
.v2-numbers {
  position: relative;
  background: #f0f1fa;
  color: #12203c;
  font-family: Aeonik, Arial, sans-serif;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}

.v2-numbers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(18, 32, 60, 0.14);
  border-bottom: 1px solid rgba(18, 32, 60, 0.14);
}

.v2-number {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.125rem;
  padding: clamp(2rem, 4vw, 3.75rem) clamp(1rem, 2.5vw, 2.5rem);
  border-right: 1px solid rgba(18, 32, 60, 0.14);
  min-width: 0;
}

.v2-number:last-child {
  border-right: 0;
}

.v2-number-value {
  margin: 0;
  font-family: Featuredisplay, Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.5rem, 6.2vw, 72px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.v2-number-value .v2-sym {
  font-size: 0.64em;
  vertical-align: 0.22em;
  margin-right: 0.04em;
}

.v2-number-caption {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5b6480;
}

@media screen and (max-width: 900px) {
  .v2-numbers-grid {
    grid-template-columns: 1fr;
  }

  .v2-number {
    border-right: 0;
    border-bottom: 1px solid rgba(18, 32, 60, 0.14);
    padding: 1.5rem 0;
  }

  .v2-number:last-child {
    border-bottom: 0;
  }

  .v2-number-value {
    font-size: clamp(3rem, 13vw, 4.5rem);
  }
}

/* ---------- signals -> pool -> what you get ----------
   Text labels, hairline wires fanning into one ring, particles streaming
   on every wire at once. The ring is the only object on the stage. */
.v2-signals {
  position: relative;
  background: #f0f1fa;
  color: #12203c;
  font-family: Aeonik, Arial, sans-serif;
  padding: clamp(1rem, 2vw, 2rem) 0 clamp(3.5rem, 7vw, 6.5rem);
}

.v2-head {
  display: grid;
  gap: 1rem;
  max-width: 44rem;
}

.v2-h2 {
  margin: 0;
  font-family: Featuredisplay, Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.5rem, 5.2vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #12203c;
}

.v2-h2 em {
  font-style: italic;
  margin-right: 0.08em;
}

.v2-lede {
  margin: 0;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.55;
  color: #5b6480;
  max-width: 52ch;
}

.v2-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.v2-stage > * {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.v2-wires,
.v2-flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.v2-wires {
  z-index: 0;
}

.v2-flow {
  z-index: 2;
}

.v2-wires path {
  fill: none;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.v2-wires circle {
  fill: #0047ff;
}

@media screen and (min-width: 901px) {
  .v2-sig i,
  .v2-get i {
    display: none;
  }

  .v2-get {
    white-space: nowrap;
  }
}

.v2-col-label {
  margin: 0 0 1.25rem;
}

.v2-sig-list,
.v2-get-list {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}

.v2-sig-list {
  gap: 0;
  padding-right: 0;
}

.v2-stage > .v2-left {
  justify-self: start;
}

.v2-stage > .v2-right {
  justify-self: end;
}

.v2-sig > div,
.v2-get {
  width: max-content;
  max-width: 100%;
}

.v2-sig {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.4rem 0;
}

.v2-sig b {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
}

.v2-sig span {
  display: block;
  font-size: 0.8125rem;
  color: #5b6480;
  line-height: 1.35;
}

.v2-sig i,
.v2-get i {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: #0047ff;
  flex: none;
}

.v2-get-list {
  gap: 0;
  padding-left: 0;
}

.v2-get {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
}

.v2-get.is-final {
  font-family: Featuredisplay, Georgia, serif;
  font-weight: 300;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}

.v2-get.is-final i {
  width: 0.625rem;
  height: 0.625rem;
}

/* pool ring */
.v2-pool {
  display: grid;
  justify-items: center;
  gap: 1rem;
  text-align: center;
  padding: 1rem 0;
}

.v2-ring {
  position: relative;
  width: clamp(8rem, 12vw, 10.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(18, 32, 60, 0.18);
  background: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 10px rgba(0, 71, 255, 0.04), 0 0.75rem 2.5rem rgba(18, 32, 60, 0.08);
}

.v2-ring svg {
  width: 38%;
  height: auto;
  color: #080807;
}

@keyframes v2-breathe {
  0%, 100% { box-shadow: 0 0 0 10px rgba(0, 71, 255, 0.04), 0 0 40px rgba(0, 71, 255, 0.1); }
  50% { box-shadow: 0 0 0 14px rgba(0, 71, 255, 0.06), 0 0 60px rgba(0, 71, 255, 0.18); }
}

.v2-pool-cap {
  margin: 0;
  font-family: Featuredisplay, Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.v2-pool-sub {
  margin: 0;
  font-size: 0.8125rem;
  color: #5b6480;
}

@media screen and (max-width: 900px) {
  .v2-stage {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .v2-wires,
  .v2-flow {
    display: none;
  }

  .v2-sig-list {
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 1.5rem;
    padding-right: 0;
  }

  .v2-sig {
    grid-template-columns: auto 1fr;
  }

  .v2-sig i {
    order: -1;
  }

  .v2-get-list {
    padding-left: 0;
  }
}

@media screen and (max-width: 560px) {
  .v2-sig-list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-ring {
    animation: none;
  }
}

/* ---------- the engineers ----------
   Maintouch-style: a sticky numbered index on the left, and tiles on the
   right that stack over each other as you scroll. Each tile is a blue frame
   (with the hero's glyph texture) holding a small live product screen, next
   to a number, a title and three points.

   Every screen's finished frame is the default, so with no JS or reduced
   motion it simply shows. v2.js adds .v2-anim to the section, which holds
   the moving parts back until a scene gets .is-play. */
.v2-engineers {
  background: #f0f1fa;
  color: #12203c;
  font-family: Aeonik, Arial, sans-serif;
  padding: clamp(3.5rem, 7vw, 6.5rem) 0;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.v2-eng {
  display: grid;
  grid-template-columns: 14.5rem minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* index */
.v2-index {
  position: sticky;
  top: 7rem;
  display: grid;
  border-top: 1px solid rgba(18, 32, 60, 0.14);
}

.v2-index a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.625rem;
  border-bottom: 1px solid rgba(18, 32, 60, 0.14);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5b6480;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.v2-index a span {
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border: 1px solid rgba(18, 32, 60, 0.18);
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.v2-index a.is-active {
  background: rgba(0, 71, 255, 0.07);
  color: #12203c;
}

.v2-index a.is-active span {
  background: #0047ff;
  border-color: #0047ff;
  color: #ffffff;
}

/* stacked tiles */
.v2-tiles {
  display: grid;
  gap: 1.5rem;
}

.v2-tile {
  position: sticky;
  top: calc(6.5rem + var(--i) * 1.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  min-height: 34rem;
  background: #ffffff;
  border: 1px solid rgba(18, 32, 60, 0.12);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 -0.75rem 2.5rem rgba(18, 32, 60, 0.06);
}

.v2-frame {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background-color: #0047ff;
  background-image:
    radial-gradient(70% 60% at 50% 50%, rgba(0, 71, 255, 0.95), rgba(0, 71, 255, 0) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='68' font-family='monospace' font-size='11' fill='white' fill-opacity='.28'%3E%3Ctext x='4' y='14'%3E·%3C/text%3E%3Ctext x='21' y='14'%3E:%3C/text%3E%3Ctext x='38' y='14'%3E·%3C/text%3E%3Ctext x='55' y='14'%3E+%3C/text%3E%3Ctext x='4' y='31'%3E-%3C/text%3E%3Ctext x='21' y='31'%3E·%3C/text%3E%3Ctext x='38' y='31'%3E/%3C/text%3E%3Ctext x='55' y='31'%3E·%3C/text%3E%3Ctext x='4' y='48'%3E·%3C/text%3E%3Ctext x='21' y='48'%3E+%3C/text%3E%3Ctext x='38' y='48'%3E·%3C/text%3E%3Ctext x='55' y='48'%3E:%3C/text%3E%3Ctext x='4' y='65'%3E:%3C/text%3E%3Ctext x='21' y='65'%3E·%3C/text%3E%3Ctext x='38' y='65'%3E-%3C/text%3E%3Ctext x='55' y='65'%3E·%3C/text%3E%3C/svg%3E");
  background-size: 100% 100%, 34px 34px;
  overflow: hidden;
}

.v2-tile-text {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.75rem, 3vw, 2.75rem);
}

.v2-num {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid rgba(18, 32, 60, 0.18);
  border-radius: 0.25rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: #5b6480;
}

.v2-h3 {
  margin: 0;
  font-family: Featuredisplay, Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.75rem, 2.5vw, 2.375rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #12203c;
}

.v2-points {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-points li {
  position: relative;
  padding-left: 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #5b6480;
}

.v2-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.375rem;
  height: 0.375rem;
  background: #0047ff;
}

/* ---- shared screen parts ---- */
.v2-scene {
  position: relative;
  width: 100%;
  max-width: 30rem;
  font-size: 0.8125rem;
  color: #12203c;
}

.v2-win,
.v2-float {
  background: #ffffff;
  border-radius: 0.875rem;
  box-shadow: 0 1px 2px rgba(8, 20, 60, 0.12), 0 1.25rem 3rem rgba(8, 20, 60, 0.28);
}

.v2-win {
  display: grid;
  gap: 0.875rem;
  padding: 1rem;
}

.v2-mini {
  margin: 0 0 0.375rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5b6480;
}

.v2-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: #e8edff;
  color: #0047ff;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.v2-chip.is-dark {
  background: #12203c;
  color: #ffffff;
}

.v2-card-top,
.v2-score-row,
.v2-win-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.v2-av {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #0047ff;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 500;
}

.v2-prof,
.v2-sign,
.v2-file,
.v2-iv-tile {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.v2-prof > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.v2-prof b,
.v2-sign b,
.v2-file b,
.v2-check b,
.v2-iv-tile b {
  display: block;
  font-weight: 500;
  line-height: 1.25;
}

.v2-prof small,
.v2-sign small,
.v2-file small,
.v2-check small,
.v2-iv-tile small {
  display: block;
  font-size: 0.6875rem;
  color: #5b6480;
  line-height: 1.3;
}

.v2-iv-tile img,
.v2-sign img {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  object-fit: cover;
}

.v2-pill {
  display: inline-grid;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: #0047ff;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.v2-pill > span,
.v2-ready > span {
  grid-area: 1 / 1;
  justify-self: center;
}

.v2-pill-a,
.v2-ready-a {
  opacity: 0;
}

.v2-segs {
  display: flex;
  gap: 0.25rem;
}

.v2-segs i {
  width: 1.125rem;
  height: 0.3125rem;
  border-radius: 999px;
  background: #e1e4f0;
}

.v2-segs i.is-fill {
  background: #0047ff;
}

/* ---- 01 interview session ---- */
.v2-s1 {
  padding: 2.75rem 0 4.5rem;
}

.v2-win-bar {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(18, 32, 60, 0.08);
  font-size: 0.75rem;
  font-weight: 500;
}

.v2-timer {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: #5b6480;
}

.v2-timer b {
  font-weight: 400;
}

.v2-rec {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: #ff4d4d;
  animation: v2-blink 1.4s ease-in-out infinite;
}

@keyframes v2-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.v2-win-body {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 0.875rem;
}

.v2-tickets {
  display: grid;
  gap: 0.375rem;
  align-content: start;
}

.v2-ticket {
  display: grid;
  gap: 0.125rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid rgba(18, 32, 60, 0.1);
  border-radius: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.3;
  position: relative;
}

.v2-ticket em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.625rem;
  color: #5b6480;
}

.v2-ticket.is-pick {
  border-color: #0047ff;
  box-shadow: 0 0 0 3px rgba(0, 71, 255, 0.12);
}

.v2-ticket .v2-chip {
  justify-self: start;
  margin-top: 0.25rem;
}

.v2-code {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: #0d1530;
  color: #c9d3f5;
}

.v2-code .v2-mini {
  color: #7f8ab0;
}

.v2-code code {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.v2-code s {
  text-decoration: none;
  color: #8fb0ff;
}

.v2-code u {
  text-decoration: none;
  color: #9fe0b8;
}

.v2-code .v2-in1 {
  padding-left: 1em;
}

.v2-code .v2-ok {
  margin-top: 0.375rem;
  color: #6fe3a1;
}

.v2-float {
  position: absolute;
  padding: 0.75rem;
}

.v2-iv-tile {
  top: 0;
  right: -1.25rem;
  padding-right: 0.875rem;
}

.v2-scorecard {
  bottom: 0;
  left: -1.25rem;
  width: 15.5rem;
  display: grid;
  gap: 0.5rem;
}

.v2-scorecard .v2-mini {
  margin: 0;
}

.v2-score-row {
  font-size: 0.75rem;
}

/* ---- 02 shared profile ---- */
.v2-tabs {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 0.625rem;
  background: #f0f1fa;
  justify-self: start;
  font-size: 0.75rem;
  font-weight: 500;
}

.v2-tabs > span {
  position: relative;
  z-index: 1;
  padding: 0.375rem 0.75rem;
  color: #5b6480;
}

.v2-tabs > .v2-tab-notes {
  color: #12203c;
}

.v2-tab-glider {
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0.25rem;
  width: var(--gw, 0);
  border-radius: 0.4375rem;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(18, 32, 60, 0.12);
  transform: translateX(var(--gx, 0));
}

.v2-panes {
  display: grid;
  min-height: 15.5rem;
}

.v2-panes > div {
  grid-area: 1 / 1;
}

.v2-pane-cv {
  display: grid;
  gap: 0.625rem;
  align-content: start;
  opacity: 0;
}

.v2-file-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2.375rem;
  border-radius: 0.375rem;
  background: #f0f1fa;
  font-family: var(--mono);
  font-size: 0.5625rem;
  color: #5b6480;
}

.v2-bar {
  display: block;
  height: 0.4375rem;
  border-radius: 999px;
  background: #eceef6;
}

.v2-pane-notes {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.v2-note-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-note-list li {
  position: relative;
  padding-left: 0.875rem;
  line-height: 1.45;
}

.v2-note-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: #0047ff;
}

.v2-note-list mark,
.v2-brief-text mark {
  color: inherit;
  background: linear-gradient(rgba(0, 71, 255, 0.14), rgba(0, 71, 255, 0.14)) no-repeat 0 0 / 100% 100%;
  border-radius: 0.1875rem;
  padding: 0 0.125rem;
}

.v2-verdict {
  margin: 0;
  padding: 0.625rem 0.75rem;
  border-left: 2px solid #0047ff;
  background: #f5f7ff;
  font-family: Featuredisplay, Georgia, serif;
  font-size: 1rem;
  line-height: 1.3;
}

.v2-sign {
  padding-top: 0.625rem;
  border-top: 1px solid rgba(18, 32, 60, 0.08);
}

/* ---- 03 startup fit ---- */
.v2-ready {
  display: inline-grid;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: #0047ff;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.v2-jobs {
  display: grid;
  gap: 0.5rem;
}

.v2-job {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.625rem 0.75rem;
  align-items: center;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: #f5f6fb;
}

.v2-logo {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: #12203c;
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 500;
}

.v2-logo.is-code {
  background: #ffffff;
  color: #12203c;
  border: 1px solid rgba(18, 32, 60, 0.14);
  font-family: var(--mono);
  font-size: 0.6875rem;
}

.v2-job-main b {
  display: block;
  font-weight: 500;
  line-height: 1.25;
}

.v2-job-main small {
  display: block;
  font-size: 0.6875rem;
  color: #5b6480;
}

.v2-stages {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.625rem;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #12203c;
}

.v2-stage-bar {
  position: relative;
  height: 0.375rem;
  border-radius: 999px;
  background: #e1e4f0;
  overflow: hidden;
}

.v2-stage-bar i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #0047ff;
  transform-origin: left center;
}

.v2-checks {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0.875rem 0 0;
  list-style: none;
  border-top: 1px solid rgba(18, 32, 60, 0.08);
}

.v2-check {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.v2-tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #0047ff;
}

.v2-tick svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v2-tick svg path {
  stroke-dasharray: 16;
}

/* ---- motion: held back until played ---- */
.v2-anim .v2-scene:not(.is-play) .v2-a,
.v2-anim .v2-scene:not(.is-play) .v2-check {
  opacity: 0;
  transform: translateY(0.5rem);
}

.v2-anim .v2-scene:not(.is-play) .v2-ticket.is-pick {
  border-color: rgba(18, 32, 60, 0.1);
  box-shadow: none;
}

.v2-anim .v2-scene:not(.is-play) .v2-ticket.is-pick .v2-chip {
  opacity: 0;
}

.v2-anim .v2-scene:not(.is-play) .v2-segs i.is-fill {
  background: #e1e4f0;
}

.v2-anim .v2-scene:not(.is-play) .v2-pill,
.v2-anim .v2-scene:not(.is-play) .v2-ready {
  background: #f0f1fa;
  color: #12203c;
}

.v2-anim .v2-scene:not(.is-play) .v2-pill-a,
.v2-anim .v2-scene:not(.is-play) .v2-ready-a { opacity: 1; }
.v2-anim .v2-scene:not(.is-play) .v2-pill-b,
.v2-anim .v2-scene:not(.is-play) .v2-ready-b { opacity: 0; }

.v2-anim .v2-scene:not(.is-play) .v2-tab-glider {
  width: var(--gw0, 0);
  transform: translateX(0);
}

.v2-anim .v2-scene:not(.is-play) .v2-tab-notes { color: #5b6480; }
.v2-anim .v2-scene:not(.is-play) .v2-tab-cv { color: #12203c; }
.v2-anim .v2-scene:not(.is-play) .v2-pane-cv { opacity: 1; }

.v2-anim .v2-scene:not(.is-play) .v2-note-list mark,
.v2-anim .v2-scene:not(.is-play) .v2-brief-text mark {
  background-size: 0% 100%;
}

.v2-anim .v2-scene:not(.is-play) .v2-stage-bar i {
  transform: scaleX(0);
}

.v2-anim .v2-scene:not(.is-play) .v2-tick {
  transform: scale(0.4);
  background: #e1e4f0;
}

.v2-anim .v2-scene:not(.is-play) .v2-tick svg path {
  stroke-dashoffset: 16;
}

.v2-scene.is-play .v2-a,
.v2-scene.is-play .v2-check {
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0s);
}

.v2-scene.is-play .v2-ticket.is-pick {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  transition-delay: var(--d, 0s);
}

.v2-scene.is-play .v2-ticket.is-pick .v2-chip {
  transition: opacity 0.3s ease;
  transition-delay: calc(var(--d, 0s) + 0.15s);
}

.v2-scene.is-play .v2-segs i {
  transition: background-color 0.3s ease;
  transition-delay: var(--d, 0s);
}

.v2-scene.is-play .v2-pill,
.v2-scene.is-play .v2-ready,
.v2-scene.is-play .v2-tabs > span,
.v2-scene.is-play .v2-pane-cv {
  transition: background-color 0.4s ease, color 0.4s ease, opacity 0.35s ease;
  transition-delay: var(--d, 0s);
}

.v2-scene.is-play .v2-pill > span,
.v2-scene.is-play .v2-ready > span {
  transition: opacity 0.4s ease;
  transition-delay: var(--d, 0s);
}

.v2-scene.is-play .v2-tab-glider {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0s);
}

.v2-scene.is-play .v2-note-list mark,
.v2-scene.is-play .v2-brief-text mark {
  transition: background-size 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: var(--d, 0s);
}

.v2-scene.is-play .v2-stage-bar i {
  transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: var(--d, 0s);
}

.v2-scene.is-play .v2-tick {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
  transition-delay: calc(var(--d, 0s) + 0.15s);
}

.v2-scene.is-play .v2-tick svg path {
  transition: stroke-dashoffset 0.4s ease;
  transition-delay: calc(var(--d, 0s) + 0.4s);
}

/* ---- narrow ---- */
@media screen and (max-width: 1100px) {
  .v2-eng {
    grid-template-columns: 1fr;
  }

  .v2-index {
    display: none;
  }
}

@media screen and (max-width: 900px) {
  .v2-tile {
    position: relative;
    top: auto;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .v2-tile-text {
    order: -1;
  }
}

@media screen and (max-width: 560px) {
  .v2-frame {
    padding: 1.25rem 1rem;
  }

  .v2-win-body {
    grid-template-columns: 1fr;
  }

  .v2-iv-tile {
    right: -0.25rem;
  }

  .v2-scorecard {
    left: -0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-rec {
    animation: none;
  }
}

img.v2-av {
  object-fit: cover;
  background: #e1e4f0;
}

.v2-av.is-sm {
  width: 1.5rem;
  height: 1.5rem;
}

.v2-bar-who {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ---------- how it works ----------
   Three equal tiles in one boxed grid with corner marks. Each tile has the
   blue glyph frame on top with one small screen that plays once on view,
   then a number, a title and one sentence. Same .v2-anim / .is-play rules
   as the engineers section. */
.v2-how {
  background: #f0f1fa;
  color: #12203c;
  font-family: Aeonik, Arial, sans-serif;
  padding: clamp(1rem, 2vw, 2rem) 0 clamp(4rem, 8vw, 7rem);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.v2-how-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid rgba(18, 32, 60, 0.14);
  background: #ffffff;
}

.v2-corner {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid rgba(18, 32, 60, 0.4);
  background: #f0f1fa;
  z-index: 2;
}

.v2-corner.is-tl { top: -0.25rem; left: -0.25rem; }
.v2-corner.is-tr { top: -0.25rem; right: -0.25rem; }
.v2-corner.is-bl { bottom: -0.25rem; left: -0.25rem; }
.v2-corner.is-br { bottom: -0.25rem; right: -0.25rem; }

.v2-step {
  display: grid;
  grid-template-rows: auto 1fr;
  border-right: 1px solid rgba(18, 32, 60, 0.14);
  min-width: 0;
}

.v2-step:last-of-type {
  border-right: 0;
}

.v2-step-vis {
  position: relative;
  display: grid;
  place-items: center;
  height: 19rem;
  padding: 1.5rem;
  background-color: #0047ff;
  background-image:
    radial-gradient(70% 60% at 50% 50%, rgba(0, 71, 255, 0.95), rgba(0, 71, 255, 0) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='68' font-family='monospace' font-size='11' fill='white' fill-opacity='.28'%3E%3Ctext x='4' y='14'%3E·%3C/text%3E%3Ctext x='21' y='14'%3E:%3C/text%3E%3Ctext x='38' y='14'%3E·%3C/text%3E%3Ctext x='55' y='14'%3E+%3C/text%3E%3Ctext x='4' y='31'%3E-%3C/text%3E%3Ctext x='21' y='31'%3E·%3C/text%3E%3Ctext x='38' y='31'%3E/%3C/text%3E%3Ctext x='55' y='31'%3E·%3C/text%3E%3Ctext x='4' y='48'%3E·%3C/text%3E%3Ctext x='21' y='48'%3E+%3C/text%3E%3Ctext x='38' y='48'%3E·%3C/text%3E%3Ctext x='55' y='48'%3E:%3C/text%3E%3Ctext x='4' y='65'%3E:%3C/text%3E%3Ctext x='21' y='65'%3E·%3C/text%3E%3Ctext x='38' y='65'%3E-%3C/text%3E%3Ctext x='55' y='65'%3E·%3C/text%3E%3C/svg%3E");
  background-size: 100% 100%, 34px 34px;
  overflow: hidden;
}

.v2-step-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border-top: 1px solid rgba(18, 32, 60, 0.14);
}

.v2-h4 {
  margin: 0;
  font-family: Featuredisplay, Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #12203c;
}

.v2-step-text p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #5b6480;
}

.v2-step-tag {
  margin-top: auto;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(0, 71, 255, 0.3);
  border-radius: 0.25rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0047ff;
}

.v2-how .v2-scene {
  max-width: 19rem;
}

/* 01 brief */
.v2-brief {
  gap: 0.75rem;
}

.v2-brief .v2-mini {
  margin: 0;
}

.v2-brief-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.v2-req {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.v2-req-chip {
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  background: #0047ff;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 500;
}

.v2-status {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin: 0;
  padding-top: 0.625rem;
  border-top: 1px solid rgba(18, 32, 60, 0.08);
  font-size: 0.75rem;
  color: #5b6480;
}

.v2-status i {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

/* 02 candidates */
.v2-fan {
  display: grid;
  width: 100%;
}

.v2-fan > .v2-cand {
  grid-area: 1 / 1;
  align-self: start;
}

.v2-cand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.625rem;
  align-items: center;
  padding: 0.875rem;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
}

.v2-cand-main b {
  display: block;
  font-weight: 500;
  line-height: 1.25;
}

.v2-cand-main small {
  display: block;
  font-size: 0.6875rem;
  color: #5b6480;
}

.v2-av.is-blank {
  background: #dfe4f5;
  color: #5b6480;
}

/* the two behind read as a deck: same card, stepped up and narrower,
   contents faded so only their edges and names show */
.v2-cand.is-back2 {
  transform: translateY(-1.75rem) scale(0.86);
  opacity: 0.55;
}

.v2-cand.is-back1 {
  transform: translateY(-0.875rem) scale(0.93);
  opacity: 0.8;
}

.v2-cand.is-back1 > *,
.v2-cand.is-back2 > * {
  visibility: hidden;
}

.v2-cand.is-front {
  position: relative;
  margin-top: 1.75rem;
}

.v2-fan > .v2-cand.is-back1,
.v2-fan > .v2-cand.is-back2 {
  margin-top: 1.75rem;
  align-self: stretch;
}

.v2-notes-badge {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.5rem 0.1875rem 0.1875rem;
  border-radius: 999px;
  background: #f0f1fa;
  font-size: 0.6875rem;
  font-weight: 500;
}

.v2-notes-badge img {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  object-fit: cover;
}

.v2-book,
.v2-btn {
  display: grid;
  place-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.v2-book {
  grid-column: 1 / -1;
  background: #0047ff;
  color: #ffffff;
}

/* 03 trial week */
.v2-week {
  gap: 0.75rem;
}

.v2-days {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.25rem;
}

.v2-days span {
  padding: 0.5rem 0;
  border-radius: 0.375rem;
  background: #0047ff;
  color: #ffffff;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.v2-invoice {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 0.5rem;
  align-items: baseline;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  background: #f5f6fb;
  font-size: 0.75rem;
}

.v2-invoice b {
  font-family: Featuredisplay, Georgia, serif;
  font-weight: 300;
  font-size: 1.375rem;
  line-height: 1;
}

.v2-invoice small {
  grid-column: 1 / -1;
  font-size: 0.6875rem;
  color: #5b6480;
}

.v2-decide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem;
}

.v2-btn {
  border: 1px solid rgba(18, 32, 60, 0.14);
  color: #12203c;
}

.v2-btn.is-primary {
  border-color: #0047ff;
  background: #0047ff;
  color: #ffffff;
}

/* motion */
.v2-anim .v2-scene:not(.is-play) .v2-cand.is-back2,
.v2-anim .v2-scene:not(.is-play) .v2-cand.is-back1 {
  transform: translateY(0) scale(1);
  opacity: 0;
}

.v2-anim .v2-scene:not(.is-play) .v2-cand.is-front {
  transform: translateY(0.75rem);
  opacity: 0;
}

.v2-scene.is-play .v2-cand.is-front { transition-delay: 0.2s; }
.v2-scene.is-play .v2-cand.is-back1 { transition-delay: 0.9s; }
.v2-scene.is-play .v2-cand.is-back2 { transition-delay: 1.1s; }

.v2-anim .v2-scene:not(.is-play) .v2-book {
  background: #e8edff;
  color: #0047ff;
}

.v2-anim .v2-scene:not(.is-play) .v2-days span {
  background: #eceef6;
  color: #5b6480;
}

.v2-scene.is-play .v2-book,
.v2-scene.is-play .v2-days span {
  transition: background-color 0.35s ease, color 0.35s ease;
  transition-delay: var(--d, 0s);
}

@media screen and (max-width: 900px) {
  .v2-how-grid {
    grid-template-columns: 1fr;
  }

  .v2-step {
    border-right: 0;
    border-bottom: 1px solid rgba(18, 32, 60, 0.14);
  }

  .v2-step:last-of-type {
    border-bottom: 0;
  }

  .v2-step-vis {
    height: 17rem;
  }
}

/* ---------- case studies (placeholder copy) ----------
   One boxed panel. Company tabs across the top, each with a thin progress
   line while it is the current one; the panel below holds the founder
   quote, the hire, and three numbers. Tabs auto-advance while in view and
   stop for good once someone clicks one. */
.v2-cases {
  background: #f0f1fa;
  color: #12203c;
  font-family: Aeonik, Arial, sans-serif;
  padding: clamp(1rem, 2vw, 2rem) 0 clamp(4rem, 8vw, 7rem);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.v2-case-box {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid rgba(18, 32, 60, 0.14);
  border-radius: 1.25rem;
  background: #ffffff;
  overflow: hidden;
}

.v2-case-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid rgba(18, 32, 60, 0.14);
}

.v2-case-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1.125rem 1.25rem;
  border: 0;
  border-right: 1px solid rgba(18, 32, 60, 0.14);
  background: transparent;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #5b6480;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.v2-case-tab:last-child {
  border-right: 0;
}

.v2-case-tab:hover {
  background: #f7f8fc;
}

.v2-case-tab.is-active {
  color: #12203c;
  background: #f7f8fc;
}

.v2-case-name {
  min-width: 0;
  line-height: 1.3;
}

.v2-case-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #0047ff;
  transform: scaleX(0);
  transform-origin: left center;
}

.v2-case-tab.is-active .v2-case-progress {
  transform: scaleX(1);
}

.v2-cases.is-cycling .v2-case-tab.is-active .v2-case-progress {
  animation: v2-progress var(--cycle, 8s) linear forwards;
}

@keyframes v2-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.v2-case {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

.v2-case[hidden] {
  display: none;
}

.v2-case.is-active {
  animation: v2-case-in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes v2-case-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}

.v2-case-quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  margin: 0;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  border-right: 1px solid rgba(18, 32, 60, 0.14);
}

.v2-case-quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: Featuredisplay, Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.625rem, 2.6vw, 2.375rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #12203c;
}

.v2-case-quote blockquote::before {
  content: "\201C";
  display: block;
  margin-bottom: 0.25rem;
  font-size: 2.5em;
  line-height: 0.6;
  color: #0047ff;
}

.v2-case-attr {
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #5b6480;
}

.v2-team {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-team-chip {
  padding: 0.4375rem 0.75rem;
  border: 1px solid rgba(18, 32, 60, 0.14);
  border-radius: 999px;
  background: #ffffff;
  font-size: 0.875rem;
  line-height: 1.2;
  color: #12203c;
}

.v2-team-chip b {
  font-weight: 500;
  color: #0047ff;
}

.v2-case-hire {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: #f7f8fc;
}

.v2-case-hire .v2-mini {
  margin: 0;
}

.v2-case-story {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #5b6480;
}

.v2-case-metrics {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(18, 32, 60, 0.14);
}

.v2-case-metrics > div {
  display: grid;
  gap: 0.5rem;
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.75rem, 4vw, 3.5rem);
  border-right: 1px solid rgba(18, 32, 60, 0.14);
}

.v2-case-metrics > div:last-child {
  border-right: 0;
}

.v2-case-metrics b {
  font-family: Featuredisplay, Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #0047ff;
}

.v2-case-metrics span {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5b6480;
}

@media screen and (max-width: 900px) {
  .v2-case-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v2-case-tab:nth-child(2) {
    border-right: 0;
  }

  .v2-case-tab:nth-child(-n+2) {
    border-bottom: 1px solid rgba(18, 32, 60, 0.14);
  }

  .v2-case {
    grid-template-columns: 1fr;
  }

  .v2-case-quote {
    border-right: 0;
    border-bottom: 1px solid rgba(18, 32, 60, 0.14);
  }
}

@media screen and (max-width: 560px) {
  .v2-case-metrics {
    grid-template-columns: 1fr;
  }

  .v2-case-metrics > div {
    border-right: 0;
    border-bottom: 1px solid rgba(18, 32, 60, 0.14);
  }

  .v2-case-metrics > div:last-child {
    border-bottom: 0;
  }

}

/* ---------- closing CTA ----------
   Full-bleed hero blue with the same glyph texture, the role input again,
   and a quiet way out to a call. */
.v2-cta {
  position: relative;
  padding: clamp(5rem, 11vw, 9rem) 0;
  color: #ffffff;
  font-family: Aeonik, Arial, sans-serif;
  text-align: center;
  background-color: #0047ff;
  background-image:
    radial-gradient(55% 65% at 50% 50%, rgba(0, 71, 255, 0.95), rgba(0, 71, 255, 0) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='68' font-family='monospace' font-size='11' fill='white' fill-opacity='.28'%3E%3Ctext x='4' y='14'%3E·%3C/text%3E%3Ctext x='21' y='14'%3E:%3C/text%3E%3Ctext x='38' y='14'%3E·%3C/text%3E%3Ctext x='55' y='14'%3E+%3C/text%3E%3Ctext x='4' y='31'%3E-%3C/text%3E%3Ctext x='21' y='31'%3E·%3C/text%3E%3Ctext x='38' y='31'%3E/%3C/text%3E%3Ctext x='55' y='31'%3E·%3C/text%3E%3Ctext x='4' y='48'%3E·%3C/text%3E%3Ctext x='21' y='48'%3E+%3C/text%3E%3Ctext x='38' y='48'%3E·%3C/text%3E%3Ctext x='55' y='48'%3E:%3C/text%3E%3Ctext x='4' y='65'%3E:%3C/text%3E%3Ctext x='21' y='65'%3E·%3C/text%3E%3Ctext x='38' y='65'%3E-%3C/text%3E%3Ctext x='55' y='65'%3E·%3C/text%3E%3C/svg%3E");
  background-size: 100% 100%, 34px 34px;
}

.v2-cta-inner {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
}

.v2-cta-h {
  margin: 0;
  max-width: 14ch;
  font-family: Featuredisplay, Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.75rem, 6.4vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.v2-cta-sub {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}

.v2-cta .v2-cta-form {
  width: min(32rem, 100%);
  margin-top: 0.5rem;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.36);
  box-shadow: 0 0.75rem 1.875rem rgba(0, 20, 90, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.v2-cta .v2-cta-form:focus-within {
  border-color: rgba(255, 255, 255, 0.75);
}

.v2-cta .hero25-input {
  color: #ffffff;
}

.v2-cta .hero25-input::placeholder {
  color: rgba(255, 255, 255, 0.72);
}

.v2-cta .hero25-submit {
  background: #ffffff;
  color: #0047ff;
}

.v2-cta .hero25-submit:hover {
  background: #e6edff;
}

.v2-cta-alt {
  margin: 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.74);
}

.v2-cta-alt a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- FAQ ---------- */
.v2-faq {
  background: #f0f1fa;
  color: #12203c;
  font-family: Aeonik, Arial, sans-serif;
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.v2-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.v2-faq-head {
  display: grid;
  gap: 1rem;
  position: sticky;
  top: 7rem;
}

.v2-faq-head a {
  color: #12203c;
  text-underline-offset: 0.2em;
}

.v2-faq-list {
  border-top: 1px solid rgba(18, 32, 60, 0.14);
}

.v2-faq-item {
  border-bottom: 1px solid rgba(18, 32, 60, 0.14);
}

.v2-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.375rem 0;
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.v2-faq-item summary::-webkit-details-marker {
  display: none;
}

.v2-faq-item summary i {
  position: relative;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid rgba(18, 32, 60, 0.18);
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.3s ease;
}

.v2-faq-item summary i::before,
.v2-faq-item summary i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.625rem;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.v2-faq-item summary i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.v2-faq-item summary:hover i {
  border-color: #0047ff;
}

.v2-faq-item[open] summary i {
  background: #0047ff;
  border-color: #0047ff;
  color: #ffffff;
  transform: rotate(45deg);
}

.v2-faq-item p {
  margin: 0;
  padding: 0 3.25rem 1.5rem 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #5b6480;
}

@media screen and (max-width: 900px) {
  .v2-faq-grid {
    grid-template-columns: 1fr;
  }

  .v2-faq-head {
    position: static;
  }

  .v2-faq-item p {
    padding-right: 0;
  }
}

/* ---------- footer: light restyle ----------
   Keeps the live structure. Navy type on the pale ground, columns on the
   page grid, and the marquee band in solid brand blue with white type. */
.section.is--footer {
  background: #f0f1fa;
  color: #12203c;
}

/* The wordmark is a cut-out: the svg is filled with the page colour and
   the letters show the dark block and the moving glow behind it. Keep
   that, and make the glow the brand blue instead of sky. */
.section.is--footer .svg {
  color: #f0f1fa;
}

.section.is--footer .circle {
  background-color: #0047ff !important;
}

.section.is--footer p,
.section.is--footer .link--footer {
  color: #12203c;
}

.section.is--footer .opacity--50 {
  color: #5b6480;
  opacity: 1;
}

.section.is--footer .link--footer:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.footer--bottom {
  background-color: #0047ff !important;
  background-image: none !important;
}

.footer--bottom .text--cta {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* =================== phone and tablet pass ===================
   Fixes from the mobile review: no zoom on input focus, no sideways scroll,
   balanced headline wraps, readable product screens, roomier tap targets,
   and phone layouts that keep each section to a screen or two. */

.v2-cta .hero25-input {
  font-size: max(16px, 1rem);
}

.v2-h2,
.v2-h3,
.v2-h4,
.v2-cta-h,
.v2-cta-sub,
.v2-lede {
  text-wrap: balance;
}

/* the footer wordmark runs a few px wide between ~768 and 900 */
.section.is--footer {
  overflow-x: clip;
}

/* how-it-works pager only exists on phones */
.v2-how-pager {
  display: none;
}

@media screen and (max-width: 900px) {
  /* numbers: number left, caption right, one compact column */
  .v2-numbers-grid {
    margin-top: 1.5rem;
  }

  .v2-number {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 0;
  }

  .v2-number-value {
    font-size: clamp(2.375rem, 11vw, 3.5rem);
  }

  .v2-number-caption {
    max-width: 11rem;
    text-align: right;
    font-size: 0.75rem;
    line-height: 1.35;
  }

  /* pool: signals as a two-column grid of titles, wires drawn downward */
  .v2-stage {
    gap: 6.5rem;
  }

  .v2-wires,
  .v2-flow {
    display: block;
  }

  .v2-sig-list {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
  }

  .v2-sig {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .v2-sig i,
  .v2-get i {
    display: none;
  }

  .v2-sig span {
    display: none;
  }

  .v2-sig b {
    font-size: 0.9375rem;
  }

  .v2-stage > .v2-left,
  .v2-stage > .v2-right {
    justify-self: stretch;
  }

  .v2-get-list {
    padding: 0;
  }

  .v2-get {
    grid-template-columns: 1fr;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(18, 32, 60, 0.1);
  }

  .v2-get.is-final {
    border-bottom: 0;
    padding-top: 0.75rem;
  }

  .v2-pool {
    padding: 0;
  }

  /* engineers: the title and line sit on top of the screen they describe */
  .v2-tile-text {
    order: -1;
  }

  /* how it works: a swipe row with the next tile peeking in */
  .v2-how-grid {
    display: flex;
    gap: 0.75rem;
    margin-inline: -1rem;
    padding: 0 1rem 0.25rem;
    border: 0;
    background: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .v2-how-grid::-webkit-scrollbar {
    display: none;
  }

  .v2-corner {
    display: none;
  }

  .v2-step,
  .v2-step:last-of-type {
    flex: 0 0 min(84%, 24rem);
    scroll-snap-align: start;
    border: 1px solid rgba(18, 32, 60, 0.14);
    border-radius: 1rem;
    background: #ffffff;
    overflow: hidden;
  }

  .v2-step-vis {
    height: 16rem;
  }

  .v2-how-pager {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
  }

  .v2-how-pager button {
    min-width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(18, 32, 60, 0.18);
    border-radius: 0.375rem;
    background: transparent;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: #5b6480;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }

  .v2-how-pager button.is-active {
    background: #0047ff;
    border-color: #0047ff;
    color: #ffffff;
  }

  /* case studies: one row of tabs that scrolls sideways */
  .v2-case-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .v2-case-tabs::-webkit-scrollbar {
    display: none;
  }

  .v2-case-tab,
  .v2-case-tab:nth-child(2),
  .v2-case-tab:nth-child(-n+2) {
    flex: 0 0 auto;
    border-bottom: 0;
    border-right: 1px solid rgba(18, 32, 60, 0.14);
    padding: 1rem;
    min-height: 3.5rem;
  }

}

@media screen and (max-width: 560px) {
  /* engineers: one line of copy under each screen */
  .v2-points li:nth-child(n+2) {
    display: none;
  }

  .v2-tile-text {
    gap: 0.875rem;
    padding: 1.5rem 1.25rem 1.75rem;
  }

  /* screen 01: only the picked ticket, scorecard under the window */
  .v2-s1 {
    padding: 3.75rem 0 0;
  }

  .v2-ticket:not(.is-pick) {
    display: none;
  }

  .v2-scorecard {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    margin: -0.75rem 0.75rem 0;
  }

  .v2-iv-tile {
    right: -0.25rem;
  }

  .v2-city {
    display: none;
  }

  /* screens: nothing under 12px on a phone */
  .v2-scene .v2-mini,
  .v2-ticket em,
  .v2-code code,
  .v2-file-ic,
  .v2-stages,
  .v2-stage-chip,
  .v2-timer,
  .v2-chip,
  .v2-pill,
  .v2-ready,
  .v2-tabs,
  .v2-prof small,
  .v2-sign small,
  .v2-file small,
  .v2-check small,
  .v2-iv-tile small,
  .v2-job-main small,
  .v2-cand-main small,
  .v2-notes-badge,
  .v2-status,
  .v2-invoice,
  .v2-invoice small,
  .v2-days span,
  .v2-score-row,
  .v2-req-chip,
  .v2-num {
    font-size: 0.75rem;
  }

  .v2-scene {
    font-size: 0.875rem;
  }

  /* footer: links tall enough to tap */
  .section.is--footer .link--footer {
    padding: 0.5rem 0;
  }

  .v2-faq-head a,
  .v2-cta-alt a {
    display: inline-block;
    padding: 0.5rem 0;
  }
}

@media screen and (max-width: 900px) {
  .v2-get,
  .v2-sig > div {
    width: auto;
  }

  .v2-get.is-final {
    white-space: normal;
  }
}

.v2-sm-only {
  display: none;
}

@media screen and (max-width: 560px) {
  .v2-sm-only {
    display: inline;
  }
}

/* ---------- pool on phones: numbered grid in, timeline out ----------
   Desktop never shows the numbers or the tags. */
.v2-sig-n,
.v2-get-tag {
  display: none;
}

@media screen and (max-width: 900px) {
  .v2-stage {
    gap: 5.5rem;
  }

  /* signals: a boxed 2x4 index */
  .v2-sig-list {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid rgba(18, 32, 60, 0.14);
    border-left: 1px solid rgba(18, 32, 60, 0.14);
    background: #ffffff;
  }

  .v2-sig {
    padding: 0.875rem 0.875rem 1rem;
    border-right: 1px solid rgba(18, 32, 60, 0.14);
    border-bottom: 1px solid rgba(18, 32, 60, 0.14);
    align-items: start;
  }

  .v2-sig-n {
    display: block;
    margin-bottom: 0.5rem;
    font-style: normal;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: #5b6480;
  }

  .v2-sig b {
    font-size: 1rem;
  }

  .v2-sig span {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.35;
  }

  /* what you get: stops on a spine (drawn by v2.js) ending in a blue card */
  .v2-get-list {
    gap: 0;
  }

  .v2-get {
    position: relative;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.875rem 0;
    border-bottom: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    color: #12203c;
    transition: color 0.4s ease;
  }

  .v2-get i,
  .v2-get.is-final i {
    display: block;
    justify-self: center;
    position: relative;
    z-index: 3;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: #0047ff;
    box-shadow: 0 0 0 4px #f0f1fa;
    transition: background-color 0.35s ease, transform 0.35s ease;
  }

  .v2-get-tag {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border: 1px solid rgba(18, 32, 60, 0.14);
    border-radius: 999px;
    background: #ffffff;
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    color: #12203c;
    transition: border-color 0.35s ease;
  }

  .v2-get.is-final {
    display: block;
    margin-top: 1.25rem;
    padding: 1.25rem 1.375rem;
    border-radius: 0.875rem;
    background: #0047ff;
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1.15;
    box-shadow: 0 0.75rem 2rem rgba(0, 71, 255, 0.22);
    transition: box-shadow 0.5s ease, transform 0.5s ease;
  }

  .v2-get.is-final i {
    display: none;
  }

  /* while the streak runs, stops wait hollow until it reaches them */
  .v2-stage.is-live .v2-get:not(.is-final):not(.is-lit) {
    color: #8a91a8;
  }

  .v2-stage.is-live .v2-get:not(.is-lit) i {
    background: #ffffff;
    box-shadow: 0 0 0 4px #f0f1fa, inset 0 0 0 1.5px rgba(0, 71, 255, 0.5);
  }

  .v2-stage.is-live .v2-get.is-lit i {
    transform: scale(1.15);
  }

  .v2-stage.is-live .v2-get:not(.is-lit) .v2-get-tag {
    border-color: rgba(18, 32, 60, 0.08);
  }

  .v2-stage.is-live .v2-get.is-final:not(.is-lit) {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 71, 255, 0.12);
  }

  .v2-stage.is-live .v2-get.is-final.is-lit {
    transform: translateY(-2px);
    box-shadow: 0 1rem 2.5rem rgba(0, 71, 255, 0.32);
  }
}

@media screen and (max-width: 900px) {
  .v2-right .v2-col-label {
    padding-left: 2.25rem;
  }

  .v2-right .v2-col-label::before {
    display: none;
  }

  .v2-get.is-final {
    text-wrap: balance;
  }

  .v2-get.is-final span {
    display: block;
  }
}

/* lighter signal index on phones: no boxes, no descriptions, just the
   number and the name in two tight columns; and no tags on the stops */
@media screen and (max-width: 900px) {
  .v2-sig-list {
    gap: 0.75rem 1rem;
    border: 0;
    background: none;
  }

  .v2-sig {
    padding: 0;
    border: 0;
  }

  .v2-sig > div {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
  }

  .v2-sig-n {
    margin: 0;
    font-size: 0.6875rem;
  }

  .v2-sig b {
    font-size: 0.9375rem;
  }

  .v2-sig span {
    display: none;
  }

  .v2-get {
    grid-template-columns: 1.5rem minmax(0, 1fr);
  }
}

@media screen and (max-width: 900px) {
  .v2-case-name {
    white-space: nowrap;
  }
}

/* Desktop auto-advances the case tabs, so stack every card in one cell and
   size the box to the tallest; switching tabs never moves the page. */
@media screen and (min-width: 901px) {
  .v2-case-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .v2-case,
  .v2-case[hidden] {
    display: grid;
    grid-row: 2;
    grid-column: 1;
  }

  .v2-case[hidden] {
    visibility: hidden;
  }

  /* spare height goes to the quote row; the stats row stays tight */
  .v2-case {
    grid-template-rows: 1fr auto;
  }
}

/* ---------- case cards: one format for all four ----------
   Tab: company type plus an orange credential badge. Card: quote, title-only
   attribution, the team, a three-beat story, three stats with the same
   labels on every card. */
.v2-badge {
  margin-left: auto;
  flex: none;
  padding: 0.1875rem 0.4375rem;
  border-radius: 0.25rem;
  background: #ff6600;
  color: #ffffff;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.v2-case-tab:not(.is-active) .v2-badge {
  opacity: 0.55;
}

.v2-case-tab .v2-badge {
  transition: opacity 0.3s ease;
}

.v2-case-beats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(18, 32, 60, 0.14);
}

.v2-case-beats > div {
  display: grid;
  align-content: start;
  gap: 0.625rem;
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.75rem, 4vw, 3.5rem);
  border-right: 1px solid rgba(18, 32, 60, 0.14);
}

.v2-case-beats > div:last-child {
  border-right: 0;
}

.v2-case-beats .v2-mini {
  margin: 0;
}

.v2-case-beats p:not(.v2-mini) {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #12203c;
}

@media screen and (min-width: 901px) {
  .v2-case {
    grid-template-rows: 1fr auto auto;
  }
}

@media screen and (max-width: 900px) {
  .v2-case-beats {
    grid-template-columns: 1fr;
  }

  .v2-case-beats > div {
    border-right: 0;
    border-bottom: 1px solid rgba(18, 32, 60, 0.14);
    padding: 1.25rem 1.75rem;
  }

  .v2-case-beats > div:last-child {
    border-bottom: 0;
  }

  .v2-case-tab .v2-badge {
    margin-left: 0.5rem;
  }
}

@media screen and (max-width: 560px) {
  .v2-case-beats > div {
    padding: 1.125rem 1.25rem;
  }
}

/* Desktop card: quote on the left, the team and the three stats stacked on
   the right so both halves carry weight; the story runs full width below. */
@media screen and (min-width: 901px) {
  .v2-case {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
  }

  .v2-case-quote {
    grid-column: 1;
    grid-row: 1 / 3;
    justify-content: center;
    gap: 1.75rem;
  }

  .v2-case-hire {
    grid-column: 2;
    grid-row: 1;
  }

  .v2-case-metrics {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    background: #f7f8fc;
  }

  .v2-case-metrics > div {
    align-content: center;
    padding: 1.25rem clamp(1.75rem, 3vw, 2.5rem);
    border-right: 0;
    border-bottom: 1px solid rgba(18, 32, 60, 0.14);
  }

  .v2-case-metrics > div:last-child {
    border-bottom: 0;
  }

  .v2-case-beats {
    grid-row: 3;
  }
}

/* Phones and tablets: the vetting tiles stack on scroll. v2.js sets --stick
   per tile (a tall tile pins by its bottom edge) and --s/--dim on the tile
   being covered. */
@media screen and (max-width: 900px) {
  .v2-tiles {
    gap: 1rem;
  }

  .v2-tile {
    position: sticky;
    top: var(--stick, calc(5rem + var(--i) * 0.75rem));
    transform: scale(var(--s, 1));
    transform-origin: 50% 0;
    box-shadow: 0 -0.5rem 1.75rem rgba(18, 32, 60, 0.08);
  }

  .v2-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #12203c;
    opacity: var(--dim, 0);
    pointer-events: none;
  }
}

/* Same inversion inside the blue tile frames. */
.v2-frame ::selection {
  background: #fff;
  color: #0047ff;
}