/* Social Kiln lower-homepage trust and retention pass. */

/* These older blocks repeat claims already established in the hero and new trust sections. */
.sk-home-flow .socialkiln-feature-section,
.sk-home-flow .socialkiln-usecases {
    display: none !important;
}

/* Kick joins the hero platform row without requiring an additional external icon dependency. */
.sk-home-flow .sk-platform-badge-kick {
    background: #071108;
    border-color: rgba(83, 252, 24, .28);
}

.sk-home-flow .sk-kick-mark {
    color: #53fc18;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 21px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.08em;
}

/* Main reassurance story immediately after How It Works. */
.sk-home-flow > .sk-order-rest-section {
    padding: 34px 0 88px !important;
    background: #090b0f;
}

.sk-order-rest-shell {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 4.5vw, 58px);
    border: 1px solid rgba(143, 109, 255, .22);
    border-radius: 24px;
    background:
        radial-gradient(circle at 15% 55%, rgba(108, 78, 235, .15), transparent 34%),
        linear-gradient(135deg, rgba(18, 22, 31, .98), rgba(10, 13, 19, .98));
    box-shadow: 0 28px 80px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255,255,255,.025);
}

.sk-order-rest-shell::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    right: -130px;
    top: -120px;
    border-radius: 50%;
    background: rgba(122, 86, 255, .10);
    filter: blur(65px);
    pointer-events: none;
}

.sk-order-rest-visual {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 390px;
}

.sk-order-rest-visual img {
    display: block;
    width: min(100%, 650px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 24px 44px rgba(0, 0, 0, .32));
}

.sk-order-rest-copy {
    position: relative;
    z-index: 2;
    max-width: 580px;
}

.sk-order-rest-copy h2 {
    margin: 0 0 18px;
    color: #f7f8fb !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: clamp(38px, 4.5vw, 56px) !important;
    font-weight: 700;
    letter-spacing: -.055em;
    line-height: .98;
    text-transform: none !important;
}

.sk-order-rest-copy h2 span {
    display: block;
    color: #9274ff;
}

.sk-order-rest-copy > p {
    max-width: 550px;
    margin: 0;
    color: #9ca5b5 !important;
    font-size: 16px;
    line-height: 1.75;
}

.sk-order-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;
    background: rgba(7, 9, 14, .58);
}

.sk-order-status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #a8b0bd;
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}

.sk-order-status-dot {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(143,109,255,.25);
    border-radius: 50%;
    background: rgba(143,109,255,.12);
    color: #aa94ff;
    font-size: 10px;
}

.sk-order-status-item.is-complete .sk-order-status-dot {
    background: rgba(49, 198, 118, .14);
    border-color: rgba(49, 198, 118, .3);
    color: #5fe29b;
}

.sk-order-status-item.is-processing .sk-order-status-dot::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9c80ff;
    box-shadow: 0 0 12px rgba(156,128,255,.72);
    animation: skOrderPulse 2s ease-in-out infinite;
}

.sk-order-status-arrow {
    color: #596273;
    font-size: 13px;
}

.sk-order-rest-micro {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: #747f90;
    font-size: 12px;
    font-weight: 600;
}

.sk-order-rest-micro i {
    color: #9072ff;
}

@keyframes skOrderPulse {
    0%, 100% { opacity: .45; transform: scale(.78); }
    50% { opacity: 1; transform: scale(1); }
}

/* Replace the verbose About block with a concise reason-to-believe section. */
.sk-home-flow > .socialkiln-why-section {
    padding: 76px 0 80px !important;
    background: linear-gradient(180deg, rgba(13,16,22,.18), rgba(13,16,22,.58), rgba(13,16,22,.16));
}

.sk-why-heading {
    max-width: 720px;
    margin: 0 auto 28px;
}

.sk-why-heading .socialkiln-section-label {
    justify-content: center;
}

.sk-why-heading h2 {
    margin: 0 0 10px;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: clamp(31px, 4vw, 44px) !important;
    letter-spacing: -.045em;
    text-transform: none !important;
}

