/**
 * Service card proof visuals — AI & Automation category only (Services page).
 * Uses existing design tokens; scoped to .service-card--has-proof.
 */

.service-card--has-proof .service-card__proof {
    width: 100%;
    height: 5.25rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
    background: linear-gradient(165deg, var(--color-surface-3) 0%, var(--color-surface-2) 100%);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(234, 241, 248, 0.04);
}

.service-card--has-proof .service-proof__frame {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ── Shared focal glow ── */
.service-proof__glow-target {
    position: relative;
    z-index: 1;
    isolation: isolate;
}

.service-proof__glow-target::before {
    content: "";
    position: absolute;
    inset: -0.45rem -0.55rem;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(57, 198, 244, 0.28) 0%,
        rgba(46, 107, 255, 0.12) 42%,
        transparent 72%
    );
    filter: blur(6px);
    opacity: 0.85;
    pointer-events: none;
}

.service-proof--healthcare .service-proof__glow-target::before {
    background: radial-gradient(
        circle at 50% 50%,
        rgba(198, 183, 143, 0.32) 0%,
        rgba(183, 160, 106, 0.14) 45%,
        transparent 72%
    );
}

/* ── WhatsApp chat ── */
.service-proof--chat .service-proof-chat__header {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.55rem;
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border-subtle);
}

.service-proof--chat .service-proof-chat__header span {
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--color-text-muted);
    opacity: 0.55;
}

.service-proof--chat .service-proof-chat__header-dot {
    background: var(--color-accent-primary-edge);
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(57, 198, 244, 0.2);
}

.service-proof--chat .service-proof-chat__header em {
    margin-left: auto;
    font-style: normal;
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
}

.service-proof--chat .service-proof-chat__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.28rem;
    padding: 0.42rem 0.6rem 0.48rem;
}

.service-proof--chat .service-proof-chat__bubble {
    max-width: 88%;
    padding: 0.32rem 0.5rem;
    border-radius: var(--radius-md);
    font-size: 0.625rem;
    line-height: 1.35;
    color: var(--color-text-secondary);
    box-shadow: inset 0 1px 0 rgba(234, 241, 248, 0.05);
}

.service-proof--chat .service-proof-chat__bubble--in {
    align-self: flex-start;
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text-secondary);
}

.service-proof--chat .service-proof-chat__bubble--out {
    align-self: flex-end;
    background: rgba(46, 107, 255, 0.18);
    border: 1px solid rgba(46, 107, 255, 0.32);
    color: var(--color-text-primary);
}

.service-proof--chat .service-proof-chat__bubble--muted {
    opacity: 0.82;
    font-size: 0.5625rem;
}

.service-proof-chat__reply {
    align-self: flex-end;
    position: relative;
    width: 88%;
    min-height: 1.38rem;
}

.service-proof-chat__typing,
.service-proof-chat__bubble--booked {
    position: absolute;
    right: 0;
    top: 0;
    max-width: 100%;
}

.service-proof-chat__typing {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    padding: 0.32rem 0.5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-1);
    box-shadow: inset 0 1px 0 rgba(234, 241, 248, 0.05);
    animation: proof-chat-typing 5.5s var(--ease-standard, ease-in-out) infinite;
}

.service-proof-chat__typing span {
    width: 0.22rem;
    height: 0.22rem;
    border-radius: 50%;
    background: var(--color-text-muted);
    animation: proof-typing-dot 1.4s ease-in-out infinite;
}

.service-proof-chat__typing span:nth-child(2) {
    animation-delay: 0.16s;
}

.service-proof-chat__typing span:nth-child(3) {
    animation-delay: 0.32s;
}

.service-proof-chat__bubble--booked {
    animation: proof-chat-booked 5.5s var(--ease-standard, ease-in-out) infinite;
}

/* ── AI agent flow ── */
.service-proof--flow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.48rem 0.7rem;
}

.service-proof-flow {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 100%;
}

.service-proof-flow__node {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
    min-width: 3.25rem;
    padding: 0.38rem 0.35rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-1);
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(234, 241, 248, 0.05);
}

.service-proof-flow__node span {
    font-size: 0.5625rem;
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.2;
}

