/* ================================================================
   Product overview sections
   Figma Templates:
     99:2458  Key capabilities grid    (.kcap-*)
     99:2480  How it works steps        (.kstep-*)
     111:2343 Gradient CTA + pricing    (.kcta-*)
     99:2705  FAQ accordion             (.kfaq-*)
   ================================================================ */

/* ================================================================
   Section head groups
   Sections lay their items out on a 32px rhythm, but a section title and
   the description directly beneath it read as one block and sit 16px
   apart. Wrapping the pair gives it its own gap without disturbing the
   32px between the group and whatever follows.

   align-items: inherit makes the group follow whatever alignment its
   section has at that breakpoint (centered on desktop, flex-start once
   the mobile rules kick in) instead of repeating every media query. The
   children keep their own max-width, so nothing moves.

   Does not apply to headings whose description sits beside them rather
   than under them, or to text that is not the heading's own description.
   ================================================================ */
.kcap-head,
.kenv-head,
.kprice-head,
.kcta-head {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: var(--space-16);
  width: 100%;
}

/* ================================================================
   1. Key capabilities (.kcap-*) — Figma 99:2458
   Centered heading + intro, then a 2-column grid of feature blocks.
   Each block: 32px key icon, H3 title, B1 description.
   Divider between the two rows.
   ================================================================ */
.kprice-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  padding-block: var(--section-pad-y);
  padding-inline: var(--section-pad-x);
  /* Target of the hero's "Pricing" button. Without this the sticky bar covered
     the heading on arrival. Same padding scale as .kpart-anchor, so the shared
     token in tokens.css applies unchanged. */
  scroll-margin-top: var(--anchor-offset);
}

.kprice-section .radius-plans {
  width: 100%;
  padding: 0;
}

.kprice-title {
  margin: 0;
  max-width: var(--body-max);
  text-align: center;
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  color: var(--color-text-brand);
}

.kprice-desc {
  margin: 0;
  max-width: var(--body-max);
  text-align: center;
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-text-secondary);
}

.kcap-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding-block: var(--section-pad-y);
  padding-inline: var(--section-pad-x);
  background: var(--color-surface-card);
}

.kcap-title {
  margin: 0;
  max-width: var(--body-max);
  text-align: center;
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  color: var(--color-text-brand);
}

.kcap-intro {
  margin: 0;
  max-width: var(--body-max);
  text-align: center;
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-text-primary);
}
/* Narrower measure to control where the intro breaks. A modifier rather than a
   change to the base rule because .kcap-intro is shared by eleven pages whose
   copy differs, so a global cap would reshuffle all of them. Values are the
   midpoint of the range that produces the intended break: 519-613px at the b1
   desktop size, 467-551px once b1 steps down to 18px below 768. */
.kcap-intro--narrow { max-width: 566px; text-wrap: pretty; }
@media (max-width: 767px) {
  .kcap-intro--narrow { max-width: 510px; }
}

.kcap-grid {
  width: 100%;
  max-width: var(--content-max);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  row-gap: 24px;
}

.kcap-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.kcap-divider {
  border: none;
  border-top: 1px solid var(--color-border-default);
  margin: 0;
}

.kcap-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--color-text-primary);
}

.kcap-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.kcap-item-title {
  margin: 0;
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  color: var(--color-text-primary);
}

.kcap-item-desc {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-text-primary);
}

/* Inline prose links: same treatment as the homepage industries accordion
   (.kacc-desc a) so body-copy links read the same across the site. */
.kcap-item-desc a {
  color: var(--color-text-brand);
  text-decoration: underline; text-underline-offset: 2px;
}
.kcap-item-desc a:hover { text-decoration: none; }

/* Numbered variant (About "Why Keytos", Figma 99:4823) — a mono index
   replaces the icon. */
.kcap-num {
  margin: 0;
  font-family: var(--font-family-mono);
  font-weight: 400;
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-text-secondary);
}

/* Rule under the items of a non-final row. The grid's 24px row-gap supplies
   the space below the rule, matching the 24/24 padding split in Figma. */
.kcap-item--divider {
  padding-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-border-default);
}

/* Section-level CTA below the grid. No extra margin: the section's own 32px
   gap is the spacing, and an 8px top margin made this the only 40px gap. */
.kcap-cta { align-self: center; }

@media (max-width: 1072px) {
  .kprice-section { padding-block: var(--space-48); padding-inline: var(--space-32); }
  .kcap-section { padding-block: var(--space-48); padding-inline: var(--space-32); }
}

@media (max-width: 767px) {
  .kprice-section { padding-block: var(--space-32); padding-inline: var(--space-16); align-items: flex-start; }
  .kprice-title, .kprice-desc { text-align: left; }
  /* The section left-aligns at this width, so the "See full pricing details"
     button would sit at its content width and leave an uneven gutter beside the
     full-width cards. Filling the row matches how kstep/kcta/kpcta buttons
     behave on mobile. */
  .kprice-section > .kbtn { width: 100%; text-align: center; }
  .kcap-section { padding-block: var(--space-32); padding-inline: var(--space-16); align-items: flex-start; }
  .kcap-title, .kcap-intro { text-align: left; }
}

