/* ==========================================================================
   TechAxis Intelligence — Solutions site, product pages
   Loads AFTER styles.css and reuses its tokens. Adds only what the
   individual product pages need. Does not change any existing rule.
   ========================================================================== */

/* ---------- Capabilities ---------- */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
}
.cap {
  padding-left: 1.4rem;
  border-left: 2px solid var(--gold);
}
.cap h3 { font-size: 1.15rem; margin-bottom: .45rem; }
.cap p { color: var(--slate); font-size: .98rem; }

.fine-print {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  max-width: 44rem;
  font-size: .92rem;
  color: var(--muted);
}

/* ---------- Why now ---------- */
.whynow {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.whynow__head { margin: 0; }
.whynow__body {
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 2px solid var(--gold);
}
.whynow__body p { font-size: 1.1rem; color: var(--ink); }
.whynow__body p + p { margin-top: 1.1rem; color: var(--slate); }

/* ---------- Value calculation ---------- */
.calc {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
  counter-reset: calc;
}
.calc__step {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy-800);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem 1.4rem;
}
.calc__step:not(:last-child)::after {
  content: "\2192";
  position: absolute; top: 50%; right: -1.05rem;
  transform: translateY(-50%);
  z-index: 1;
  width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--mist);
  border: 1px solid var(--line);
  color: var(--gold-deep);
  font-size: .95rem; line-height: 1;
}
.calc__label {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.calc__num {
  display: block;
  margin: .6rem 0 .35rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 3.6vw, 2.8rem);
  line-height: 1;
  color: var(--navy-800);
}
.calc__cap { display: block; font-size: .94rem; color: var(--slate); }

.calc__result {
  margin-top: 1.1rem;
  text-align: center;
  background: var(--navy-900);
  border-radius: var(--radius);
  border-bottom: 3px solid var(--gold);
  padding: clamp(1.75rem, 4vw, 2.5rem) 1.5rem;
}
.calc__result-label {
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-200);
}
.calc__result-num {
  margin: .5rem 0 .3rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 1;
  color: var(--on-dark);
}
.calc__result-cap { color: var(--on-dark-soft); font-size: 1rem; }
.calc__note {
  margin-top: 1.4rem;
  max-width: 46rem;
  font-size: .92rem;
  color: var(--muted);
}

/* ---------- KPIs ---------- */
.kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.kpi {
  padding-top: 1.25rem;
  border-top: 2px solid var(--gold);
}
.kpi__name {
  font-size: 1.2rem;
  color: var(--on-dark);
  margin-bottom: .6rem;
}
.kpi p { color: var(--on-dark-soft); font-size: .95rem; }

/* ---------- Industry use cases ---------- */
.usecases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
}
.usecase {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy-800);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem 1.6rem;
}
.usecase h3 { font-size: 1.22rem; margin-bottom: 1.1rem; }
.usecase__label {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .3rem;
}
.usecase p { color: var(--ink); font-size: .96rem; }
.usecase p + .usecase__label { margin-top: 1rem; }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .usecases, .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc__step:not(:last-child)::after { display: none; }
  .whynow { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 640px) {
  .usecases, .cap-grid, .calc, .kpis { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Additions for the AI SDR page (and reusable on later product pages)
   ========================================================================== */

/* ---------- Flow line (hero and KPI visuals) ---------- */
.flowline {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .6rem .5rem;
  margin: 2.25rem 0 0; padding: 0;
  list-style: none;
}
.flowline li {
  display: inline-flex; align-items: center; gap: .85rem;
  font-family: var(--font-mono);
  font-size: .74rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-dark);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius);
  padding: .65rem .9rem;
}
.flowline li:not(:last-child)::after { content: "\2192"; color: var(--gold-200); font-size: .95rem; }
.flowline li:last-child { border-color: var(--gold); color: var(--gold-200); }
.flowline--center { justify-content: center; }

/* ---------- Five-step workflow ---------- */
.steps--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.js .is-visible .steps--five .step:nth-child(5),
.js .steps--five.is-visible .step:nth-child(5) { transition-delay: .4s; }

/* ---------- Pull statement ---------- */
.pull {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 44rem;
  padding-left: 1.4rem;
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  line-height: 1.3;
  color: var(--navy-800);
}
.pull--center { margin-inline: auto; }