.service-proof-flow__node small {
    font-size: 0.5rem;
    color: var(--color-text-muted);
    line-height: 1.2;
}

.service-proof-flow__node--accent {
    border-color: rgba(57, 198, 244, 0.35);
    background: rgba(46, 107, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(234, 241, 248, 0.06),
        0 0 14px rgba(46, 107, 255, 0.12);
}

.service-proof-flow__node--accent span {
    color: var(--color-accent-primary-edge);
}

.service-proof-flow__line {
    flex: 1 1 auto;
    height: 2px;
    min-width: 0.5rem;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--color-border-subtle),
        rgba(57, 198, 244, 0.35),
        var(--color-border-subtle)
    );
    position: relative;
    overflow: visible;
}

.service-proof-flow__line::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 0.25rem;
    height: 0.25rem;
    border-top: 1px solid rgba(57, 198, 244, 0.55);
    border-right: 1px solid rgba(57, 198, 244, 0.55);
    transform: translateY(-50%) rotate(45deg);
}

.service-proof-flow__line--pulse::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--color-accent-primary-edge);
    box-shadow: 0 0 8px rgba(57, 198, 244, 0.55);
    transform: translate(-30%, -50%);
    animation: proof-line-travel 3.4s ease-in-out infinite;
}

.service-proof-flow__line--accent.service-proof-flow__line--pulse::before {
    animation-delay: 1.7s;
}

.service-proof-flow__line--accent {
    background: linear-gradient(
        90deg,
        rgba(57, 198, 244, 0.35),
        var(--color-accent-primary-edge),
        rgba(46, 107, 255, 0.55)
    );
}

.service-proof-flow__line--accent::after {
    border-top-color: var(--color-accent-primary-edge);
    border-right-color: var(--color-accent-primary-edge);
}

/* ── AI automation: tools → automated ── */
.service-proof--merge {
    display: flex;
    align-items: center;
    padding: 0.48rem 0.65rem;
}

.service-proof-merge {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
}

.service-proof-merge__tools {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.24rem;
    min-width: 0;
}

.service-proof-merge__tool {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.22rem 0.42rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-1);
    font-size: 0.5625rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(234, 241, 248, 0.04);
}

.service-proof-merge__tool i {
    font-size: 0.5625rem;
    color: var(--color-text-muted);
}

.service-proof-merge__arrow {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--color-border-default),
        rgba(57, 198, 244, 0.45)
    );
    position: relative;
    overflow: visible;
}

.service-proof-merge__arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 0.28rem;
    height: 0.28rem;
    border-top: 1px solid rgba(57, 198, 244, 0.65);
    border-right: 1px solid rgba(57, 198, 244, 0.65);
    transform: translateY(-50%) rotate(45deg);
}

.service-proof-merge__arrow-dot {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 50%;
    background: var(--color-accent-primary-edge);
    box-shadow: 0 0 8px rgba(57, 198, 244, 0.55);
    transform: translate(-50%, -50%);
    animation: proof-merge-dot 2.8s ease-in-out infinite;
}

.service-proof-merge__result {
    flex: 0 0 auto;
    display: grid;
    gap: 0.14rem;
    width: 5.1rem;
    padding: 0.42rem 0.48rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-1);
    box-shadow: inset 0 1px 0 rgba(234, 241, 248, 0.05);
}

.service-proof-merge__result small {
    font-size: 0.5rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    letter-spacing: 0.02em;
}

.service-proof-merge__result strong {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.25;
}

.service-proof-merge__badge {
    justify-self: start;
    margin-top: 0.05rem;
    padding: 0.14rem 0.34rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(46, 107, 255, 0.35);
    background: rgba(46, 107, 255, 0.14);
    font-size: 0.5rem;
    font-weight: 500;
    color: var(--color-accent-primary-edge);
}

/* ── Healthcare reminder ── */
.service-proof--healthcare {
    display: flex;
    align-items: center;
    padding: 0.48rem 0.68rem;
}

.service-proof-health__card {
    width: 100%;
    display: grid;
    gap: 0.22rem;
    padding: 0.48rem 0.58rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-1);
    box-shadow: inset 0 1px 0 rgba(234, 241, 248, 0.05);
}

