/* =========================================
   KanisaHub — custom overrides
   Loaded after new_assets/css/style.css
   ========================================= */

/* =========================================
   Font Awesome — collapse unused weights
   =========================================
   The markup only ever uses .fas (solid) and .fab (brands), but the theme
   leaks stray font-weights (100/300/400/500) onto icons and icon pseudo-
   elements, so the browser matched and downloaded the Light (185KB) and
   Regular (169KB) faces too — 354KB for a handful of glyphs.

   Re-pointing those two @font-face weights at the Solid file (which loads
   anyway, and in FA5 Free is a superset of Regular) means every icon
   resolves to one already-downloaded font. Declared here because this file
   loads after font-awesome.min.css, so these win on family+weight. Paths are
   relative to /public. Targeting the faces rather than the elements also
   catches ::before/::after icons, which no class selector could reach. */
@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(new_assets/fonts/fa-solid-900.woff2) format("woff2");
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(new_assets/fonts/fa-solid-900.woff2) format("woff2");
}

/* =========================================
   Preloader — fade out (see main-layout.blade.php)
   ========================================= */
#preloader {
    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}

#preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* =========================================
   Hero banner — dashboard preview & scroll fade
   ========================================= */
.kh-hero-area {
    position: relative;
    overflow: hidden;
}

.kh-hero-area.default-padding {
    padding-bottom: 0;
}

.kh-hero-content-scrub,
.kh-dash-scrub {
    will-change: transform, opacity;
}

/* Framed browser mockup. GSAP ScrollTrigger (see hero.blade.php script)
   pins this to the vertical center of the viewport once it gets there,
   using position: fixed under the hood — no positioning needed here. */
.kh-dash-scrub {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 80px auto 0;
    margin-bottom: -3rem;
}

/* The frame is a fixed 16/9 box, so its height is driven entirely by its
   width — at the full 1080px it stands ~640px tall, which is more than the
   usable viewport on a 1280x720 or 1366x768 laptop. GSAP then pins it at
   "center center" and the top and bottom get clipped off screen. Cap the
   width by the available viewport height as well, so the whole window
   mockup always fits. The 210px reserve covers the window chrome bar, the
   pinned zoom below, and clearance for the fixed navbar.
   Browsers without min()/calc() keep the 1080px above. */
.kh-dash-scrub {
    max-width: min(1080px, calc((100vh - 210px) * 16 / 9));
}

/* Zoom cue: makes it clear the hold is intentional, not the page hanging.
   Applied to .kh-dash-frame rather than .kh-dash-scrub, because GSAP's pin
   sets its own inline transform on .kh-dash-scrub (the pinned element),
   which would silently override a class-based transform placed there.
   The translateY re-centres the frame into the band *below* the fixed
   navbar: the pin centres it in the raw viewport, so without this the
   navbar sits over the top ~28px of the window chrome on short screens. */
.kh-dash-scrub.is-pinned .kh-dash-frame {
    transform: translateY(40px) scale(1.045);
}

/* Soft glow behind the frame */
.kh-dash-scrub::before {
    content: "";
    position: absolute;
    inset: -10% -8%;
    /* background: radial-gradient(ellipse at 50% 20%, rgba(5, 150, 105, 0.28) 0%, transparent 65%); */
    filter: blur(24px);
    pointer-events: none;
}

/* Gradient ring around the window */
.kh-dash-frame {
    position: relative;
    border-radius: 18px;
    padding: 1px;
    background: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(5, 150, 105, 0.45) 45%,
        rgba(255, 255, 255, 0.55) 100%
    );
    box-shadow:
        0 45px 90px -25px rgba(6, 95, 70, 0.35),
        0 18px 40px -18px rgba(15, 23, 42, 0.25);
    transition: transform 0.5s ease;
}

.kh-dash-frame__inner {
    border-radius: 17px;
    overflow: hidden;
    background: #ffffff;
}

/* Window top bar. height:auto is forced because GSAP's pin (see
   hero.blade.php) leaves this flex row's auto-height calculation stuck at
   the frame's full height instead of its own small content height — the
   !important is required, a plain override doesn't win against it. */