.sk-why-heading > p {
    margin: 0;
    color: #929cac !important;
    font-size: 15px;
}

.sk-why-card {
    height: 100%;
    display: flex;
    gap: 15px;
    padding: 22px 20px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(18,22,30,.88), rgba(11,14,19,.94));
    transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.sk-why-card:hover {
    transform: translateY(-4px);
    border-color: rgba(143,109,255,.28);
    background: linear-gradient(145deg, rgba(21,25,35,.96), rgba(13,16,22,.98));
}

.sk-why-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(143,109,255,.22);
    border-radius: 12px;
    background: rgba(143,109,255,.10);
    color: #a78fff;
    font-size: 17px;
}

.sk-why-card h3 {
    margin: 1px 0 6px;
    color: #f1f3f8 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 17px !important;
    font-weight: 650;
    letter-spacing: -.02em;
    text-transform: none !important;
}

.sk-why-card p {
    margin: 0;
    color: #858f9f !important;
    font-size: 12px;
    line-height: 1.65;
}

/* FAQ earns its own heading now, then a compact real-world trust row. */
.sk-home-flow .faq-section .header-text h3 {
    font-family: 'Space Grotesk', sans-serif;
}

.sk-home-flow > .sk-home-credibility {
    padding: 12px 0 54px !important;
    background: #090b0f;
}

.sk-home-credibility-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(143,109,255,.19);
    border-radius: 17px;
    background: linear-gradient(120deg, rgba(17,21,29,.9), rgba(11,14,20,.92));
    box-shadow: 0 18px 50px rgba(0,0,0,.17);
}

.sk-credibility-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 74px;
    padding: 14px 18px;
}

.sk-credibility-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 22%;
    width: 1px;
    height: 56%;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.10), transparent);
}

.sk-credibility-icon {
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(143,109,255,.20);
    border-radius: 10px;
    background: rgba(143,109,255,.09);
    color: #a68eff;
    font-size: 14px;
}

.sk-credibility-icon.sk-maple {
    font-size: 19px;
    background: rgba(255,255,255,.035);
}

.sk-credibility-item strong,
.sk-credibility-item small {
    display: block;
}

.sk-credibility-item strong {
    color: #eff1f6;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 650;
}

.sk-credibility-item small {
    margin-top: 3px;
    color: #778191;
    font-size: 9px;
}

.sk-home-flow .sk-cta-secondary-link {
    display: block;
    margin-top: 12px;
    color: #9b8ad9;
    font-size: 12px;
    font-weight: 600;
}

.sk-home-flow .sk-cta-secondary-link:hover {
    color: #c1b2ff;
}

@media (max-width: 991px) {
    .sk-order-rest-visual {
        min-height: 0;
    }

    .sk-order-rest-visual img {
        width: min(100%, 590px);
    }

    .sk-order-rest-copy {
        max-width: none;
    }

    .sk-home-credibility-row {
        grid-template-columns: 1fr;
    }

    .sk-credibility-item {
        justify-content: flex-start;
    }

    .sk-credibility-item:not(:last-child)::after {
        top: auto;
        bottom: 0;
        left: 18px;
        right: 18px;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    }
}

@media (max-width: 767px) {
    .sk-home-flow > .sk-order-rest-section {
        padding: 24px 0 60px !important;
    }

    .sk-order-rest-shell {
        padding: 25px 20px 30px;
        border-radius: 19px;
    }

    .sk-order-rest-copy h2 {
        font-size: 38px !important;
    }

    .sk-order-status-row {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .sk-order-status-arrow {
        padding-left: 11px;
        transform: rotate(90deg);
        transform-origin: left center;
    }

    .sk-order-status-item {
        white-space: normal;
    }

    .sk-home-flow > .socialkiln-why-section {
        padding: 60px 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sk-order-status-item.is-processing .sk-order-status-dot::after {
        animation: none !important;
    }
}