/* ---------- Two lead journeys ---------- */
.journeys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: clamp(2.25rem, 4vw, 3rem);
}
.journey {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: 1.6rem 1.5rem;
}
.journey--with { background: var(--navy-900); border-color: var(--navy-900); border-bottom: 3px solid var(--gold); }
.journey__title {
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.journey--with .journey__title { color: var(--gold-200); }
.journey__steps { list-style: none; margin: 0; padding: 0; }
.journey__steps li {
  position: relative;
  padding: .6rem 0 .6rem 1.6rem;
  font-weight: 500; color: var(--ink);
}
.journey__steps li::before {
  content: ""; position: absolute; left: .2rem; top: 1.05rem;
  width: .55rem; height: .55rem; border-radius: 50%;
  background: #B3C0D3;
}
.journey__steps li:not(:last-child)::after {
  content: ""; position: absolute; left: calc(.2rem + .25rem); top: 1.7rem; bottom: -.45rem;
  width: 1px; background: #B3C0D3;
}
.journey__steps li:last-child { color: var(--slate); }
.journey--with .journey__steps li { color: var(--on-dark); }
.journey--with .journey__steps li::before { background: var(--gold-200); }
.journey--with .journey__steps li::after { background: var(--on-dark-line); }
.journey--with .journey__steps li:last-child { color: var(--gold-200); }

/* ---------- Conversion funnel ---------- */
.funnel {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center;
}
.funnel__stage {
  width: var(--w, 100%);
  min-width: min(100%, 22rem);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem;
  padding: 1.05rem 1.5rem;
  border-radius: var(--radius);
  background: var(--navy-800);
  color: var(--on-dark);
}
.funnel__stage--2 { background: var(--navy-700); }
.funnel__stage--3 { background: var(--navy-600); }
.funnel__num {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem); line-height: 1;
  white-space: nowrap;
}
.funnel__label { font-size: .98rem; text-align: right; color: var(--on-dark-soft); }
.funnel__stage--key {
  background: var(--gold); color: var(--navy-900);
  padding-block: 1.35rem;
}
.funnel__stage--key .funnel__num { font-size: clamp(2.4rem, 4.6vw, 3.4rem); }
.funnel__stage--key .funnel__label { color: var(--navy-900); font-weight: 600; }
.funnel__stage--end {
  background: var(--white); color: var(--navy-800);
  border: 1px solid var(--gold);
}
.funnel__stage--end .funnel__label { color: var(--slate); }
.funnel__rate {
  padding: .7rem 0;
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.funnel__rate::before { content: "\2193\00a0\00a0"; color: var(--gold-deep); }

.calc__question {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  color: var(--navy-800);
  text-align: center;
}
.calc__note--center { margin-inline: auto; text-align: center; }

/* ---------- Six-up KPI strip and KPI extras ---------- */
.kpis--six { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem); }
.kpi__def { margin-top: .15rem; }
.kpi-extra {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem;
}
.kpi-extra__box {
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  color: var(--on-dark-soft); font-size: .95rem;
}
.kpi-extra__box strong { display: block; margin-bottom: .35rem; color: var(--on-dark); font-weight: 600; }
.kpi-close {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  text-align: center;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  color: var(--on-dark);
  max-width: 40rem; margin-inline: auto;
}

/* ---------- Use cases with three labels ---------- */
.usecases--detail .usecase p + .usecase__label { margin-top: .95rem; }

@media (max-width: 1100px) {
  .steps--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .journeys { grid-template-columns: 1fr; }
  .kpis--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .steps--five, .kpis--six, .kpi-extra { grid-template-columns: 1fr; }
  .funnel__stage { width: 100%; min-width: 0; }
  .flowline { flex-direction: column; align-items: stretch; }
  .flowline li { justify-content: space-between; }
  .flowline li:not(:last-child)::after { content: "\2193"; }
}

/* Hero progression: allow it to run wider than the text column so it stays on one line */
.hero .flowline { width: max-content; max-width: 100%; }
@media (min-width: 641px) {
  .hero .flowline { max-width: calc(100vw - 2 * var(--gutter)); }
}

/* ==========================================================================
   Additions for the AI Growth Engine page
   ========================================================================== */

