.pf-deploy-page{--sx-shot:0 1px 2px rgba(11,13,18,.06),0 18px 40px -24px rgba(11,13,18,.28)}
.pf-deploy-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:40px;align-items:center}
.pf-deploy-cloud>svg,.pf-deploy-environment>svg{overflow:visible}
.pf-deploy-ink{fill:none;stroke:#0b0d12;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.pf-deploy-ink *{vector-effect:non-scaling-stroke}
.pf-deploy-hint{width:280px;stroke:white;margin-top:40px}.pf-deploy-hint>path:first-child{animation:pf-deploy-breathe 4s ease-in-out infinite alternate}@keyframes pf-deploy-breathe{from{opacity:.85}to{opacity:1}}
.pf-deploy-switch{width:fit-content;border:1px solid var(--pf-line);border-radius:10px;padding:4px;gap:4px;margin-bottom:16px}.pf-deploy-switch:not([hidden]){display:flex}.pf-deploy-switch button{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:6px;color:white;font-size:16px}.pf-deploy-switch button img{filter:invert(1)}.pf-deploy-switch button[aria-pressed=true]{background:white;color:#0b0d12}.pf-deploy-switch button[aria-pressed=true] img{filter:none}.pf-deploy-page :is(button,a):focus-visible{outline:2px solid var(--pf-y);outline-offset:4px}
.pf-deploy-scene,.pf-deploy-exit{position:relative;background:#f5f4f0;border:1px solid rgba(11,13,18,.16);border-radius:20px;padding:32px;color:#0b0d12;isolation:isolate}.pf-deploy-scene{height:520px}
.pf-deploy-cloud,.pf-deploy-environment{position:absolute;top:140px;width:43%;height:280px}.pf-deploy-cloud{left:4%;transition:opacity 650ms var(--pf-ease)}.pf-deploy-cloud>svg{width:100%;height:100%;fill:rgba(11,13,18,.03)}.pf-deploy-environment{right:4%;border:1.6px dashed rgba(11,13,18,.45);border-radius:24px}.pf-deploy-environment>svg{width:100%;height:100%}
.pf-deploy-zone-label{position:absolute;left:0;right:0;top:8px;text-align:center;font-size:18px}.pf-deploy-cloud .pf-deploy-zone-label{top:48px}.pf-deploy-zone-label small{display:inline-block;font:11px var(--pf-mono);border:1px solid rgba(11,13,18,.2);border-radius:4px;padding:3px 5px;margin-left:4px}.pf-deploy-zone-label span{display:block;font:12px var(--pf-mono);margin-top:4px;color:rgba(11,13,18,.62)}
.pf-deploy-team{position:absolute;left:50%;top:24px;transform:translateX(-50%);text-align:center;font-size:16px}.pf-deploy-team svg{width:110px;height:40px;margin-bottom:8px}
.pf-deploy-platform,.pf-deploy-db{position:absolute;left:26%;transform:translateX(-50%);z-index:2;transition:left 650ms var(--pf-ease),top 650ms var(--pf-ease)}.pf-deploy-platform{top:238px;width:190px;background:#fff;border:1px solid rgba(11,13,18,.25);border-radius:10px;padding:14px;box-shadow:var(--sx-shot);display:grid;grid-template-columns:24px 1fr;gap:6px 10px}.pf-deploy-platform strong{font-size:16px;font-weight:500;white-space:nowrap}.pf-deploy-platform span{grid-column:2;font-size:13px;color:rgba(11,13,18,.62)}.pf-deploy-db{top:334px;width:114px;text-align:center;font-size:14px}.pf-deploy-db svg{width:114px;height:84px}.pf-deploy-db span{display:block;white-space:nowrap;margin-top:4px}
.pf-deploy-scene[data-state=database] .pf-deploy-db,.pf-deploy-scene[data-state=hosted] :is(.pf-deploy-db,.pf-deploy-platform){left:74%}.pf-deploy-scene[data-state=hosted] .pf-deploy-cloud{opacity:.35}.pf-deploy-scene[data-state=hosted] .pf-deploy-cloud>svg{stroke-dasharray:6 8}
.pf-deploy-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}.pf-deploy-https{position:absolute;font:12px var(--pf-mono);background:#f5f4f0;padding:3px 6px;left:37%;top:128px;z-index:2}.pf-deploy-gate{position:absolute;left:54%;top:312px;transform:translateX(-50%);opacity:0;transition:opacity 250ms;z-index:2}.pf-deploy-gate svg{width:50px;height:40px;background:#f5f4f0}.pf-deploy-gate span{position:absolute;top:-22px;left:-42px;width:140px;text-align:center;font:11px var(--pf-mono);background:#f5f4f0}.pf-deploy-scene[data-state=database] .pf-deploy-gate{opacity:1}
.pf-deploy-note{position:absolute;font:500 27px/1.1 Caveat,cursive;display:flex;align-items:center;gap:10px;bottom:12px;right:5%;pointer-events:none}.pf-deploy-note svg{width:65px;height:55px;flex:none}.pf-deploy-scene .pf-deploy-note{opacity:0;transition:opacity 180ms}.pf-deploy-note--managed{right:auto;left:7%}.pf-deploy-scene[data-state=managed] .pf-deploy-note--managed,.pf-deploy-scene[data-state=database] .pf-deploy-note--database,.pf-deploy-scene[data-state=hosted] .pf-deploy-note--hosted{opacity:1;transition-delay:650ms}
.pf-deploy-responsibilities{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:24px}.pf-deploy-responsibilities span{font:13px var(--pf-mono);color:var(--pf-t3)}.pf-deploy-responsibilities p{font-size:18px;line-height:1.5;margin-top:8px;color:var(--pf-t2)}.pf-deploy-fallback{display:grid;gap:20px;margin-top:28px;font-size:18px}.pf-deploy-fallback p{margin-top:8px}.pf-deploy-enhanced .pf-deploy-fallback{display:none}
.pf-deploy-table{width:100%;table-layout:fixed;border-collapse:collapse;text-align:left;margin-top:32px;font-size:13px;line-height:1.5}.pf-deploy-table th,.pf-deploy-table td{padding:12px 16px 12px 0;vertical-align:top;border-bottom:1px solid var(--pf-line);overflow-wrap:anywhere}.pf-deploy-table thead th{font:12px/1.5 var(--pf-mono);color:var(--pf-t3);border-bottom-color:var(--pf-line-2)}.pf-deploy-table tbody th{font-weight:500;color:white}.pf-deploy-table td{color:var(--pf-t2)}
.pf-deploy-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.pf-deploy-card{display:flex;flex-direction:column;min-width:0;padding:24px;border:1px solid var(--pf-line);border-radius:14px;background:var(--pf-surface)}.pf-deploy-card>a{display:block;border-radius:8px}.pf-deploy-card>a>svg{width:100%;height:90px;background:#f5f4f0;border-radius:8px;margin-bottom:24px}.pf-deploy-card .pf-p{margin-top:16px;font-size:18px}.pf-deploy-facts{margin-top:auto;padding-top:24px;font-size:15px;line-height:1.6;color:var(--pf-t2)}.pf-deploy-facts div{padding:12px 0;border-top:1px solid var(--pf-line)}.pf-deploy-facts dt{font:12px var(--pf-mono);color:var(--pf-t3);margin-bottom:5px}
.pf-deploy-data{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.pf-deploy-data .pf-p{font-size:18px}.pf-deploy-exit{height:280px;overflow:hidden}.pf-deploy-exit>svg{position:absolute;left:20px;top:10px;width:340px;height:210px}.pf-deploy-box-label{position:absolute;left:72px;top:95px;font-size:18px}.pf-deploy-file{position:absolute;left:42%;top:70px;border:1px solid rgba(11,13,18,.25);border-radius:6px;padding:12px;background:#fff;font:12px var(--pf-mono);box-shadow:var(--sx-shot)}.pf-deploy-file--sql{top:125px}.pf-deploy-exit .pf-deploy-note{font-size:26px;right:20px;bottom:8px}.pf-deploy-security{display:inline-block;margin-top:24px;border:1px solid var(--pf-line);border-radius:8px;padding:12px 16px;font:12px var(--pf-mono);color:var(--pf-t2)}.pf-deploy-turn{margin-top:32px;font-size:28px;line-height:1.25;letter-spacing:-.02em;color:#fff;text-wrap:balance}.pf-deploy-close{border-radius:18px;border:1px solid var(--pf-line);background:var(--pf-surface)}.pf-deploy-close .pf-p{margin-top:16px;max-width:600px}
.pf-deploy-entrance{opacity:0;transform:translateY(12px)}.pf-deploy-entered{opacity:1;transform:none;transition:opacity 650ms ease,transform 650ms var(--pf-ease)}.pf-deploy-exit.pf-deploy-entered .pf-deploy-file{animation:pf-deploy-export 650ms var(--pf-ease) both}.pf-deploy-exit.pf-deploy-entered .pf-deploy-file--sql{animation-delay:180ms}@keyframes pf-deploy-export{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:none}}
@media(max-width:1023px){.pf-deploy-hero-grid{grid-template-columns:1fr 220px;gap:24px}.pf-deploy-hint{width:220px}.pf-deploy-card{padding:20px}.pf-deploy-data{gap:24px}}
@media(max-width:767px){.pf-deploy-hero-grid{grid-template-columns:1fr;gap:16px}.pf-deploy-hint{width:240px;margin:12px 0 0}.pf-deploy-switch{width:100%;gap:2px}.pf-deploy-switch button{flex:1;font-size:12px;padding:10px 4px;gap:5px}.pf-deploy-scene{height:800px;padding:20px}.pf-deploy-cloud,.pf-deploy-environment{width:90%;left:5%;right:auto;height:250px}.pf-deploy-cloud{top:140px}.pf-deploy-cloud .pf-deploy-zone-label{top:38px}.pf-deploy-environment{top:450px}.pf-deploy-platform{left:50%;top:226px;width:184px}.pf-deploy-db{left:50%;top:322px}.pf-deploy-scene[data-state=database] .pf-deploy-db,.pf-deploy-scene[data-state=hosted] .pf-deploy-db{left:50%;top:632px}.pf-deploy-scene[data-state=hosted] .pf-deploy-platform{left:50%;top:536px}.pf-deploy-gate{left:76%;top:431px}.pf-deploy-gate span{top:42px;left:-68px}.pf-deploy-note{font-size:24px;right:5%;bottom:6px;gap:4px}.pf-deploy-note--managed{left:7%;right:auto;bottom:6px}.pf-deploy-scene .pf-deploy-note svg{width:46px}.pf-deploy-responsibilities,.pf-deploy-cards,.pf-deploy-data{grid-template-columns:1fr;gap:24px}.pf-deploy-table :is(th,td){padding:10px 6px 10px 0;font-size:11px}.pf-deploy-table thead th{font-size:10px}.pf-deploy-exit{height:280px}.pf-deploy-file{left:40%;font-size:11px;padding:10px}.pf-deploy-exit .pf-deploy-note{right:10px;font-size:24px}}
@media(prefers-reduced-motion:reduce){.pf-deploy-page *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.pf-deploy-entrance{opacity:1;transform:none}}
/* Stretch zone outlines to their layout boxes so the data stays inside at every width. */
.pf-deploy-cloud,.pf-deploy-environment{height:310px}
.pf-deploy-static-mobile{display:none}
.pf-deploy-enhanced .pf-deploy-static-mobile{display:none}
.pf-deploy-card>a{display:flex;flex-direction:column;flex:1}
.pf-deploy-card>a:hover .pf-h3{text-decoration:underline;text-underline-offset:4px}
.pf-deploy-scene .pf-deploy-note svg{transform:translateY(-38px)}
@media(max-width:767px){.pf-deploy-cloud{height:300px}.pf-deploy-environment{top:470px;height:270px}.pf-deploy-platform{top:226px}.pf-deploy-db{top:318px}.pf-deploy-scene[data-state=database] .pf-deploy-db,.pf-deploy-scene[data-state=hosted] .pf-deploy-db{top:632px}.pf-deploy-scene[data-state=hosted] .pf-deploy-platform{top:536px}.pf-deploy-gate{top:451px}.pf-deploy-note--managed{top:414px;bottom:auto}.pf-deploy-static-mobile{display:block}.pf-deploy-lines:not([viewBox]){display:none}}
@media(max-width:767px){.pf-deploy-page:not(.pf-deploy-enhanced) .pf-deploy-lines:not(.pf-deploy-static-mobile){display:none}}

/* architect pass: labels clear of lines, data label beside the cylinder, hero buttons wrap */
@media(min-width:768px){
.pf-deploy-scene .pf-deploy-cloud .pf-deploy-zone-label:not(#d){left:2%;right:auto;top:4px;text-align:left}
.pf-deploy-scene .pf-deploy-environment .pf-deploy-zone-label:not(#d){left:5%;right:auto;top:12px;text-align:left}
.pf-deploy-scene .pf-deploy-environment .pf-deploy-zone-label small:not(#d){display:block;margin-top:2px}
.pf-deploy-scene .pf-deploy-db span:not(#d){position:absolute;left:100%;top:34px;margin:0 0 0 12px;text-align:left}
}
@media(max-width:767px){
.pf-deploy-hero .pf-ctas:not(#d){flex-wrap:wrap}
.pf-deploy-hero .pf-ctas .pf-btn:not(#d){flex:1 1 100%;justify-content:center}
.pf-deploy-scene .pf-deploy-db span:not(#d){position:absolute;left:100%;top:30px;margin:0 0 0 10px;text-align:left}
}
@media(max-width:767px){.pf-deploy-hero-grid:not(#d){grid-template-columns:minmax(0,1fr);grid-auto-flow:row}.pf-deploy-hero-grid>*:not(#d){grid-column:1}}
@media(max-width:767px){.pf-deploy-hero-grid>.pf-deploy-hint:not(#d){order:2;margin-top:24px}}
@media(max-width:767px){.pf-deploy-hero-grid>.pf-deploy-hero:not(#d){grid-row:1}.pf-deploy-hero-grid>.pf-deploy-hint:not(#d){grid-row:2}}
/* hero alignment: the shared .pf-hero-copy uses grid-area:copy; place both pieces explicitly */
.pf-deploy-hero-grid>.pf-deploy-hero:not(#d){grid-area:auto;grid-column:1;grid-row:1}
.pf-deploy-hero-grid>.pf-deploy-hint:not(#d){grid-column:2;grid-row:1;justify-self:end;align-self:center;margin-top:0}
@media(max-width:767px){.pf-deploy-hero-grid>.pf-deploy-hero:not(#d){grid-column:1;grid-row:1}.pf-deploy-hero-grid>.pf-deploy-hint:not(#d){grid-column:1;grid-row:2;justify-self:start;margin-top:24px}}