.kh-dash-frame__bar {
    display: flex;
    align-items: center;
    flex: none;
    padding: 12px 18px;
    background: #ffffff;
    border-bottom: 1px solid #eef1f4;
    position: relative;
    height: auto !important;
}

.kh-dash-frame__dots {
    display: flex;
    gap: 7px;
}

.kh-dash-frame__dots span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.kh-dash-frame__dots span:nth-child(1) {
    background: #ff5f57;
}
.kh-dash-frame__dots span:nth-child(2) {
    background: #febc2e;
}
.kh-dash-frame__dots span:nth-child(3) {
    background: #28c840;
}

.kh-dash-frame__url {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 100px;
    padding: 5px 18px;
    line-height: 1.4;
}

.kh-dash-frame__url i {
    font-size: 9px;
    color: #059669;
}

/* Screen area */
.kh-dash-frame__screen {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #f8fafc;
    overflow: hidden;
}

/* Real screenshot (once available) */
.kh-dash-frame__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* Sliding track that carries the rotating dashboard previews */
.kh-dash-track {
    display: flex;
    width: 300%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.kh-dash-slide {
    flex: 0 0 33.3333%;
    width: 33.3333%;
    height: 100%;
}

/* Loading bar that sweeps across the window chrome right before a preview
   swap, simulating the browser navigating to a new page */
.kh-dash-frame__loadbar {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 0;
    background: #059669;
    opacity: 0;
}

.kh-dash-frame__loadbar.is-active {
    animation: kh-loadbar-sweep 1.1s ease forwards;
}

@keyframes kh-loadbar-sweep {
    0% {
        width: 0;
        opacity: 1;
    }
    45% {
        width: 100%;
        opacity: 1;
    }
    70% {
        width: 100%;
        opacity: 1;
    }
    100% {
        width: 100%;
        opacity: 0;
    }
}

/* Bottom fade into the next section */
.kh-hero-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 180px;
    background: linear-gradient(
        to bottom,
        rgba(248, 249, 250, 0) 80%,
        #f8f9fa68 20%
    );
    pointer-events: none;
    z-index: 2;
}

/* Short laptop screens (1280x720, 1366x768 …). Paired with min-width so it
   never catches phones in portrait, which are narrow but also short. The
   theme's 120px hero padding and 80px display heading push the frame most of
   a screen down on these, so tighten the copy block above it too. */
@media (min-width: 992px) and (max-height: 820px) {
    .kh-hero-area.default-padding {
        padding-top: 70px;
    }

    .kh-hero-area .banner-one-content h2 {
        font-size: 54px;
        margin-bottom: 20px;
    }

    .kh-hero-area .banner-one-content .button.mt-30 {
        margin-top: 18px;
    }

    .kh-dash-scrub {
        margin-top: 40px;
    }
}

@media (max-width: 768px) {
    .kh-dash-frame__url {
        display: none;
    }

    .kh-dash-ph__side {
        min-width: 84px;
        padding: 14px 12px;
    }

    .kh-dash-ph__main {
        padding: 16px;
        gap: 12px;
    }

    .kh-dash-ph__cards {
        gap: 8px;
    }

    .kh-dash-ph__cards span {
        height: 40px;
    }

    .kh-hero-fade {
        height: 110px;
    }

    /* The two hero CTAs are inline-block with only the whitespace between
       the tags for a gap, so once they wrap to separate lines on narrow
       screens they touch edge-to-edge with no vertical spacing. */
    .kh-hero-area .banner-one-content .button {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }

    .kh-hero-area .banner-one-content .button .btn-style-one {
        display: block;
        width: 100%;
        max-width: 320px;
        text-align: center;
    }
}

/* =========================================
   Cursor tracker (dot + trailing ring + glow)
   ========================================= */
.kh-cursor__dot,
.kh-cursor__ring,
.kh-cursor__glow {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}

.kh-cursor__dot {
    width: 6px;
    height: 6px;
    background: #059669;
    z-index: 100002;
    transition: opacity 0.3s ease;
}