@media (max-width: 639px) {
  .kcap-grid { grid-template-columns: 1fr; column-gap: 0; }
  .kcap-divider { display: none; }
  /* Single column: the row rule would fall between arbitrary items. */
  .kcap-item--divider { padding-bottom: 0; border-bottom: none; }
}

/* ================================================================
   2. How it works steps (.kstep-*) — Figma 99:2480
   Centered heading + subtitle, 3 equal step cards, 2 CTA buttons.
   ================================================================ */
.kstep-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding-block: var(--section-pad-y);
  padding-inline: var(--section-pad-x);
  background: var(--color-surface-card);
}

.kstep-head {
  width: 100%;
  max-width: var(--content-max);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.kstep-title {
  margin: 0;
  max-width: var(--body-max);
  text-align: center;
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  color: var(--color-text-brand);
}

.kstep-subtitle {
  margin: 0;
  text-align: center;
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-text-primary);
}

.kstep-cards {
  width: 100%;
  max-width: var(--content-max);
  display: flex;
  gap: 32px;
  align-items: stretch;
}

.kstep-card {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-dd);
}

.kstep-num {
  font-family: var(--font-family-mono);
  font-weight: 400;
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-text-secondary);
}

.kstep-card-title {
  margin: 0;
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  color: var(--color-text-primary);
}

.kstep-card-desc {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-text-primary);
}

/* See .khero-actions: 20px is the shared button-row gap. */
.kstep-actions {
  display: flex;
  gap: var(--space-20);
}

.kstep-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kstep-btn-icon svg { display: block; }

@media (max-width: 899px) {
  .kstep-cards { flex-direction: column; }
}

@media (max-width: 1072px) {
  .kstep-section { padding-block: var(--space-48); padding-inline: var(--space-32); }
}

@media (max-width: 767px) {
  .kstep-section { padding-block: var(--space-32); padding-inline: var(--space-16); align-items: flex-start; }
  .kstep-head { align-items: flex-start; }
  .kstep-title, .kstep-subtitle { text-align: left; }
}

@media (max-width: 639px) {
  .kstep-actions { flex-direction: column; width: 100%; }
  .kstep-actions .kbtn { width: 100%; }
}

/* ================================================================
   3. Gradient CTA + pricing card (.kcta-*) — Figma 111:2343
   Blue gradient band. Left: heading + desc + 2 buttons.
   Right: white pricing card with 3 tiers (middle = highlighted).
   ================================================================ */
.kcta-section {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding-block: var(--section-pad-y-tight);
  padding-inline: var(--section-pad-x);
  background: linear-gradient(90deg, #0071a2 0%, #003b57 100%);
  /* Target of the hero's "See pricing" button where this band carries the
     pricing card. The tight variant because this section's padding is
     64/32/24, not the 96/48/32 --anchor-offset assumes. Inert unless the
     section is an anchor target. */
  scroll-margin-top: var(--anchor-offset-tight);
}

.kcta-inner {
  flex: 1 0 0;
  min-width: 0;
  max-width: var(--content-max);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

/* ---- Left column ---------------------------------------------- */
.kcta-left {
  flex: 4 1 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.kcta-heading {
  margin: 0;
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  color: #ffffff;
}

.kcta-desc {
  margin: 0;
  max-width: var(--body-max);
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: #ffffff;
}

/* See .khero-actions: 20px is the shared button-row gap. */
.kcta-actions {
  display: flex;
  gap: var(--space-20);
}

/* White-on-blue button variants (scoped to this section) */
.kcta-btn-fill {
  background: #ffffff;
  color: var(--color-text-brand);
  border-color: #ffffff;
}
.kcta-btn-fill:hover {
  background: var(--color-surface-canvas);
  color: var(--color-btn-primary-hover);
  border-color: var(--color-surface-canvas);
}
.kcta-btn-outline {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
}
.kcta-btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: #ffffff;
}

/* ---- Right column: pricing card ------------------------------- */
.kcta-card {
  flex: 6 1 0;
  min-width: 540px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 32px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-2xl);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 2px 4px 0 rgba(0, 0, 0, 0.04);
}

.kcta-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.kcta-card-title {
  margin: 0;
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  color: var(--color-text-primary);
}

.kcta-full {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 12px 24px;
  border: 1px solid var(--color-btn-secondary-border-default);
  border-radius: var(--radius-pill);
  font-family: var(--font-family-secondary);
  font-weight: 500;
  font-size: var(--font-size-b3);
  line-height: var(--line-height-b3);
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.kcta-full:hover {
  color: var(--color-text-brand);
  border-color: var(--color-text-brand);
}

.kcta-full-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kcta-full-icon svg { display: block; }

/* ---- Tiers ---------------------------------------------------- */
.kcta-tiers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kcta-tier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 20px 24px;
  background: var(--color-surface-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.08);
}

.kcta-tier--featured {
  border: 2px solid var(--color-btn-secondary-border-selected);
  box-shadow: 0 0 5px rgba(0, 113, 162, 0.4);
}

.kcta-tier-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.kcta-tier-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.kcta-tier-name {
  margin: 0;
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  color: var(--color-text-primary);
}

.kcta-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--color-btn-primary-default);
  border-radius: 100px;
  font-family: var(--font-family-secondary);
  font-weight: 600;
  font-size: var(--font-size-b4);
  line-height: var(--line-height-l1);
  color: #ffffff;
  white-space: nowrap;
}

