/*
 * Visual polish pass 9.
 * Keeps production copy and behavior intact while matching the designer crops.
 * The footer and the agreed soft frameless outer treatment are intentionally untouched.
 */

/* A single physical phone frame: the shell is the frame, the SVG overlay is redundant. */
.kv2-site .kv2-phone-frame {
  display: none !important;
}

.kv2-site .kv2-phone-shell {
  overflow: hidden;
  border-color: #16263c;
  background: #fff;
  box-shadow: 0 14px 28px rgba(22, 38, 60, .14);
}

.kv2-site .kv2-phone-screen {
  display: block;
  border-radius: inherit;
}

/* Brand marks retain their native color inside the store and platform controls. */
.kv2-site .kv2-store-badge img,
.kv2-site .kv2-platform-icon,
.kv2-site .kv2-step-icon,
.kv2-site .kv2-proof-icon,
.kv2-site .kv2-capability-summary img {
  filter: none !important;
}

.kv2-site .kv2-store-badge img {
  object-fit: contain;
}

/* The mascot was nested in a hidden CTA wrapper; expose only the mascot from it. */
.kv2-site .kv2-onboarding > .kv2-container {
  position: relative;
}

.kv2-site .kv2-onboarding-cta {
  display: block !important;
  position: static !important;
  width: 0;
  height: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.kv2-site .kv2-onboarding-cta > :not(.kv2-onboarding-mascot) {
  display: none !important;
}

@media (min-width: 1200px) {
  /* 01-header-hero: measured against the 1360 px designer canvas. */
  .kv2-site .kv2-hero-layout {
    min-height: 445px;
  }

  .kv2-site .kv2-hero-copy {
    transform: translate(24px, -61px);
  }

  .kv2-site .kv2-display {
    max-width: 470px;
    font-size: 50px;
    line-height: 1.02;
  }

  .kv2-site .kv2-display-accent {
    max-width: 310px;
  }

  .kv2-site .kv2-hero-copy .kv2-lead {
    max-width: 365px;
    margin-top: 14px !important;
    font-size: 16px;
    line-height: 1.55;
  }

  .kv2-site .kv2-hero-copy .kv2-hero-actions {
    margin-top: 40px;
  }

  .kv2-site .kv2-hero-visual {
    transform: translate(-37px, -4px) scale(1);
    transform-origin: center;
  }

  .kv2-site .kv2-hero > .kv2-proof-grid {
    padding-top: 14px;
  }

  .kv2-site .kv2-proof-card {
    min-height: 112px;
  }

  /* 05-interactive-demo: Kuzya peeks over the browser, as in the crop. */
  .kv2-site .kv2-demo-copy {
    position: static;
  }

  .kv2-site .kv2-demo-mascot {
    display: block;
    top: -28px;
    right: 49px;
    width: 170px;
    height: 100px;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 7px 10px rgba(22, 38, 60, .09));
  }

  /* 06-onboarding-platforms: mascot visible at the upper-right platform edge. */
  .kv2-site .kv2-onboarding-mascot {
    display: block !important;
    z-index: 5;
    top: -10px;
    right: 10px;
    width: 142px;
    height: 95px;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 7px 10px rgba(22, 38, 60, .08));
  }

  /* 08-voice: the generated Kuzya holds a real microphone beside the waveform. */
  .kv2-site .kv2-final .kv2-voice-mascot {
    z-index: 3;
    left: 64px;
    bottom: -40px;
    width: 270px;
    height: 260px;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgba(22, 38, 60, .1));
  }
}

@media (min-width: 701px) and (max-width: 1199px) {
  .kv2-site .kv2-demo-mascot {
    display: block;
    top: -20px;
    right: 18px;
    width: 116px;
    height: 78px;
    object-fit: contain;
  }

  .kv2-site .kv2-onboarding-mascot {
    display: block !important;
    z-index: 5;
    top: -6px;
    right: 8px;
    width: 118px;
    height: 80px;
    object-fit: contain;
  }

  .kv2-site .kv2-final .kv2-voice-mascot {
    width: 225px;
    height: 225px;
    object-fit: contain;
  }
}