.service-proof-health__card small {
    font-size: 0.5625rem;
    font-weight: 500;
    color: var(--color-accent-primary-edge);
    letter-spacing: 0.02em;
}

.service-proof-health__card strong {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.3;
}

.service-proof-health__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.1rem;
}

.service-proof-health__meta > span:first-child {
    font-size: 0.5625rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.service-proof-health__status {
    flex: 0 0 auto;
    padding: 0.16rem 0.36rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(183, 160, 106, 0.28);
    background: rgba(183, 160, 106, 0.1);
    font-size: 0.5rem;
    font-weight: 500;
    color: var(--color-accent-luxury-soft);
    animation: proof-status-pulse 2.6s ease-in-out infinite;
}

/* ── Custom web: code editor ── */
.service-proof--code .service-proof-code__header {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.38rem 0.55rem;
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border-subtle);
}

.service-proof--code .service-proof-code__header span {
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 50%;
    background: var(--color-text-muted);
    opacity: 0.45;
}

.service-proof--code .service-proof-code__header span:nth-child(1) {
    background: rgba(255, 107, 107, 0.75);
    opacity: 1;
}

.service-proof--code .service-proof-code__header span:nth-child(2) {
    background: rgba(255, 193, 79, 0.75);
    opacity: 1;
}

.service-proof--code .service-proof-code__header span:nth-child(3) {
    background: rgba(87, 201, 133, 0.75);
    opacity: 1;
}

.service-proof--code .service-proof-code__header em {
    margin-left: auto;
    font-style: normal;
    font-size: 0.5625rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.service-proof--code .service-proof-code__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.12rem;
    padding: 0.38rem 0.55rem 0.42rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.5rem;
    line-height: 1.35;
}

.service-proof--code .service-proof-code__line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-secondary);
}

.service-proof--code .service-proof-code__line--active {
    position: relative;
    padding: 0.08rem 0.22rem;
    margin: 0 -0.22rem;
    border-radius: var(--radius-sm);
    background: rgba(46, 107, 255, 0.1);
    animation: proof-code-line 3.2s ease-in-out infinite;
}

.service-proof--code .tok-keyword {
    color: #c792ea;
}

.service-proof--code .tok-fn {
    color: #82aaff;
}

.service-proof--code .tok-string {
    color: #c3e88d;
}

.service-proof--code .tok-plain {
    color: var(--color-text-secondary);
}

.service-proof-code__cursor {
    display: inline-block;
    width: 0.12rem;
    height: 0.62rem;
    margin-left: 0.06rem;
    vertical-align: middle;
    border-radius: 1px;
    background: var(--color-accent-primary-edge);
    animation: proof-code-cursor 1.1s step-end infinite;
}

/* ── Mobile app: phone UI ── */
.service-proof--mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.42rem 0.65rem;
}

.service-proof-mobile {
    width: 100%;
    display: flex;
    justify-content: center;
}

.service-proof-mobile__device {
    width: 4.85rem;
    border-radius: 0.72rem;
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-1);
    box-shadow: inset 0 1px 0 rgba(234, 241, 248, 0.05);
    overflow: hidden;
}

.service-proof-mobile__notch {
    width: 1.35rem;
    height: 0.18rem;
    margin: 0.22rem auto 0;
    border-radius: 999px;
    background: var(--color-surface-2);
}

.service-proof-mobile__screen {
    padding: 0.28rem 0.38rem 0.42rem;
}

.service-proof-mobile__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.4375rem;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 0.22rem;
}

.service-proof-mobile__signal {
    width: 0.55rem;
    height: 0.28rem;
    border: 1px solid var(--color-text-muted);
    border-radius: 0.08rem;
    opacity: 0.55;
}

.service-proof-mobile__title {
    display: block;
    font-size: 0.5625rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 0.28rem;
}

.service-proof-mobile__cards {
    display: grid;
    gap: 0.22rem;
}

.service-proof-mobile__card {
    display: grid;
    gap: 0.06rem;
    padding: 0.24rem 0.32rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-2);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.service-proof-mobile__card small {
    font-size: 0.4375rem;
    color: var(--color-text-muted);
}

