/* ============================================================
   DEVELOPERS.CSS — /developers page sections (.dv- namespace)
   Layers on styles.css tokens + pages-shared.css primitives.

/* Header CTA carries a longer label on this page than the
   139px fixed-width pill in styles.css allows */
.site-header .nav-cta { width: auto; padding: 0 24px; }

/* ------------------------------------------------------------
   1. HERO — uses the shared .section-hero system from styles.css
------------------------------------------------------------ */
/* Animated data streams hero (concept B) — periwinkle threads on white */
.hero-visual--streams {
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-visual--streams .dv-streams {
    width: 100%;
    max-width: 560px;
}

.dv-streams-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-n900);
    margin-bottom: 14px;
}

.dv-streams-stage {
    position: relative;
    display: flex;
    align-items: center;
}

.dv-streams-core {
    position: relative;
    flex-shrink: 0;
    width: 66px;
    height: 66px;
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: 0 2px 6px rgba(22,22,23,0.08), 0 12px 30px rgba(116,146,253,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--pg-solid);
    margin-right: -10px;
    z-index: 2;
}

@keyframes dvGlow {
    0%, 100% { opacity: 0.40; transform: scale(1); }
    50%      { opacity: 0.85; transform: scale(1.22); }
}

.dv-core-glow {
    position: absolute;
    inset: -22px;
    border-radius: 40px;
    background: radial-gradient(circle, rgba(116,146,253,0.30) 0%, rgba(116,146,253,0) 70%);
    animation: dvGlow 3.2s var(--ease) infinite;
    pointer-events: none;
}

.dv-streams-svg {
    flex-shrink: 0;
    width: 120px;
    height: 326px;
    overflow: visible;
}

.dv-stream-base path {
    fill: none;
    stroke: url(#dv-stream-grad);
    stroke-width: 2;
    stroke-linecap: round;
}

/* Traveling light pulse along each stream */
@keyframes dvComet {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -140; }
}

/* Mobile vertical stream (core → list) — hidden on desktop */
.dv-streams-svg-v { display: none; }

.dv-stream-base-v {
    fill: none;
    stroke: rgba(116, 146, 253, 0.35);
    stroke-width: 2;
    stroke-linecap: round;
}

.dv-stream-flow-v {
    fill: none;
    stroke: #7492fd;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 16 124;
    animation: dvComet 2.75s linear infinite;
    opacity: 0.9;
}

/* chip "receiving" pulse — runs on mobile in place of the comet fan */
@keyframes dvChipRx {
    0%, 26%, 100% { transform: scale(1); background: var(--c-g50); color: var(--pg-solid); }
    10% { transform: scale(1.14); background: var(--c-brand-100, #e9f1ff); color: var(--c-accent, #4f6ef7); }
}

.dv-stream-flow path {
    fill: none;
    stroke: #7492fd;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 16 124;
    animation: dvComet 2.75s linear infinite;
    opacity: 0.9;
}

.dv-streams-list {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dv-stream-chip {
    display: flex;
    align-items: center;
    gap: 11px;
    height: 54px;
    padding: 0 18px;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow:
        0 0 0 1px rgba(22,22,23,0.05),
        0 8px 22px rgba(22,22,23,0.08),
        0 2px 5px rgba(22,22,23,0.04);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--c-n900);
    white-space: nowrap;
    min-width: 0;
}

.dv-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 16px;
    flex-shrink: 0;
    background: #FFFFFF;
    color: var(--pg-solid);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(22,22,23,0.10), 0 4px 10px rgba(22,22,23,0.07);
}

.dv-chip-bot {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 15px;
    border-radius: 50%;
    background: var(--c-g50);
    color: var(--pg-solid);
    flex-shrink: 0;
}

.dv-mcp-shot img,
.dv-record-shot img {
    display: block;
    width: 100%;
    height: auto;
}

/* Hero chips cascade in from the right once the streams enter view */
[data-animate] .dv-stream-chip {
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}

[data-animate].in-view .dv-stream-chip { opacity: 1; transform: none; }

[data-animate].in-view .dv-stream-chip:nth-child(1) { transition-delay: 80ms; }
[data-animate].in-view .dv-stream-chip:nth-child(2) { transition-delay: 180ms; }
[data-animate].in-view .dv-stream-chip:nth-child(3) { transition-delay: 280ms; }
[data-animate].in-view .dv-stream-chip:nth-child(4) { transition-delay: 380ms; }
[data-animate].in-view .dv-stream-chip:nth-child(5) { transition-delay: 480ms; }

/* ------------------------------------------------------------
   2. LIVE EVENT TICKER
------------------------------------------------------------ */








.visually-hidden-pg {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------
   4. STAT STRIP
------------------------------------------------------------ */
.dv-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
    padding: 28px 0;
    border-top: 1px solid var(--pg-hairline-soft);
    border-bottom: 1px solid var(--pg-hairline-soft);
}

.dv-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dv-stat-value {
    font-size: 42px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--c-n900);
    font-variant-numeric: tabular-nums;
}

