/* ==========================================================================
   DEMO FRAME
   The laptop the live demo sits in, and the band around it. Shared by both
   demos (Claritick and Sendbat), which is why it is its own file: it used
   to live in the Claritick stylesheet, so a Sendbat load drew no frame.
   The device markup and styles are Claritick's.
   ========================================================================== */
.clk-hiw-step-card {


    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 48px;
    align-items: center;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.clk-hiw-step--reverse .clk-hiw-step-card {


    direction: rtl;
}

.clk-hiw-step--reverse .clk-hiw-step-visual,
.clk-hiw-step--reverse .clk-hiw-step-copy {


    direction: ltr;
}

.clk-hiw-step-visual {


    min-width: 0;
}

.clk-hiw-step-shot {


    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    text-align: left;
}

.clk-hiw-step-shot-frame {


    display: block;
    width: 100%;
}

.clk-hiw-step-device {


    display: flex;
    flex-direction: column;
    padding: 10px 10px 8px;
    border-radius: 14px;
    background: linear-gradient(180deg, #2b2b2e 0%, #1d1d1f 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 16px 40px rgba(15, 23, 42, 0.14);
}

.clk-hiw-step-device-bar {


    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    padding: 0 2px;
}

.clk-hiw-step-device-bar i {


    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.clk-hiw-step-device-bar i:nth-child(1) {

    background: #ff5f57;
}

.clk-hiw-step-device-bar i:nth-child(2) {

    background: #febc2e;
}

.clk-hiw-step-device-bar i:nth-child(3) {

    background: #28c840;
}

.clk-hiw-step-device-url {


    flex: 1;
    min-width: 0;
    margin-left: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.28);
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clk-hiw-step-device-screen {


    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: 4px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.clk-hiw-step-device-screen:not(.clk-ct-flow-device-screen):not(.clk-demo-device-screen) img {


    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}

.clk-hiw-step-device-screen img[src*="claritick_received_request"],
.clk-hiw-step-device-screen img[src*="claritick_new_ticket_email"] {


    object-position: left center;
}

.clk-hiw-step-device-screen:has(img[src*="claritick_received_request"]),
.clk-hiw-step-device-screen:has(img[src*="claritick_new_ticket_email"]),
.clk-hiw-step-device-screen:has(img[src*="claritask_integration"]),
.clk-hiw-step-device-screen:has(img[src*="claritick_screenshot_embedded"]),
.clk-hiw-step-device-screen:has(img[src*="converted_image"]) {


    background: #f5f5f5;
}

.clk-hiw-step-device-screen img[src*="claritick_received_request"],
.clk-hiw-step-device-screen img[src*="claritick_new_ticket_email"] {


    object-fit: contain;
    object-position: left center;
}

.clk-hiw-step-device-screen:not(.clk-ct-flow-device-screen):not(.clk-demo-device-screen) img[src*="claritick_screenshot_embedded"],
.clk-hiw-step-device-screen:not(.clk-ct-flow-device-screen):not(.clk-demo-device-screen) img[src*="converted_image"],
.clk-hiw-step-device-screen:not(.clk-ct-flow-device-screen):not(.clk-demo-device-screen) img[src*="claritask_integration"] {


    object-fit: cover;
    object-position: top center;
}

.clk-hiw-step-device-screen:not(.clk-ct-flow-device-screen):not(.clk-demo-device-screen) img[src*="claritick_task_creation_hd"] {


    object-fit: cover;
    object-position: right center;
}

.clk-hiw-step-device-stand {


    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    background: transparent;
}

.clk-hiw-step-shot-frame:has(.clk-hiw-step-device-stand) .clk-hiw-step-device {


    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 1px 2px rgba(0, 0, 0, 0.06);
}

@media (max-width: 1023px) {
.clk-hiw-step-device-stand {


        display: none;
}
}

.clk-hiw-step-device-neck {


    display: block;
    width: 56px;
    height: 14px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(180deg, #3a3a3c 0%, #2b2b2e 100%);
}

.clk-hiw-step-device-base {


    display: block;
    width: 34%;
    min-width: 96px;
    max-width: 140px;
    height: 6px;
    margin-top: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, #3a3a3c 0%, #2b2b2e 100%);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.clk-hiw-step-shot-zoom {


    position: absolute;
    inset: auto 10px 10px auto;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.clk-hiw-step-shot:hover .clk-hiw-step-shot-zoom,
.clk-hiw-step-shot:focus-visible .clk-hiw-step-shot-zoom {


    opacity: 1;
    transform: translateY(0);
}

.clk-hiw-step-shot:hover .clk-hiw-step-device {


    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.08),
        0 20px 48px rgba(15, 23, 42, 0.18);
}

.clk-hiw-step-shot:hover .clk-hiw-step-shot-frame:has(.clk-hiw-step-device-stand) .clk-hiw-step-device {


    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.08);
}

.clk-hiw-step-shot:focus-visible {


    outline: none;
}

.clk-hiw-step-shot:focus-visible .clk-hiw-step-device {


    outline: 2px solid var(--clk-blue);
    outline-offset: 4px;
}

.clk-hiw-step-copy {


    min-width: 0;
}

.clk-hiw-step-num {


    display: block;
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: #86868b;
    letter-spacing: 0;
}

.clk-hiw-step-copy h3 {


    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    line-height: 1.15;
    color: var(--clk-ink);
}

.clk-hiw-step-detail {


    font-size: 17px;
    line-height: 1.55;
    color: var(--clk-body);
    margin: 0;
}

.clk-hiw-step-points {


    list-style: none;
    margin: 0;
    padding: 20px 0 0;
}

.clk-hiw-step-points li {


    position: relative;
    padding-left: 16px;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 10px;
    color: #424245;
}

.clk-hiw-step-points li::before {


    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #86868b;
}

.clk-hiw-step-points li:last-child {


    margin-bottom: 0;
}

.clk-hiw-step--optional {


    padding-bottom: 0;
}

.clk-hiw-step--optional .clk-hiw-step-card {


    position: relative;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.clk-hiw-step--optional .clk-hiw-step-card:hover {


    transform: none;
}

.clk-hiw-step-optional-tag {


    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #86868b;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.clk-hiw-step-optional-label {


    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #86868b;
}

@media (max-width: 767px) {
.clk-demo-wrap .clk-mockup--full .clk-mockup-body {


        height: 680px;
        min-height: 680px;
        max-height: 680px;
}
.clk-demo-wrap .clk-mockup--full .clk-mockup-main {


        padding-top: 48px;
        box-sizing: border-box;
}
.clk-hiw-step-card {


        padding: 20px 18px;
}
}

@media (max-width: 575px) {
.clk-demo-wrap {


        margin-left: -4px;
        margin-right: -4px;
}
.clk-demo-wrap .clk-mockup--full .clk-mockup-body {


        height: 660px;
        min-height: 660px;
        max-height: 660px;
}
.clk-demo-wrap .clk-mockup--full .clk-mockup-main {


        padding-top: 44px;
}
}

.clk-demo-wrap {


    max-width: 1180px;
    margin: 0 auto;
}

@media (max-width: 1023px) {
.clk-hiw-step-card {


        grid-template-columns: 1fr;
        gap: 24px;
        padding: 0;
}
.clk-hiw-step--reverse .clk-hiw-step-card {


        direction: ltr;
}
}

.clk-ct-flow-visual .clk-hiw-step-shot-frame {

    display: block;
    width: 100%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.clk-demo-device-screen {

    aspect-ratio: auto;
    overflow: hidden;
    background: #fff;
}

@media (min-width: 1100px) {
.clk-demo-wrap .clk-mockup--app .clk-mk-ticket-table {
        min-width: 0;
}
}

.clk-demo-wrap .clk-mockup--app .clk-mockup-app-content .clk-mockup-main {
    padding-top: 12px !important;
    min-height: 0 !important;
    max-height: none !important;
}

.clk-demo-wrap .clk-mockup--app .clk-mk-tickets,
.clk-demo-wrap .clk-mockup--app .clk-mk-dashboard,
.clk-demo-wrap .clk-mockup--app .clk-mk-detail,
.clk-demo-wrap .clk-mockup--app .clk-mk-page {
    padding: 0;
}

.clk-demo-wrap .clk-mockup--app .clk-mockup-app-frame {
    min-height: clamp(680px, 80vh, 900px);
    max-height: clamp(680px, 80vh, 900px);
    height: clamp(680px, 80vh, 900px);
}

.clk-demo-wrap {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.clk-section-demo .clk-demo-wrap {
    max-width: none;
}

.clk-demo-device-screen .clk-mockup--app .clk-mockup-app-shell {
    border: none;
    box-shadow: none;
    background: #fff;
}

/* ==========================================================================
   SECTION WRAPPER (ours, not claritick's)
   The band the demo sits in on the Kore home page. Named kore-demo, not
   clk-demo: claritick uses that class for a pricing banner, and the two
   were colliding.
   ========================================================================== */
.kore-demo {
  margin: clamp(34px, 4vw, 58px) 0 clamp(6px, 1vw, 14px);
}

/* Full container width, so the laptop lines up with the logo on one side and
   the Get started button on the other. The frame is claritick's; it only
   needs the room. */
.kore-demo .clk-demo-wrap {
  max-width: none;
  margin-inline: 0;
}

/* Drawn at container width and then scaled back, rather than laid out small:
   the app inside is a real interface at a real desktop width, and narrowing
   the box would collapse its columns instead of shrinking it.

   A transform does not shrink the box it is on, so the frame still occupies
   its full height and leaves the difference as dead space underneath.
   --demo-scale is the number measured back off, kept here so it lives in one
   place. */
.kore-demo {
  /* Declared on the section rather than the frame: the arrows above the frame
     need the same number, and a custom property inherits down either way. */
  --demo-scale: 0.8;
}
.kore-demo .clk-hiw-step-shot-frame {
  transform: scale(var(--demo-scale));
  transform-origin: top center;
}

/* The demo switcher, above the frame.

   Outside the laptop rather than inside its browser bar: sitting on the dark
   chrome they read as part of the fake browser, and the one thing they are not
   is a control belonging to the product being demonstrated.

   Right-aligned, because the hero copy above is centred and a second centred
   element competed with it. Sitting at the frame's top corner also says which
   thing they act on without a label. */
.kore-demo__nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  /* The frame is drawn at full width and scaled from its top centre, so its
     visible right edge sits half the shrinkage inside the box. The arrows are
     not scaled, so they take the same inset or they float out past the laptop
     with nothing under them. */
  margin: 0 calc((100% - 100% * var(--demo-scale)) / 2) 12px 0;
}
.kore-demo__arrow {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  box-shadow: var(--sh-1);
  cursor: pointer;
  transition:
    background var(--t) var(--ease),
    color var(--t) var(--ease),
    border-color var(--t) var(--ease),
    transform var(--t) var(--ease);
}
.kore-demo__arrow:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  transform: translateY(-2px);
}
.kore-demo__arrow:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.kore-demo__arrow:active {
  transform: none;
}

@media (max-width: 700px) {
  .kore-demo__nav {
    justify-content: center;
    margin-bottom: 10px;
  }
  .kore-demo__arrow {
    width: 34px;
    height: 34px;
  }
}

/* Both demos are mounted; only the chosen one is shown. Kept in the flow with
   visibility rather than display:none so neither reflows on the swap, and
   inert so the hidden one is out of reach of tab and screen readers. */
.kore-demo__pane {
  display: none;
}
/* One class rather than a selector per demo. PHP stamps it on whichever pane
   is chosen for the load, and adding another product needs nothing here. */
.kore-demo__pane.is-on {
  display: block;
}

/* Below the laptop breakpoint the frame is already as small as it reads, so
   the scale comes off and the height goes back to matching the box. */
@media (max-width: 900px) {
  .kore-demo {
    --demo-scale: 1;
  }
  .kore-demo .clk-hiw-step-shot-frame {
    transform: none;
  }
}