.service-proof-mobile__card span {
    font-size: 0.5rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.service-proof-mobile__card--active {
    border-color: rgba(57, 198, 244, 0.4);
    background: rgba(46, 107, 255, 0.12);
    animation: proof-mobile-tap 3.4s ease-in-out infinite;
}

.service-proof-mobile__card--active span {
    color: var(--color-accent-primary-edge);
}

.service-proof-mobile__card--idle {
    animation: proof-mobile-idle 3.4s ease-in-out infinite;
}

/* ── Tailor-made: dashboard fragment ── */
.service-proof--dashboard {
    display: flex;
    align-items: center;
    padding: 0.48rem 0.65rem;
}

.service-proof-dashboard {
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-1);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(234, 241, 248, 0.05);
}

.service-proof-dashboard__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.48rem;
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-surface-2);
}

.service-proof-dashboard__header span {
    font-size: 0.5625rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.service-proof-dashboard__header em {
    font-style: normal;
    font-size: 0.5rem;
    font-weight: 500;
    color: var(--color-accent-primary-edge);
}

.service-proof-dashboard__rows {
    display: grid;
}

.service-proof-dashboard__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.28rem 0.48rem;
    border-bottom: 1px solid var(--color-border-subtle);
}

.service-proof-dashboard__row:last-child {
    border-bottom: 0;
}

.service-proof-dashboard__row span {
    font-size: 0.5rem;
    color: var(--color-text-muted);
}

.service-proof-dashboard__row strong {
    font-size: 0.5625rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.service-proof-dashboard__row--muted strong {
    color: var(--color-text-muted);
    font-weight: 500;
}

.service-proof-dashboard__metric {
    animation: proof-dashboard-update 3s ease-in-out infinite;
}

/* ── Pre-built: foundation → branded ── */
.service-proof--prebuilt {
    display: flex;
    align-items: center;
    padding: 0.48rem 0.65rem;
}

.service-proof-prebuilt {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
}

.service-proof-prebuilt__base,
.service-proof-prebuilt__result {
    flex: 1 1 auto;
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    min-width: 0;
    padding: 0.38rem 0.32rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-1);
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(234, 241, 248, 0.04);
}

.service-proof-prebuilt__base {
    opacity: 0.72;
    animation: proof-prebuilt-base 3.6s ease-in-out infinite;
}

.service-proof-prebuilt__result {
    border-color: rgba(57, 198, 244, 0.35);
    background: rgba(46, 107, 255, 0.1);
    animation: proof-prebuilt-result 3.6s ease-in-out infinite;
}

.service-proof-prebuilt__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    font-size: 0.5625rem;
}

.service-proof-prebuilt__icon--brand {
    background: rgba(46, 107, 255, 0.18);
    color: var(--color-accent-primary-edge);
}

.service-proof-prebuilt__base small,
.service-proof-prebuilt__result small {
    font-size: 0.4375rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.service-proof-prebuilt__base strong,
.service-proof-prebuilt__result strong {
    font-size: 0.5625rem;
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.2;
}

.service-proof-prebuilt__result strong {
    color: var(--color-accent-primary-edge);
}

.service-proof-prebuilt__arrow {
    flex: 0 0 auto;
    width: 0.95rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--color-border-default),
        rgba(57, 198, 244, 0.45)
    );
    position: relative;
    overflow: visible;
}

.service-proof-prebuilt__arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 0.24rem;
    height: 0.24rem;
    border-top: 1px solid rgba(57, 198, 244, 0.65);
    border-right: 1px solid rgba(57, 198, 244, 0.65);
    transform: translateY(-50%) rotate(45deg);
}

.service-proof-prebuilt__arrow-dot {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0.24rem;
    height: 0.24rem;
    border-radius: 50%;
    background: var(--color-accent-primary-edge);
    box-shadow: 0 0 8px rgba(57, 198, 244, 0.55);
    transform: translate(-50%, -50%);
    animation: proof-prebuilt-dot 3.6s ease-in-out infinite;
}