.dv-stat-label {
    font-size: 14px;
    color: var(--c-n500);
}

/* ------------------------------------------------------------
   5. API / MCP PRODUCT CARDS
------------------------------------------------------------ */
.dv-products-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.dv-product-card {
    padding: 38px 40px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0; /* grid item must be able to shrink below content min-width on phones */
}

.dv-mini { max-width: 100%; overflow-x: auto; }

.dv-product-head {
    display: flex;
    align-items: center;
    gap: 13px;
}


.dv-product-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    font-size: 23px;
    flex-shrink: 0;
    background: #FFFFFF;
    color: var(--pg-solid);
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(22,22,23,0.08), 0 8px 20px rgba(22,22,23,0.08);
}

.dv-product-title {
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--c-n900);
}

.dv-product-tag {
    font-size: 16px;
    font-weight: 500;
    color: var(--c-n600);
}




/* In-card live fragments (patients-page pattern, fully animated) */
.dv-mini {
    position: relative;
    margin-top: 22px;
    border-radius: var(--r-lg);
    padding: 18px;
    background:
        radial-gradient(120% 140% at 85% 0%, rgba(116,146,253,0.14) 0%, rgba(116,146,253,0) 60%),
        #F7F8FA;
}

.dv-mini--tool {
    background:
        radial-gradient(120% 140% at 15% 0%, rgba(228,221,242,0.5) 0%, rgba(228,221,242,0) 60%),
        #F7F8FA;
}

.dv-mini-chip {
    position: absolute;
    top: -12px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: var(--r-full);
    background: #FFFFFF;
    box-shadow: 0 3px 9px rgba(22,22,23,0.10), 0 10px 26px rgba(22,22,23,0.10);
    font-size: 12px;
    font-weight: 600;
    color: var(--c-n900);
}

.dv-mini-rows {
    display: flex;
    flex-direction: column;
}

.dv-mini-row,
.dv-mini-kv {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-top: 1px solid rgba(22,22,23,0.05);
    font-size: 13px;
    font-weight: 500;
    color: var(--c-n700);
}

.dv-mini-row:first-child,
.dv-mini-kv:first-child { border-top: none; }

.dv-mini-row i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-brand-500);
    flex-shrink: 0;
}

.dv-mini-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dv-mini-row b {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--c-n300);
}

.dv-mini-kv { justify-content: space-between; }

.dv-mini-kv b {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-n900);
    font-variant-numeric: tabular-nums;
}

.dv-mini-mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--c-n300);
    margin-bottom: 6px;
}

.dv-mini-prompt {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
    padding: 11px 12px 11px 16px;
    border-radius: var(--r-full);
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(22,22,23,0.08), 0 8px 22px rgba(22,22,23,0.08);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--c-n900);
}

.dv-mini-prompt .ph-sparkle { color: var(--c-brand-500); font-size: 16px; }

.dv-mini-send {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--pg-solid);
    color: #FFFFFF;
    font-size: 14px;
    flex-shrink: 0;
}

/* Rows cascade in when the card scrolls into view */
[data-animate] .dv-mini-row,
[data-animate] .dv-mini-kv,
[data-animate] .dv-mini-prompt {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}

