/* Quiet, interactive product maps shared by AIGate, AIPitch, DevScore and Consulting. */

.product-flow-section {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 76rem;
    margin: 0 auto;
    padding: 0 1rem clamp(2.75rem, 6vw, 5rem);
    box-sizing: border-box;
    scroll-margin-top: 6rem;
}

.server-panel-stage > .product-flow-section {
    max-width: none;
    padding: 0;
}

.product-flow {
    --flow-accent: var(--product-accent, var(--aigate-primary, #10b981));
    --flow-accent-2: var(--product-accent-2, var(--aigate-teal, #2dd4bf));
    --flow-text: var(--product-text, var(--aigate-text, #e8edf3));
    --flow-muted: var(--product-muted, var(--aigate-text-muted, #94a3b8));
    --flow-dim: var(--product-dim, var(--aigate-text-dim, #64748b));
    --flow-border: color-mix(in srgb, var(--flow-accent) 22%, rgba(148, 163, 184, .14));
    --flow-panel: rgba(5, 12, 25, .96);
    --flow-node: rgba(13, 24, 43, .92);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--flow-border);
    border-radius: clamp(1.15rem, 2.2vw, 1.6rem);
    padding: clamp(1.2rem, 3.2vw, 2.3rem);
    color: var(--flow-text);
    background: linear-gradient(145deg, rgba(12, 22, 40, .96), rgba(3, 8, 20, .98));
    box-shadow: 0 28px 70px rgba(2, 6, 23, .24);
}

.theme-light .product-flow {
    --flow-panel: rgba(251, 253, 255, .98);
    --flow-node: rgba(255, 255, 255, .96);
    background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(241, 246, 250, .98));
    box-shadow: 0 24px 60px rgba(15, 23, 42, .08);
}

.product-flow__header {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(18rem, .68fr);
    gap: clamp(1.25rem, 4vw, 4rem);
    align-items: end;
    margin-bottom: clamp(1.35rem, 3vw, 2.2rem);
}

.product-flow__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .65rem;
    color: var(--flow-accent-2);
    font-family: var(--ait-font-mono, "Share Tech Mono", monospace);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .18em;
}

.product-flow__eyebrow i,
.product-flow__map-label i,
.product-flow__status i {
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: var(--flow-accent);
    box-shadow: 0 0 .75rem color-mix(in srgb, var(--flow-accent) 80%, transparent);
}

.product-flow__header h2 {
    margin: 0;
    max-width: 43rem;
    color: var(--flow-text);
    font-family: var(--ait-font-display, Inter, sans-serif);
    font-size: clamp(1.8rem, 4vw, 3.35rem);
    font-weight: 850;
    line-height: .99;
    letter-spacing: -.052em;
}

.product-flow__header p {
    margin: 0;
    color: var(--flow-muted);
    font-size: clamp(.9rem, 1.45vw, 1.03rem);
    line-height: 1.62;
}

.product-flow__figure { margin: 0; }

.product-flow__canvas {
    --flow-focus-x: 50%;
    --flow-focus-y: 50%;
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1160 / 560;
    border: 1px solid color-mix(in srgb, var(--flow-accent) 18%, rgba(148, 163, 184, .15));
    border-radius: 1rem;
    background: rgba(2, 8, 20, .46);
    isolation: isolate;
}

.theme-light .product-flow__canvas { background: rgba(241, 247, 250, .58); }

.product-flow__canvas::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .2;
    background-image:
        linear-gradient(color-mix(in srgb, var(--flow-accent) 8%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--flow-accent) 8%, transparent) 1px, transparent 1px);
    background-size: 2.2rem 2.2rem;
    mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

.product-flow__canvas::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle 10rem at var(--flow-focus-x) var(--flow-focus-y), color-mix(in srgb, var(--flow-accent-2) 12%, transparent), transparent 72%);
    opacity: 0;
    transition: opacity .45s ease, background-position .45s ease;
}

.product-flow__canvas.has-flow-focus::after { opacity: 1; }

.product-flow__map-label {
    position: absolute;
    z-index: 4;
    top: 1rem;
    right: 1rem;
    left: 1rem;
    display: flex;
    justify-content: space-between;
    color: var(--flow-dim);
    font-family: var(--ait-font-mono, "Share Tech Mono", monospace);
    font-size: .59rem;
    letter-spacing: .14em;
    pointer-events: none;
}

.product-flow__map-label span:last-child { display: inline-flex; align-items: center; gap: .45rem; }
.product-flow__live { min-width: 0; max-width: 58%; justify-content: flex-end; }
.product-flow__live b {
    overflow: hidden;
    color: var(--flow-muted);
    font: inherit;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-flow__canvas-note {
    position: absolute;
    z-index: 3;
    top: 3.75rem;
    right: 1.5rem;
    display: grid;
    width: min(35%, 24rem);
    gap: .28rem;
    box-sizing: border-box;
    padding: .7rem .8rem .72rem .95rem;
    border: 1px solid color-mix(in srgb, var(--flow-accent-2) 23%, transparent);
    border-left: 2px solid color-mix(in srgb, var(--flow-accent-2) 62%, transparent);
    border-radius: .7rem;
    background: color-mix(in srgb, var(--flow-panel) 88%, transparent);
    box-shadow: 0 .7rem 1.8rem rgba(2, 8, 20, .09);
    pointer-events: none;
}

.product-flow__canvas-note::after {
    content: "";
    position: absolute;
    right: 1.25rem;
    bottom: -.34rem;
    width: .62rem;
    height: .62rem;
    border-right: 1px solid color-mix(in srgb, var(--flow-accent-2) 23%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--flow-accent-2) 23%, transparent);
    background: color-mix(in srgb, var(--flow-panel) 88%, transparent);
    transform: rotate(45deg);
}

.product-flow__canvas-note code {
    color: var(--flow-accent-2);
    font: 700 .56rem/1.2 var(--ait-font-mono, "Share Tech Mono", monospace);
    letter-spacing: .11em;
}

.product-flow__canvas-note span {
    color: var(--flow-muted);
    font-size: .68rem;
    line-height: 1.42;
}

.pf-wiring {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    color: var(--flow-accent-2);
    pointer-events: none;
}

.pf-wiring marker path { fill: color-mix(in srgb, var(--flow-accent-2) 64%, var(--flow-dim)); }

.pf-wire {
    fill: none;
    stroke: color-mix(in srgb, var(--flow-accent-2) 54%, var(--flow-dim));
    stroke-width: 1.35;
    stroke-dasharray: 5 6;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: pf-wire-travel 8s linear infinite;
    transition: stroke .25s ease, stroke-width .25s ease, opacity .25s ease, filter .25s ease;
}

.pf-wire--policy { stroke: color-mix(in srgb, var(--flow-accent) 38%, var(--flow-dim)); opacity: .65; }
.pf-wire--audit { stroke: color-mix(in srgb, var(--flow-accent-2) 30%, var(--flow-dim)); opacity: .56; }
.pf-wire--feedback { stroke: #8b7bd8; opacity: .72; }
.pf-wire--input { stroke-dasharray: 2 5; opacity: .42; animation-duration: 11s; }
.pf-wiring--aipitch .pf-wire--main {
    stroke: color-mix(in srgb, var(--flow-accent-2) 74%, var(--flow-dim));
    stroke-width: 1.7;
    stroke-dasharray: 9 6;
    opacity: .9;
    animation-duration: 6.5s;
}
.pf-wiring--aipitch .pf-wire--brand {
    stroke: #d19a3e;
    stroke-width: 1.55;
    stroke-dasharray: 3 5;
    opacity: .76;
    animation-duration: 9s;
}
.pf-wiring--aipitch .pf-wire--feedback { stroke-width: 1.45; stroke-dasharray: 5 7; }
.pf-wiring--aipitch .pf-arrowhead { fill: var(--flow-accent-2); }
.pf-wiring--aipitch .pf-arrowhead--brand { fill: #d19a3e; }
.pf-wiring--aipitch .pf-arrowhead--feedback { fill: #a78bfa; }
.pf-wire.is-wire-active {
    stroke: var(--flow-accent-2);
    stroke-width: 2.15;
    opacity: 1;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--flow-accent-2) 72%, transparent));
    animation-duration: 2.6s;
}
.pf-wire--feedback.is-wire-active {
    stroke: #a78bfa;
    filter: drop-shadow(0 0 4px rgba(167, 139, 250, .72));
}
.pf-wire--brand.is-wire-active {
    stroke: #e0a94d;
    filter: drop-shadow(0 0 4px rgba(224, 169, 77, .66));
}

.pf-wire-label {
    fill: var(--flow-dim);
    font-family: var(--ait-font-mono, "Share Tech Mono", monospace);
    font-size: 9px;
    letter-spacing: 1.2px;
}
.pf-wire-label--brand { fill: #b47d23; font-size: 8px; }
.theme-dark .pf-wire-label--brand { fill: #e6b862; }
.pf-wire-label--feedback { fill: #8b7bd8; }

.pf-orb {
    fill: var(--flow-accent-2);
    filter: drop-shadow(0 0 5px var(--flow-accent-2));
}

.pf-orb--secondary {
    fill: #a78bfa;
    filter: drop-shadow(0 0 5px #8b5cf6);
}
.pf-orb--brand {
    fill: #e0a94d;
    filter: drop-shadow(0 0 5px rgba(224, 169, 77, .8));
}

.product-flow__map {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: opacity .2s ease, filter .2s ease;
}

.product-flow__node { position: absolute; margin: 0; }

.product-flow__node-button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 4.4rem;
    padding: clamp(.7rem, 1.3vw, 1rem);
    border: 1px solid color-mix(in srgb, var(--flow-accent-2) 24%, rgba(148, 163, 184, .2));
    border-radius: .78rem;
    color: var(--flow-text);
    text-align: left;
    background: var(--flow-node);
    box-shadow: 0 8px 24px rgba(2, 6, 23, .14);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.product-flow__node-button::after {
    content: "";
    position: absolute;
    top: .72rem;
    right: .72rem;
    width: .34rem;
    height: .34rem;
    border-radius: 50%;
    background: var(--flow-accent-2);
    box-shadow: 0 0 .7rem var(--flow-accent-2);
    opacity: .16;
    transform: scale(.72);
    transition: opacity .2s ease, transform .2s ease;
}

.product-flow__node-button:hover,
.product-flow__node-button:focus-visible,
.product-flow__node-button.is-selected,
.product-flow__node-button.is-flow-active {
    border-color: color-mix(in srgb, var(--flow-accent-2) 72%, transparent);
    background: color-mix(in srgb, var(--flow-node) 92%, var(--flow-accent) 8%);
    box-shadow: 0 10px 32px rgba(2, 6, 23, .2), 0 0 0 1px color-mix(in srgb, var(--flow-accent) 14%, transparent);
    outline: none;
    transform: translateY(-2px);
}

.product-flow__node-button.is-flow-active::after,
.product-flow__node-button.is-selected::after {
    opacity: 1;
    transform: scale(1);
    animation: pf-node-signal 1.25s ease-in-out infinite;
}

.product-flow__node-code {
    display: block;
    overflow: hidden;
    max-width: 100%;
    margin-bottom: .35rem;
    color: var(--flow-accent-2);
    font-family: var(--ait-font-mono, "Share Tech Mono", monospace);
    font-size: clamp(.5rem, .72vw, .62rem);
    letter-spacing: .11em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-flow__node-button strong {
    display: block;
    max-width: 100%;
    font-family: var(--ait-font-display, Inter, sans-serif);
    font-size: clamp(.76rem, 1.15vw, 1rem);
    font-weight: 760;
    line-height: 1.15;
}

.product-flow__node-more {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    color: var(--flow-muted);
    font-size: .62rem;
    opacity: 0;
    transition: max-height .18s ease, margin .18s ease, opacity .18s ease;
}

.product-flow__node-button:hover .product-flow__node-more,
.product-flow__node-button:focus-visible .product-flow__node-more,
.product-flow__node-button.is-selected .product-flow__node-more {
    max-height: 1rem;
    margin-top: .42rem;
    opacity: 1;
}

.product-flow__node-more svg { width: .78rem; height: .78rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

.product-flow__node--with-inputs { z-index: 3; }
.product-flow__analytics-inputs {
    position: absolute;
    bottom: calc(100% + .55rem);
    left: -.65rem;
    display: grid;
    width: calc(100% + 1.3rem);
    gap: .32rem;
    pointer-events: none;
}
.product-flow__analytics-inputs small {
    color: var(--flow-dim);
    font-family: var(--ait-font-mono, monospace);
    font-size: .48rem;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
}
.product-flow__analytics-inputs > span { display: flex; flex-wrap: wrap; justify-content: center; gap: .24rem; }
.product-flow__analytics-inputs i {
    padding: .22rem .34rem;
    border: 1px solid color-mix(in srgb, var(--flow-accent-2) 28%, transparent);
    border-radius: .28rem;
    color: var(--flow-muted);
    font-family: var(--ait-font-mono, monospace);
    font-size: .46rem;
    font-style: normal;
    line-height: 1;
    background: color-mix(in srgb, var(--flow-node) 94%, var(--flow-accent) 6%);
    white-space: nowrap;
}

.product-flow__node--rock .product-flow__node-button { justify-content: flex-start; padding: .58rem .7rem; }
.product-flow__node--rock .product-flow__node-code { margin-bottom: .18rem; }
.product-flow__rock-preview {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: .45rem;
    align-items: center;
    width: 100%;
    min-width: 0;
    margin-top: .32rem;
    pointer-events: none;
}
.product-flow__rock-sprite {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    background-image: url('../img/devscore-rock-sprites-stone.png');
    background-position: 0 66.666%;
    background-repeat: no-repeat;
    background-size: 400% 400%;
    filter: drop-shadow(0 3px 5px rgba(2, 6, 23, .28));
}
.product-flow__rock-sprite[data-rock-state="thinking"] { animation: pf-rock-thinking .8s ease-in-out infinite alternate; }
.product-flow__rock-sprite[data-rock-state="success"] { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--flow-accent-2) 60%, transparent)); }
.product-flow__rock-chat {
    display: grid;
    min-width: 0;
    gap: .16rem;
    padding: .35rem .42rem;
    border: 1px solid color-mix(in srgb, var(--flow-accent-2) 22%, transparent);
    border-radius: .45rem .45rem .45rem .15rem;
    background: color-mix(in srgb, var(--flow-node) 88%, var(--flow-accent) 12%);
}
.product-flow__rock-chat small {
    color: var(--flow-accent-2);
    font-family: var(--ait-font-mono, monospace);
    font-size: .43rem;
    letter-spacing: .1em;
}
.product-flow__rock-chat b {
    display: -webkit-box;
    overflow: hidden;
    color: var(--flow-muted);
    font-size: .56rem;
    font-weight: 600;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.product-flow__node--brand .product-flow__node-button {
    justify-content: flex-start;
    padding: .7rem .8rem;
    border-color: color-mix(in srgb, #d19a3e 44%, var(--flow-border));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--flow-node) 91%, #d19a3e 9%), var(--flow-node));
}
.product-flow__node--brand .product-flow__node-code { margin-bottom: .2rem; color: #c58b2e; }
.theme-dark .product-flow__node--brand .product-flow__node-code { color: #e6b862; }
.product-flow__brand-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2rem 2rem;
    gap: .42rem;
    align-items: center;
    width: 100%;
    margin-top: .48rem;
    pointer-events: none;
}
.product-flow__brand-swatches { display: flex; align-items: center; gap: .22rem; }
.product-flow__brand-swatches i {
    display: block;
    width: .72rem;
    height: .72rem;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .54), 0 0 0 2px rgba(15, 23, 42, .08);
}
.product-flow__brand-swatches i:nth-child(1) { background: #10b981; }
.product-flow__brand-swatches i:nth-child(2) { background: #7566d7; }
.product-flow__brand-swatches i:nth-child(3) { background: #e0a94d; }
.product-flow__brand-type {
    display: grid;
    place-items: center;
    height: 1.55rem;
    border: 1px solid color-mix(in srgb, #d19a3e 34%, var(--flow-border));
    border-radius: .32rem;
    color: var(--flow-text);
    font-family: Georgia, serif;
    font-size: .82rem;
    line-height: 1;
}
.product-flow__brand-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    height: 1.55rem;
    padding: 3px;
    border: 1px solid color-mix(in srgb, #d19a3e 34%, var(--flow-border));
    border-radius: .32rem;
}
.product-flow__brand-grid i { border-radius: 1px; background: color-mix(in srgb, var(--flow-accent-2) 24%, transparent); }

/* AIGate: Edge routes prompts through LLM Gate to models and actions through Agent Gate to systems. */
[data-flow-variant="aigate"] .product-flow__node:nth-child(1) { left: 3.45%; top: 41.96%; width: 13.8%; height: 15.36%; }
[data-flow-variant="aigate"] .product-flow__node:nth-child(2) { left: 22.41%; top: 41.96%; width: 14.66%; height: 15.36%; }
[data-flow-variant="aigate"] .product-flow__node:nth-child(3) { left: 44.4%; top: 27.68%; width: 14.66%; height: 15.36%; }
[data-flow-variant="aigate"] .product-flow__node:nth-child(4) { left: 73.28%; top: 27.68%; width: 17.24%; height: 15.36%; }
[data-flow-variant="aigate"] .product-flow__node:nth-child(5) { left: 44.4%; top: 58.93%; width: 14.66%; height: 15.36%; }
[data-flow-variant="aigate"] .product-flow__node:nth-child(6) { left: 73.28%; top: 58.93%; width: 17.24%; height: 15.36%; }
[data-flow-variant="aigate"] .product-flow__node:nth-child(7) { left: 28.45%; top: 9.82%; width: 43.1%; height: 13.57%; }

.pf-wiring--aigate .pf-wire--return {
    stroke: #a78bfa;
    stroke-width: 1.55;
    stroke-dasharray: 3 6;
    opacity: .68;
}
.pf-wiring--aigate .pf-wire--return.is-wire-active {
    stroke: #c4b5fd;
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(167, 139, 250, .78));
}
.pf-wiring--aigate .pf-wire--return-source { opacity: .82; }
.pf-wiring--aigate .pf-wire--file-dlp {
    stroke: #d19a3e;
    stroke-dasharray: 2 4;
    opacity: .7;
}
.pf-wiring--aigate .pf-return-arrowhead { fill: #a78bfa; }
.pf-wiring--aigate .pf-wire-label--return { fill: #9b8bdf; font-size: 8px; }
.pf-wiring--aigate .pf-response-pill {
    opacity: .68;
    transition: opacity .25s ease, filter .25s ease;
}
.pf-wiring--aigate .pf-response-pill rect {
    fill: var(--flow-panel);
    stroke: rgba(167, 139, 250, .5);
}
.pf-wiring--aigate .pf-response-pill circle { fill: #a78bfa; }
.pf-wiring--aigate .pf-response-pill text {
    fill: #a78bfa;
    font-family: var(--ait-font-mono, "Share Tech Mono", monospace);
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: .65px;
}
.pf-wiring--aigate .pf-response-pill--files rect { stroke: rgba(209, 154, 62, .55); }
.pf-wiring--aigate .pf-response-pill--files circle { fill: #d19a3e; }
.pf-wiring--aigate .pf-response-pill--files text { fill: #d19a3e; }
.pf-wiring--aigate .pf-response-pill.is-wire-active {
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(167, 139, 250, .5));
}

[data-flow-variant="aimask"] .product-flow__node:nth-child(1) { left: 4.66%; top: 41.96%; width: 18.02%; height: 15.36%; }
[data-flow-variant="aimask"] .product-flow__node:nth-child(2) { left: 28.97%; top: 41.96%; width: 18.1%; height: 15.36%; }
[data-flow-variant="aimask"] .product-flow__node:nth-child(3) { left: 53.28%; top: 41.96%; width: 18.1%; height: 15.36%; }
[data-flow-variant="aimask"] .product-flow__node:nth-child(4) { left: 77.59%; top: 41.96%; width: 17.67%; height: 15.36%; }

.pf-wiring--aimask .pf-wire--main {
    stroke: url(#am-clean-gradient-v3);
    stroke-width: 1.9;
    stroke-dasharray: 8 6;
}
.pf-wiring--aimask .pf-wire--dlp {
    stroke: #8b7bd8;
    stroke-width: 1.55;
    stroke-dasharray: 3 6;
    opacity: .6;
}
.pf-wiring--aimask .pf-wire--dlp.is-wire-active {
    stroke: #a78bfa;
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(167, 139, 250, .72));
}
.pf-wiring--aimask .pf-dlp-arrowhead { fill: #8b7bd8; }
.pf-wiring--aimask .pf-wire-label--main { fill: color-mix(in srgb, var(--flow-accent-2) 72%, var(--flow-dim)); }
.pf-wiring--aimask .pf-input-pill rect,
.pf-wiring--aimask .pf-integration-pill rect {
    fill: var(--flow-panel);
    stroke: color-mix(in srgb, var(--flow-accent-2) 38%, transparent);
}
.pf-wiring--aimask .pf-input-pill circle { fill: var(--flow-accent-2); }
.pf-wiring--aimask .pf-input-pill text,
.pf-wiring--aimask .pf-integration-pill text {
    fill: var(--flow-muted);
    font-family: var(--ait-font-mono, "Share Tech Mono", monospace);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}
.pf-wiring--aimask .pf-integration-pill {
    opacity: .72;
    transition: opacity .25s ease, filter .25s ease;
}
.pf-wiring--aimask .pf-integration-pill circle { fill: #8b7bd8; }
.pf-wiring--aimask .pf-integration-pill__title { fill: #a78bfa; font-size: 8px; }
.pf-wiring--aimask .pf-integration-pill.is-wire-active {
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(139, 92, 246, .48));
}

/* AIPitch: secure intake → generation, governed by the brand system, then live revisions and publish. */
[data-flow-variant="aipitch"] .product-flow__node:nth-child(1) { left: 3.02%; top: 42.86%; width: 12.93%; height: 15.36%; }
[data-flow-variant="aipitch"] .product-flow__node:nth-child(2) { left: 18.97%; top: 42.86%; width: 12.93%; height: 15.36%; }
[data-flow-variant="aipitch"] .product-flow__node:nth-child(3) { left: 32.76%; top: 8.93%; width: 20%; height: 20%; }
[data-flow-variant="aipitch"] .product-flow__node:nth-child(4) { left: 35.78%; top: 42.86%; width: 12.93%; height: 15.36%; }
[data-flow-variant="aipitch"] .product-flow__node:nth-child(5) { left: 57.33%; top: 42.86%; width: 15.52%; height: 15.36%; }
[data-flow-variant="aipitch"] .product-flow__node:nth-child(6) { left: 80.17%; top: 42.86%; width: 15.52%; height: 15.36%; }

/* DevScore: engineering signals → normalized model → explainable score → role views → action loop. */
[data-flow-variant="devscore"] .product-flow__node:nth-child(1) { left: 3.45%; top: 40.18%; width: 13.79%; height: 18.93%; }
[data-flow-variant="devscore"] .product-flow__node:nth-child(2) { left: 21.12%; top: 40.18%; width: 12.93%; height: 18.93%; }
[data-flow-variant="devscore"] .product-flow__node:nth-child(3) { left: 38.36%; top: 40.18%; width: 15.52%; height: 18.93%; }
[data-flow-variant="devscore"] .product-flow__node:nth-child(4) { left: 58.62%; top: 40.18%; width: 12.07%; height: 18.93%; }
[data-flow-variant="devscore"] .product-flow__node:nth-child(5) { left: 75%; top: 40.18%; width: 18.1%; height: 18.93%; }
[data-flow-variant="devscore"] .product-flow__node:nth-child(6) { left: 66%; top: 67.86%; width: 27%; height: 20%; }
[data-flow-variant="devscore"] .product-flow__node-button strong {
    font-size: clamp(.72rem, 1.05vw, .92rem);
    overflow-wrap: anywhere;
}

/* Consulting: every stage produces an explicit handoff and the measured result closes the loop. */
[data-flow-variant="consalt"] .product-flow__node:nth-child(1) { left: 3.02%; top: 41.96%; width: 12.5%; height: 15.36%; }
[data-flow-variant="consalt"] .product-flow__node:nth-child(2) { left: 18.53%; top: 41.96%; width: 13.79%; height: 15.36%; }
[data-flow-variant="consalt"] .product-flow__node:nth-child(3) { left: 35.34%; top: 41.96%; width: 13.36%; height: 15.36%; }
[data-flow-variant="consalt"] .product-flow__node:nth-child(4) { left: 51.72%; top: 41.96%; width: 13.36%; height: 15.36%; }
[data-flow-variant="consalt"] .product-flow__node:nth-child(5) { left: 68.1%; top: 41.96%; width: 13.36%; height: 15.36%; }
[data-flow-variant="consalt"] .product-flow__node:nth-child(6) { left: 84.48%; top: 41.96%; width: 12.5%; height: 15.36%; }

.product-flow__detail {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(25rem, 42%);
    box-sizing: border-box;
    padding: clamp(1.35rem, 2.5vw, 2rem);
    border-left: 1px solid var(--flow-border);
    color: var(--flow-text);
    background: var(--flow-panel);
    box-shadow: -30px 0 70px rgba(2, 6, 23, .3);
    animation: pf-detail-in .22s ease both;
}

.product-flow__detail[hidden] { display: none; }

.product-flow__canvas.is-detail-open .pf-wiring,
.product-flow__canvas.is-detail-open .product-flow__map { opacity: .24; filter: saturate(.55); }

.product-flow__detail-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: grid;
    width: 2rem;
    height: 2rem;
    padding: .45rem;
    border: 1px solid var(--flow-border);
    border-radius: 50%;
    color: var(--flow-muted);
    background: transparent;
    cursor: pointer;
}

.product-flow__detail-close:hover,
.product-flow__detail-close:focus-visible { color: var(--flow-text); border-color: var(--flow-accent-2); outline: none; }
.product-flow__detail-close svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

.product-flow__detail-code {
    display: block;
    max-width: calc(100% - 2.5rem);
    margin-bottom: .85rem;
    color: var(--flow-accent-2);
    font-family: var(--ait-font-mono, "Share Tech Mono", monospace);
    font-size: .64rem;
    letter-spacing: .14em;
}

.product-flow__detail h3 {
    margin: 0 0 .85rem;
    max-width: 18rem;
    color: var(--flow-text);
    font-family: var(--ait-font-display, Inter, sans-serif);
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.product-flow__detail > p {
    margin: 0;
    color: var(--flow-muted);
    font-size: .9rem;
    line-height: 1.65;
}

.product-flow__detail-meta { margin-top: clamp(1.25rem, 3vw, 2rem); }
.product-flow__detail-meta small,
.product-flow__detail-next small {
    display: block;
    margin-bottom: .65rem;
    color: var(--flow-dim);
    font-family: var(--ait-font-mono, "Share Tech Mono", monospace);
    font-size: .58rem;
    letter-spacing: .13em;
}

.product-flow__detail-meta > div { display: flex; flex-wrap: wrap; gap: .4rem; }
.product-flow__detail-meta span {
    padding: .32rem .5rem;
    border: 1px solid color-mix(in srgb, var(--flow-accent-2) 28%, transparent);
    border-radius: .38rem;
    color: var(--flow-accent-2);
    font-family: var(--ait-font-mono, monospace);
    font-size: .62rem;
}

.product-flow__detail-next {
    position: absolute;
    right: clamp(1.35rem, 2.5vw, 2rem);
    bottom: clamp(1.35rem, 2.5vw, 2rem);
    left: clamp(1.35rem, 2.5vw, 2rem);
    padding-top: 1rem;
    border-top: 1px solid var(--flow-border);
}

.product-flow__detail-next strong { color: var(--flow-text); font-size: .86rem; font-weight: 650; }

.product-flow__support {
    margin-top: .85rem;
    padding: .9rem;
    border: 1px solid color-mix(in srgb, var(--flow-accent-2) 15%, transparent);
    border-radius: .85rem;
    background: color-mix(in srgb, var(--flow-accent) 3%, transparent);
}

.product-flow__support-label {
    display: block;
    margin-bottom: .7rem;
    color: var(--flow-accent-2);
    font-family: var(--ait-font-mono, monospace);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .14em;
}

.product-flow__support-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem;
}

.product-flow__support-item {
    min-width: 0;
    padding: .75rem;
    border-left: 1px solid color-mix(in srgb, var(--flow-accent-2) 28%, transparent);
}

.product-flow__support-item code,
.product-flow__support-item strong { display: block; }
.product-flow__support-item code {
    overflow: hidden;
    margin-bottom: .38rem;
    color: var(--flow-dim);
    font-family: var(--ait-font-mono, monospace);
    font-size: .52rem;
    letter-spacing: .09em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.product-flow__support-item strong { color: var(--flow-text); font-size: .78rem; line-height: 1.2; }
.product-flow__support-item p { margin: .38rem 0 0; color: var(--flow-muted); font-size: .7rem; line-height: 1.45; }

.product-flow__result {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .9rem;
    align-items: center;
    margin-top: .85rem;
    padding: .85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--flow-accent) 24%, transparent);
    border-radius: .85rem;
    background: color-mix(in srgb, var(--flow-accent) 5%, transparent);
}

.product-flow__result-mark { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border: 1px solid color-mix(in srgb, var(--flow-accent) 45%, transparent); border-radius: 50%; }
.product-flow__result-mark i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--flow-accent); box-shadow: 0 0 .75rem var(--flow-accent); }
.product-flow__result-copy { display: grid; gap: .16rem; }
.product-flow__result-copy small { color: var(--flow-accent-2); font-family: var(--ait-font-mono, monospace); font-size: .58rem; letter-spacing: .12em; }
.product-flow__result-copy strong { color: var(--flow-text); font-size: clamp(.78rem, 1.2vw, .93rem); line-height: 1.35; }
.product-flow__status { display: inline-flex; align-items: center; gap: .45rem; color: var(--flow-muted); font-family: var(--ait-font-mono, monospace); font-size: .58rem; letter-spacing: .1em; white-space: nowrap; }

@keyframes pf-wire-travel { to { stroke-dashoffset: -66; } }
@keyframes pf-detail-in { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: translateX(0); } }
@keyframes pf-node-signal { 0%, 100% { box-shadow: 0 0 .45rem var(--flow-accent-2); } 50% { box-shadow: 0 0 1rem var(--flow-accent-2); } }
@keyframes pf-rock-thinking { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-2px) rotate(1deg); } }

@media (max-width: 900px) {
    .aigate-page nav[aria-label$="sections"] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .aigate-page nav[aria-label$="sections"] > div {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .aigate-page nav[aria-label$="sections"] .server-nav-chip {
        min-width: 0;
        max-width: 100%;
    }

    .product-flow__header { grid-template-columns: 1fr; gap: .9rem; align-items: start; }
    .product-flow__header p { max-width: 44rem; }

    .product-flow__canvas {
        aspect-ratio: auto;
        padding: 3.5rem .75rem .75rem;
        box-sizing: border-box;
    }

    .pf-wiring { display: none; }

    .product-flow__canvas-note {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        margin-bottom: .7rem;
        padding: .72rem .8rem;
    }

    .product-flow__canvas-note::after { display: none; }

    .product-flow__map {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem;
        transition: none;
    }

    .product-flow__node,
    [data-flow-variant] .product-flow__node:nth-child(n) {
        position: static;
        width: auto;
        height: auto;
    }

    .product-flow__node-button { height: auto; min-height: 5.5rem; }
    .product-flow__node-more { max-height: 1rem; margin-top: .38rem; opacity: .72; }

    .product-flow__canvas.is-detail-open .product-flow__map { opacity: 1; filter: none; }

    .product-flow__detail {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        min-height: 21rem;
        margin-top: .65rem;
        border: 1px solid var(--flow-border);
        border-radius: .8rem;
        box-shadow: none;
    }

    .product-flow__node.has-open-detail { grid-column: 1 / -1; }
    .product-flow__node > .product-flow__detail { margin-top: .55rem; }

    .product-flow__detail-next { position: static; margin-top: 1.5rem; }
    .product-flow__analytics-inputs {
        position: static;
        width: 100%;
        margin-top: .55rem;
    }
    .product-flow__analytics-inputs small { text-align: left; }
    .product-flow__analytics-inputs > span { justify-content: flex-start; }
    .product-flow__node--rock .product-flow__node-button { min-height: 8.5rem; }
    .product-flow__rock-preview { max-width: 22rem; }
    .product-flow__node--brand .product-flow__node-button { min-height: 7.5rem; }
    .product-flow__brand-preview { max-width: 16rem; }
    .product-flow__support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .product-flow-section { padding-right: .75rem; padding-left: .75rem; }
    .product-flow { padding: 1rem; border-radius: 1rem; }
    .product-flow__header h2 { max-width: 21rem; font-size: clamp(1.75rem, 9vw, 2.35rem); }
    .product-flow__header p { font-size: .86rem; }
    .product-flow__map-label { justify-content: flex-end; }
    .product-flow__map-label > span:first-child { display: none; }
    .product-flow__live { max-width: 100%; }
    .product-flow__map { grid-template-columns: 1fr; }
    .product-flow__support-grid { grid-template-columns: 1fr; }
    .product-flow__support-item { padding: .7rem .65rem; }
    .product-flow__node-button { min-height: 4.8rem; padding: .8rem .9rem; }
    .product-flow__node-button strong { font-size: .92rem; }
    .product-flow__result { grid-template-columns: auto minmax(0, 1fr); }
    .product-flow__status { grid-column: 2; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    .product-flow *,
    .product-flow *::before,
    .product-flow *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition-duration: .01ms !important;
    }

    .product-flow .pf-wiring animate,
    .product-flow .pf-wiring animateMotion { display: none; }
}