/* ── Internal software: approval flow ── */
.service-proof--approval {
    display: flex;
    align-items: center;
    padding: 0.48rem 0.65rem;
}

.service-proof-approval {
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-1);
    padding: 0.42rem 0.48rem;
    box-shadow: inset 0 1px 0 rgba(234, 241, 248, 0.05);
}

.service-proof-approval__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.32rem;
}

.service-proof-approval__header span {
    font-size: 0.5625rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.service-proof-approval__header em {
    font-style: normal;
    font-size: 0.4375rem;
    color: var(--color-text-muted);
}

.service-proof-approval__steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 0.32rem;
}

.service-proof-approval__step {
    flex: 1 1 auto;
    display: grid;
    justify-items: center;
    gap: 0.12rem;
    min-width: 0;
}

.service-proof-approval__dot {
    width: 0.34rem;
    height: 0.34rem;
    border-radius: 50%;
    border: 1px solid var(--color-border-default);
    background: var(--color-surface-2);
}

.service-proof-approval__step--done .service-proof-approval__dot {
    border-color: rgba(57, 198, 244, 0.45);
    background: rgba(46, 107, 255, 0.18);
}

.service-proof-approval__step--active .service-proof-approval__dot {
    border-color: var(--color-accent-primary-edge);
    background: rgba(46, 107, 255, 0.28);
    box-shadow: 0 0 8px rgba(57, 198, 244, 0.35);
}

.service-proof-approval__step small {
    font-size: 0.4375rem;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.2;
}

.service-proof-approval__line {
    flex: 0 0 auto;
    width: 0.65rem;
    height: 2px;
    margin-top: 0.16rem;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgba(57, 198, 244, 0.35),
        var(--color-border-subtle)
    );
}

.service-proof-approval__status {
    position: relative;
    min-height: 1.05rem;
}

.service-proof-approval__badge {
    position: absolute;
    left: 0;
    top: 0;
    padding: 0.16rem 0.36rem;
    border-radius: var(--radius-sm);
    font-size: 0.5rem;
    font-weight: 500;
}

.service-proof-approval__badge--pending {
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    animation: proof-approval-pending 3.8s ease-in-out infinite;
}

.service-proof-approval__badge--approved {
    border: 1px solid rgba(46, 107, 255, 0.35);
    background: rgba(46, 107, 255, 0.14);
    color: var(--color-accent-primary-edge);
    animation: proof-approval-approved 3.8s ease-in-out infinite;
}

/* ── Animations ── */
@keyframes proof-merge-dot {
    0% {
        left: 0;
        opacity: 0.35;
    }

    50% {
        left: 100%;
        opacity: 1;
    }

    100% {
        left: 0;
        opacity: 0.35;
    }
}

@keyframes proof-status-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(198, 183, 143, 0.08);
    }

    50% {
        box-shadow: 0 0 10px 2px rgba(198, 183, 143, 0.28);
    }
}

@keyframes proof-typing-dot {
    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }

    30% {
        transform: translateY(-2px);
        opacity: 1;
    }
}