@media (max-width: 700px) {
  .kv2-site .kv2-phone-shell {
    border-width: 3px;
    border-radius: 18px;
  }

  .kv2-site .kv2-demo-mascot {
    display: none !important;
  }

  .kv2-site .kv2-onboarding-mascot {
    display: block !important;
    z-index: 4;
    top: 4px;
    right: -4px;
    width: 92px;
    height: 64px;
    object-fit: contain;
  }

  .kv2-site .kv2-final .kv2-voice-mascot {
    top: 48px;
    right: -4px;
    bottom: auto;
    left: auto;
    width: 170px;
    height: 220px;
    transform: none;
    object-fit: contain;
  }
}

/* Pass 10: versioned illustrated icons and final 01-header-hero measurements. */
.kv2-site .kv2-workflow-grid .kv2-workflow-step:nth-child(1) .kv2-step-icon { content: url("../images/kuzya-concept-v2/icons/detailed/booking-v3.svg"); }
.kv2-site .kv2-workflow-grid .kv2-workflow-step:nth-child(2) .kv2-step-icon { content: url("../images/kuzya-concept-v2/icons/detailed/reception-v3.svg"); }
.kv2-site .kv2-workflow-grid .kv2-workflow-step:nth-child(3) .kv2-step-icon { content: url("../images/kuzya-concept-v2/icons/detailed/exam-v3.svg"); }
.kv2-site .kv2-workflow-grid .kv2-workflow-step:nth-child(4) .kv2-step-icon { content: url("../images/kuzya-concept-v2/icons/detailed/inventory-v3.svg"); }
.kv2-site .kv2-workflow-grid .kv2-workflow-step:nth-child(5) .kv2-step-icon { content: url("../images/kuzya-concept-v2/icons/detailed/payment-v3.svg"); }
.kv2-site .kv2-workflow-grid .kv2-workflow-step:nth-child(6) .kv2-step-icon { content: url("../images/kuzya-concept-v2/icons/detailed/clipboard-v3.svg"); }
.kv2-site .kv2-workflow-grid .kv2-workflow-step:nth-child(7) .kv2-step-icon { content: url("../images/kuzya-concept-v2/icons/detailed/reminder-v3.svg"); }

.kv2-site .kv2-onboarding-grid .kv2-onboarding-step:nth-child(1) .kv2-step-icon { content: url("../images/kuzya-concept-v2/icons/detailed/booking-v3.svg"); }
.kv2-site .kv2-onboarding-grid .kv2-onboarding-step:nth-child(2) .kv2-step-icon { content: url("../images/kuzya-concept-v2/icons/detailed/platform-web-v3.svg"); }
.kv2-site .kv2-onboarding-grid .kv2-onboarding-step:nth-child(3) .kv2-step-icon { content: url("../images/kuzya-concept-v2/icons/detailed/exam-v3.svg"); }

.kv2-site .kv2-platform-grid .kv2-platform-card:nth-child(1) .kv2-platform-icon { content: url("../images/kuzya-concept-v2/icons/detailed/platform-web-v3.svg"); }
.kv2-site .kv2-platform-grid .kv2-platform-card:nth-child(2) .kv2-platform-icon { content: url("../images/kuzya-concept-v2/icons/detailed/android-v3.svg"); }
.kv2-site .kv2-platform-grid .kv2-platform-card:nth-child(3) .kv2-platform-icon { content: url("../images/kuzya-concept-v2/icons/detailed/windows-v3.svg"); }