/* Light-background flow line */
.flowline--light li {
  color: var(--ink);
  background: var(--white);
  border-color: var(--line);
}
.flowline--light li:not(:last-child)::after { color: var(--gold-deep); }
.flowline--light li:last-child { border-color: var(--gold); color: var(--gold-deep); }

/* Business objective line inside a navy step */
.step__obj {
  margin-top: 1rem; padding-top: .85rem;
  border-top: 1px dashed var(--on-dark-line);
  color: var(--on-dark); font-size: .92rem;
}
.step__obj span {
  display: block; margin-bottom: .25rem;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-200);
}

/* Five-customer value visual */
.engine-tag {
  display: inline-block;
  margin-bottom: 1.1rem;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: .35rem .6rem;
}
.engine-visual { display: flex; flex-direction: column; align-items: center; }
.engine-visual .flowline { margin-top: 0; justify-content: center; }
.engine-drop {
  width: 1px; height: 1.6rem; background: var(--gold); margin: .6rem 0;
  position: relative;
}
.engine-drop::after {
  content: ""; position: absolute; bottom: -1px; left: 50%;
  width: .5rem; height: .5rem; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  transform: translateX(-50%) rotate(45deg);
}
.customers {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem clamp(1rem, 3vw, 2rem);
}
.customers li { display: grid; justify-items: center; gap: .4rem; }
.customers svg { width: 2.75rem; height: 2.75rem; color: var(--navy-800); }
.customers__cap {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.engine-visual .calc__result { width: 100%; }
.calc__result-eq {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--on-dark-soft);
  margin-bottom: .3rem;
}
.qs { margin-top: clamp(2rem, 4vw, 3rem); }
.qs__title {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 1.1rem;
}

/* KPI groups (dashboard style) */
.kpigroups {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
}
.kpigroup {
  border: 1px solid var(--on-dark-line);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  padding: 1.4rem 1.3rem 1.5rem;
}
.kpigroup h3 { font-size: 1.15rem; color: var(--on-dark); margin-bottom: 1rem; }
.kpigroup ul { list-style: none; margin: 0; padding: 0; }
.kpigroup li {
  position: relative; padding: .5rem 0 .5rem 1.1rem;
  color: var(--on-dark-soft); font-size: .95rem;
  border-top: 1px solid var(--on-dark-line);
}
.kpigroup li:first-child { border-top: 0; }
.kpigroup li::before {
  content: ""; position: absolute; left: 0; top: 1.05rem;
  width: .4rem; height: .4rem; border-radius: 50%; background: var(--gold-200);
}

@media (max-width: 1100px) {
  .kpigroups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .kpigroups { grid-template-columns: 1fr; }
  .engine-visual .flowline { align-items: stretch; }
}

/* ==========================================================================
   Additions for the AI Lead Reactivation page
   ========================================================================== */

/* Prominent conversion-rate step inside the funnel */
.funnel__rate--big {
  padding: .9rem 0 1rem;
  font-family: var(--font-mono);
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate);
}
.funnel__rate--big::before { content: none; }
.funnel__rate--big strong {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.6rem, 5.5vw, 4rem); line-height: 1;
  letter-spacing: -.01em; text-transform: none;
  color: var(--gold-deep);
  margin-bottom: .2rem;
}
.funnel__rate--big strong::before { content: "\2193\00a0"; font-size: .5em; vertical-align: .35em; color: var(--gold); }
.funnel-tag { text-align: center; margin-bottom: .25rem; }

/* ==========================================================================
   Additions for the Custom AI Agents page
   ========================================================================== */

/* Hero hub: one agent connected to four business functions */
.hub { margin-top: 2.5rem; max-width: 40rem; display: flex; flex-direction: column; align-items: center; }
.hub__core {
  position: relative;
  width: 7.5rem; height: 7.5rem; border-radius: 50%;
  border: 2px solid var(--gold);
  background: rgba(201,151,59,.12);
  display: grid; place-items: center; text-align: center;
  font-family: var(--font-mono); font-size: .76rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-200);
}
.hub__core::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 1px; height: .9rem; background: var(--gold);
}
.hub__nodes {
  list-style: none; margin: 0; padding: 1.7rem 0 0; width: 100%;
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem;
}
.hub__nodes::before {
  content: ""; position: absolute; top: .9rem; left: 12.5%; right: 12.5%;
  height: 1px; background: var(--gold);
}
.hub__nodes li {
  position: relative; text-align: center;
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--on-dark-line); border-radius: var(--radius);
  padding: .75rem .4rem;
}
.hub__nodes li::before {
  content: ""; position: absolute; left: 50%; top: -.8rem;
  width: 1px; height: .8rem; background: var(--gold);
}