[data-animate].in-view .dv-mini-row,
[data-animate].in-view .dv-mini-kv,
[data-animate].in-view .dv-mini-prompt { opacity: 1; transform: none; }

[data-animate].in-view .dv-mini-row:nth-child(1), [data-animate].in-view .dv-mini-kv:nth-child(1) { transition-delay: 100ms; }
[data-animate].in-view .dv-mini-row:nth-child(2), [data-animate].in-view .dv-mini-kv:nth-child(2) { transition-delay: 200ms; }
[data-animate].in-view .dv-mini-row:nth-child(3), [data-animate].in-view .dv-mini-kv:nth-child(3) { transition-delay: 300ms; }
[data-animate].in-view .dv-mini-row:nth-child(4) { transition-delay: 400ms; }
[data-animate].in-view .dv-mini-prompt { transition-delay: 450ms; }

/* Pipeline step icons pop with the reveal */
@keyframes dvIconPop {
    0%   { transform: scale(0.6); opacity: 0; }
    70%  { transform: scale(1.06); }
    100% { transform: scale(1); opacity: 1; }
}

[data-reveal].revealed .dv-step-icon { animation: dvIconPop 550ms var(--ease) 250ms both; }

/* ------------------------------------------------------------
   6. CLINICAL BRAIN — split + tool list
------------------------------------------------------------ */
.dv-split-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 64px;
    align-items: center;
}

.dv-split-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.025em;
    color: var(--c-n900);
    margin-bottom: 16px;
}

.dv-split-sub {
    font-size: 16px;
    line-height: 1.6;
    color: var(--c-n500);
    margin-bottom: 28px;
    max-width: 480px;
}

.dv-mcp-shot {
    max-width: 480px;
    justify-self: center;
    border-radius: var(--r-2xl);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(25,28,31,0.12), 0 8px 22px rgba(25,28,31,0.05);
}

/* ------------------------------------------------------------
   7. PIPELINE
------------------------------------------------------------ */
.dv-pipeline {
    display: grid;
    grid-template-columns: 1fr 34px 1fr 34px 1fr 34px 1fr 34px 1fr;
    align-items: stretch;
    gap: 0;
}

.dv-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 26px 14px;
    border-radius: var(--r-lg);
    background: #FFFFFF;
    border: 1px solid var(--pg-hairline-soft);
    box-shadow: var(--shadow-sm);
}

.dv-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-size: 21px;
    background: #FFFFFF;
    color: var(--pg-solid);
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(22,22,23,0.08), 0 8px 20px rgba(22,22,23,0.08);
}

.dv-step-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-n900);
}

.dv-step-time {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--c-n500);
    background: var(--c-g50);
    border-radius: var(--r-full);
    padding: 3px 11px;
}

.dv-step-time--live { color: var(--pg-ok-ink); background: var(--pg-ok-bg); }

@keyframes dvDash {
    to { background-position-x: -12px; }
}

.dv-connector {
    align-self: center;
    height: 2px;
    width: 100%;
    background-image: linear-gradient(90deg, var(--c-brand-300) 55%, transparent 55%);
    background-size: 12px 2px;
    background-repeat: repeat-x;
}

[data-animate].in-view ~ .dv-connector,
[data-animate].in-view .dv-connector,
.dv-pipeline.in-view .dv-connector {
    animation: dvDash 1.1s linear infinite;
}

/* ------------------------------------------------------------
   8. RADAR — always-current visual
------------------------------------------------------------ */
.dv-record-shot {
    max-width: 420px;
    justify-self: center;
    border-radius: var(--r-2xl);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(25,28,31,0.12), 0 8px 22px rgba(25,28,31,0.05);
}

/* ------------------------------------------------------------
   9. USE CASES
------------------------------------------------------------ */
.dv-usecase-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.dv-usecase-card {
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dv-usecase-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dv-usecase-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 18px;
    flex-shrink: 0;
    background: #FFFFFF;
    color: var(--pg-solid);
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(22,22,23,0.08), 0 8px 20px rgba(22,22,23,0.08);
}

.dv-usecase-title {
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--c-n900);
}

