.feature-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--feature-phone-col, minmax(250px, 340px));
  gap: 26px;
  align-items: stretch;
  min-height: 0;
  min-width: 0;
}

.feature-grid {
  display: flex;
  flex-direction: column;
  gap: var(--feature-grid-gap, 12px);
  min-height: 0;
  min-width: 0;
}

.feature-item {
  position: relative;
  display: grid;
  grid-template-columns: var(--feature-num-width, 58px) minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  flex: 0 0 var(--feature-collapsed, 66px);
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: var(--feature-item-padding, 12px 16px);
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(47, 111, 191, .14);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition:
    flex-basis 260ms cubic-bezier(.2, .8, .2, 1),
    padding 260ms cubic-bezier(.2, .8, .2, 1),
    transform 180ms cubic-bezier(.2, .8, .2, 1),
    border-color 180ms cubic-bezier(.2, .8, .2, 1),
    box-shadow 180ms cubic-bezier(.2, .8, .2, 1),
    opacity 180ms cubic-bezier(.2, .8, .2, 1);
}

.feature-item:not(.is-active) {
  opacity: .74;
}

.feature-item:hover,
.feature-item.is-active {
  border-color: rgba(47, 111, 191, .42);
  box-shadow: 0 18px 40px rgba(47, 111, 191, .15);
  transform: translateY(-1px);
}

.feature-item.is-active {
  align-items: start;
  flex: 0 0 auto;
  flex-basis: auto;
  min-height: var(--feature-active, 234px);
  padding: var(--feature-active-padding, 18px 20px);
  opacity: 1;
}

.feature-item.is-active::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  z-index: 1;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(47, 111, 191, .95), rgba(47, 111, 191, .48));
  box-shadow: 0 0 18px rgba(47, 111, 191, .24);
  pointer-events: none;
}

.feature-item.is-active::before {
  left: 0;
}

.feature-item.is-active > * {
  position: relative;
  z-index: 2;
}

.feature-item:focus-visible {
  outline: 3px solid rgba(47, 111, 191, .28);
  outline-offset: 3px;
}

.feature-num {
  display: grid;
  place-items: center;
  width: var(--feature-num-width, 58px);
  height: 28px;
  border-radius: 7px;
  background: var(--blue);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(47, 111, 191, .2);
}

.feature-copy {
  position: relative;
  min-width: 0;
}

.feature-copy strong {
  display: block;
  color: #000;
  font-size: var(--feature-title-size, 17px);
  line-height: 1.05;
  font-weight: 950;
  overflow-wrap: anywhere;
  transition: font-size 260ms cubic-bezier(.2, .8, .2, 1);
}

.feature-item.is-active .feature-copy strong {
  font-size: var(--feature-active-title-size, 24px);
}

.feature-copy span {
  display: block;
  margin-top: 5px;
  color: #606060;
  font-size: var(--feature-subtitle-size, 15px);
  line-height: 1.12;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.feature-price {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 108px;
  z-index: 3;
  display: grid;
  justify-items: end;
  gap: 3px;
  color: var(--blue);
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.feature-item:not(.is-active) .feature-price {
  display: none;
}

.feature-price strong {
  color: inherit;
  font-size: 16px;
  line-height: 1;
  font-weight: 950;
}

.feature-price span {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.05;
  font-weight: 850;
}

.feature-copy > strong,
.feature-copy > span:not(.feature-price) {
  padding-right: 170px;
}

.feature-item:not(.is-active) .feature-copy > strong,
.feature-item:not(.is-active) .feature-copy > span:not(.feature-price) {
  padding-right: 0;
}

@media (min-width: 761px) {
  .feature-item:not(.is-active) .feature-copy > span:not(.feature-price) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
}

.feature-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition:
    max-height 260ms cubic-bezier(.2, .8, .2, 1),
    margin-top 260ms cubic-bezier(.2, .8, .2, 1),
    opacity 200ms cubic-bezier(.2, .8, .2, 1),
    transform 260ms cubic-bezier(.2, .8, .2, 1);
}

.game-mechanics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.feature-item.is-active .feature-details {
  max-height: none;
  margin-top: var(--feature-details-gap, 14px);
  opacity: 1;
  overflow: visible;
  transform: none;
}

.feature-detail-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  min-height: var(--feature-card-height, 72px);
  padding: var(--feature-card-padding, 12px);
  border-radius: 8px;
  background: rgba(235, 242, 250, .86);
  border: 1px solid rgba(47, 111, 191, .16);
  color: #1f2937;
  font-size: var(--feature-card-text-size, 13px);
  line-height: 1.12;
  font-weight: 820;
  box-shadow: 0 10px 24px rgba(47, 111, 191, .08);
}

.feature-detail-card b {
  display: block;
  margin-bottom: 5px;
  color: var(--blue);
  font-size: var(--feature-card-title-size, 16px);
  line-height: 1;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.feature-detail-card > :not(.detail-icon),
.mechanic-card,
.mechanic-card span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.mechanic-card {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 33px;
  padding: 6px 7px;
  border-radius: 8px;
  background: rgba(235, 242, 250, .86);
  border: 1px solid rgba(47, 111, 191, .16);
  color: #1f2937;
  font-size: 10.5px;
  line-height: 1.05;
  font-weight: 850;
  box-shadow: 0 8px 18px rgba(47, 111, 191, .06);
}

.mechanic-card span {
  display: block;
  margin-top: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

.mechanic-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  border: 1px solid rgba(47, 111, 191, .18);
}

.mechanic-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.features-title,
.service-title {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.detail-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  border: 1px solid rgba(47, 111, 191, .2);
  box-shadow: 0 10px 22px rgba(47, 111, 191, .1);
}

.detail-icon svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.detail-copy {
  min-width: 0;
}

.feature-item.is-active .game-mechanics {
  max-height: none;
  padding-bottom: var(--feature-mechanics-bottom-gap, 6px);
}

.phone-frame.show-checklist img {
  opacity: 0;
  pointer-events: none;
}

.phone-frame.show-checklist::before {
  display: none;
}

.kln-checklist-screen {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 0;
  border-radius: 23px;
  background:
    linear-gradient(135deg, rgba(47, 111, 191, .04) 0 25%, transparent 25% 50%, rgba(47, 111, 191, .035) 50% 75%, transparent 75%) 0 0 / 38px 38px,
    #fff;
  color: #171717;
  opacity: 0;
  transform: scale(.985);
  pointer-events: none;
  transition: opacity 180ms cubic-bezier(.2, .8, .2, 1), transform 220ms cubic-bezier(.2, .8, .2, 1);
}

.phone-frame.show-checklist .kln-checklist-screen:not(.planner-checklist-screen) {
  opacity: 1;
  transform: none;
}

.kln-checklist-paper {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 15px 13px;
  border-radius: 0;
  background: rgba(255, 255, 255, .96);
  box-shadow: none;
  overflow: hidden;
}

.kln-title {
  color: #05070a;
  font-size: 19px;
  line-height: .98;
  font-weight: 950;
}

.kln-person {
  margin-top: 5px;
  color: #1f2937;
  font-size: 7px;
  line-height: 1.15;
  font-weight: 700;
}

.kln-score {
  margin-top: 7px;
  color: #111827;
  font-size: 20px;
  line-height: 1;
  font-weight: 950;
}

.kln-score span,
.kln-good {
  color: #2ea889;
}

.kln-divider {
  height: 1px;
  margin: 8px 0 7px;
  background: rgba(17, 24, 39, .28);
  flex: 0 0 auto;
}

.kln-summary-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  color: #1f2937;
  font-size: 9.6px;
  line-height: 1.02;
  font-weight: 950;
}