.kcta-tier-desc {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b3);
  line-height: var(--line-height-b3);
  color: var(--color-text-secondary);
}

.kcta-tier-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
  text-align: right;
}

.kcta-price {
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  color: var(--color-link-rest);
  white-space: nowrap;
}

.kcta-price-unit {
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b4);
  line-height: var(--line-height-b4);
  color: var(--color-text-primary);
  white-space: nowrap;
}


/* "Starting at" ahead of the figure, so one number does not read as a flat
   rate on a plan that is priced in tiers. Baseline-aligned so the small prefix
   sits on the same line as the large price. */
.kcta-price-row { display: inline-flex; align-items: baseline; gap: 6px; }
.kcta-price-prefix {
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b4);
  line-height: var(--line-height-b4);
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* Currency spelled out after the figure. Same size as the "Desde" prefix so
   it does not compete with the number, but in the price's blue so it reads as
   part of the figure rather than as another label. */
.kcta-price-suffix {
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b4);
  line-height: var(--line-height-b4);
  color: var(--color-link-rest);
  white-space: nowrap;
}

@media (max-width: 1072px) {
  .kcta-section { padding-block: var(--space-32); padding-inline: var(--space-32); }
}

@media (max-width: 767px) {
  .kcta-section { padding-block: var(--space-24); padding-inline: var(--space-16); }
  .kcta-inner { flex-direction: column; }
  .kcta-card { min-width: 0; width: 100%; }
}

@media (max-width: 639px) {
  .kcta-actions { flex-direction: column; }
  .kcta-actions .kbtn { width: 100%; }
  .kcta-card { min-width: 0; padding: 20px 16px; }
  .kcta-tier { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
  .kcta-tier-price { align-items: flex-start; text-align: left; }
}

/* ================================================================
   4. FAQ accordion (.kfaq-*) — Figma 99:2705
   Centered heading, list of Q&A rows. First row open by default.
   Plus (closed) / minus (open) toggle. Open row uses canvas bg.
   Reuses the grid-row height-animation trick from .kacc-*.
   ================================================================ */
.kfaq-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding-block: var(--section-pad-y);
  padding-inline: var(--section-pad-x);
  background: var(--color-surface-card);
}

.kfaq-title {
  margin: 0;
  text-align: center;
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  color: var(--color-text-brand);
}

.kfaq-list {
  width: 100%;
  max-width: var(--content-max);
  display: flex;
  flex-direction: column;
}

.kfaq-item { border-bottom: 1px solid var(--color-border-default); }
.kfaq-item.is-open { background: var(--color-surface-canvas); }

.kfaq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 24px 20px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}

.kfaq-q {
  font-family: var(--font-family-primary);
  font-weight: 500;
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  color: var(--color-text-primary);
}

.kfaq-icon-wrap {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--color-text-primary);
}
.kfaq-icon-plus,
.kfaq-icon-minus {
  position: absolute;
  inset: 0;
  transition: opacity 0.2s ease;
}
.kfaq-icon-minus { opacity: 0; }
.kfaq-item.is-open .kfaq-icon-plus { opacity: 0; }
.kfaq-item.is-open .kfaq-icon-minus { opacity: 1; }

.kfaq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.kfaq-item.is-open .kfaq-body { grid-template-rows: 1fr; }

.kfaq-body-inner { overflow: hidden; }

.kfaq-answer {
  margin: 0;
  padding: 0 32px 24px 20px;
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-text-primary);
}

/* Inline links in answers, matching .kacc-desc a and .kstory-body a. Body-copy
   links on a light background share this treatment; .kpcta-desc a stays white
   because that band has a dark gradient behind it. */
.kfaq-answer a {
  color: var(--color-text-brand);
  text-decoration: underline; text-underline-offset: 2px;
}
.kfaq-answer a:hover { text-decoration: none; }

@media (max-width: 1072px) {
  .kfaq-section { padding-block: var(--space-48); padding-inline: var(--space-32); }
}

@media (max-width: 767px) {
  .kfaq-section { padding-block: var(--space-32); padding-inline: var(--space-16); align-items: flex-start; }
  .kfaq-title { text-align: left; }
  .kfaq-q { font-size: var(--font-size-b2); line-height: var(--line-height-b2); }
  .kfaq-answer { font-size: var(--font-size-b2); line-height: var(--line-height-b2); }
}