.kh-cursor__ring {
    width: 38px;
    height: 38px;
    border: 1.5px solid rgba(5, 150, 105, 0.55);
    background: rgba(5, 150, 105, 0);
    z-index: 100001;
    transition:
        opacity 0.3s ease,
        width 0.25s ease,
        height 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.kh-cursor__glow {
    width: 320px;
    height: 320px;
    background: radial-gradient(
        circle,
        rgba(16, 185, 129, 0.13) 0%,
        transparent 70%
    );
    mix-blend-mode: multiply;
    z-index: 100000;
    transition: opacity 0.5s ease;
}

/* Shown after first mouse move, hidden when leaving the window */
body.kh-cursor-on .kh-cursor__dot,
body.kh-cursor-on .kh-cursor__ring,
body.kh-cursor-on .kh-cursor__glow {
    opacity: 1;
}

/* Expand over links, buttons & inputs */
body.kh-cursor-hover .kh-cursor__ring {
    width: 60px;
    height: 60px;
    border-color: rgba(5, 150, 105, 0.3);
    background: rgba(5, 150, 105, 0.08);
}

/* Squeeze on click */
body.kh-cursor-down .kh-cursor__ring {
    width: 26px;
    height: 26px;
    border-color: rgba(5, 150, 105, 0.9);
}

@media (hover: none), (pointer: coarse) {
    .kh-cursor {
        display: none;
    }
}

/* =========================================
   Features page — quick-nav pills & checklist
   ========================================= */
.kh-quicklinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
}

.kh-quicklinks a {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    border-radius: 100px;
    background: #ffffff;
    border: 1px solid rgba(5, 150, 105, 0.25);
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.25s ease;
}

.kh-quicklinks a:hover {
    background: #059669;
    border-color: #059669;
    color: #ffffff;
    transform: translateY(-2px);
}

.kh-check-list {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.kh-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    line-height: 1.6;
}

.kh-check-list li i {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 4px;
    border-radius: 50%;
    background: rgba(5, 150, 105, 0.12);
    color: #059669;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.text-light .kh-check-list li i {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* =========================================
   Back to top button
   ========================================= */
.kh-back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #059669;
    color: #ffffff;
    font-size: 16px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        background 0.25s ease;
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.35);
}

.kh-back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.kh-back-to-top:hover {
    background: #047857;
    color: #ffffff;
}

@media (max-width: 767px) {
    .kh-back-to-top {
        right: 16px;
        bottom: 16px;
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

/* =========================================
   Announcement bar
   ========================================= */
:root {
    --kh-announcement-offset: 0px;
}

/* The theme's fixed nav defaults to top:0 (see validnavs.css); push it down
   below the announcement bar. Skipped once scrolled (.sticked) since the bar
   has already scrolled out of view by then. */
nav.navbar.validnavs.navbar-fixed.no-background:not(.sticked) {
    top: var(--kh-announcement-offset, 0px);
}

.kh-announcement-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 48px;
    background: #059669;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
}

.kh-announcement-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.kh-announcement-message {
    font-weight: 500;
}

.kh-announcement-cta {
    color: #ffffff;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

.kh-announcement-cta:hover {
    color: #d1fae5;
}

.kh-announcement-close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: #ffffff;
    opacity: 0.8;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.kh-announcement-close:hover {
    opacity: 1;
}

@media (max-width: 575px) {
    .kh-announcement-bar {
        padding: 10px 40px;
        font-size: 13px;
    }
}

/* =========================================
   Home — Why us
   ========================================= */
.kh-why-area {
    background: #ffffff;
}

.kh-why-info {
    position: sticky;
    top: 110px;
}

.kh-why-info .title {
    margin-bottom: 20px;
}

.kh-why-info p {
    margin-bottom: 30px;
}

.kh-why-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.kh-why-link {
    font-weight: 600;
    color: #111827;
    border-bottom: 1px solid rgba(5, 150, 105, 0.4);
    padding-bottom: 2px;
}

.kh-why-link:hover {
    color: #059669;
    border-color: #059669;
}

.kh-why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.kh-why-item {
    padding: 34px 30px;
    background: #f7f9f8;
    border: 1px solid rgba(5, 150, 105, 0.12);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.kh-why-item:hover {
    background: #ffffff;
    border-color: rgba(5, 150, 105, 0.35);
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.08);
    transform: translateY(-4px);
}

.kh-why-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(5, 150, 105, 0.12);
    color: #059669;
    font-size: 22px;
    margin-bottom: 22px;
    transition: all 0.3s ease;
}

.kh-why-item:hover .kh-why-icon {
    background: #059669;
    color: #ffffff;
}

.kh-why-eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #059669;
    margin-bottom: 8px;
}