@keyframes proof-chat-typing {
    0%,
    38% {
        opacity: 1;
        visibility: visible;
    }

    48%,
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes proof-chat-booked {
    0%,
    38% {
        opacity: 0;
        visibility: hidden;
    }

    48%,
    88% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes proof-line-travel {
    0% {
        left: 0;
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes proof-code-cursor {
    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

@keyframes proof-code-line {
    0%,
    100% {
        background: rgba(46, 107, 255, 0.08);
    }

    50% {
        background: rgba(46, 107, 255, 0.16);
    }
}

@keyframes proof-mobile-tap {
    0%,
    35% {
        transform: scale(1);
        border-color: rgba(57, 198, 244, 0.25);
    }

    45%,
    70% {
        transform: scale(1.03);
        border-color: rgba(57, 198, 244, 0.5);
    }

    80%,
    100% {
        transform: scale(1);
        border-color: rgba(57, 198, 244, 0.25);
    }
}

@keyframes proof-mobile-idle {
    0%,
    35% {
        opacity: 1;
    }

    45%,
    70% {
        opacity: 0.55;
    }

    80%,
    100% {
        opacity: 1;
    }
}

@keyframes proof-dashboard-update {
    0%,
    40% {
        color: var(--color-text-primary);
        transform: scale(1);
    }

    50%,
    65% {
        color: var(--color-accent-primary-edge);
        transform: scale(1.08);
    }

    75%,
    100% {
        color: var(--color-text-primary);
        transform: scale(1);
    }
}

@keyframes proof-prebuilt-base {
    0%,
    100% {
        opacity: 0.85;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(0.97);
    }
}

@keyframes proof-prebuilt-result {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }
}

@keyframes proof-prebuilt-dot {
    0% {
        left: 0;
        opacity: 0.35;
    }

    50% {
        left: 100%;
        opacity: 1;
    }

    100% {
        left: 0;
        opacity: 0.35;
    }
}

@keyframes proof-approval-pending {
    0%,
    42% {
        opacity: 1;
        visibility: visible;
    }

    52%,
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes proof-approval-approved {
    0%,
    42% {
        opacity: 0;
        visibility: hidden;
    }

    52%,
    88% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* ── Clinic OS: schedule fragment ── */
.service-proof--clinic {
    display: flex;
    align-items: center;
    padding: 0.48rem 0.65rem;
}

.service-proof-clinic {
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-1);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(234, 241, 248, 0.05);
}

.service-proof-clinic__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.48rem;
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-surface-2);
}

.service-proof-clinic__header span {
    font-size: 0.5625rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.service-proof-clinic__header em {
    font-style: normal;
    font-size: 0.5rem;
    font-weight: 500;
    color: var(--color-accent-primary-edge);
}

.service-proof-clinic__list {
    display: grid;
}

.service-proof-clinic__slot {
    display: grid;
    grid-template-columns: 1.65rem 1fr auto;
    align-items: center;
    gap: 0.28rem;
    padding: 0.24rem 0.48rem;
    border-bottom: 1px solid var(--color-border-subtle);
}

.service-proof-clinic__slot:last-child {
    border-bottom: 0;
}

.service-proof-clinic__slot strong {
    font-size: 0.5rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.service-proof-clinic__slot > span {
    font-size: 0.5625rem;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.service-proof-clinic__slot > em {
    font-style: normal;
    font-size: 0.4375rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.service-proof-clinic__slot--new {
    background: rgba(46, 107, 255, 0.08);
    animation: proof-clinic-slot 3.5s ease-in-out infinite;
}

.service-proof-clinic__slot--new > span {
    color: var(--color-accent-primary-edge);
}

.service-proof-clinic__slot--new > em {
    color: var(--color-accent-primary-edge);
}

/* ── Analytics: shared chart shell ── */
.service-proof--analytics {
    display: flex;
    align-items: center;
    padding: 0.48rem 0.65rem;
}

.service-proof-analytics {
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-1);
    padding: 0.42rem 0.48rem 0.48rem;
    box-shadow: inset 0 1px 0 rgba(234, 241, 248, 0.05);
}

.service-proof-analytics__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.32rem;
}

.service-proof-analytics__header span {
    font-size: 0.5625rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.service-proof-analytics__label {
    font-size: 0.5rem;
    font-weight: 500;
    color: var(--color-accent-primary-edge);
}

.service-proof-analytics__bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.35rem;
    height: 2.35rem;
}

.service-proof-analytics__bar {
    flex: 1 1 auto;
    display: grid;
    justify-items: center;
    gap: 0.18rem;
    height: 100%;
    grid-template-rows: 1fr auto;
}

.service-proof-analytics__bar i {
    display: block;
    width: 100%;
    max-width: 1.35rem;
    height: var(--bar-h, 50%);
    align-self: end;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: linear-gradient(
        180deg,
        rgba(57, 198, 244, 0.55),
        rgba(46, 107, 255, 0.35)
    );
    transform-origin: bottom;
    animation: proof-bar-fill 3.2s ease-in-out infinite;
}

.service-proof-analytics__bar:nth-child(2) i {
    animation-delay: 0.2s;
}

.service-proof-analytics__bar:nth-child(3) i {
    animation-delay: 0.4s;
}

.service-proof-analytics__bar small {
    font-size: 0.4375rem;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.2;
}

.service-proof-analytics__chart {
    display: block;
    width: 100%;
    height: 2.35rem;
}

.service-proof-analytics__line {
    fill: none;
    stroke: var(--color-accent-primary-edge);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    animation: proof-line-draw 3.4s ease-in-out infinite;
}

.service-proof-analytics__line--accent {
    stroke: #82aaff;
}

.service-proof-analytics__area {
    fill: rgba(46, 107, 255, 0.14);
    stroke: none;
    transform-origin: bottom;
    animation: proof-area-fill 3.6s ease-in-out infinite;
}

.service-proof-analytics__dot {
    fill: var(--color-accent-primary-edge);
    opacity: 0;
    animation: proof-line-dot 3.4s ease-in-out infinite;
}

.service-proof-analytics__rows {
    display: grid;
    gap: 0.28rem;
}

.service-proof-analytics__row {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    align-items: center;
    gap: 0.35rem;
}

.service-proof-analytics__row small {
    font-size: 0.4375rem;
    color: var(--color-text-muted);
}

.service-proof-analytics__track {
    height: 0.38rem;
    border-radius: 999px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-subtle);
    overflow: hidden;
}

.service-proof-analytics__track i {
    display: block;
    height: 100%;
    width: var(--bar-w, 50%);
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        rgba(46, 107, 255, 0.45),
        rgba(57, 198, 244, 0.65)
    );
    animation: proof-email-bar 3.3s ease-in-out infinite;
}

.service-proof-analytics__row:nth-child(2) .service-proof-analytics__track i {
    animation-delay: 0.25s;
}

/* ── Social: platform breakdown bars ── */
.service-proof-analytics__platforms {
    display: grid;
    gap: 0.22rem;
}

.service-proof-analytics__platform {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    align-items: center;
    gap: 0.35rem;
}

.service-proof-analytics__platform small {
    font-size: 0.4375rem;
    color: var(--color-text-muted);
}

.service-proof-analytics__platform .service-proof-analytics__track i {
    animation: proof-platform-bar 3.5s ease-in-out infinite;
}

.service-proof-analytics__platform:nth-child(2) .service-proof-analytics__track i {
    animation-delay: 0.2s;
}

.service-proof-analytics__platform:nth-child(3) .service-proof-analytics__track i {
    animation-delay: 0.4s;
}

/* ── Industry-specific: sector tabs ── */
.service-proof--industry {
    display: flex;
    align-items: center;
    padding: 0.48rem 0.65rem;
}

.service-proof-industry {
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-1);
    padding: 0.42rem 0.48rem;
    box-shadow: inset 0 1px 0 rgba(234, 241, 248, 0.05);
}

.service-proof-industry__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.28rem;
}

.service-proof-industry__header span {
    font-size: 0.5625rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.service-proof-industry__header em {
    font-style: normal;
    font-size: 0.5rem;
    color: var(--color-accent-primary-edge);
}

.service-proof-industry__tabs {
    display: flex;
    gap: 0.22rem;
    margin-bottom: 0.28rem;
}

.service-proof-industry__tab {
    flex: 1 1 auto;
    padding: 0.18rem 0.28rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-2);
    font-size: 0.4375rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.2;
}

.service-proof-industry__tab--active {
    border-color: rgba(57, 198, 244, 0.4);
    background: rgba(46, 107, 255, 0.12);
    color: var(--color-accent-primary-edge);
    animation: proof-industry-tab 3.4s ease-in-out infinite;
}

.service-proof-industry__panel {
    padding: 0.28rem 0.32rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-2);
}