.kln-summary-head strong {
  min-width: 0;
}

.kln-summary-head span {
  color: #777;
  font-size: 8.8px;
  font-weight: 800;
  white-space: nowrap;
}

.kln-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 8px;
  margin-top: 7px;
  font-size: 6.7px;
  line-height: 1.05;
  font-weight: 850;
}

.kln-summary-grid div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.kln-summary-grid b {
  margin-right: 3px;
  color: #2ea889;
  font-size: 9.7px;
  font-weight: 950;
}

.kln-section-title {
  color: #111827;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
}

.kln-muted {
  margin-top: 3px;
  color: #747474;
  font-size: 8.4px;
  line-height: 1.15;
  font-weight: 650;
}

.kln-block-title {
  margin-top: 8px;
  color: #2ea889;
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

.kln-question {
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr);
  gap: 5px;
  padding: 3.8px 0;
  border-top: 1px solid rgba(17, 24, 39, .13);
  color: #111827;
  font-size: 6.9px;
  line-height: 1.12;
  font-weight: 850;
}

.kln-question:first-of-type {
  margin-top: 4px;
}

.kln-answer {
  color: #2ea889;
  font-size: 7.3px;
  font-weight: 950;
}

.kln-answer.is-no {
  color: #e60000;
}

.features-slide {
  --feature-active: 0;
  --feature-active-sm: 0;
  --feature-collapsed: 68px;
  --feature-item-padding: 12px 14px;
  --feature-active-padding: 16px 18px;
}

.service-slide {
  --feature-grid-gap: 8px;
  --feature-collapsed: 68px;
  --feature-active: 206px;
  --feature-item-padding: 12px 14px;
  --feature-active-padding: 16px 18px;
  --feature-card-height: 64px;
  --feature-card-padding: 10px;
  --feature-card-text-size: 11.5px;
}

@media (min-width: 761px) and (max-width: 1100px) {
  .features-title,
  .service-title {
    font-size: clamp(30px, 4.25vw, 42px);
  }

  .feature-layout {
    grid-template-columns: minmax(0, 1fr) var(--feature-phone-col-md, var(--feature-phone-col, clamp(150px, 17vw, 190px)));
    gap: 12px;
  }

  .phone-panel {
    display: grid;
    min-height: 0;
    overflow: visible;
  }

  .feature-details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .game-mechanics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  .feature-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1101px) and (max-width: 1500px) {
  .service-slide {
    gap: 10px;
    padding: 30px 44px 20px;
  }

  .service-head {
    gap: 7px;
  }

  .service-title {
    font-size: clamp(36px, 3.4vw, 46px);
  }

  .service-slide {
    --feature-grid-gap: 6px;
    --feature-collapsed: 44px;
    --feature-active: 158px;
    --feature-item-padding: 6px 10px;
    --feature-active-padding: 10px 12px;
    --feature-title-size: 13px;
    --feature-active-title-size: 18px;
    --feature-subtitle-size: 11.5px;
    --feature-details-gap: 7px;
    --feature-card-height: 48px;
    --feature-card-padding: 7px;
    --feature-card-text-size: 9.8px;
    --feature-card-title-size: 12.5px;
  }

  .service-slide .feature-layout {
    grid-template-columns: minmax(0, 1fr) var(--feature-phone-col-md, var(--feature-phone-col, minmax(220px, 300px)));
    gap: 16px;
  }

  .service-slide .feature-item {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 8px;
  }

  .service-slide .feature-num {
    width: 46px;
    height: 24px;
    font-size: 13px;
  }

  .service-slide .feature-item:not(.is-active) .feature-copy > span:not(.feature-price) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .service-slide .kln-checklist-paper {
    padding: 12px 11px 10px;
  }

  .service-slide .kln-title {
    font-size: 15px;
    line-height: .96;
  }

  .service-slide .kln-person {
    margin-top: 4px;
    font-size: 5.4px;
  }

  .service-slide .kln-score {
    margin-top: 5px;
    font-size: 16px;
  }

  .service-slide .kln-divider {
    margin: 5px 0;
  }

  .service-slide .kln-summary-head {
    gap: 6px;
    font-size: 7.2px;
    line-height: 1;
  }

  .service-slide .kln-summary-head span {
    font-size: 6.6px;
  }

  .service-slide .kln-summary-grid {
    gap: 3px 5px;
    margin-top: 5px;
    font-size: 5px;
    line-height: 1.02;
  }

  .service-slide .kln-summary-grid b {
    margin-right: 2px;
    font-size: 7px;
  }

  .service-slide .kln-section-title {
    font-size: 10.2px;
  }

  .service-slide .kln-muted {
    margin-top: 2px;
    font-size: 6px;
    line-height: 1.1;
  }

  .service-slide .kln-block-title {
    margin-top: 5px;
    font-size: 9.4px;
  }

  .service-slide .kln-question {
    grid-template-columns: 17px minmax(0, 1fr);
    gap: 3px;
    padding: 2px 0;
    font-size: 5px;
    line-height: 1.05;
  }

  .service-slide .kln-question:first-of-type {
    margin-top: 3px;
  }

  .service-slide .kln-answer {
    font-size: 5.4px;
  }

  .service-slide .phone-frame {
    height: var(--topic-phone-h, min(100%, 430px));
  }
}