.kh-why-item h4 {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 12px;
}

.kh-why-item p {
    margin: 0;
    font-size: 16px;
}

@media (max-width: 991px) {
    .kh-why-info {
        position: static;
    }
}

@media (max-width: 767px) {
    nav.navbar.validnavs.navbar-fixed.no-background:not(.sticked) {
        top: 0px;
    }
    .kh-why-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .kh-why-item {
        padding: 28px 24px;
    }
}

/* =========================================
   Comparisons — matrix, cards & verdict
   ========================================= */
.kh-compare-table-wrap {
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 12px;
    -webkit-overflow-scrolling: touch;
}

.kh-compare-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: collapse;
    margin: 0;
}

.kh-compare-table.is-duo {
    min-width: 620px;
}

.kh-compare-table th,
.kh-compare-table td {
    padding: 20px 18px;
    vertical-align: top;
    text-align: left;
    border-bottom: 1px solid rgba(17, 24, 39, 0.07);
}

.kh-compare-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f7f9f8;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
}

.kh-compare-table thead th a {
    color: inherit;
    border-bottom: 1px dotted rgba(5, 150, 105, 0.5);
}

.kh-compare-table thead th a:hover {
    color: #059669;
}

.kh-compare-table thead th.is-us,
.kh-compare-table tbody td.is-us {
    background: rgba(5, 150, 105, 0.06);
}

.kh-compare-table thead th.is-us {
    color: #047857;
}

.kh-compare-table tbody tr:last-child th,
.kh-compare-table tbody tr:last-child td {
    border-bottom: 0;
}

.kh-compare-table tbody th[scope="row"] {
    min-width: 240px;
    background: #ffffff;
    font-weight: 600;
}

.kh-compare-feature {
    display: block;
    font-size: 16px;
    color: #111827;
}

.kh-compare-feature-note {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #6b7280;
}

.kh-compare-cell {
    min-width: 170px;
}

.kh-compare-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 12px;
    margin-bottom: 8px;
}

.kh-compare-cell.is-yes .kh-compare-mark {
    background: rgba(5, 150, 105, 0.14);
    color: #047857;
}

.kh-compare-cell.is-partial .kh-compare-mark {
    background: rgba(217, 119, 6, 0.14);
    color: #b45309;
}

.kh-compare-cell.is-no .kh-compare-mark {
    background: rgba(17, 24, 39, 0.08);
    color: #6b7280;
}

.kh-compare-note {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    color: #4b5563;
}

.kh-compare-disclaimer {
    margin: 25px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: #6b7280;
}

.kh-compare-disclaimer a {
    color: #059669;
    font-weight: 600;
}

.kh-compare-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.kh-compare-card {
    display: flex;
    flex-direction: column;
    padding: 34px 30px;
    background: #ffffff;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.kh-compare-card:hover {
    border-color: rgba(5, 150, 105, 0.35);
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.08);
    transform: translateY(-4px);
}

.kh-compare-card-tag {
    display: inline-block;
    align-self: flex-start;
    padding: 5px 14px;
    border-radius: 100px;
    background: rgba(5, 150, 105, 0.1);
    color: #047857;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.kh-compare-card h3 {
    font-size: 21px;
    line-height: 1.4;
    margin-bottom: 14px;
}

.kh-compare-card h3 a {
    color: #111827;
}

.kh-compare-card h3 a:hover {
    color: #059669;
}

.kh-compare-card p {
    font-size: 15px;
    margin-bottom: 20px;
}