/* ================================================================
   5. Pricing hero + pricing cards (.kprc-*) — Figma 99:3070, 157:4503
   Used on product pricing pages. Hero shell has blue-50 → white
   gradient. Two card layouts:
     Standard: name / price / divider / feature list / CTA button
     Complex:  name / feature list / tiered cost box / CTA button
   Variants: .kprc-card--pop (featured, blue border+glow),
             .kprc-card--rim (blue 1px border, standard shadow)
   Wide card (.kprc-card--wide): horizontal layout for 4th row card.
   ================================================================ */

.kprc-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding-block: 120px;
  padding-inline: var(--section-pad-x);
  background: linear-gradient(179deg, #ebf5ff 1%, var(--color-surface-card) 99%);
}

/* ---- Product identity bar ------------------------------------ */
.kprc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--content-max);
}

.kprc-product-name {
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  color: var(--color-text-primary);
}

.kprc-pill-nav {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px;
  background: var(--color-surface-card);
  border-radius: 20px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.06), 0 0 4px rgba(0, 0, 0, 0.04);
}

.kprc-pill-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 12px;
  padding-inline: 24px;
  border-radius: 16px;
  font-family: var(--font-family-secondary);
  font-weight: 500;
  font-size: var(--font-size-b2);
  line-height: var(--line-height-b2);
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.kprc-pill-tab--active {
  background: var(--color-btn-primary-default);
  /* --color-text-white was never defined in tokens.css, so this declaration
     was dropped and the label fell back to inherited colour. This is the
     token .kbtn-primary uses for text on a brand-blue fill. */
  color: var(--color-text-button-fill);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}

/* ---- Section heading ----------------------------------------- */
.kprc-heading {
  margin: 0;
  max-width: var(--body-max);
  text-align: center;
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  color: var(--color-text-primary);
}

/* ---- Cards layout -------------------------------------------- */
.kprc-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: var(--content-max);
}

.kprc-row {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

/* ---- Base card ----------------------------------------------- */
.kprc-card {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 32px;
  background: var(--color-surface-card);
  border-radius: 20px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08);
}

/* Featured: 2px blue border + blue outer glow */
.kprc-card--pop {
  box-shadow: 0 0 20px rgba(0, 113, 162, 0.4);
  border: 2px solid var(--color-btn-secondary-border-selected);
}

/* Outlined: 1px blue border + standard shadow (complex non-featured) */
.kprc-card--rim {
  border: 1px solid var(--color-btn-secondary-border-selected);
}

/* Wide card: horizontal layout (4th row card) */
.kprc-card--wide {
  flex: none;
  width: 100%;
  flex-direction: row;
  align-items: center;
}

/* ---- Card top: title/price/features wrapper ------------------ */
.kprc-card-top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---- Title --------------------------------------------------- */
.kprc-plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kprc-plan-name {
  margin: 0;
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  color: var(--color-text-primary);
}

.kprc-plan-desc {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b2);
  line-height: var(--line-height-b2);
  color: var(--color-text-secondary);
}

.kprc-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--color-btn-primary-default);
  border-radius: 100px;
  font-family: var(--font-family-secondary);
  font-weight: 600;
  font-size: var(--font-size-b4);
  line-height: var(--line-height-l1);
  color: #ffffff;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---- Price row (standard cards) ------------------------------ */
.kprc-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.kprc-price {
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  color: var(--color-link-rest);
}

.kprc-price-unit {
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b3);
  line-height: var(--line-height-b3);
  color: var(--color-text-primary);
}

.kprc-divider {
  height: 1px;
  background: var(--color-border-default);
  width: 100%;
}

/* ---- Feature list -------------------------------------------- */
.kprc-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kprc-features-label {
  font-family: var(--font-family-secondary);
  font-weight: 600;
  font-size: var(--font-size-b3);
  line-height: var(--line-height-b3);
  color: var(--color-text-brand);
}

.kprc-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b3);
  line-height: var(--line-height-b3);
  color: var(--color-text-primary);
}

.kprc-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: var(--color-surface-brand-subtle);
  border-radius: 12px;
  color: var(--color-text-brand);
}
.kprc-check svg { display: block; }

/* ---- Complex card: tiered pricing box ------------------------ */
.kprc-feature-box {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
  background: var(--color-info-background);
  border-radius: var(--radius-lg);
}

.kprc-cost-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kprc-cost-label {
  font-family: var(--font-family-secondary);
  font-weight: 600;
  font-size: var(--font-size-b4);
  line-height: var(--line-height-l1);
  color: var(--color-info-default);
}

.kprc-cost-value {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b3);
  line-height: var(--line-height-b3);
  color: var(--color-text-primary);
}

.kprc-cost-value em { font-style: italic; }

.kprc-tier-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kprc-tier-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-block: 4px;
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b3);
  line-height: var(--line-height-b3);
  color: var(--color-text-primary);
}

/* ---- Wide card internals ------------------------------------- */
.kprc-wide-body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.kprc-wide-title {
  width: 376px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kprc-wide-feats {
  flex: 1 0 0;
  min-width: 0;
}

.kprc-wide-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  align-self: stretch;
  flex-shrink: 0;
  padding-left: 32px;
}

