/* Scoped workflow carousel and FAQ disclosure. Existing card styles stay intact. */
.use-case-carousel{min-width:0}
.use-case-controls{display:flex;justify-content:flex-end;gap:8px;margin-bottom:12px}
.use-case-arrow{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--navy);font-size:26px;cursor:pointer}
.use-case-arrow:disabled{opacity:.4;cursor:default}
#use-cases .use-case-grid{display:grid;grid-template-columns:none;grid-template-rows:1fr;grid-auto-flow:column;grid-auto-columns:calc((100% - 24px)/2);gap:24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;align-items:stretch}
#use-cases .use-case-grid::-webkit-scrollbar{display:none}
#use-cases .use-case-card{display:flex;grid-row:auto;scroll-snap-align:start;scroll-margin:0}
#use-cases .use-case-card:nth-child(even){scroll-snap-align:none}
#faq .faq-layout,#faq .faq-list{min-width:0}
#remaining-faqs[hidden]{display:none!important}
#faq .faq-more{margin-top:20px}
@media(min-width:621px) and (max-width:900px){#use-cases .use-case-grid{grid-auto-columns:calc((100% - 16px)/1.65);gap:16px}#use-cases .use-case-card:nth-child(even){scroll-snap-align:start}}
@media(max-width:620px){#use-cases .use-case-grid{grid-auto-columns:100%;gap:16px}#use-cases .use-case-card:nth-child(even){scroll-snap-align:start}}
/* Match arrow surfaces and remove the extra desktop control row. */
.use-case-arrow{padding:0;line-height:1;flex:0 0 44px}
.use-case-arrow:disabled{opacity:1;color:var(--muted);cursor:default}
@media(min-width:901px){
  #use-cases .section-intro{margin-bottom:24px}
  #use-cases .use-case-carousel{position:relative}
  #use-cases .use-case-controls{position:absolute;right:0;top:-60px;margin:0}
}
@media(max-width:900px){#use-cases .section-intro{margin-bottom:20px}}

/* Center arrow shapes independently of the font baseline. */
.use-case-arrow .carousel-chevron{display:block;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateX(-1.5px) rotate(45deg)}
.use-case-arrow[data-direction="-1"] .carousel-chevron{transform:translateX(1.5px) rotate(-135deg)}