.service-proof-industry__panel small {
    display: block;
    font-size: 0.4375rem;
    color: var(--color-text-muted);
    margin-bottom: 0.06rem;
}

.service-proof-industry__panel strong {
    font-size: 0.5625rem;
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.25;
}

/* ── Card proof mobile tuning ── */
@media (max-width: 575.98px) {
    .service-card--has-proof .service-proof--clinic {
        height: auto;
        min-height: 5.25rem;
    }

    .service-proof-clinic__slot {
        padding: 0.18rem 0.38rem;
    }

    .service-proof-clinic__slot > span {
        font-size: 0.5rem;
    }

    .service-card--has-proof .service-proof--code .service-proof-code__body {
        font-size: 0.4375rem;
    }
}

@keyframes proof-platform-bar {
    0%,
    100% {
        width: calc(var(--bar-w, 50%) * 0.65);
        opacity: 0.7;
    }

    50% {
        width: var(--bar-w, 50%);
        opacity: 1;
    }
}

@keyframes proof-industry-tab {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(57, 198, 244, 0);
    }

    50% {
        box-shadow: 0 0 10px 1px rgba(57, 198, 244, 0.22);
    }
}

@keyframes proof-clinic-slot {
    0%,
    28% {
        opacity: 0.35;
        transform: translateY(0.2rem);
        background: transparent;
    }

    38%,
    82% {
        opacity: 1;
        transform: translateY(0);
        background: rgba(46, 107, 255, 0.1);
    }

    92%,
    100% {
        opacity: 0.75;
        transform: translateY(0);
        background: rgba(46, 107, 255, 0.06);
    }
}