.kprc-wide-price-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.kprc-wide-unit-stack {
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b4);
  line-height: var(--line-height-b4);
  color: var(--color-text-primary);
  padding-bottom: 4px;
}

/* Responsive -------------------------------------------------- */
@media (max-width: 1023px) {
  .kprc-row { flex-wrap: wrap; }
  .kprc-card { min-width: 280px; }
  .kprc-card--wide { flex-direction: column; align-items: stretch; }
  .kprc-wide-body { flex-direction: column; gap: 16px; }
  .kprc-wide-title { width: 100%; }
  .kprc-wide-side { flex-direction: row; align-items: center; padding-left: 0; padding-top: 16px; }
}

@media (max-width: 1072px) {
  .kprc-section { padding-block: var(--space-48); padding-inline: var(--space-32); }
}

@media (max-width: 767px) {
  .kprc-section { padding-block: var(--space-24); padding-inline: var(--space-16); }
  .kprc-topbar { flex-direction: column; gap: 16px; align-items: flex-start; }
  .kprc-pill-nav { flex-wrap: wrap; }
  .kprc-row { flex-direction: column; }
  .kprc-card { flex: none; width: 100%; }
  .kprc-card--wide { flex-direction: column; }
  .kprc-wide-side { flex-direction: column; align-items: flex-start; padding-top: 16px; }
}

/* ================================================================
   6. Compact pricing calculator (.kcalc-*) — Figma 99:3085
   White section with a bordered card. Left: user slider + plan
   pill tabs. Right: blue box showing estimated monthly cost.
   Plan selection uses pill tabs (not radio buttons / dropdown).
   No price tag displayed under the slider.
   ================================================================ */

.kcalc-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding-block: var(--section-pad-y-tight);
  padding-inline: var(--section-pad-x);
  background: var(--color-surface-card);
}

.kcalc-heading {
  margin: 0;
  text-align: center;
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  color: var(--color-text-brand);
}

.kcalc-card {
  display: flex;
  gap: 32px;
  align-items: stretch;
  width: 100%;
  max-width: var(--content-max);
  padding: 24px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.kcalc-left {
  flex: 2 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kcalc-input-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kcalc-label {
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b2);
  line-height: var(--line-height-b2);
  color: var(--color-text-primary);
}

/* Slider row: track + number input */
.kcalc-slider-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.kcalc-slider {
  flex: 1 0 0;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 10000px;
  outline: none;
  cursor: pointer;
  background-color: var(--color-surface-brand-subtle);
}

.kcalc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-surface-card);
  border: 2px solid var(--color-text-brand);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.kcalc-slider::-moz-range-track {
  height: 6px;
  border-radius: 10000px;
  background: var(--color-surface-brand-subtle);
}

.kcalc-slider::-moz-range-progress {
  height: 6px;
  border-radius: 10000px;
  background: var(--color-text-brand);
}

.kcalc-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-text-brand);
  border-radius: 50%;
  background: var(--color-surface-card);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.kcalc-number-wrap {
  flex-shrink: 0;
}

.kcalc-number {
  width: 96px;
  padding-block: 12px;
  padding-inline: 16px;
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b2);
  line-height: var(--line-height-b2);
  color: var(--color-text-primary);
  outline: none;
  -moz-appearance: textfield;
  text-align: center;
}

.kcalc-number::-webkit-inner-spin-button,
.kcalc-number::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.kcalc-number:focus {
  border-color: var(--color-info-default);
  box-shadow: 0 0 0 3px rgba(0, 112, 163, 0.2);
}

/* Plan pill tabs */
.kcalc-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px;
  background: var(--color-btn-secondary-bg-pressed, #eef1f5);
  border-radius: var(--radius-lg);
}

.kcalc-tab {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 8px;
  padding-inline: 16px;
  border: none;
  border-radius: 10000px;
  background: none;
  cursor: pointer;
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b3);
  line-height: var(--line-height-b3);
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.kcalc-tab--active {
  background: var(--color-surface-card);
  color: var(--color-text-brand);
  font-weight: 500;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Result box */
.kcalc-right {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  background: var(--color-info-background);
  border-radius: var(--radius-lg);
}

.kcalc-result-label {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-text-primary);
  text-align: center;
}

.kcalc-result-price {
  margin: 0;
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  color: var(--color-info-default);
  text-align: center;
}

/* Figure plus a spelled-out currency, used where a bare $ is ambiguous.
   Baseline-aligned so USD sits on the figure's baseline rather than its box,
   and only present in markup that opts in, so the English calculator is
   unaffected. */
.kcalc-result-row { display: flex; align-items: baseline; gap: 6px; }
.kcalc-result-suffix {
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-info-default);
  white-space: nowrap;
}

@media (max-width: 1072px) {
  .kcalc-section { padding-block: var(--space-32); padding-inline: var(--space-32); }
}

@media (max-width: 767px) {
  .kcalc-section { padding-block: var(--space-24); padding-inline: var(--space-16); align-items: flex-start; }
  .kcalc-heading { text-align: left; }
  .kcalc-card { flex-direction: column; gap: 24px; }
  .kcalc-right { min-height: 120px; }
}