@media (max-height: 820px) {
  .feature-layout {
    grid-template-columns: minmax(0, 1fr) var(--feature-phone-col-short, minmax(210px, 280px));
    gap: 18px;
  }

  .feature-grid {
    gap: var(--feature-grid-gap-sm, 8px);
  }

  .feature-item {
    grid-template-columns: var(--feature-num-width-sm, 50px) minmax(0, 1fr);
    gap: 10px;
    flex-basis: var(--feature-collapsed-sm, 46px);
    padding: var(--feature-item-padding-sm, 9px 12px);
  }

  .feature-item.is-active {
    flex-basis: auto;
    min-height: var(--feature-active-sm, 0);
    padding: var(--feature-active-padding-sm, 12px 14px);
  }

  .feature-num {
    width: var(--feature-num-width-sm, 50px);
    height: 26px;
    font-size: 14px;
  }

  .feature-copy strong {
    font-size: var(--feature-title-size-sm, 14px);
  }

  .feature-item.is-active .feature-copy strong {
    font-size: var(--feature-active-title-size-sm, 20px);
  }

  .feature-copy span {
    margin-top: 4px;
    font-size: var(--feature-subtitle-size-sm, 12px);
  }

  .feature-item.is-active .feature-details {
    margin-top: var(--feature-details-gap-sm, 10px);
  }

  .feature-details {
    gap: var(--feature-details-card-gap-sm, 8px);
  }

  .feature-detail-card {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    min-height: var(--feature-card-height-sm, 50px);
    padding: var(--feature-card-padding-sm, 8px);
    font-size: var(--feature-card-text-size-sm, 9.5px);
  }

  .feature-detail-card b {
    margin-bottom: 3px;
    font-size: var(--feature-card-title-size-sm, 13px);
  }

  .detail-icon {
    width: 30px;
    height: 30px;
  }

  .detail-icon svg {
    width: 18px;
    height: 18px;
  }

  .game-mechanics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .mechanic-card {
    grid-template-columns: 21px minmax(0, 1fr);
    min-height: 27px;
    gap: 5px;
    padding: 4px 5px;
    font-size: 8.3px;
  }

  .mechanic-icon {
    width: 20px;
    height: 20px;
  }

  .mechanic-icon svg {
    width: 12px;
    height: 12px;
  }

  .kln-checklist-screen {
    padding: 0;
  }

  .kln-checklist-paper {
    padding: 12px 11px 10px;
    border-radius: 0;
  }

  .kln-title {
    font-size: 16px;
    line-height: .98;
  }

  .kln-person {
    margin-top: 4px;
    font-size: 5.8px;
  }

  .kln-score {
    margin-top: 5px;
    font-size: 17px;
  }

  .kln-divider {
    margin: 5px 0;
  }

  .kln-summary-head {
    gap: 7px;
    font-size: 7.7px;
    line-height: 1.02;
  }

  .kln-summary-head span {
    font-size: 7.2px;
  }

  .kln-summary-grid {
    gap: 3px 6px;
    margin-top: 5px;
    font-size: 5.45px;
  }

  .kln-summary-grid b {
    margin-right: 2px;
    font-size: 7.6px;
  }

  .kln-section-title {
    font-size: 10.8px;
  }

  .kln-muted {
    margin-top: 2px;
    font-size: 6.4px;
  }

  .kln-block-title {
    margin-top: 6px;
    font-size: 9.8px;
  }

  .kln-question {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 3px;
    padding: 2px 0;
    font-size: 5.35px;
  }

  .kln-answer {
    font-size: 5.8px;
  }

  .service-slide {
    --feature-grid-gap-sm: 7px;
    --feature-collapsed-sm: 46px;
    --feature-active-sm: 0;
    --feature-item-padding-sm: 7px 10px;
    --feature-active-padding-sm: 10px 12px;
    --feature-title-size-sm: 13px;
    --feature-active-title-size-sm: 18px;
    --feature-subtitle-size-sm: 11px;
    --feature-card-height-sm: 48px;
    --feature-card-padding-sm: 7px;
    --feature-card-text-size-sm: 8.9px;
    --feature-card-title-size-sm: 12px;
  }

  .features-slide {
    --feature-item-padding-sm: 7px 10px;
    --feature-active-padding-sm: 10px 12px;
    --feature-title-size-sm: 13px;
    --feature-active-title-size-sm: 18px;
    --feature-subtitle-size-sm: 11px;
  }
}

@media (max-height: 650px) {
  .feature-layout {
    grid-template-columns: minmax(0, 1fr) var(--feature-phone-col-tiny, minmax(160px, 220px));
    gap: 12px;
  }

  .feature-grid {
    gap: 5px;
  }

  .feature-item {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    flex-basis: 32px;
    padding: 5px 9px;
  }

  .feature-item.is-active {
    align-items: start;
    padding: 9px 10px;
  }

  .feature-item:not(.is-active) .feature-copy span {
    display: none;
  }

  .feature-num {
    width: 44px;
    height: 22px;
    font-size: 13px;
  }

  .feature-copy strong {
    font-size: 12px;
  }

  .feature-item.is-active .feature-copy strong {
    font-size: 16px;
  }

  .feature-copy span {
    margin-top: 3px;
    font-size: 9.5px;
  }

  .feature-item.is-active .feature-details {
    margin-top: 8px;
  }

  .feature-details {
    gap: 6px;
  }

  .feature-detail-card {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 6px;
    min-height: 40px;
    padding: 6px;
    font-size: 9px;
  }

  .feature-detail-card b {
    margin-bottom: 2px;
    font-size: 11px;
  }

  .detail-icon {
    width: 24px;
    height: 24px;
  }

  .detail-icon svg {
    width: 15px;
    height: 15px;
  }

  .game-mechanics {
    gap: 4px;
  }

  .mechanic-card {
    grid-template-columns: 18px minmax(0, 1fr);
    min-height: 22px;
    gap: 4px;
    padding: 3px 4px;
    font-size: 8px;
  }

  .mechanic-icon {
    width: 18px;
    height: 18px;
  }

  .mechanic-icon svg {
    width: 11px;
    height: 11px;
  }

  .kln-checklist-screen {
    padding: 0;
  }

  .kln-checklist-paper {
    padding: 14px 11px 10px;
  }

  .kln-title {
    font-size: 13.5px;
  }

  .kln-person {
    margin-top: 4px;
    font-size: 5.6px;
  }

  .kln-score {
    margin-top: 6px;
    font-size: 14.5px;
  }

  .kln-summary-head {
    font-size: 7.4px;
  }

  .kln-summary-head span {
    font-size: 6.8px;
  }

  .kln-summary-grid {
    gap: 3px 5px;
    margin-top: 6px;
    font-size: 4.95px;
  }

  .kln-summary-grid b {
    font-size: 6.9px;
  }
}