@keyframes proof-bar-fill {
    0%,
    100% {
        transform: scaleY(0.55);
        opacity: 0.65;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes proof-line-draw {
    0%,
    100% {
        stroke-dashoffset: 140;
        opacity: 0.55;
    }

    45%,
    70% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@keyframes proof-line-dot {
    0%,
    40% {
        opacity: 0;
    }

    50%,
    75% {
        opacity: 1;
    }

    100% {
        opacity: 0.6;
    }
}

@keyframes proof-area-fill {
    0%,
    100% {
        opacity: 0.45;
        transform: scaleY(0.85);
    }

    50% {
        opacity: 1;
        transform: scaleY(1);
    }
}

@keyframes proof-email-bar {
    0%,
    100% {
        width: calc(var(--bar-w, 50%) * 0.6);
        opacity: 0.65;
    }

    50% {
        width: var(--bar-w, 50%);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-proof-merge__arrow-dot,
    .service-proof-health__status,
    .service-proof-chat__typing,
    .service-proof-chat__bubble--booked,
    .service-proof-chat__typing span,
    .service-proof-flow__line--pulse::before,
    .service-proof-code__cursor,
    .service-proof-code__line--active,
    .service-proof-mobile__card--active,
    .service-proof-mobile__card--idle,
    .service-proof-dashboard__metric,
    .service-proof-prebuilt__base,
    .service-proof-prebuilt__result,
    .service-proof-prebuilt__arrow-dot,
    .service-proof-approval__badge--pending,
    .service-proof-approval__badge--approved,
    .service-proof-clinic__slot--new,
    .service-proof-analytics__bar i,
    .service-proof-analytics__line,
    .service-proof-analytics__area,
    .service-proof-analytics__dot,
    .service-proof-analytics__track i,
    .service-proof-analytics__platform .service-proof-analytics__track i,
    .service-proof-industry__tab--active {
        animation: none !important;
    }

    .service-proof-chat__typing {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .service-proof-chat__bubble--booked {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .service-proof-mobile__card--active {
        border-color: rgba(57, 198, 244, 0.4);
        transform: none;
    }

    .service-proof-approval__badge--pending {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .service-proof-approval__badge--approved {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .service-proof-clinic__slot--new {
        opacity: 1 !important;
        transform: none !important;
        background: rgba(46, 107, 255, 0.1) !important;
    }

    .service-proof-analytics__line {
        stroke-dashoffset: 0 !important;
        opacity: 1 !important;
    }

    .service-proof-analytics__dot {
        opacity: 1 !important;
    }

    .service-proof-analytics__bar i,
    .service-proof-analytics__track i {
        transform: none !important;
        opacity: 1 !important;
        width: var(--bar-w, var(--bar-h, 100%)) !important;
    }

    .service-proof-analytics__bar i {
        width: 100% !important;
        height: var(--bar-h, 50%) !important;
    }

    .service-proof-industry__tab--active {
        box-shadow: none !important;
    }
}