.aifs-showcase,
.aifs-showcase * {
    box-sizing: border-box;
}

.aifs-showcase {
    --aifs-shell: #efefed;
    --aifs-white: #fff;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: clamp(66px, 8vw, 112px) 10px clamp(54px, 6vw, 86px);
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.88) 0 1px, transparent 1.2px) 0 0 / 13px 13px,
        radial-gradient(circle at 78% 72%, rgba(209,209,204,.55) 0 1px, transparent 1.3px) 0 0 / 17px 17px,
        var(--aifs-shell);
    font-family: inherit;
}

.aifs-showcase__intro {
    width: min(760px, calc(100% - 32px));
    margin: 0 auto clamp(34px, 4vw, 54px);
    text-align: center;
}

.aifs-showcase__intro h2 {
    margin: 0;
    color: #111815;
    font: inherit;
    font-size: clamp(34px, 4.2vw, 62px);
    font-weight: 500;
    letter-spacing: -.052em;
    line-height: .99;
    text-wrap: balance;
}

.aifs-showcase__intro p {
    max-width: 650px;
    margin: 18px auto 0;
    color: rgba(17, 24, 21, .55);
    font-size: clamp(14px, 1.35vw, 18px);
    font-weight: 400;
    letter-spacing: -.018em;
    line-height: 1.55;
    text-wrap: balance;
}

.aifs-carousel {
    --aifs-per-view: 3;
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.aifs-showcase__viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    outline: none;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.aifs-showcase__viewport::-webkit-scrollbar {
    display: none;
}

.aifs-showcase__viewport:focus-visible {
    border-radius: 10px;
    box-shadow: 0 0 0 3px rgba(18, 98, 65, .18);
}

.aifs-showcase__track {
    display: flex;
    align-items: stretch;
    gap: 16px;
    width: 100%;
}

.aifs-card {
    position: relative;
    isolation: isolate;
    flex: 0 0 calc((100% - 32px) / 3);
    min-width: 0;
    height: clamp(390px, 32vw, 440px);
    min-height: 390px;
    max-height: 440px;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,.93);
    border-radius: 7px;
    box-shadow:
        0 1px 2px rgba(16, 20, 18, .12),
        0 4px 11px rgba(16, 20, 18, .06),
        inset 0 0 0 1px rgba(255,255,255,.08);
    transform: translateZ(0);
    scroll-snap-align: start;
}

.aifs-card::before,
.aifs-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.aifs-card::before {
    z-index: -2;
}

.aifs-card::after {
    z-index: 2;
    opacity: .18;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E");
}

