.capability-tabs {
  scroll-margin-top: 90px;
}

/* Each capability tab reveals a complete example and its differentiator. */
.workflows {
  padding-bottom: 0;
  padding-top: 0;
}

.workflow-cta {
  margin-top: 0;
}

.product {
  padding-top: 0;
}

.feature-photo {
  border: 1px solid var(--line);
  grid-column: span 2;
  margin: 0;
  min-height: 330px;
  overflow: hidden;
}

.feature-photo img {
  height: 100%;
  min-height: 330px;
  object-fit: cover;
  object-position: center;
  transition: transform 500ms var(--ease);
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .feature-photo:hover img {
    transform: scale(1.015);
  }
}

.workflow-grid {
  margin-top: 0;
}

.workflow-card {
  background: #fff;
  border: 1px solid var(--line);
  display: grid;
  gap: clamp(42px, 6vw, 88px);
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  min-height: 540px;
  padding: clamp(34px, 5vw, 68px);
  will-change: opacity, transform;
}

.workflow-card[hidden] {
  display: none;
}

.workflow-story {
  align-content: start;
  display: grid;
}

.workflow-kicker {
  color: var(--violet);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .11em;
  margin-bottom: 22px;
  text-transform: uppercase;
}

.workflow-story h2 {
  font-size: clamp(2.5rem, 4.8vw, 4.9rem);
  max-width: 820px;
}

.workflow-story > p:not(.workflow-kicker) {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
  margin-top: 24px;
  max-width: 650px;
}

.workflow-edge {
  background: var(--lime);
  margin-top: 40px;
  max-width: 680px;
  padding: 25px 28px 27px;
}

.workflow-edge small {
  color: #4c521e;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.workflow-edge h3 {
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  margin-top: 10px;
}

.workflow-edge p {
  color: #3f4421;
  font-size: .88rem;
  line-height: 1.55;
  margin-top: 10px;
}

.workflow-card ol {
  align-self: center;
  counter-reset: workflow-step;
  list-style: none;
  margin: 0;
  padding: 0;
}

.workflow-card li {
  align-items: start;
  border-top: 1px solid var(--line);
  counter-increment: workflow-step;
  display: grid;
  gap: 12px 18px;
  grid-template-columns: 38px 95px minmax(0, 1fr);
  padding: 22px 0;
}

.workflow-card li:last-child {
  border-bottom: 1px solid var(--line);
}