/* ================================================================
   7. Video section (.kvid-*) — Figma 99:3106
   Canvas bg, centered H2, then a rounded video thumbnail with a
   play button overlay. The thumbnail is a container for a real
   <img> or <iframe> embed on live pages.
   ================================================================ */

.kvid-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding-block: var(--section-pad-y-tight);
  padding-inline: var(--section-pad-x);
  background: var(--color-surface-canvas);
}

.kvid-heading {
  margin: 0;
  text-align: center;
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  color: var(--color-text-brand);
}

.kvid-thumb {
  position: relative;
  width: 100%;
  max-width: 800px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  line-height: 0;
}

.kvid-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.kvid-thumb iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-lg);
}

/* Placeholder shown when no real img is present */
.kvid-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-border-default);
  border-radius: var(--radius-lg);
}

.kvid-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  color: var(--color-text-brand);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kvid-play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.kvid-play svg { display: block; }

/* Overlay for a section whose video does not exist yet. Same look as the real
   control, but rendered on a span rather than a button so keyboard users are
   not handed a control that does nothing, and it does not invite a click.
   Replace the whole .kvid-thumb content with the <iframe> once the video is
   ready, and drop this modifier. */
.kvid-play--static { cursor: default; }
.kvid-play--static:hover {
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@media (max-width: 1072px) {
  .kvid-section { padding-block: var(--space-32); padding-inline: var(--space-32); }
}

@media (max-width: 767px) {
  .kvid-section { padding-block: var(--space-24); padding-inline: var(--space-16); align-items: flex-start; }
  .kvid-heading { text-align: left; }
}

/* ================================================================
   8. Pricing page CTA band (.kpcta-*) — Figma 99:3113
   Same blue gradient as .kcta-section but fully centered — no
   right-side pricing card. Used on pricing pages.
   ================================================================ */

.kpcta-section {
  display: flex;
  justify-content: center;
  padding-block: var(--section-pad-y-tight);
  padding-inline: var(--section-pad-x);
  background: linear-gradient(90deg, #0071a2 0%, #003b57 100%);
}

.kpcta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: var(--content-max);
}

/* Optional eyebrow above the heading (partner CTA band, Figma 99:5152). The
   eyebrow and heading sit closer to each other than the 32px column gap, so
   they are grouped. */
.kpcta-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
}

.kpcta-eyebrow {
  margin: 0;
  text-align: center;
  font-family: var(--font-family-secondary);
  font-weight: 600;
  font-size: var(--font-size-b3);
  line-height: var(--line-height-b3);
  color: #ffffff;
}

.kpcta-heading {
  margin: 0;
  text-align: center;
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  color: #ffffff;
}

/* Inline links in the band's lede (e.g. the partner mailbox) */
.kpcta-desc a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }
.kpcta-desc a:hover { text-decoration: none; }

.kpcta-desc {
  margin: 0;
  max-width: var(--body-max);
  text-align: center;
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: #ffffff;
}

/* See .khero-actions: 20px is the shared button-row gap. */
.kpcta-actions {
  display: flex;
  gap: var(--space-20);
}

/* White fill button (brand text) */
.kpcta-btn-fill {
  background: #ffffff;
  color: var(--color-text-brand);
  border-color: #ffffff;
}
.kpcta-btn-fill:hover {
  background: var(--color-surface-canvas);
  color: var(--color-btn-primary-hover);
  border-color: var(--color-surface-canvas);
}

/* White outline button */
.kpcta-btn-outline {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
}
.kpcta-btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: #ffffff;
}

@media (max-width: 1072px) {
  .kpcta-section { padding-block: var(--space-32); padding-inline: var(--space-32); }
}

@media (max-width: 767px) {
  .kpcta-section { padding-block: var(--space-24); padding-inline: var(--space-16); }
  .kpcta-inner { align-items: flex-start; }
  .kpcta-head { align-items: flex-start; }
  .kpcta-heading, .kpcta-desc, .kpcta-eyebrow { text-align: left; }
}

@media (max-width: 639px) {
  .kpcta-actions { flex-direction: column; width: 100%; }
  .kpcta-actions .kbtn { width: 100%; }
}

/* ================================================================
   6. Environment integration (.kenv-*) — Figma 99:3161
   Canvas-colored section, centered heading + desc, diagram card.
   Mobile: pill "Tap to magnify" button + fullscreen modal overlay.
   ================================================================ */
.kenv-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  padding-block: var(--section-pad-y);
  padding-inline: var(--section-pad-x);
  background: var(--color-surface-canvas);
  position: relative;
}

.kenv-heading {
  margin: 0;
  max-width: var(--body-max);
  text-align: center;
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  color: var(--color-text-brand);
}

.kenv-desc {
  margin: 0;
  max-width: var(--body-max);
  text-align: center;
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-text-primary);
}