.kv2-site .kv2-capability-grid .kv2-capability-item:nth-child(1) img { content: url("../images/kuzya-concept-v2/icons/detailed/exam-v3.svg"); }
.kv2-site .kv2-capability-grid .kv2-capability-item:nth-child(2) img { content: url("../images/kuzya-concept-v2/icons/detailed/medical-record-v3.svg"); }
.kv2-site .kv2-capability-grid .kv2-capability-item:nth-child(3) img { content: url("../images/kuzya-concept-v2/icons/detailed/clipboard-v3.svg"); }
.kv2-site .kv2-capability-grid .kv2-capability-item:nth-child(4) img { content: url("../images/kuzya-concept-v2/icons/detailed/inventory-v3.svg"); }
.kv2-site .kv2-capability-grid .kv2-capability-item:nth-child(5) img { content: url("../images/kuzya-concept-v2/icons/detailed/printer-v3.svg"); }
.kv2-site .kv2-capability-grid .kv2-capability-item:nth-child(6) img { content: url("../images/kuzya-concept-v2/icons/detailed/telegram-v3.svg"); }
.kv2-site .kv2-capability-grid .kv2-capability-item:nth-child(7) img { content: url("../images/kuzya-concept-v2/icons/detailed/website-v3.svg"); }
.kv2-site .kv2-capability-grid .kv2-capability-item:nth-child(8) img { content: url("../images/kuzya-concept-v2/icons/detailed/roles-v3.svg"); }
.kv2-site .kv2-capability-grid .kv2-capability-item:nth-child(9) img { content: url("../images/kuzya-concept-v2/icons/detailed/offline-v3.svg"); }

.kv2-site .kv2-workflow-grid .kv2-step-icon,
.kv2-site .kv2-onboarding-grid .kv2-step-icon,
.kv2-site .kv2-platform-icon,
.kv2-site .kv2-capability-summary img {
  filter: none !important;
  object-fit: contain;
  image-rendering: auto;
}

@media (min-width: 1200px) {
  .kv2-site .kv2-navbar .kv2-brand-image {
    width: 238px;
  }

  .kv2-site .kv2-hero {
    min-height: 600px;
    padding-top: 19px;
    padding-bottom: 0;
  }

  .kv2-site .kv2-hero-copy {
    transform: translate(24px, -36px);
  }

  .kv2-site .kv2-display {
    font-size: 46px;
  }

  .kv2-site .kv2-hero-copy .kv2-lead {
    max-width: 340px;
    margin-top: 21px !important;
  }

  .kv2-site .kv2-hero-copy .kv2-hero-actions {
    row-gap: 17px;
    margin-top: 48px;
  }

  .kv2-site .kv2-hero-visual {
    transform: translate(-37px, 0) scale(1);
  }

  .kv2-site .kv2-hero > .kv2-proof-grid {
    height: 116px;
    min-height: 116px;
    padding-top: 4px;
    padding-bottom: 0;
  }
}

/* Pass 11: speaking mascot and Telegram-like voice bars. */
.kv2-site .kv2-wave-guide {
  display: none !important;
}

.kv2-site .kv2-wave-main {
  fill: none;
  stroke: var(--kuzya-orange-strong);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.kv2-site .kv2-final .kv2-voice-mascot {
  object-fit: cover;
  object-position: center top;
}

@media (min-width: 1200px) {
  .kv2-site .kv2-final .kv2-voice-mascot {
    left: 42px;
    bottom: -116px;
    width: 330px;
    height: 370px;
  }
}

@media (min-width: 701px) and (max-width: 1199px) {
  .kv2-site .kv2-final .kv2-voice-mascot {
    bottom: -92px;
    width: 265px;
    height: 315px;
  }
}

@media (max-width: 700px) {
  .kv2-site .kv2-final .kv2-voice-mascot {
    top: 42px;
    right: -26px;
    width: 205px;
    height: 255px;
    object-position: center top;
  }
}
/* Pass 11.1: protect the face and keep a waist-up crop. */
@media (min-width: 1200px) {
  .kv2-site .kv2-final .kv2-voice-mascot {
    bottom: -162px;
  }

  .kv2-site .kv2-voice-waveform {
    left: 300px;
    width: 220px;
  }
}

@media (min-width: 701px) and (max-width: 1199px) {
  .kv2-site .kv2-final .kv2-voice-mascot {
    bottom: -128px;
  }

  .kv2-site .kv2-voice-waveform {
    left: 235px;
    width: 190px;
  }
}
/* Pass 11.2: exact waist crop from the designer composition. */
@media (min-width: 1200px) {
  .kv2-site .kv2-final .kv2-voice-mascot {
    left: 70px;
    bottom: -52px;
    width: 260px;
    height: 260px;
  }

  .kv2-site .kv2-voice-waveform {
    left: 310px;
    width: 175px;
  }
}