@media (max-width: 760px), (max-width: 900px) and (orientation: portrait), (max-width: 940px) and (max-height: 520px) {
  .feature-price {
    top: 50%;
    right: 10px;
    min-width: 82px;
    justify-items: end;
    margin-top: 0;
    text-align: right;
    transform: translateY(-50%);
  }

  .feature-price strong {
    font-size: 14px;
  }

  .feature-price span {
    font-size: 9px;
  }

  .feature-copy > strong,
  .feature-copy > span:not(.feature-price) {
    padding-right: 96px;
  }

  .feature-item.is-active .feature-price {
    position: static;
    justify-items: start;
    margin-top: 7px;
    text-align: left;
    transform: none;
  }

  .feature-item.is-active .feature-copy > strong,
  .feature-item.is-active .feature-copy > span:not(.feature-price) {
    padding-right: 0;
  }

  .feature-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .feature-grid {
    gap: 8px;
  }

  .feature-item {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    flex: 0 0 auto;
    min-height: 46px;
    padding: 7px 10px;
  }

  .feature-item.is-active {
    flex: 0 0 auto;
    min-height: 0;
    padding: 10px;
  }

  .feature-item:not(.is-active) .feature-copy span {
    display: none;
  }

  .feature-num {
    width: 44px;
    height: 24px;
    font-size: 13px;
  }

  .feature-copy strong {
    font-size: 15px;
  }

  .feature-item.is-active .feature-copy strong {
    font-size: 18px;
  }

  .feature-copy span {
    font-size: 12px;
  }

  .feature-details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .feature-item.is-active .feature-details {
    max-height: none;
    margin-top: 8px;
  }

  .feature-item.is-active .game-mechanics {
    max-height: none;
  }

  .feature-detail-card {
    grid-template-columns: 24px minmax(0, 1fr);
    min-height: 38px;
    gap: 6px;
    padding: 6px;
    font-size: 10.5px;
  }

  .feature-detail-card b {
    display: block;
    margin: 0 0 2px;
    font-size: 12.5px;
  }

  .detail-icon {
    width: 24px;
    height: 24px;
  }

  .detail-icon svg {
    width: 15px;
    height: 15px;
  }

  .game-mechanics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .phone-panel {
    display: grid;
    place-items: center;
    min-height: clamp(430px, 150vw, 560px);
    overflow: visible;
  }

  .phone-frame {
    height: clamp(430px, 150vw, 560px);
    max-height: none;
    border-width: 7px;
    border-radius: 26px;
  }

  .phone-frame::before {
    width: 62px;
    height: 14px;
  }

  .phone-arrow {
    width: 22px;
    height: 54px;
    color: rgba(255, 255, 255, .38);
    font-size: 42px;
  }

  .phone-arrow-left {
    left: 0;
  }

  .phone-arrow-right {
    right: 0;
  }
}