/* Empty slot for a diagram that has not been drawn yet. The aspect matches the
   1280x290 frame in the design, so the section reserves the height the real
   diagram will need. When the asset lands, swap this div for the
   <img class="kenv-diagram"> plus the magnify button and modal, and
   initEnvDiagram picks the zoom up — it returns early when there is no modal,
   which is why this section is safe with none. Gradient is the one every other
   empty media slot on the site uses. */
.kenv-diagram-placeholder {
  width: 100%;
  aspect-ratio: 1280 / 290;
  background: linear-gradient(135deg, #10233b 0%, #0b3a5c 55%, #0091ce 100%);
}

.kenv-diagram-wrap {
  position: relative;
  width: 100%;
  max-width: var(--content-max);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  background: var(--color-surface-card);
  overflow: hidden;
}

.kenv-diagram {
  display: block;
  width: 100%;
  height: auto;
}

/* Magnify pill button — hidden by default, shown on mobile */
.kenv-magnify-btn {
  display: none;
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
  align-items: center;
  gap: 6px;
  padding-block: var(--space-8);
  padding-inline: var(--space-12);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  font-family: var(--font-family-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  z-index: 2;
  line-height: 1;
}
.kenv-magnify-btn:hover {
  background: var(--color-surface-canvas);
}

/* Modal overlay */
.kenv-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kenv-modal[hidden] {
  display: none;
}

.kenv-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  width: 100%;
  cursor: pointer;
}

.kenv-modal-panel {
  position: relative;
  background: var(--color-surface-card);
  border-radius: var(--radius-xl);
  padding-block: var(--space-24);
  padding-inline: var(--space-24);
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.kenv-modal-close {
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.kenv-modal-close:hover {
  background: var(--color-surface-canvas);
}

.kenv-modal-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.kenv-modal-img {
  display: block;
  /* DEFINITE height, not max-height: the scroll box is overflow-x:auto so its
     min-content width is 0, which means nothing else gives the panel a width.
     With only max-height the image fell back to its intrinsic size — and an SVG
     that declares just a viewBox has an intrinsic size of 300x150 scaled to its
     ratio, so EZMonitor's diagrams collapsed to ~36px wide inside an 84px panel.
     A definite height makes width resolve from the aspect ratio for every
     diagram, so wide ones still overflow and scroll while near-square ones fill
     the space instead of shrinking.
     Panel is max-height: calc(100vh - 64px); subtract padding(48) + close-btn(36)
     + gap(16) + buffer(16). */
  height: calc(100dvh - 180px);
  width: auto;
  max-width: none;
}

@media (max-width: 1072px) {
  .kenv-section { padding-block: var(--space-48); padding-inline: var(--space-32); }
}

@media (max-width: 767px) {
  .kenv-section { padding-block: var(--space-32); padding-inline: var(--space-16); align-items: flex-start; }
  .kenv-heading, .kenv-desc { text-align: left; }
  .kenv-magnify-btn { display: flex; }
  .kenv-diagram-wrap { cursor: pointer; }
}

/* ================================================================
   7. Steps with video (.kvstep-*) — Figma 99:3166
   White background, centered H2, two-column: video left, step list right.
   ================================================================ */
.kvstep-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  padding-block: var(--section-pad-y);
  padding-inline: var(--section-pad-x);
  background: var(--color-surface-canvas);
}

/* Section head: heading and its description sit 16px apart, and align-items:
   inherit lets the group follow the section's own alignment per breakpoint —
   the same contract as .kcap-head, .kenv-head and the other *-head wrappers. */
.kvstep-header {
  width: 100%;
  max-width: var(--body-max);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: var(--space-16);
}

.kvstep-subtitle {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-weight: 400;
  font-size: var(--font-size-b1);
  line-height: var(--line-height-b1);
  color: var(--color-text-primary);
}

.kvstep-heading {
  margin: 0;
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  color: var(--color-text-brand);
}

.kvstep-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  width: 100%;
  max-width: var(--content-max);
  align-items: center;
}

.kvstep-video-col {
  width: 100%;
  max-width: 800px;
}

.kvstep-thumb {
  display: block;
  position: relative;
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #000;
  text-decoration: none;
}

.kvstep-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Empty slot awaiting a video. The flat #000 above is the backdrop a real
   thumbnail or embed sits on; a placeholder instead uses the same gradient as
   every other empty media slot on the site (.khero-media, .kblock-media,
   .kstab-media, .kfoot-podcast-thumb) so they read as one idiom. */
.kvstep-thumb--placeholder {
  background: linear-gradient(135deg, #10233b 0%, #0b3a5c 55%, #0091ce 100%);
}

/* A real video embed in the slot. The .kvstep-play overlay stays for the
   image variant, which is a zoomable diagram rather than a video. */
.kvstep-thumb iframe { display: block; width: 100%; height: 100%; border: 0; }

.kvstep-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kvstep-play::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ee0000;
  position: absolute;
}

.kvstep-play svg {
  position: relative;
  z-index: 1;
}

.kvstep-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-24);
  width: 100%;
}