.workflow-card li::before {
  color: var(--violet);
  content: counter(workflow-step, decimal-leading-zero);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.workflow-card li b {
  font-size: .8rem;
}

.workflow-card li span {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.5;
}

@media (max-width: 1000px) {
  .feature-photo {
    grid-column: span 1;
  }
}

@media (max-width: 900px) {

  .workflow-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .workflow-card ol {
    align-self: auto;
  }
}

@media (max-width: 600px) {
  .feature-photo {
    grid-column: auto;
  }

  .workflows {
    padding-top: 0;
  }

  .workflow-card {
    padding: 28px 22px;
  }

  .workflow-story h2 {
    font-size: clamp(2.15rem, 11vw, 3.25rem);
  }

  .workflow-card li {
    grid-template-columns: 32px 1fr;
  }

  .workflow-card li span {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-photo img {
    transition: none;
  }

  .workflow-card {
    will-change: auto;
  }
}

/* Role cards: hover explains the access level; tap and keyboard activation do the same. */
.role-card {
  --role-accent: var(--lime);
  --role-accent-text: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  margin-left: -1px;
  min-height: 350px;
  padding: 0;
  perspective: 1200px;
  position: relative;
  transform: translateY(0);
  transition: opacity 520ms cubic-bezier(.23, 1, .32, 1), transform 180ms cubic-bezier(.23, 1, .32, 1);
}

.role-card--admin {
  --role-accent: #666ce8;
  --role-accent-text: #fff;
}

.role-card--manager {
  --role-accent: #ff8a66;
}

.role-card--agent {
  --role-accent: #6fdcf2;
}

.role-card-inner {
  min-height: inherit;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 240ms cubic-bezier(.77, 0, .175, 1);
  width: 100%;
}

.role-card-face {
  backface-visibility: hidden;
  border: 1px solid #3b3d39;
  display: flex;
  flex-direction: column;
  inset: 0;
  min-height: inherit;
  overflow: hidden;
  padding: 28px;
  position: absolute;
  -webkit-backface-visibility: hidden;
}

.role-card-front {
  background: var(--dark);
}

.role-card-back {
  background: var(--role-accent);
  border-color: var(--role-accent);
  color: var(--role-accent-text);
  transform: rotateY(180deg);
}

.role-card small {
  color: var(--lime);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.role-card-back small {
  color: currentColor;
  opacity: .68;
}

.role-card-summary {
  margin-top: auto;
}

.role-card h3,
.role-card .role-card-summary h3 {
  font-size: 2rem;
  margin-top: 0;
}

.role-card p {
  margin-top: 15px;
}

.role-card-back h3 {
  font-size: 1.72rem;
  margin-top: 34px;
}

.role-card-back ul {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.role-card-back li {
  border-top: 1px solid currentColor;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
  padding: 9px 0 9px 21px;
  position: relative;
}

.role-card-back li::before {
  content: "✓";
  font-weight: 800;
  left: 0;
  position: absolute;
}

.role-card-cue {
  align-items: center;
  display: flex;
  font-size: .67rem;
  font-weight: 700;
  justify-content: space-between;
  letter-spacing: .08em;
  margin-top: 22px;
  text-transform: uppercase;
}

.role-card-front .role-card-cue {
  color: #aeb0aa;
}

.role-card-cue b {
  font-size: 1rem;
}

.role-card.is-flipped {
  transform: translateY(-6px);
  z-index: 2;
}

.role-card.is-flipped .role-card-inner {
  transform: rotateY(180deg);
}

.role-card.is-keyboard-action,
.role-card.is-keyboard-action .role-card-inner {
  transition-duration: 0ms;
}

.role-card:focus-visible {
  outline-color: var(--lime);
  outline-offset: 5px;
  z-index: 3;
}

@media (hover: hover) and (pointer: fine) {
  .role-card:hover {
    transform: translateY(-8px) scale(1.015);
    z-index: 2;
  }

  .role-card:hover .role-card-inner {
    transform: rotateY(180deg);
  }
}

@media (max-width: 680px) {
  .role-card,
  .role-card-inner,
  .role-card-face {
    min-height: 330px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .role-card,
  .role-card-inner {
    transition-duration: 0ms;
  }

  .role-card.is-flipped,
  .role-card:hover {
    transform: none;
  }
}
/* Regional platform and BYOC comparison */
.regional-compare{background:#eeefe7;border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
.regional-compare__inner{max-width:var(--max)}
.regional-compare__heading{align-items:end;display:grid;gap:48px;grid-template-columns:minmax(0,1fr) 310px}
.regional-compare__heading h2{font-size:clamp(2.6rem,5vw,5rem);max-width:850px}
.regional-compare__region{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;padding:22px 24px}
.regional-compare__region small,.carrier-explainer small,.carrier-card small{color:var(--muted);font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.regional-compare__region strong{font-family:"Space Grotesk",sans-serif;font-size:1.35rem;margin-top:8px}
.regional-compare__region span{color:var(--muted);font-size:.76rem;line-height:1.45;margin-top:5px}
.regional-compare__intro{color:var(--muted);font-size:1.05rem;line-height:1.65;margin-top:32px;max-width:850px}
.comparison-switch{border-bottom:1px solid #aeb1a5;display:grid;grid-template-columns:1fr 1fr;margin-top:58px}
.comparison-switch button{align-items:center;background:transparent;border:0;border-top:1px solid transparent;cursor:pointer;display:flex;font-family:"Space Grotesk",sans-serif;font-size:1.05rem;font-weight:700;gap:14px;justify-content:flex-start;min-height:74px;padding:0 24px;position:relative;text-align:left;transition:background-color .18s ease,color .18s ease,transform .14s var(--ease)}
.comparison-switch button span{color:var(--muted);font-family:"DM Sans",sans-serif;font-size:.68rem;letter-spacing:.12em}
.comparison-switch button.active{background:var(--ink);color:#fff}
.comparison-switch button.active span{color:var(--lime)}
.comparison-switch button:active{transform:scale(.985)}
.comparison-panel{padding-top:28px}
.comparison-value-strip{display:grid;grid-template-columns:repeat(4,1fr)}
.comparison-value-strip article{background:var(--paper);border:1px solid var(--line);border-right:0;display:flex;flex-direction:column;min-height:160px;padding:24px}
.comparison-value-strip article:last-child{border-right:1px solid var(--line)}
.comparison-value-strip small{color:var(--muted);font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.comparison-value-strip strong{font-family:"Space Grotesk",sans-serif;font-size:1.45rem;line-height:1.1;margin-top:auto}
.comparison-value-strip span{color:var(--muted);font-size:.76rem;margin-top:8px}
.comparison-table-wrap{background:var(--paper);border:1px solid var(--line);margin-top:18px;overflow-x:auto}
.comparison-table{border-collapse:collapse;min-width:900px;width:100%}
.comparison-table th,.comparison-table td{border-bottom:1px solid var(--line);padding:22px;text-align:left;vertical-align:top}
.comparison-table thead th{background:var(--ink);color:#fff;font-size:.67rem;letter-spacing:.09em;text-transform:uppercase}
.comparison-table tbody th{font-family:"Space Grotesk",sans-serif;font-size:1rem;min-width:180px}
.comparison-table tbody th span{display:block}
.comparison-table tbody th b{background:var(--lime);display:inline-block;font-family:"DM Sans",sans-serif;font-size:.63rem;letter-spacing:.04em;margin-top:8px;padding:4px 7px;text-transform:uppercase}
.comparison-table td{color:#4f514d;font-size:.84rem;line-height:1.5}
.comparison-table td a{color:var(--violet);display:inline-block;font-weight:700;margin-top:7px}
.comparison-table tr:last-child th,.comparison-table tr:last-child td{border-bottom:0}
.comparison-table tr.is-konnextions th,.comparison-table tr.is-konnextions td{background:#f4ffd1;color:var(--ink)}
.comparison-fineprint{color:var(--muted);font-size:.72rem;line-height:1.55;margin-top:16px;max-width:980px}
.carrier-explainer{background:var(--ink);color:#fff;display:grid;gap:60px;grid-template-columns:.85fr 1.15fr;padding:38px}
.carrier-explainer small{color:var(--lime)}
.carrier-explainer h3{font-size:clamp(1.8rem,3vw,3rem);margin-top:14px;max-width:560px}
.carrier-explainer ol{display:grid;gap:0;list-style:none;margin:0;padding:0}
.carrier-explainer li{align-items:start;border-top:1px solid #3e403d;display:grid;gap:16px;grid-template-columns:32px 1fr;padding:15px 0}
.carrier-explainer li b{color:var(--lime)}
.carrier-explainer li span{color:#d5d6d1;font-size:.87rem}
.carrier-grid{display:grid;gap:14px;grid-template-columns:repeat(3,1fr);margin-top:18px}
.carrier-card{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;min-height:330px;padding:28px;transition:border-color .18s ease,transform .18s var(--ease)}
.carrier-card h3{font-size:2rem;margin-top:7px}
.carrier-card>strong{font-family:"Space Grotesk",sans-serif;font-size:1.05rem;line-height:1.35;margin-top:48px}
.carrier-card p{color:var(--muted);font-size:.85rem;line-height:1.55;margin-top:14px}
.carrier-card a{border-top:1px solid var(--line);display:flex;font-size:.8rem;font-weight:700;justify-content:space-between;margin-top:auto;padding-top:18px}
.carrier-boundary{align-items:start;border:1px solid #c4c7b9;display:grid;gap:18px;grid-template-columns:180px 1fr auto;margin-top:18px;padding:22px}
.carrier-boundary span{color:var(--muted);font-size:.8rem;line-height:1.5}
.carrier-boundary a{font-size:.8rem;font-weight:700;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.comparison-switch button:hover:not(.active){background:#e2e4da}.carrier-card:hover{border-color:var(--ink);transform:translateY(-5px)}}
@media (max-width:900px){.regional-compare__heading{align-items:start;grid-template-columns:1fr}.regional-compare__region{max-width:420px}.comparison-value-strip{grid-template-columns:1fr 1fr}.comparison-value-strip article:nth-child(2){border-right:1px solid var(--line)}.carrier-explainer{grid-template-columns:1fr}.carrier-grid{grid-template-columns:1fr}.carrier-card{min-height:280px}.carrier-boundary{grid-template-columns:1fr}.carrier-boundary a{white-space:normal}}
@media (max-width:620px){.comparison-switch{grid-template-columns:1fr}.comparison-switch button{min-height:62px}.comparison-value-strip{grid-template-columns:1fr}.comparison-value-strip article{border-right:1px solid var(--line);min-height:135px}.comparison-table{min-width:0}.comparison-table thead{display:none}.comparison-table tbody,.comparison-table tr,.comparison-table th,.comparison-table td{display:block;width:100%}.comparison-table tr{border-bottom:8px solid var(--bg)}.comparison-table th,.comparison-table td{border-bottom:1px solid var(--line);padding:16px 18px}.comparison-table td:before{color:var(--muted);content:attr(data-label);display:block;font-size:.62rem;font-weight:700;letter-spacing:.08em;margin-bottom:5px;text-transform:uppercase}.carrier-explainer{padding:25px}.regional-compare__inner{padding-left:20px;padding-right:20px}}
@media (prefers-reduced-motion:reduce){.comparison-switch button,.carrier-card{transition:background-color .15s ease,color .15s ease}}
html:has(body.landing-page) {
  height: 100%;
  overflow: hidden !important;
}

body.landing-page {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-x: clip;
  overflow-y: auto !important;
  overscroll-behavior-y: auto;
  position: static !important;
}