.kh-compare-card-meta {
    margin: 0 0 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.kh-compare-card-meta dt {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #059669;
}

.kh-compare-card-meta dd {
    margin: 4px 0 14px;
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563;
}

.kh-compare-card-meta dd:last-child {
    margin-bottom: 0;
}

.kh-compare-card .btn-simple {
    margin-top: auto;
}

.kh-compare-panel {
    height: 100%;
    padding: 40px 35px;
    background: #f7f9f8;
    border: 1px solid rgba(17, 24, 39, 0.07);
    border-radius: 12px;
}

.kh-compare-panel h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.kh-compare-panel .kh-check-list {
    margin-top: 20px;
}

.kh-check-list.is-gaps li i {
    background: rgba(217, 119, 6, 0.14);
    color: #b45309;
}

.kh-verdict-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.kh-verdict-card {
    padding: 40px 35px;
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: 12px;
    background: #ffffff;
}

.kh-verdict-card.is-us {
    border-color: rgba(5, 150, 105, 0.35);
    background: rgba(5, 150, 105, 0.05);
}

.kh-verdict-tag {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #059669;
    margin-bottom: 12px;
}

.kh-verdict-card p {
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 0;
}

.kh-verdict-card .btn {
    margin-top: 25px;
}

@media (max-width: 1199px) {
    .kh-compare-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .kh-compare-cards,
    .kh-verdict-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .kh-compare-card,
    .kh-compare-panel,
    .kh-verdict-card {
        padding: 28px 24px;
    }

    .kh-compare-table th,
    .kh-compare-table td {
        padding: 16px 14px;
    }
}

/* =========================================
   Home — Testimonial wall
   =========================================
   Three columns of quotes creeping past a masked window at different speeds,
   each column duplicated once so the loop is seamless. The track holds two
   equal groups separated by the same gap the cards use, so shifting it by
   half its height plus half a gap lands the clone exactly where the original
   started. Collapses to a horizontal swipe row on phones (columns and groups
   go display: contents, so the cards become direct children of the wall). */
.kh-testi-area {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Faint green wash behind the wall so the section reads apart from the plain
   white "Why us" block directly above it. */
.kh-testi-area::before {
    content: "";
    position: absolute;
    top: 20%;
    left: 50%;
    width: 900px;
    height: 900px;
    max-width: 120vw;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(5, 150, 105, 0.07) 0%, rgba(5, 150, 105, 0) 62%);
    pointer-events: none;
}

.kh-testi-area .container {
    position: relative;
    z-index: 1;
}

.kh-testi-head .title {
    margin-bottom: 0;
}

.kh-testi-scoreboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid rgba(5, 150, 105, 0.18);
    border-radius: 12px;
    background: #f7f9f8;
    overflow: hidden;
}

.kh-testi-stat {
    padding: 22px 18px;
    text-align: center;
}

.kh-testi-stat + .kh-testi-stat {
    border-left: 1px solid rgba(5, 150, 105, 0.15);
}

.kh-testi-stat strong {
    display: block;
    font-size: 26px;
    line-height: 1.2;
    color: #059669;
    margin-bottom: 4px;
}

.kh-testi-stat span {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    color: #6b7280;
}

.kh-testi-wall {
    --kh-testi-gap: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--kh-testi-gap);
    height: 640px;
    margin-top: 50px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 11%, #000 89%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 11%, #000 89%, transparent 100%);
}

.kh-testi-col {
    overflow: hidden;
}

.kh-testi-track {
    display: flex;
    flex-direction: column;
    gap: var(--kh-testi-gap);
    animation: kh-testi-marquee var(--kh-testi-speed, 50s) linear infinite;
    will-change: transform;
}

/* Middle column drifts the other way, so the wall never reads as one slab. */
.kh-testi-col:nth-child(2) .kh-testi-track {
    animation-direction: reverse;
}

.kh-testi-wall:hover .kh-testi-track,
.kh-testi-wall:focus-within .kh-testi-track {
    animation-play-state: paused;
}

.kh-testi-group {
    display: flex;
    flex-direction: column;
    gap: var(--kh-testi-gap);
}