.kvstep-item {
  display: flex;
  gap: var(--space-16);
  align-items: center;
  padding-block: var(--space-16);
  padding-inline: var(--space-20);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.kvstep-num {
  font-family: var(--font-family-mono);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-text-secondary);
  flex-shrink: 0;
  min-width: 28px;
}

.kvstep-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.kvstep-title {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h5);
  font-weight: 500;
  line-height: var(--line-height-h5);
  color: var(--color-text-brand);
}

.kvstep-desc {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-b2);
  font-weight: 400;
  line-height: var(--line-height-b2);
  color: var(--color-text-secondary);
}

/* Inline prose links: same treatment as .kacc-desc a and .kfaq-answer a so
   body-copy links read the same across the site. Without these the browser
   default #0000EE wins, because nothing else styles anchors in body copy. */
.kvstep-desc a,
.kenv-desc a,
.kstep-card-desc a,
.kcap-intro a,
.kcap-item-desc a {
  color: var(--color-text-brand);
  text-decoration: underline; text-underline-offset: 2px;
}
.kvstep-desc a:hover,
.kenv-desc a:hover,
.kstep-card-desc a:hover,
.kcap-intro a:hover,
.kcap-item-desc a:hover { text-decoration: none; }

/* A "watch the walkthrough" button inside a step card. .kstab-btn is the
   design system's card-level button size (B3, px-24 py-12), which suits a step
   card better than the full-size .kbtn; it needs align-self so it does not
   stretch across the flex column. */
.kvstep-content .kstab-btn { align-self: flex-start; margin-top: var(--space-8); }

/* Inline commands in a step description. Without this the browser default
   monospace wins and DM Mono, the design system's code face, never applies.
   Scoped to .kvstep-desc because it is the only place inline code appears. */
.kvstep-desc code {
  font-family: var(--font-family-mono);
  font-size: 0.9em;
  color: var(--color-text-primary);
}

@media (max-width: 1072px) {
  .kvstep-section { padding-block: var(--space-48); padding-inline: var(--space-32); }
}

@media (max-width: 767px) {
  .kvstep-section { padding-block: var(--space-32); padding-inline: var(--space-16); align-items: flex-start; }
  .kvstep-header { text-align: left; }
  .kvstep-list { grid-template-columns: 1fr; }
}

/* ================================================================
   8. Protocols & technical details (.kprot-*) — Figma 99:3197
   White background, centered H2, canvas card with 3 grouped rows.
   Secondary "Read more" button below card.
   ================================================================ */
.kprot-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  padding-block: var(--section-pad-y);
  padding-inline: var(--section-pad-x);
  background: var(--color-surface-card);
}

.kprot-header {
  width: 100%;
  max-width: var(--content-max);
  text-align: center;
}

.kprot-heading {
  margin: 0;
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  color: var(--color-text-brand);
}

/* The table has to read as a panel on top of the section, and the section's
   colour alternates page by page, so take the opposite of whatever the
   alternation set. Falls back to canvas for sections outside that rule, which
   are white, matching the original design. */
.kprot-card {
  width: 100%;
  max-width: var(--content-max);
  background: var(--alt-contrast, var(--color-surface-canvas));
  border-radius: var(--radius-xl);
  padding-block: var(--space-24);
  padding-inline: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.kprot-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.kprot-group-label {
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-b3);
  font-weight: 600;
  line-height: var(--line-height-b3);
  color: var(--color-text-secondary);
}

.kprot-divider {
  border: none;
  border-top: 1px solid var(--color-border-default);
  margin: 0;
}

.kprot-row {
  display: flex;
  gap: var(--space-16);
  align-items: flex-start;
}

.kprot-term {
  width: 189px;
  flex-shrink: 0;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-b2);
  font-weight: 500;
  line-height: var(--line-height-b2);
  color: var(--color-text-primary);
}

.kprot-value {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-b2);
  font-weight: 400;
  line-height: var(--line-height-b2);
  color: var(--color-text-primary);
  min-width: 0;
}

@media (max-width: 1072px) {
  .kprot-section { padding-block: var(--space-48); padding-inline: var(--space-32); }
}

@media (max-width: 767px) {
  .kprot-section { padding-block: var(--space-32); padding-inline: var(--space-16); align-items: flex-start; }
  .kprot-header { text-align: left; }
  /* "Read the documentation" fills the row, matching the hero buttons, which
     go to flex:1 1 auto at this same breakpoint. It is a direct child of the
     section, so it stretches against the section's own content width. */
  .kprot-section > .kbtn { width: 100%; }
}

@media (max-width: 639px) {
  .kprot-row { flex-direction: column; gap: var(--space-4); }
  .kprot-term { width: auto; }
}

/* ================================================================
   Scenario tab bullet points (.kscen-*)
   Used inside kstab panels for the product scenario section.
   Each panel has: H3 title, description, then a .kscen-bullets list.
   ================================================================ */
.kscen-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.kscen-bullet {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-b2);
  line-height: var(--line-height-b2);
  color: var(--color-text-primary);
}
.kscen-bullet-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-info-background);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kscen-bullet-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  color: var(--color-text-brand);
}
.kscen-bullet-text { align-self: center; }