.aifs-card--insights::before {
    background:
        radial-gradient(ellipse 72% 45% at 18% 8%, rgba(0, 121, 66, .72), transparent 68%),
        radial-gradient(ellipse 60% 54% at 92% 100%, rgba(0, 113, 63, .78), transparent 66%),
        radial-gradient(ellipse 58% 48% at 8% 73%, rgba(0, 80, 43, .8), transparent 72%),
        linear-gradient(116deg, #06452b 0%, #072f21 48%, #071a13 100%);
}

.aifs-card--response::before {
    background:
        radial-gradient(circle at 50% 13%, rgba(18, 63, 146, .78), transparent 31%),
        radial-gradient(ellipse 70% 50% at 8% 70%, rgba(0, 92, 88, .72), transparent 68%),
        radial-gradient(ellipse 60% 42% at 96% 77%, rgba(12, 80, 63, .68), transparent 72%),
        linear-gradient(120deg, #073f43 0%, #0a2f4b 49%, #0a251f 100%);
}

.aifs-card--metrics::before {
    background:
        radial-gradient(ellipse 65% 30% at 50% 49%, rgba(91, 119, 159, .32), transparent 68%),
        radial-gradient(ellipse 50% 44% at 76% 30%, rgba(39, 61, 91, .38), transparent 72%),
        linear-gradient(180deg, #17233a 0%, #18263d 50%, #091224 84%, #080d1b 100%);
}

.aifs-card__surface {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.aifs-card__copy {
    position: absolute;
    z-index: 3;
    left: 22px;
    right: 20px;
    bottom: 21px;
}

.aifs-card__icon {
    display: block;
    width: 19px;
    height: 19px;
    margin-bottom: 8px;
    color: rgba(255,255,255,.96);
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.aifs-card__copy h3 {
    margin: 0;
    color: rgba(255,255,255,.82);
    font: inherit;
    font-size: clamp(16px, 1.72vw, 20px);
    font-weight: 400;
    letter-spacing: -.025em;
    line-height: 1.18;
}

.aifs-card__copy p {
    margin: 6px 0 0;
    color: rgba(255,255,255,.32);
    font-size: clamp(11px, 1.12vw, 13px);
    font-weight: 400;
    letter-spacing: -.012em;
    line-height: 1.35;
}

/* Card one */
.aifs-insight-widget {
    position: absolute;
    top: 94px;
    left: 50%;
    width: 176px;
    transform: translateX(-50%);
}

.aifs-date-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
    width: 176px;
    height: 33px;
    padding: 3px 4px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.21);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(203,218,209,.46), rgba(157,181,169,.36));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.aifs-day {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    outline: 0;
    background: transparent;
    color: rgba(255,255,255,.72);
    font: inherit;
    font-size: 10px;
    cursor: pointer;
    transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.aifs-day:hover {
    color: #fff;
}

.aifs-day.is-active {
    color: #0e1712;
    background: rgba(255,255,255,.97);
    box-shadow: 0 2px 6px rgba(0,0,0,.17);
    transform: scale(1.02);
}

.aifs-insight-panel {
    width: 176px;
    height: 141px;
    margin-top: 8px;
    overflow: hidden;
    color: #121614;
    border-radius: 6px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 6px 18px rgba(0,0,0,.16);
}

.aifs-insight-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 39px;
    padding: 0 11px;
    border-bottom: 1px solid #eaedeb;
}

.aifs-insight-panel__head strong {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -.025em;
}

.aifs-panel-arrows {
    display: flex;
    gap: 2px;
}

.aifs-panel-arrows button {
    display: grid;
    place-items: center;
    width: 20px;
    height: 18px;
    padding: 0;
    color: #8e9791;
    border: 1px solid #e2e6e3;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}

.aifs-panel-arrows svg {
    width: 10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.aifs-insight-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 13px 11px;
    list-style: none;
}

.aifs-insight-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #8d9590;
    font-size: 9.5px;
    line-height: 1;
    white-space: nowrap;
}

.aifs-insight-list li svg {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    fill: #0e9a55;
    stroke: #0e9a55;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.aifs-insight-list li b {
    color: #5e6862;
    font-weight: 500;
}

/* Card two */
.aifs-draft-wrap {
    position: absolute;
    top: 94px;
    left: 50%;
    width: 316px;
    height: 183px;
    transform: translateX(-50%);
}

.aifs-draft-card {
    position: absolute;
    top: 0;
    left: 70px;
    width: 177px;
    height: 183px;
    overflow: hidden;
    color: #111714;
    border-radius: 6px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

.aifs-draft-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding: 0 11px;
    border-bottom: 1px solid #eaedeb;
}

.aifs-draft-card__head strong {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -.035em;
}

.aifs-draft-card__head button {
    display: grid;
    place-items: center;
    width: 21px;
    height: 18px;
    padding: 0;
    color: #8a938e;
    border: 1px solid #dfe4e1;
    border-radius: 4px;
    background: #fff;
}

.aifs-draft-card__head svg {
    width: 11px;
    fill: currentColor;
}

.aifs-draft-card__body {
    padding: 13px 11px;
}

.aifs-draft-card__body p {
    margin: 0 0 12px;
    color: #777f7a;
    font-size: 9.2px;
    letter-spacing: -.024em;
    line-height: 1.12;
}

.aifs-draft-card__body .aifs-draft-greeting {
    margin-bottom: 12px;
    color: #9ca29f;
}

.aifs-draft-card__body strong {
    color: #3d4641;
    font-weight: 600;
    background: linear-gradient(transparent 58%, rgba(117, 177, 209, .32) 58%);
}

.aifs-draft-card__body span {
    color: #a2a7a4;
}

.aifs-context-chip,
.aifs-insights-chip {
    position: absolute;
    z-index: 2;
    top: 70px;
    display: grid;
    place-items: center;
    height: 23px;
    padding: 0 10px;
    color: rgba(255,255,255,.9);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(141,166,169,.54), rgba(68,103,112,.43));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 10px;
    line-height: 1;
}

.aifs-context-chip { left: 2px; }
.aifs-insights-chip { right: 0; top: 122px; }

.aifs-context-line,
.aifs-insights-line {
    position: absolute;
    z-index: 1;
    height: 1px;
    background: rgba(224,239,240,.68);
    box-shadow: 0 0 8px rgba(164,226,230,.32);
}

.aifs-context-line {
    top: 81px;
    left: 55px;
    width: 40px;
}

.aifs-insights-line {
    top: 133px;
    right: 50px;
    width: 33px;
}

/* Card three */
.aifs-metric-stack {
    position: absolute;
    top: 89px;
    left: 50%;
    width: 176px;
    transform: translateX(-50%);
    perspective: 700px;
}

.aifs-metric {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 176px;
    height: 60px;
    padding: 10px 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(2,9,20,.16), inset 0 1px 0 rgba(255,255,255,.12);
    transition: transform .35s cubic-bezier(.2,.75,.2,1), opacity .35s ease;
}

.aifs-metric + .aifs-metric {
    margin-top: 11px;
}

.aifs-metric svg {
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.aifs-metric > div {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
}

.aifs-metric span {
    align-self: flex-start;
    margin-top: 20px;
    font-size: 9px;
    white-space: nowrap;
}

.aifs-metric strong {
    margin-left: auto;
    font-size: 29px;
    font-weight: 400;
    letter-spacing: -.04em;
    line-height: 1;
}

.aifs-metric--primary {
    z-index: 3;
    color: #101a22;
    background: rgba(255,255,255,.97);
}

.aifs-metric--primary span {
    color: #171e22;
}

.aifs-metric--primary strong {
    color: #174e92;
}

.aifs-metric--secondary {
    z-index: 2;
    color: rgba(255,255,255,.78);
    background: linear-gradient(180deg, rgba(153,167,185,.54), rgba(108,125,145,.44));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.aifs-metric--secondary span { color: rgba(255,255,255,.65); }
.aifs-metric--secondary strong { color: rgba(255,255,255,.48); }

.aifs-metric--tertiary {
    z-index: 1;
    opacity: .33;
    color: rgba(255,255,255,.62);
    background: linear-gradient(180deg, rgba(100,121,151,.45), rgba(60,77,105,.23));
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
}

.aifs-metric--tertiary span { color: rgba(255,255,255,.36); }
.aifs-metric--tertiary strong { color: rgba(255,255,255,.25); }

.aifs-card--metrics:hover .aifs-metric--primary {
    transform: translateY(-3px);
}

.aifs-card--metrics:hover .aifs-metric--secondary {
    transform: translateY(-1px);
}

.aifs-card--metrics:hover .aifs-metric--tertiary {
    transform: translateY(2px);
    opacity: .42;
}

@media (max-width: 920px) {
    .aifs-showcase {
        padding-inline: 12px;
    }

    .aifs-carousel {
        --aifs-per-view: 2;
    }

    .aifs-showcase__track {
        gap: 12px;
    }

    .aifs-card {
        flex-basis: calc((100% - 12px) / 2);
        height: 426px;
        min-height: 426px;
        scroll-snap-align: start;
    }

    .aifs-card__copy h3 {
        font-size: 19px;
    }

    .aifs-card__copy p {
        font-size: 12px;
    }
}

@media (max-width: 640px) {
    .aifs-showcase {
        padding: 58px 8px 48px;
    }

    .aifs-showcase__intro {
        width: min(100% - 28px, 580px);
        margin-bottom: 30px;
    }

    .aifs-showcase__intro h2 {
        font-size: clamp(31px, 9.2vw, 42px);
        line-height: 1.02;
    }

    .aifs-showcase__intro p {
        margin-top: 14px;
        font-size: 14px;
        line-height: 1.5;
    }

    .aifs-carousel {
        --aifs-per-view: 1;
    }

    .aifs-showcase__track {
        gap: 9px;
    }

    .aifs-card {
        flex-basis: 100%;
        height: 420px;
        min-height: 420px;
        border-width: 2px;
    }

    .aifs-card__copy {
        left: 21px;
        bottom: 20px;
    }

    .aifs-draft-wrap {
        transform: translateX(-50%) scale(.96);
        transform-origin: top center;
    }

    .aifs-carousel__controls {
        margin-top: 18px;
    }

    .aifs-carousel__arrow {
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aifs-showcase *,
    .aifs-showcase *::before,
    .aifs-showcase *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Image-background feature cards */
.aifs-card--image::before {
    background: #09131a;
}

.aifs-card--image .aifs-card__surface {
    overflow: hidden;
}

.aifs-card__background-image {
    position: absolute;
    inset: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    object-fit: cover;
    object-position: center;
    transform: scale(1.012);
    transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease;
}

.aifs-card__image-shade {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(3,8,12,.03) 0%, rgba(3,8,12,.06) 42%, rgba(3,8,12,.72) 78%, rgba(3,8,12,.94) 100%),
        linear-gradient(90deg, rgba(3,8,12,.18), transparent 58%);
}

.aifs-card--image .aifs-card__copy {
    text-shadow: 0 1px 18px rgba(0,0,0,.3);
}

.aifs-card--image .aifs-card__copy h3 {
    color: rgba(255,255,255,.94);
}

.aifs-card--image .aifs-card__copy p {
    color: rgba(255,255,255,.52);
}

.aifs-card--image:hover .aifs-card__background-image {
    transform: scale(1.055);
    filter: saturate(1.04) contrast(1.02);
}

.aifs-card--workflow .aifs-card__background-image {
    object-position: 50% 48%;
}

.aifs-card--security .aifs-card__background-image {
    object-position: 50% 45%;
}

.aifs-card--global .aifs-card__background-image {
    object-position: 50% 48%;
}

.aifs-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 22px;
}

.aifs-carousel__arrow {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: #18211d;
    border: 1px solid rgba(18, 26, 22, .1);
    border-radius: 50%;
    background: rgba(255,255,255,.82);
    box-shadow: 0 5px 18px rgba(18, 26, 22, .08), inset 0 1px 0 rgba(255,255,255,.9);
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .2s ease, background .2s ease, opacity .2s ease, box-shadow .2s ease;
}

.aifs-carousel__arrow:hover:not(:disabled) {
    transform: translateY(-1px);
    background: #fff;
    box-shadow: 0 8px 22px rgba(18, 26, 22, .12), inset 0 1px 0 rgba(255,255,255,.95);
}

.aifs-carousel__arrow:focus-visible,
.aifs-carousel__dot:focus-visible {
    outline: 2px solid rgba(13, 103, 64, .7);
    outline-offset: 3px;
}

.aifs-carousel__arrow:disabled {
    opacity: .32;
    cursor: default;
}

.aifs-carousel__arrow svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.aifs-carousel__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 38px;
}

.aifs-carousel__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(17, 24, 21, .2);
    cursor: pointer;
    transition: width .25s ease, background .25s ease, transform .25s ease;
}

.aifs-carousel__dot:hover {
    transform: scale(1.15);
    background: rgba(17, 24, 21, .42);
}

.aifs-carousel__dot.is-active {
    width: 22px;
    background: #1b2b23;
}


@media (max-width: 640px) {
    .aifs-carousel__arrow {
        width: 40px;
        height: 40px;
    }
}