.dv-usecase-desc {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--c-n500);
}

/* ------------------------------------------------------------
   10. COMPLIANCE STRIP
------------------------------------------------------------ */
.dv-strip-label {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--c-accent-ink, #3a52d6);
    margin-bottom: 24px;
}

/* ------------------------------------------------------------
   11. SANDBOX FORM
------------------------------------------------------------ */
.dv-sandbox-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    width: 100%;
    max-width: 460px;
}

.dv-email-input {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding: 0 22px;
    border-radius: var(--r-full);
    background: #FFFFFF;
    border: 1px solid var(--pg-hairline);
    font-family: inherit;
    font-size: 15px;
    color: var(--c-n900);
    outline: none;
    transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}

.dv-email-input::placeholder { color: var(--c-n300); }

.dv-email-input:focus {
    border-color: #7492fd;
    box-shadow: 0 0 0 3px rgba(116,146,253,0.22);
}

.dv-form--done { display: none; }

.dv-form-success {
    font-size: 15px;
    font-weight: 600;
    color: var(--pg-ok-ink);
    margin-top: 12px;
}

.dv-cta-note {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--c-n500);
    margin-top: 6px;
}

.dv-cta-note svg { color: var(--pg-ok-ink); }

/* ------------------------------------------------------------
   Reduced motion
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    [data-animate] .dv-mini-row, [data-animate] .dv-mini-kv, [data-animate] .dv-mini-prompt { transition: none; opacity: 1; transform: none; }
    [data-reveal].revealed .dv-step-icon { animation: none; }
    [data-animate] .dv-stream-chip { transition: none; opacity: 1; transform: none; }
    .dv-stream-flow path { animation: none; }
    .dv-stream-flow-v { animation: none; }
    .dv-stream-chip .dv-chip-bot { animation: none !important; }
    .dv-core-glow { animation: none; opacity: 0.5; }
    .dv-connector,
    .dv-pipeline.in-view .dv-connector { animation: none; }
}

/* ------------------------------------------------------------
   Responsive
------------------------------------------------------------ */
@media (max-width: 1100px) {
    .dv-usecase-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
    .dv-products-grid { grid-template-columns: 1fr; }
    .dv-product-card { padding: 28px 22px; }
    .dv-split-grid { grid-template-columns: 1fr; gap: 44px; }
    .dv-stat-strip { grid-template-columns: 1fr 1fr; row-gap: 32px; }

    .dv-pipeline { grid-template-columns: 1fr; gap: 0; }
    .dv-connector {
        width: 2px;
        height: 30px;
        justify-self: center;
        background-image: linear-gradient(180deg, var(--c-brand-300) 55%, transparent 55%);
        background-size: 2px 12px;
        background-repeat: repeat-y;
    }
    @keyframes dvDashV {
        to { background-position-y: -12px; }
    }
    .dv-pipeline.in-view .dv-connector { animation: dvDashV 1.1s linear infinite; }
}

@media (max-width: 768px) {
    .dv-streams-svg { display: none; }
    .dv-streams-stage { flex-direction: column; align-items: stretch; gap: 12px; }
    .dv-streams-core { margin: 0 auto; }

    .dv-streams-svg-v { display: block; margin: -2px auto; }

    .dv-stream-chip .dv-chip-bot { animation: dvChipRx 2.75s ease-in-out infinite; }
    .dv-stream-chip:nth-child(2) .dv-chip-bot { animation-delay: 0.55s; }
    .dv-stream-chip:nth-child(3) .dv-chip-bot { animation-delay: 1.1s; }
    .dv-stream-chip:nth-child(4) .dv-chip-bot { animation-delay: 1.65s; }
    .dv-stream-chip:nth-child(5) .dv-chip-bot { animation-delay: 2.2s; }
    /* Collapse ticker to a single rotating segment */

    .dv-sandbox-form { flex-direction: column; }
    .dv-sandbox-form .pg-btn,
    .dv-email-input { width: 100%; }
}

@media (max-width: 480px) {
    .dv-split-title { font-size: 29px; }
    .dv-usecase-grid { grid-template-columns: 1fr; }
}