/* Social proof pieces (templates/partials/shared/_proof.html), shared by the
   sign-up page, the loading screen, the onboarding connect step and the
   pricing modal. Quiet on purpose: hairlines, one accent (the stars), no glow. */

.proof-stars { display: inline-flex; gap: 1px; flex: none; }
.proof-star { width: 13px; height: 13px; fill: #f5a524; }
/* Empty and half stars: grey, the half one with a gold star clipped to its
   left half (no SVG gradient ids: the badge renders twice on the sign-up page,
   and a hidden copy's id left the visible half star blank). */
.proof-star-empty .proof-star,
.proof-star-half .proof-star { fill: color-mix(in srgb, var(--font-gray, #667085) 30%, transparent); }
.proof-star-empty { display: inline-flex; }
.proof-star-half { position: relative; display: inline-flex; }
.proof-star-half > span { position: absolute; inset: 0 auto 0 0; width: 50%; overflow: hidden; display: inline-flex; }
.proof-star-half > span .proof-star { fill: #f5a524; }

/* ---- Trustpilot badge ---- */
.proof-trust {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--font-black);
    text-decoration: none;
}
.proof-trust:hover .proof-trust-text { text-decoration: underline; }
.proof-trust-text strong { font-weight: 500; }
.proof-trust-logo { width: 16px; height: 16px; border-radius: 50%; }

/* ---- Review card ---- */
.proof-review {
    margin: 0;
    padding: 16px 18px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface);
    text-align: left;
}
.proof-review-head { display: flex; align-items: center; gap: 10px; }
.proof-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent, #d6245f) 14%, transparent);
    color: var(--accent-ink, var(--accent, #d6245f));
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.proof-review-who { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.proof-review-name { font-size: 13px; font-weight: 500; color: var(--font-black); }
.proof-review-source { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--font-gray); }
.proof-review-source img { width: 12px; height: 12px; border-radius: 50%; }
.proof-review-quote {
    margin: 12px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--font-black);
}

/* ---- Rotator: 2 to 4 cards stacked on one spot, each visible 6s, fading
   0.5s in and out. One keyframe set per count (percentages of the cycle).
   Grid stacking makes the box as tall as the tallest card, so nothing jumps. */
.proof-rotator { display: grid; }
.proof-rotator-item {
    grid-area: 1 / 1;
    opacity: 0;
    animation: proof-cycle-4 24s linear infinite both;
    animation-delay: calc(var(--proof-i, 0) * 6s);
}
.proof-rotator-n3 .proof-rotator-item { animation-name: proof-cycle-3c; animation-duration: 18s; }
.proof-rotator-n2 .proof-rotator-item { animation-name: proof-cycle-2; animation-duration: 12s; }
/* A second rotator beside the first changes 3s later, so both never switch at once. */
.proof-rotator-late .proof-rotator-item { animation-delay: calc(var(--proof-i, 0) * 6s - 3s); }
@keyframes proof-cycle-4 {
    0%   { opacity: 0; transform: translateY(6px); }
    2%   { opacity: 1; transform: none; }
    23%  { opacity: 1; transform: none; }
    25%  { opacity: 0; transform: translateY(-6px); }
    100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes proof-cycle-3c {
    0%      { opacity: 0; transform: translateY(6px); }
    2.78%   { opacity: 1; transform: none; }
    30.56%  { opacity: 1; transform: none; }
    33.33%  { opacity: 0; transform: translateY(-6px); }
    100%    { opacity: 0; transform: translateY(-6px); }
}
@keyframes proof-cycle-2 {
    0%      { opacity: 0; transform: translateY(6px); }
    4.17%   { opacity: 1; transform: none; }
    45.83%  { opacity: 1; transform: none; }
    50%     { opacity: 0; transform: translateY(-6px); }
    100%    { opacity: 0; transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
    .proof-rotator-item { animation: none; }
    .proof-rotator-item:first-child { opacity: 1; }
}

/* ---- Stats ---- */
.proof-stats { display: flex; gap: 28px; margin: 0; }
.proof-stats > div { display: flex; flex-direction: column; gap: 2px; }
.proof-stats dt { font-size: 20px; font-weight: 600; color: var(--font-black); letter-spacing: -0.01em; }
.proof-stats dd { margin: 0; font-size: 12px; color: var(--font-gray); }

/* ================= Sign-up / login page ================= */
/* Desktop: the form keeps its column, the proof panel sits beside it.
   Phone: one compact line under the form (badge + accounts). */
.auth-proof-panel { display: none; }
.auth-proof-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    font-size: 12px;
    color: var(--font-gray);
    text-align: center;
}
@media (min-width: 1000px) {
    #content-div.has-proof {
        flex-direction: row;
        align-items: center;
        gap: 64px;
        max-width: 1040px;
    }
    #content-div.has-proof #content-right { flex: 0 0 420px; }
    .auth-proof-panel {
        display: flex;
        flex-direction: column;
        gap: 22px;
        flex: 1 1 0;
        min-width: 0;
        max-width: 480px;
    }
    .auth-proof-compact { display: none; }
}
.auth-proof-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 500;
    color: var(--font-black);
    letter-spacing: -0.01em;
}
.auth-proof-panel .proof-review { padding: 20px 22px; box-shadow: 0 10px 30px rgba(18, 24, 38, 0.06); }
.auth-proof-panel .proof-review-quote { font-size: 15px; }
.auth-proof-official { margin: 0; font-size: 12px; color: var(--font-gray); }

/* ================= Loading screen ================= */
/* One line under the bar, one figure at a time (3 figures, 2.4s each). */
#loading-proof {
    display: grid;
    margin: 26px 0 0;
    position: relative;
    z-index: 2;
    justify-items: center;
    font-size: 12.5px;
    color: color-mix(in srgb, var(--font-black) 62%, transparent);
    white-space: nowrap;
}
#loading-proof > span {
    grid-area: 1 / 1;
    opacity: 0;
    animation: proof-cycle-3 7.2s linear infinite both;
    animation-delay: calc(var(--proof-i, 0) * 2.4s);
}
#loading-proof strong { font-weight: 600; color: var(--font-black); }
@keyframes proof-cycle-3 {
    0%   { opacity: 0; }
    4%   { opacity: 1; }
    30%  { opacity: 1; }
    33.3%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    #loading-proof > span { animation: none; }
    #loading-proof > span:first-child { opacity: 1; }
}

/* ================= Onboarding, connect step ================= */
/* Shown under the connect grid on the profiles step only: the mount carries
   data-step (renderMainOnboardingStep). */
.onboarding-proof { display: none; }
.onboarding-main-mount[data-step="profiles"] + .onboarding-proof {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 4px 0 8px;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
}
.onboarding-proof-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    color: var(--font-gray);
}
.onboarding-proof-line svg { flex: none; width: 16px; height: 16px; color: #12b76a; }
.onboarding-proof-line strong { font-weight: 500; color: var(--font-black); }

/* ================= Pricing modal ================= */
/* Same column as the plans table and the footnotes (subscriptions.css). */
.pricing-proof {
    display: flex;
    flex-direction: column;
    flex: none;
    gap: 14px;
    width: min(1160px, calc(100% - 8px));
    box-sizing: border-box;
    padding: 4px 0;
    /* The table's 200px air (subscriptions.css) moves below the proof: the
       rating belongs to the plans, the band after it is another kind of offer. */
    margin-bottom: 120px;
}
.plans-wrapper:has(+ .pricing-proof) { margin-bottom: 0; }
.pricing-proof-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}
.pricing-proof-cancel { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--font-gray); }
.pricing-proof-cancel svg { width: 15px; height: 15px; color: #12b76a; }
.pricing-proof-reviews { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) {
    .pricing-proof-reviews { grid-template-columns: 1fr; }
}

/* ================= Checkout window ================= */
/* One line under Stripe's form (our #mydrop-checkout-modal, always light). */
#mydrop-checkout-modal:has(> .checkout-proof) { display: flex; flex-direction: column; }
#mydrop-checkout-modal:has(> .checkout-proof) #mydrop-checkout-frame { flex: 1 1 auto; min-height: 0; height: auto; }
.checkout-proof[hidden] { display: none; }
.checkout-proof {
    position: relative;
    z-index: 2;
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 22px;
    padding: 12px 20px;
    border-top: 1px solid rgba(16, 24, 40, 0.08);
    background: #ffffff;
    font-size: 12.5px;
    color: #475467;
}
.checkout-proof strong { font-weight: 600; color: #101828; }
.checkout-proof .proof-trust { color: #101828; }
.checkout-proof .pricing-proof-cancel { color: #475467; }