@media (max-width: 520px) {
  .feature-item {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .feature-item:not(.is-active) {
    min-height: 48px;
    padding: 6px 10px;
  }

  .feature-item:not(.is-active) .feature-copy strong {
    font-size: 11.5px;
    line-height: 1.05;
  }

  .feature-item.is-active .feature-copy strong {
    font-size: 16px;
  }

  .feature-num {
    width: 42px;
  }

  .feature-details {
    grid-template-columns: 1fr;
  }

  .game-mechanics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-item.is-active .feature-details {
    gap: 5px;
  }

  .feature-detail-card {
    grid-template-columns: 22px minmax(0, 1fr);
    min-height: 34px;
    gap: 5px;
    padding: 5px;
    font-size: 10px;
  }

  .feature-detail-card b {
    display: inline;
    margin: 0 4px 0 0;
    font-size: 12px;
  }

  .detail-icon {
    width: 22px;
    height: 22px;
  }

  .detail-icon svg {
    width: 14px;
    height: 14px;
  }

  .mechanic-card {
    grid-template-columns: 16px minmax(0, 1fr);
    min-height: 32px;
    gap: 4px;
    padding: 4px 6px;
    font-size: 7.4px;
  }

  .mechanic-icon {
    width: 16px;
    height: 16px;
  }

  .mechanic-icon svg {
    width: 10px;
    height: 10px;
  }

  .phone-panel {
    min-height: clamp(430px, 150vw, 560px);
  }

  .phone-frame {
    height: clamp(430px, 150vw, 560px);
    max-height: none;
    border-width: 6px;
    border-radius: 24px;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .feature-layout {
    grid-template-columns: minmax(0, 1fr) var(--feature-phone-col-md, var(--feature-phone-col, clamp(150px, 17vw, 190px)));
    gap: 12px;
  }

  .phone-panel {
    display: grid;
    min-height: 0;
    overflow: visible;
  }
}

/* Keep topic-page phones proportional to the desktop canvas. */
@media (min-width: 1101px) and (min-height: 600px) {
  .phone-panel {
    min-height: 0;
    overflow: visible;
  }

  .phone-frame {
    height: var(--topic-phone-h, clamp(430px, calc(var(--stage-h) - 100px), 680px)) !important;
    max-height: var(--topic-phone-max-h, none) !important;
    transform: var(--topic-phone-shift, translateY(-20px));
  }

  .feature-copy strong {
    font-size: clamp(16px, 1.7dvh, 23px) !important;
  }

  .feature-item.is-active .feature-copy strong {
    font-size: clamp(24px, 2.5dvh, 36px) !important;
  }

  .feature-copy > span:not(.feature-price) {
    font-size: clamp(13px, 1.35dvh, 18px) !important;
  }
}

@media (min-width: 1101px) and (max-width: 1500px) and (min-height: 821px) {
  .service-slide {
    --feature-collapsed: 48px;
  }

  .service-slide .feature-copy strong {
    font-size: 16px !important;
  }

  .service-slide .feature-item.is-active .feature-copy strong {
    font-size: 22px !important;
  }

  .service-slide .feature-copy > span:not(.feature-price) {
    font-size: 12px !important;
    line-height: 1.08 !important;
  }
}

@media (min-width: 761px) and (max-height: 650px) {
  .service-slide {
    --service-phone-w: clamp(145px, calc(var(--stage-w) * .17), 185px);
    --service-phone-h: min(calc(var(--stage-h) - 154px), calc(var(--service-phone-w) * 20 / 9));
    --feature-grid-gap: 5px;
    --feature-grid-gap-sm: 4px;
    --feature-collapsed: 30px;
    --feature-collapsed-sm: 30px;
    --feature-active: 136px;
    --feature-active-sm: 136px;
    --feature-item-padding: 5px 9px;
    --feature-item-padding-sm: 5px 9px;
    --feature-active-padding: 9px 10px;
    --feature-active-padding-sm: 9px 10px;
    --feature-title-size: 12.5px;
    --feature-title-size-sm: 12.5px;
    --feature-active-title-size: 16px;
    --feature-active-title-size-sm: 16px;
    --feature-subtitle-size: 9px;
    --feature-subtitle-size-sm: 9px;
    --feature-details-gap: 7px;
    --feature-details-gap-sm: 7px;
    --feature-card-height: 40px;
    --feature-card-height-sm: 40px;
    --feature-card-padding: 6px;
    --feature-card-padding-sm: 6px;
    --feature-card-text-size: 7.6px;
    --feature-card-text-size-sm: 7.6px;
    --feature-card-title-size: 10.5px;
    --feature-card-title-size-sm: 10.5px;
  }

  .service-slide .feature-layout {
    grid-template-columns: minmax(0, 1fr) var(--service-phone-w);
    gap: 14px;
    padding-bottom: 2px;
  }

  .service-slide .feature-grid {
    gap: 4px;
  }

  .service-slide .feature-item {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
    flex-basis: 30px;
    padding: 5px 9px;
  }

  .service-slide .feature-item.is-active {
    flex-basis: 136px;
    min-height: 0;
    padding: 9px 10px;
  }

  .service-slide .feature-num {
    width: 44px;
    height: 20px;
    font-size: 12px;
  }

  .service-slide .feature-copy strong,
  .service-slide .feature-item.is-active .feature-copy strong,
  .service-slide .feature-copy > span:not(.feature-price) {
    line-height: 1.06 !important;
  }

  .service-slide .feature-copy strong {
    font-size: 12.5px !important;
  }

  .service-slide .feature-item.is-active .feature-copy strong {
    font-size: 16px !important;
  }

  .service-slide .feature-copy > span:not(.feature-price) {
    margin-top: 2px;
    font-size: 9px !important;
  }

  .service-slide .feature-details {
    gap: 5px;
  }

  .service-slide .feature-item.is-active .feature-details {
    margin-top: 5px;
  }

  .service-slide .feature-detail-card {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 5px;
    min-height: 36px;
    padding: 5px;
    font-size: 7.1px;
    line-height: 1.05;
  }

  .service-slide .feature-detail-card b {
    margin-bottom: 2px;
    font-size: 9.8px;
  }

  .service-slide .detail-icon {
    width: 22px;
    height: 22px;
  }

  .service-slide .detail-icon svg {
    width: 14px;
    height: 14px;
  }

  .service-slide .phone-frame {
    height: var(--service-phone-h) !important;
    max-height: calc(100% - 10px) !important;
    transform: none !important;
  }

  .service-slide .phone-frame.show-checklist,
  .service-slide .phone-frame.show-planner-checklist {
    height: min(calc(var(--service-phone-h) + 24px), calc(100% - 6px)) !important;
  }

  .service-slide .feature-price {
    min-width: 88px;
  }

  .service-slide .feature-price strong {
    font-size: 13px;
  }

  .service-slide .feature-price span {
    font-size: 7.4px;
  }
}

@media (min-width: 761px) and (max-height: 650px), (min-width: 761px) and (max-width: 1100px) {
  .kln-checklist-paper {
    padding: 8px 8px 6px;
  }

  .kln-title {
    font-size: 11.5px;
    line-height: .95;
  }

  .kln-person {
    margin-top: 3px;
    font-size: 4.7px;
    line-height: 1.05;
  }

  .kln-score {
    margin-top: 3px;
    font-size: 12px;
  }

  .kln-divider {
    margin: 3px 0;
  }

  .kln-summary-head {
    gap: 5px;
    font-size: 6.6px;
    line-height: 1;
  }

  .kln-summary-head span {
    font-size: 5.9px;
  }

  .kln-summary-grid {
    gap: 1px 4px;
    margin-top: 3px;
    font-size: 4.2px;
    line-height: 1;
  }

  .kln-summary-grid b {
    margin-right: 1px;
    font-size: 6px;
  }

  .kln-section-title {
    font-size: 8.7px;
  }

  .kln-muted {
    margin-top: 1px;
    font-size: 5.4px;
    line-height: 1.05;
  }

  .kln-block-title {
    margin-top: 3px;
    font-size: 7.8px;
  }

  .kln-question {
    grid-template-columns: 13px minmax(0, 1fr);
    gap: 2px;
    padding: 1px 0;
    font-size: 4px;
    line-height: .98;
  }

  .kln-question:first-of-type {
    margin-top: 2px;
  }

  .kln-answer {
    font-size: 4.8px;
  }

  .service-slide .kln-checklist-paper {
    padding: 6px 7px 5px;
  }

  .service-slide .kln-title {
    font-size: 10.2px;
  }

  .service-slide .kln-person {
    margin-top: 2px;
    font-size: 4px;
  }

  .service-slide .kln-score {
    margin-top: 2px;
    font-size: 10.6px;
  }

  .service-slide .kln-divider {
    margin: 2px 0;
  }

  .service-slide .kln-summary-head {
    font-size: 5.6px;
  }

  .service-slide .kln-summary-head span {
    font-size: 5px;
  }

  .service-slide .kln-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px 3px;
    margin-top: 2px;
    font-size: 3.7px;
  }

  .service-slide .kln-summary-grid b {
    font-size: 5.2px;
  }

  .service-slide .kln-section-title {
    font-size: 7.6px;
  }

  .service-slide .kln-muted {
    display: none;
    font-size: 4.6px;
  }

  .service-slide .kln-block-title {
    margin-top: 2px;
    font-size: 6.7px;
  }

  .service-slide .kln-question {
    grid-template-columns: 11px minmax(0, 1fr);
    gap: 1px;
    padding: .6px 0;
    font-size: 3.45px;
    line-height: .96;
  }

  .service-slide .kln-answer {
    font-size: 4px;
  }

  .service-slide .kln-checklist-paper {
    width: 112%;
    height: auto;
    min-height: 100%;
    margin-left: -6%;
    padding: 8px 8px 6px;
    transform: scale(.9);
    transform-origin: top center;
  }

  .service-slide .kln-title {
    font-size: 11.5px;
  }

  .service-slide .kln-person {
    margin-top: 3px;
    font-size: 4.7px;
  }

  .service-slide .kln-score {
    margin-top: 3px;
    font-size: 12px;
  }

  .service-slide .kln-summary-head {
    font-size: 6.6px;
  }

  .service-slide .kln-summary-head span {
    font-size: 5.9px;
  }

  .service-slide .kln-summary-grid {
    font-size: 4.2px;
  }

  .service-slide .kln-summary-grid b {
    font-size: 6px;
  }

  .service-slide .kln-section-title {
    font-size: 8.7px;
  }

  .service-slide .kln-block-title {
    font-size: 7.8px;
  }

  .service-slide .kln-question {
    grid-template-columns: 13px minmax(0, 1fr);
    gap: 2px;
    padding: 1px 0;
    font-size: 4px;
    line-height: .98;
  }

  .service-slide .kln-answer {
    font-size: 4.8px;
  }
}

/* Экран обучения для страницы стажировки фастфуда. */
.phone-frame .learning-screen {
  background: #111419;
  color: #f7f9fc;
}

.learning-heading { display: grid; gap: 4px; }
.learning-content { display: flex; flex-direction: column; gap: clamp(10px, 4cqw, 15px); min-height: 0; }
.learning-course { padding: clamp(12px, 5cqw, 18px); border: 1px solid #394358; border-radius: 12px; background: #202838; }
.learning-eyebrow { display: block; margin-bottom: 8px; color: #c2b3ff; font-size: clamp(8px, 3.6cqw, 11px); font-weight: 750; }
.learning-course > strong { display: block; font-size: clamp(17px, 7.5cqw, 23px); line-height: 1.12; }
.learning-progress-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: clamp(8px, 3.5cqw, 11px); line-height: 1.4; }
.learning-progress-caption b { color: #c2b3ff; }
.learning-progress { height: 5px; margin-top: 7px; overflow: hidden; border-radius: 3px; background: #3a4355; }
.learning-progress > span { display: block; width: 50%; height: 100%; background: #a58bfa; }
.learning-section-title { margin-bottom: 8px; font-size: clamp(11px, 4.6cqw, 14px); font-weight: 750; }
.learning-lessons { display: grid; gap: 6px; }
.learning-lesson { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 9px; border: 1px solid #333943; border-radius: 8px; background: #1d222a; }
.learning-lesson.is-next { border-color: #a58bfa; }
.learning-lesson-mark { display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px; border-radius: 7px; background: #303746; color: #d1d7e1; font-size: 10px; font-weight: 750; }
.learning-lesson.is-complete .learning-lesson-mark { color: #5cdfb0; background: #1c4038; }
.learning-lesson > div { display: grid; gap: 3px; }
.learning-lesson strong { font-size: clamp(9px, 4cqw, 12px); line-height: 1.2; }
.learning-lesson div > span { color: #b8c1cf; font-size: clamp(8px, 3.3cqw, 10px); line-height: 1.3; }
.learning-lesson.is-complete div > span { color: #5cdfb0; }

@media (max-width: 760px), (max-width: 900px) and (orientation: portrait), (max-width: 940px) and (max-height: 520px) {
  .training-page .service-slide .phone-frame {
    height: auto;
    min-height: 500px;
    max-height: none;
    aspect-ratio: 9 / 20;
  }
}

/* CSS-built phone screens stay readable when the phone scales with the slide. */
.phone-frame {
  container-type: inline-size;
}

.phone-frame .service-phone-screen,
.phone-frame .drink-notification-screen {
  gap: clamp(8px, 3.4cqw, 14px);
  padding-inline: clamp(10px, 5cqw, 18px);
}

.phone-frame .service-phone-screen {
  padding-top: clamp(26px, 10cqw, 38px);
  padding-bottom: clamp(12px, 5cqw, 18px);
}

.phone-frame .phone-status,
.phone-frame .quiz-statusbar {
  font-size: clamp(8px, 3.9cqw, 10px);
}

.phone-frame .phone-title {
  font-size: clamp(14px, 6.3cqw, 18px);
}

.phone-frame .phone-subtitle,
.phone-frame .nps-copy span,
.phone-frame .phone-card-head span,
.phone-frame .ticket-row span,
.phone-frame .planner-row span,
.phone-frame .quiz-option span,
.phone-frame .hint-line span,
.phone-frame .ai-row span,
.phone-frame .review-row span,
.phone-frame .ticket-timer span {
  font-size: clamp(7.5px, 3.35cqw, 9px);
  line-height: 1.18;
}

.phone-frame .nps-dashboard,
.phone-frame .ai-dashboard,
.phone-frame .ticket-list,
.phone-frame .planner-list,
.phone-frame .quiz-options {
  gap: clamp(6px, 2.9cqw, 9px);
}

.phone-frame .nps-hero {
  grid-template-columns: clamp(54px, 24cqw, 76px) minmax(0, 1fr);
  gap: clamp(8px, 3.8cqw, 11px);
  padding: clamp(9px, 4.5cqw, 13px);
}

.phone-frame .nps-ring {
  width: clamp(54px, 24cqw, 76px);
  height: clamp(54px, 24cqw, 76px);
  font-size: clamp(17px, 7.4cqw, 22px);
}

.phone-frame .nps-copy strong,
.phone-frame .ai-note b,
.phone-frame .hint-card b {
  font-size: clamp(12px, 5.5cqw, 15px);
  line-height: 1.08;
}

.phone-frame .nps-stat,
.phone-frame .phone-card,
.phone-frame .ai-note,
.phone-frame .hint-card {
  padding: clamp(8px, 3.8cqw, 11px);
}

.phone-frame .nps-stat {
  min-height: clamp(44px, 19cqw, 56px);
  font-size: clamp(7px, 3.2cqw, 8.5px);
}

.phone-frame .nps-stat b,
.phone-frame .planner-score b {
  font-size: clamp(16px, 6.8cqw, 20px);
}

.phone-frame .phone-card-head {
  font-size: clamp(10px, 4.7cqw, 12px);
}

.phone-frame .review-row,
.phone-frame .ai-row,
.phone-frame .ticket-row,
.phone-frame .planner-row,
.phone-frame .quiz-option,
.phone-frame .hint-line {
  gap: clamp(6px, 3cqw, 8px);
  padding: clamp(7px, 3.4cqw, 10px);
  font-size: clamp(8.5px, 3.9cqw, 10.5px);
  line-height: 1.14;
}

.phone-frame .review-mark,
.phone-frame .ticket-badge,
.phone-frame .quiz-badge,
.phone-frame .ai-status {
  font-size: clamp(8px, 3.5cqw, 10px);
}

.phone-frame .ticket-lock-time,
.phone-frame .lock-time {
  font-size: clamp(42px, 19cqw, 62px);
}

.phone-frame .ticket-lock-date,
.phone-frame .lock-date {
  font-size: clamp(13px, 5.4cqw, 18px);
}

.phone-frame .ticket-notification-card,
.phone-frame .notification-card {
  min-height: clamp(44px, 20cqw, 54px);
  padding: clamp(8px, 3.8cqw, 10px);
}

.phone-frame .ticket-notification-title,
.phone-frame .ticket-notification-text,
.phone-frame .notification-title,
.phone-frame .notification-text {
  font-size: clamp(8.8px, 4.2cqw, 11px);
  line-height: 1.08;
}

.phone-frame .ticket-notification-meta,
.phone-frame .notification-meta {
  font-size: clamp(6.8px, 3.1cqw, 8px);
}

.phone-frame .ticket-timer {
  min-height: clamp(86px, 39cqw, 122px);
}

.phone-frame .ticket-timer b {
  font-size: clamp(26px, 12cqw, 36px);
}

.phone-frame .planner-score div {
  font-size: clamp(7px, 3.25cqw, 9px);
}

.phone-frame .hint-card span,
.phone-frame .ai-note span {
  font-size: clamp(8px, 3.6cqw, 10px);
}

.phone-frame .quiz-test-screen {
  gap: clamp(5px, 2.5cqw, 8px);
  padding: clamp(10px, 4cqw, 13px) clamp(8px, 3.5cqw, 12px);
}

.phone-frame .quiz-back {
  font-size: clamp(22px, 10cqw, 28px);
}

.phone-frame .quiz-title-main {
  font-size: clamp(12px, 5.2cqw, 15px);
}

.phone-frame .quiz-title-main span,
.phone-frame .quiz-letter {
  font-size: clamp(10px, 4.4cqw, 12px);
}

.phone-frame .quiz-online,
.phone-frame .quiz-topic-row span,
.phone-frame .quiz-question-card p,
.phone-frame .quiz-bottom-bar span {
  font-size: clamp(7.5px, 3.45cqw, 9.5px);
  line-height: 1.16;
}

.phone-frame .quiz-topic-row strong,
.phone-frame .quiz-answer strong {
  font-size: clamp(8.6px, 3.8cqw, 10.5px);
}

.phone-frame .quiz-question-card h3 {
  font-size: clamp(12px, 5.1cqw, 15px);
}

.phone-frame .quiz-error {
  font-size: clamp(8.5px, 3.7cqw, 10px);
}

.phone-frame .quiz-bottom-bar button {
  font-size: clamp(10px, 4.2cqw, 13px);
}

.phone-frame .quiz-bottom-bar b {
  font-size: clamp(17px, 7.2cqw, 22px);
}

.phone-frame .kln-checklist-paper {
  padding: clamp(12px, 5cqw, 18px) clamp(10px, 4.2cqw, 15px) clamp(10px, 3.8cqw, 13px);
  min-width: 0;
}

.phone-frame .kln-checklist-paper * {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.phone-frame .kln-label,
.phone-frame .kln-muted,
.phone-frame .kln-answer {
  font-size: clamp(7.4px, 3.25cqw, 9px);
  line-height: 1.16;
}

.phone-frame .kln-title {
  font-size: clamp(16px, 6.6cqw, 20px);
}

.phone-frame .kln-person,
.phone-frame .kln-summary-grid,
.phone-frame .kln-question {
  font-size: clamp(7px, 3.05cqw, 8.4px);
  line-height: 1.14;
}

.phone-frame .kln-score {
  font-size: clamp(17px, 7cqw, 21px);
}

.phone-frame .kln-summary-head {
  font-size: clamp(8.6px, 3.7cqw, 10px);
}

.phone-frame .kln-summary-head span {
  font-size: clamp(7.4px, 3.25cqw, 8.8px);
}

.phone-frame .kln-summary-grid b {
  font-size: clamp(8px, 3.5cqw, 10px);
}

.phone-frame .kln-section-title,
.phone-frame .kln-block-title {
  font-size: clamp(11px, 4.6cqw, 13px);
}

@media (min-width: 761px) and (max-height: 820px) {
  .feature-item:not(.is-active) .feature-copy > span:not(.feature-price) {
    display: none !important;
  }
}

@media (min-width: 761px) and (max-width: 1100px), (min-width: 761px) and (max-height: 650px) {
  .phone-frame .phone-status {
    display: none;
  }

  .phone-frame .service-phone-screen {
    padding-top: clamp(18px, 7cqw, 26px);
  }

  .phone-frame .phone-title {
    font-size: clamp(15px, 7cqw, 19px);
  }

  .phone-frame .phone-subtitle,
  .phone-frame .nps-copy span,
  .phone-frame .phone-card-head span,
  .phone-frame .ticket-row span,
  .phone-frame .planner-row span,
  .phone-frame .quiz-option span,
  .phone-frame .hint-line span,
  .phone-frame .ai-row span,
  .phone-frame .review-row span {
    font-size: clamp(8px, 3.8cqw, 9.8px);
  }

  .phone-frame .review-row,
  .phone-frame .ai-row,
  .phone-frame .ticket-row,
  .phone-frame .planner-row,
  .phone-frame .quiz-option,
  .phone-frame .hint-line {
    font-size: clamp(10px, 4.8cqw, 12px);
  }

  .phone-frame .nps-stats {
    display: none;
  }

  .phone-frame .phone-card .review-row:nth-of-type(n+4),
  .phone-frame .phone-card .ai-row:nth-of-type(n+4),
  .phone-frame .ticket-list .ticket-row:nth-child(n+3),
  .phone-frame .planner-list .planner-row:nth-child(n+3),
  .phone-frame .quiz-options .quiz-option:nth-child(n+4) {
    display: none;
  }

  .phone-frame .quiz-topic-row {
    display: none;
  }

  .phone-frame .quiz-question-card {
    gap: 5px;
    padding: 9px 8px;
  }

  .phone-frame .quiz-question-card h3 {
    font-size: clamp(13px, 6cqw, 16px);
  }

  .phone-frame .quiz-answer {
    grid-template-columns: 26px minmax(0, 1fr) 22px;
    min-height: 34px;
    padding: 5px 6px;
  }

  .phone-frame .quiz-answer strong {
    font-size: clamp(9.8px, 4.6cqw, 11.8px);
  }

  .phone-frame .quiz-question-card > .quiz-answer:nth-of-type(n+5) {
    display: none;
  }

  .phone-frame .kln-muted {
    display: none;
  }

  .phone-frame .kln-divider {
    margin: clamp(4px, 1.7cqw, 6px) 0;
  }

  .phone-frame .kln-summary-grid {
    gap: 3px 5px;
    margin-top: 5px;
  }

  .phone-frame .kln-block-title {
    margin-top: 5px;
  }

  .phone-frame .kln-question {
    padding: 2px 0;
  }

  .phone-frame .kln-checklist-paper > .kln-question:nth-of-type(n+16),
  .phone-frame .kln-checklist-paper > .kln-block-title:nth-of-type(n+18) {
    display: none;
  }
}

/* Final presentation readability pass: show fewer mockup rows, but keep the text legible. */
.phone-frame .notification-title,
.phone-frame .notification-text,
.phone-frame .ticket-notification-title,
.phone-frame .ticket-notification-text {
  font-size: clamp(10.5px, 4.8cqw, 13px);
  line-height: 1.12;
}

.phone-frame .notification-meta,
.phone-frame .ticket-notification-meta {
  font-size: clamp(7.5px, 3.25cqw, 9px);
}

.phone-frame .phone-title {
  font-size: clamp(16px, 7cqw, 21px);
}

.phone-frame .phone-subtitle,
.phone-frame .nps-copy span,
.phone-frame .phone-card-head span,
.phone-frame .ticket-row span,
.phone-frame .planner-row span,
.phone-frame .quiz-option span,
.phone-frame .hint-line span,
.phone-frame .ai-row span,
.phone-frame .review-row span {
  font-size: clamp(8.8px, 3.8cqw, 10.5px);
  line-height: 1.18;
}

.phone-frame .nps-copy strong,
.phone-frame .ai-note b,
.phone-frame .hint-card b {
  font-size: clamp(14px, 5.8cqw, 17px);
}

.phone-frame .phone-card-head {
  font-size: clamp(11px, 4.9cqw, 14px);
}

.phone-frame .review-row,
.phone-frame .ai-row,
.phone-frame .ticket-row,
.phone-frame .planner-row,
.phone-frame .quiz-option,
.phone-frame .hint-line {
  font-size: clamp(10.5px, 4.45cqw, 13px);
  line-height: 1.16;
}

.phone-frame .nps-stat {
  font-size: clamp(8.5px, 3.3cqw, 10px);
}

.phone-frame .nps-stat b,
.phone-frame .planner-score b {
  font-size: clamp(18px, 7.2cqw, 23px);
}

.phone-frame .ticket-badge,
.phone-frame .quiz-badge,
.phone-frame .ai-status,
.phone-frame .review-mark {
  font-size: clamp(9px, 3.6cqw, 11px);
}

.phone-frame .quiz-title-main {
  font-size: clamp(14px, 5.6cqw, 17px);
}

.phone-frame .quiz-question-card h3 {
  font-size: clamp(14px, 5.8cqw, 17px);
}

.phone-frame .quiz-answer strong {
  font-size: clamp(10.5px, 4.2cqw, 12.5px);
}

.phone-frame .quiz-question-card p,
.phone-frame .quiz-bottom-bar span,
.phone-frame .quiz-online {
  font-size: clamp(8.8px, 3.55cqw, 10.5px);
}

.phone-frame .quiz-bottom-bar button {
  font-size: clamp(11px, 4.4cqw, 14px);
}

.phone-frame .kln-title {
  font-size: clamp(18px, 7.2cqw, 23px);
}

.phone-frame .kln-score {
  font-size: clamp(20px, 7.8cqw, 25px);
}

.phone-frame .kln-summary-head {
  font-size: clamp(10px, 3.9cqw, 12px);
}

.phone-frame .kln-summary-head span,
.phone-frame .kln-person {
  font-size: clamp(8.5px, 3.25cqw, 10px);
}

.phone-frame .kln-summary-grid,
.phone-frame .kln-question,
.phone-frame .kln-label,
.phone-frame .kln-muted,
.phone-frame .kln-answer {
  font-size: clamp(8.8px, 3.45cqw, 10.5px);
  line-height: 1.14;
}

.phone-frame .kln-summary-grid b {
  font-size: clamp(10px, 3.9cqw, 12px);
}

.phone-frame .kln-section-title,
.phone-frame .kln-block-title {
  font-size: clamp(13px, 4.8cqw, 15px);
}

.phone-frame .phone-card .review-row:nth-of-type(n+4),
.phone-frame .phone-card .ai-row:nth-of-type(n+4),
.phone-frame .ticket-list .ticket-row:nth-child(n+3),
.phone-frame .planner-list .planner-row:nth-child(n+3),
.phone-frame .quiz-options .quiz-option:nth-child(n+4),
.phone-frame .quiz-question-card > .quiz-answer:nth-of-type(n+5),
.phone-frame .nps-stats {
  display: none;
}

@media (min-width: 761px) and (max-width: 1100px), (min-width: 761px) and (max-height: 700px) {
  .phone-frame .phone-status,
  .phone-frame .quiz-statusbar,
  .phone-frame .quiz-topic-row,
  .phone-frame .kln-muted {
    display: none;
  }

  .phone-frame .service-phone-screen {
    padding-top: clamp(16px, 6cqw, 24px);
  }

  .phone-frame .ticket-list .ticket-row:nth-child(n+2),
  .phone-frame .planner-list .planner-row:nth-child(n+2),
  .phone-frame .phone-card .review-row:nth-of-type(n+3),
  .phone-frame .phone-card .ai-row:nth-of-type(n+3),
  .phone-frame .quiz-question-card > .quiz-answer:nth-of-type(n+4) {
    display: none;
  }

  .phone-frame .kln-divider {
    margin: 4px 0;
  }

  .phone-frame .kln-summary-grid {
    gap: 3px 5px;
    margin-top: 5px;
  }

  .phone-frame .kln-question {
    padding: 2px 0;
  }
}

@media (min-width: 761px) and (max-height: 760px) {
  .phone-frame .kln-checklist-paper {
    padding: 11px 11px 10px;
  }

  .phone-frame .kln-title {
    font-size: clamp(15px, 6.8cqw, 20px);
    line-height: 1;
  }

  .phone-frame .kln-person {
    display: none;
  }

  .phone-frame .kln-score {
    margin-top: 5px;
    font-size: clamp(18px, 7.4cqw, 23px);
  }

  .phone-frame .kln-summary-head {
    font-size: clamp(9px, 3.7cqw, 11px);
  }

  .phone-frame .kln-summary-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    font-size: clamp(8.2px, 3.35cqw, 10px);
    line-height: 1.08;
  }

  .phone-frame .kln-summary-grid div:nth-child(n+4) {
    display: none;
  }

  .phone-frame .kln-section-title,
  .phone-frame .kln-block-title {
    font-size: clamp(12px, 4.55cqw, 14px);
  }

  .phone-frame .kln-block-title {
    margin-top: 5px;
  }

  .phone-frame .kln-question,
  .phone-frame .kln-label,
  .phone-frame .kln-answer {
    font-size: clamp(8.4px, 3.35cqw, 10px);
    line-height: 1.1;
  }

  .phone-frame .kln-checklist-paper > .kln-question:nth-of-type(n+13),
  .phone-frame .kln-checklist-paper > .kln-block-title:nth-of-type(n+14) {
    display: none;
  }
}

@media (min-width: 1101px) and (max-height: 760px) {
  .phone-frame .kln-person {
    display: block;
  }

  .phone-frame .kln-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .phone-frame .kln-summary-grid div:nth-child(n+4) {
    display: block;
  }

  .phone-frame .kln-checklist-paper > .kln-question:nth-of-type(n+13) {
    display: grid;
  }

  .phone-frame .kln-checklist-paper > .kln-block-title:nth-of-type(n+14) {
    display: block;
  }

  .phone-frame .kln-checklist-paper > .kln-question:nth-of-type(n+16),
  .phone-frame .kln-checklist-paper > .kln-block-title:nth-of-type(n+18) {
    display: none;
  }
}

/* The topic shell uses its mobile canvas in these viewports. Keep feature cards
   stacked even when the desktop width and short-height rules above also match. */
@media (min-width: 761px) and (max-width: 900px) and (orientation: portrait),
       (min-width: 761px) and (max-width: 940px) and (max-height: 520px) {
  .feature-layout,
  .service-slide .feature-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature-details {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-slide .feature-item.is-active {
    flex-basis: auto;
  }
}