/* Reference cloud cards: five 446px panels, 24px apart; desktop stack at 120px.
   Native excerpts replace the reference's images. No preview is clipped or scrolled. */
/* Cloud anchor margins own the header offset; avoid adding global 86px padding. */
html:has(body.route-cloud){scroll-padding-top:0}
.route-cloud .cloud-usecases{grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.route-cloud .cloud-usecase-nav{grid-column:span 4}
.route-cloud .cloud-usecase-panels{grid-column:span 8;min-width:0}
.route-cloud .cloud-usecase-anchor{display:block;height:0;scroll-margin-top:120px}
.route-cloud .cloud-usecase-panel{position:sticky;top:120px;min-height:446px;padding:24px;margin-bottom:24px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:24px;border-radius:4px;overflow:visible;isolation:isolate}
.route-cloud .cloud-usecase-panel:last-child{margin-bottom:0}
.route-cloud .cloud-usecase-copy{grid-column:span 3;min-width:0;min-height:398px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.route-cloud .cloud-usecase-copy h2:not(.live-app *){font-size:60px;line-height:1.1;margin:0;overflow-wrap:normal}
.route-cloud #cloud-chat-heading,.route-cloud #cloud-providers-heading{font-size:52px}
.route-cloud .cloud-usecase-panel .page-stage{grid-column:span 5;align-self:start;margin:84px -24px -24px 0;padding:0;min-width:0;overflow:visible;border-radius:4px}
.route-cloud .cloud-usecase-panel .live-app{width:100%;height:auto;max-height:none;overflow:visible}
.route-cloud .cloud-usecase-panel .df-content{height:auto;max-height:none;overflow:visible}
.route-cloud .cloud-usecase-panel .df-windowbar{display:none}
.route-cloud .cloud-usecase-panel .df-datebar{padding:12px 12px 6px;gap:8px}
.route-cloud .cloud-usecase-panel .df-datebar h3{font-size:23px;line-height:1.15;margin:0}
.route-cloud .cloud-usecase-panel .df-datebar p{font-size:10px;line-height:1.3;margin:3px 0 0}
.route-cloud .cloud-usecase-panel .df-agenda{padding:6px 12px 10px}
.route-cloud .cloud-usecase-panel .df-activity-title{font-size:12px;line-height:1.3;white-space:normal}
.route-cloud .cloud-usecase-panel .df-time,.route-cloud .cloud-usecase-panel .df-duration{font-size:10px}
.route-cloud .cloud-usecase-panel .df-endline{display:none}
.route-cloud .cloud-usecase-panel .df-demo-notice{font-size:10px!important;line-height:1.35;padding-top:8px;margin:0}
.route-cloud .cloud-usecase-panel .df-chat{min-height:0;padding:14px}
.route-cloud .cloud-usecase-panel .df-chat-heading>span{font-size:9px}
.route-cloud .cloud-usecase-panel .df-user-message{margin:12px 0;font-size:11px}
.route-cloud .cloud-usecase-panel .df-chat-response>p{font-size:11px;line-height:1.45;margin:8px 0}
.route-cloud .cloud-usecase-panel .df-citations strong{white-space:normal;font-size:11px;line-height:1.3}
.route-cloud .cloud-usecase-panel .df-citations small{font-size:10px}
.route-cloud .cloud-usecase-panel .df-citations button{min-height:44px}
.route-cloud .cloud-usecase-panel .df-recap{padding:12px}
.route-cloud .cloud-usecase-panel .df-chart{height:104px;margin-top:10px}
.route-cloud .cloud-usecase-panel .df-chartcard{padding:10px;margin-top:10px}
.route-cloud .cloud-usecase-panel .df-chart-heading h4{margin:0;font-size:11px}
.route-cloud .cloud-usecase-panel .df-settings{padding:18px}
.route-cloud .cloud-usecase-panel .df-provider-options{flex-wrap:wrap}
.route-cloud .cloud-usecase-panel .df-wiki{padding:18px}
.route-cloud .cloud-usecase-panel .df-wiki h3{font-size:21px;margin:0 0 12px}
.route-cloud .cloud-usecase-panel .df-wiki article{padding-top:12px}
.route-cloud .cloud-usecase-panel .df-wiki h4{font-size:21px;line-height:1.15;margin:10px 0}
.route-cloud .cloud-usecase-panel .df-wiki article p{font-size:12px;line-height:1.45;margin:0}
.route-cloud .cloud-usecase-panel .df-wiki>small{font-size:10px;line-height:1.4;margin-top:10px}
.route-cloud .cloud-usecase-panel .df-wiki article button{min-height:44px}
/* One intentional interaction permanently releases this stack for the page visit.
   Expanded source activity stays readable, including when it exceeds a viewport. */
.route-cloud .cloud-usecases.is-engaged .cloud-usecase-panel{position:relative;top:auto}
@media(max-width:1023px){
 .route-cloud .cloud-usecases{grid-template-columns:minmax(0,1fr);gap:32px}
 .route-cloud .cloud-usecase-nav{position:static;grid-column:auto}
 .route-cloud .cloud-usecase-panels{grid-column:auto}
 .route-cloud .cloud-usecase-nav nav{flex-direction:column;align-items:start;gap:20px}
 .route-cloud .cloud-usecase-nav a{font-size:24px;line-height:1.35;padding:0;min-height:0;border:0;border-radius:0;letter-spacing:-.5px}
 .route-cloud .cloud-usecase-panel{position:relative;top:auto;display:flex;flex-direction:column;min-height:0;gap:24px;padding:24px}
 .route-cloud .cloud-usecase-panel>.cloud-usecase-copy{padding:0;min-height:0;gap:20px}
 .route-cloud .cloud-usecase-panel .page-stage{margin:0;width:100%}
 .route-cloud .cloud-usecase-panel h2:not(.live-app *){font-size:52px;line-height:1.1;margin:0}
 .route-cloud .cloud-usecase-panel>.cloud-usecase-copy>p{font-size:20px;line-height:1.4}
 .route-cloud .cloud-usecase-panel .df-app button{min-height:44px}
 .route-cloud .cloud-usecase-panel .df-recap-heading{flex-wrap:wrap}
 .route-cloud .cloud-usecase-anchor{scroll-margin-top:84px}
}
@media(prefers-reduced-motion:reduce){
 .route-cloud .cloud-usecase-panel{position:relative;top:auto}
 .route-cloud .cloud-usecase-nav a{transition:none}
}
/* Fresh post-Inter reference check: the card surface is #ebebeb.
   Match the desktop rail's cap-trimmed text rhythm, retaining a generous
   pointer target around each label. Mobile links keep their existing targets. */
.route-cloud .cloud-usecase-panel{background:#ebebeb}
@media(min-width:1024px){
 .route-cloud .cloud-usecase-nav>.desktop-blue-label{margin-bottom:24px}
 .route-cloud .cloud-usecase-nav nav{gap:32px}
 .route-cloud .cloud-usecase-nav a{position:relative;line-height:1.2;letter-spacing:-.02em}
 .route-cloud .cloud-usecase-nav a::after{content:"";position:absolute;inset:-13px 0}
 @supports(text-box:trim-both cap alphabetic){
  .route-cloud .cloud-usecase-nav>.desktop-blue-label,
  .route-cloud .cloud-usecase-nav a{text-box:trim-both cap alphabetic}
 }
}
/* A direct flex text node cannot cap-trim itself. Keep this label in an
   inline formatting context, as the reference's trimmed inner span does. */
@media(min-width:1024px){
 @supports(text-box:trim-both cap alphabetic){
  .route-cloud .cloud-usecase-nav>.desktop-blue-label{display:block}
  .route-cloud .cloud-usecase-nav>.desktop-blue-label::before{display:inline-block;width:8px;height:8px;margin-right:8px;vertical-align:baseline}
 }
}