@keyframes kh-testi-marquee {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(calc(-50% - (var(--kh-testi-gap) / 2)));
    }
}

.kh-testi-card {
    margin: 0;
    padding: 30px 28px;
    background: #ffffff;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 20px;
    box-shadow: 0 4px 18px rgba(17, 24, 39, 0.04);
    transition: all 0.3s ease;
}

.kh-testi-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.09);
}

.kh-testi-card.is-featured {
    background: var(--color-primary);
    color: #ffffff;
}

.kh-testi-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.kh-testi-rating {
    display: inline-flex;
    gap: 3px;
    font-size: 13px;
    color: #f59e0b;
}

.kh-testi-card.is-featured .kh-testi-rating {
    color: #fcd34d;
}

.kh-testi-mark {
    font-size: 22px;
    color: rgba(5, 150, 105, 0.2);
}

.kh-testi-card.is-featured .kh-testi-mark {
    color: rgba(255, 255, 255, 0.35);
}

.kh-testi-card blockquote {
    margin: 0 0 24px;
    padding: 0;
    border: 0;
    font-size: 16px;
    line-height: 1.75;
    color: #4b5563;
}

.kh-testi-card.is-featured blockquote {
    color: rgba(255, 255, 255, 0.94);
    font-size: 17px;
}

.kh-testi-person {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid rgba(17, 24, 39, 0.07);
}

.kh-testi-card.is-featured .kh-testi-person {
    border-top-color: rgba(255, 255, 255, 0.22);
}

.kh-testi-avatar {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(5, 150, 105, 0.12);
    color: #059669;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.kh-testi-card.is-featured .kh-testi-avatar {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.kh-testi-meta {
    display: block;
    min-width: 0;
}

.kh-testi-meta strong {
    display: block;
    font-size: 16px;
    line-height: 1.3;
    color: #111827;
}

.kh-testi-meta small {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    color: #6b7280;
    margin-top: 3px;
}

.kh-testi-card.is-featured .kh-testi-meta strong {
    color: #ffffff;
}

.kh-testi-card.is-featured .kh-testi-meta small {
    color: rgba(255, 255, 255, 0.75);
}

.kh-testi-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin-top: 45px;
    text-align: center;
}

.kh-testi-foot p {
    margin: 0;
    font-size: 17px;
    color: #4b5563;
}

@media (max-width: 991px) {
    .kh-testi-wall {
        grid-template-columns: repeat(2, 1fr);
        height: 560px;
    }

    /* Two columns only, so the third column's cards would never be seen. */
    .kh-testi-col:nth-child(3) {
        display: none;
    }
}

@media (max-width: 767px) {
    .kh-testi-scoreboard {
        grid-template-columns: repeat(3, 1fr);
    }

    .kh-testi-stat {
        padding: 18px 10px;
    }

    .kh-testi-stat strong {
        font-size: 21px;
    }

    .kh-testi-stat span {
        font-size: 12px;
    }

    /* Swipe row instead of a marquee: flattening the column/track/group wrappers
       makes every original card a direct flex child of the wall. */
    .kh-testi-wall {
        display: flex;
        height: auto;
        margin-top: 35px;
        padding-bottom: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .kh-testi-col,
    .kh-testi-track,
    .kh-testi-group {
        display: contents;
    }

    .kh-testi-col:nth-child(3) {
        display: contents;
    }

    .kh-testi-group.is-clone {
        display: none;
    }

    .kh-testi-track {
        animation: none;
    }

    .kh-testi-card {
        flex: 0 0 84%;
        scroll-snap-align: center;
        padding: 26px 24px;
    }

    .kh-testi-foot {
        gap: 18px;
    }

    .kh-testi-foot p {
        font-size: 16px;
    }
}

/* No marquee means the fixed-height window would hide most of the wall, so let
   the columns size to their content and drop the duplicate group. */
@media (prefers-reduced-motion: reduce) {
    .kh-testi-track {
        animation: none;
    }

    .kh-testi-wall {
        height: auto;
        align-items: start;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .kh-testi-group.is-clone {
        display: none;
    }
}