/* Application cards */
.apps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.app {
  background: var(--white);
  border: 1px solid var(--line); border-top: 3px solid var(--navy-800);
  border-radius: var(--radius);
  padding: 1.75rem 1.6rem 1.6rem;
}
.app h3 { font-size: 1.3rem; margin-bottom: 1.1rem; }
.app__label {
  display: block; margin-top: 1rem;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep);
}
.app p { margin-top: .3rem; color: var(--ink); font-size: .98rem; }
.app__kpis { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.app__kpis li {
  font-size: .82rem; color: var(--navy-800);
  background: var(--mist); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .3rem .6rem;
}

/* Before / after hours comparison */
.bars { margin-top: clamp(1.5rem, 3vw, 2rem); }
.bar + .bar { margin-top: 1.75rem; }
.bar__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .25rem 1rem; }
.bar__title { font-weight: 600; color: var(--ink); }
.bar__meta { font-size: .94rem; color: var(--slate); }
.bar__track { display: flex; height: 3.25rem; margin-top: .6rem; border-radius: var(--radius); overflow: hidden; }
.bar__fill {
  width: var(--w); flex: none;
  display: flex; align-items: center; padding-inline: 1.1rem;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 2.4vw, 1.5rem); white-space: nowrap;
}
.bar__fill--before { background: var(--navy-700); color: var(--on-dark); }
.bar__fill--after { background: var(--gold); color: var(--navy-900); }
.bar__rec {
  flex: 1; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--gold-deep); border-left: 0;
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep);
  border-radius: 0 var(--radius) var(--radius) 0; text-align: center; padding-inline: .5rem;
}

/* Hours result: dominant monthly number, secondary annual number */
.hours {
  margin-top: 1.75rem;
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  background: var(--navy-900); border-radius: var(--radius); border-bottom: 3px solid var(--gold);
  text-align: center;
}
.hours__main, .hours__side { padding: clamp(1.75rem, 4vw, 2.75rem) 1.5rem; }
.hours__side { border-left: 1px solid var(--on-dark-line); display: grid; align-content: center; }
.hours__num {
  display: block; font-family: var(--font-display); font-weight: 600; line-height: 1; color: var(--on-dark);
  font-size: clamp(3.5rem, 9vw, 6.5rem);
}
.hours__side .hours__num { font-size: clamp(2.1rem, 4.5vw, 3.1rem); color: var(--gold-200); }
.hours__cap { display: block; margin-top: .6rem; color: var(--on-dark-soft); font-size: 1rem; }

@media (max-width: 1023px) {
  .apps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hub__nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 1.1rem; }
  .hub__nodes::before, .hub__nodes li::before, .hub__core::after { display: none; }
  .hub__core { margin-bottom: 0; }
  .hours { grid-template-columns: 1fr; }
  .hours__side { border-left: 0; border-top: 1px solid var(--on-dark-line); }
}

/* ==========================================================================
   Additions for the AI Visibility Engine page
   ========================================================================== */

/* Hero: the three places customers look */
.surfaces {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin: 2.25rem 0 0; padding: 0; list-style: none;
}
.surfaces li {
  font-family: var(--font-mono);
  font-size: .74rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-dark);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius);
  padding: .65rem .9rem;
}
.surfaces li:last-child { border-color: var(--gold); color: var(--gold-200); }

/* Five industries: three on the first row, two on the second */
.usecases--five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.usecases--five .usecase { grid-column: span 2; }
.usecases--five .usecase:nth-child(n+4) { grid-column: span 3; }

/* Three KPI groups */
.kpigroups--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1023px) {
  .usecases--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usecases--five .usecase,
  .usecases--five .usecase:nth-child(n+4) { grid-column: auto; }
  .usecases--five .usecase:last-child { grid-column: 1 / -1; }
  .kpigroups--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .usecases--five { grid-template-columns: 1fr; }
  .usecases--five .usecase:last-child { grid-column: auto; }
  .kpigroups--three { grid-template-columns: 1fr; }
  .surfaces li { flex: 1 1 100%; }
}