/* Landing Pages — page-specific extras on top of components/kosh-page.css (Oct 2026 redesign). */

/* Numbers: the symbol after a figure (×, %, h, s) in maroon */
.kp-x-lp-unit { font-style: normal; color: var(--color-secondary); }

/* Hero: the bold phrase in the intro stays light on the dark hero */
.kp-hero__body strong { font-weight: var(--fw-medium); color: #fff; }

/* A light section that follows another light section */
.kp-x-lp-flush { padding-top: 0; }
.kp-x-lp-gap { margin-top: clamp(40px, 5vw, 64px); }

/* Card grids with a big figure on top (problem numbers, results) */
.kp-svc__num.kp-x-lp-big {
  font-size: clamp(36px, 3.4vw, 48px);
  line-height: 1;
  color: var(--text-primary);
}
.kp-x-lp-label {
  display: block;
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

/* Landing page types: tag, title, copy and a short checklist per card */
.kp-x-lp-types .kp-svc { gap: 20px; }
.kp-x-lp-types .kp-svc__text { gap: 10px; }
.kp-x-lp-types .kp-svc__title { font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: 400; line-height: 1.2; }
.kp-x-lp-types .kp-svc__body strong { font-weight: var(--fw-medium); color: var(--text-primary); }
.kp-x-lp-checks { align-self: stretch; list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.kp-x-lp-checks li {
  position: relative;
  padding: 4px 0 4px 20px;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text-secondary);
}
.kp-x-lp-checks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .72em;
  width: 7px;
  height: 4px;
  border-left: 1.5px solid var(--color-secondary);
  border-bottom: 1.5px solid var(--color-secondary);
  transform: rotate(-45deg);
}

/* Anatomy: heading and intro beside the page mock-up; the five elements follow as a card row */
.kp-x-lp-anatomy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.kp-x-lp-anatomy__intro { position: sticky; top: 96px; }
.kp-x-lp-anatomy__intro .kp-head__aside { margin-top: 26px; }
.kp-x-lp-mock {
  position: relative;
  padding: 18px 20px 22px;
  background: #fff;
  border-radius: var(--radius-img);
  box-shadow: 0 30px 60px -36px rgba(20, 18, 16, .35), 0 1px 3px rgba(20, 18, 16, .06);
}
.kp-x-lp-mock__bar { display: flex; gap: 6px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.kp-x-lp-mock__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.kp-x-lp-mock__bar i:first-child { background: var(--color-secondary); }
.kp-x-lp-mock__note {
  margin: 14px 0 8px;
  font-size: 9px;
  font-weight: var(--fw-medium);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
.kp-x-lp-mock__hero, .kp-x-lp-mock__close { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px; }
.kp-x-lp-mock__hero { background: var(--bg-tint); }
.kp-x-lp-mock__close { background: var(--bg-dark); color: var(--text-on-dark-2); }
.kp-x-lp-mock__tag { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary); }
.kp-x-lp-mock__hl { font-family: var(--font-heading); font-size: 19px; line-height: 1.25; color: var(--text-primary); }
.kp-x-lp-mock__close .kp-x-lp-mock__hl { color: #fff; }
.kp-x-lp-mock__sub { font-size: 12px; line-height: 1.55; color: var(--text-secondary); }
.kp-x-lp-mock__close .kp-x-lp-mock__sub { color: var(--text-on-dark-3); }
.kp-x-lp-mock__btn {
  margin-top: 4px;
  padding: 9px 14px;
  background: var(--color-secondary);
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}
.kp-x-lp-mock__small { font-size: 10px; color: var(--text-tertiary); }
.kp-x-lp-mock__proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); }
.kp-x-lp-mock__proof p { padding: 12px 10px; text-align: center; }
.kp-x-lp-mock__proof p + p { border-left: 1px solid var(--line); }
.kp-x-lp-mock__n { display: block; font-family: var(--font-heading); font-size: 20px; line-height: 1.1; color: var(--text-primary); }
.kp-x-lp-mock__n em { font-style: normal; color: var(--color-secondary); }
.kp-x-lp-mock__l { display: block; margin-top: 4px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary); }
.kp-x-lp-mock__benefits { list-style: none; margin: 0; padding: 0; }
.kp-x-lp-mock__benefits li {
  position: relative;
  padding: 7px 0 7px 22px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.kp-x-lp-mock__benefits li + li { border-top: 1px solid var(--line); }
.kp-x-lp-mock__benefits li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 1.05em;
  width: 7px;
  height: 4px;
  border-left: 1.5px solid var(--color-secondary);
  border-bottom: 1.5px solid var(--color-secondary);
  transform: rotate(-45deg);
}
.kp-x-lp-mock__benefits strong { font-weight: var(--fw-medium); color: var(--text-primary); }
.kp-x-lp-mock__quote { padding: 4px 0 4px 16px; border-left: 2px solid var(--color-secondary); }
.kp-x-lp-mock__q { font-family: var(--font-heading); font-style: italic; font-size: 15px; line-height: 1.45; color: var(--text-primary); }
.kp-x-lp-mock__by { margin-top: 8px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }

/* Card rows (anatomy, platforms, testing): bold runs in the copy, tags separated by dots */
.kp-feature__body strong { font-weight: var(--fw-medium); color: var(--text-primary); }
.kp-x-lp-tags span + span::before { content: ' · '; }

/* Platforms (dark band): the cards keep their light panels, so their text goes back to ink */
.kp-x-lp-cards .kp-feature__panel p { color: var(--text-primary); }

/* Testing: heading and two figures on the left, the copy on the right; the five stages follow as a card row */
.kp-x-lp-test { align-items: end; }
.kp-x-lp-duo { display: flex; gap: 0; margin: 30px 0 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kp-x-lp-duo p { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 20px 0; }
.kp-x-lp-duo p + p { padding-left: 24px; border-left: 1px solid var(--line); }

/* Process: the intro line and each step's deliverable */
.kp-x-lp-intro { margin-top: 22px; max-width: 360px; font-size: var(--fs-body); color: var(--text-secondary); }
.kp-x-lp-del {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(20, 18, 16, .12);
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}
.kp-x-lp-del span {
  display: block;
  margin-bottom: 3px;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

@media (max-width: 960px) {
  .kp-x-lp-anatomy { grid-template-columns: 1fr; }
  .kp-x-lp-anatomy__intro { position: static; }
  .kp-x-lp-mock { max-width: 560px; }
}
@media (max-width: 860px) {
  .kp-x-lp-del { margin-top: 10px; }
  .kp-step .kp-x-lp-del { grid-column: 2; }
}
@media (max-width: 520px) {
  .kp-x-lp-mock { padding: 14px 14px 18px; }
}