/* /use-cases and /use-cases/<slug>: homepage feature rows + reading sections. Loads after pages.css. */
.uc-page .page-hero{padding-bottom:128px}
.uc-page .page-note code{font:11px ui-monospace,SFMono-Regular,Menlo,monospace;color:#d6d6d6;background:rgba(255,255,255,.1);padding:1px 5px;border-radius:5px}

/* Video cards: the demo is 16:9, so the card follows it instead of the homepage's square crop. */
.uc-card{aspect-ratio:auto;align-self:center}
.feat-list .feat>.uc-card{flex:1.25;max-width:680px}
.uc-card .demo-video{border-radius:0;aspect-ratio:16/9}
.uc-kicker{font-family:var(--body);font-size:13px;line-height:18px;color:#999;letter-spacing:0}
.feat-copy .uc-kicker{margin-top:-6px}
.story .feat-copy .uc-more-copy{display:grid;gap:12px}
.story .feat-copy .uc-more-copy p{font-size:15px;line-height:25px;color:#8a8a86}
.story .feat-copy code,.story .uc-read-body code,.story .uc-step-card code{font:13px ui-monospace,SFMono-Regular,Menlo,monospace;background:#efefeb;padding:2px 6px;border-radius:6px;color:#333}

/* Detail lead row sits right under the hero. */
.uc-lead{border-top:0}
.uc-lead .feat{border-bottom:0}
.uc-lead .feat{padding-top:96px}
.uc-detail .uc-lead .feat-copy h3{font-size:30px}

.uc-section{max-width:1200px;margin:0 auto;padding:96px 0}
.uc-section+.uc-section{padding-top:0}
.uc-heading{text-align:center;max-width:720px;margin:0 auto 48px}
.story .uc-heading .uc-kicker{display:block;margin-bottom:18px;color:#999;font-size:13px}
.story .uc-heading h2{font-family:var(--head);font-weight:400;font-size:40px;line-height:1.2;letter-spacing:-.04em;color:#1c1c1a}
.story .uc-heading>p:last-child:not(.uc-kicker){font-size:17px;line-height:27px;color:#777;max-width:600px;margin:24px auto 0}
.uc-pattern .uc-heading{max-width:880px}
.story .uc-pattern .uc-heading h2{font-size:36px}

/* Numbered trio (outcomes, index pattern). */
.uc-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.uc-trio-item{display:flex;flex-direction:column;gap:14px;padding-top:28px;border-top:1px solid #e6e5e0}
.uc-trio-n{font-family:var(--head);font-size:20px;line-height:1;color:#b9b8b2}
.story .uc-trio-item h3{font-family:var(--head);font-weight:400;font-size:24px;line-height:1.25;letter-spacing:-.04em;color:#1c1c1a}
.story .uc-trio-item p{font-size:16px;line-height:26px;color:#777}
.uc-outcomes{padding-top:0}

/* Reading sections. */
.uc-read{max-width:1200px;margin:0 auto;border-bottom:1px solid #e6e5e0}
.uc-read-row{display:grid;grid-template-columns:280px minmax(0,1fr);gap:48px;padding:56px 0;border-top:1px solid #e6e5e0}
.uc-read-meta{display:flex;align-items:baseline;gap:14px;padding-top:6px}
.uc-read-body{display:grid;gap:18px;max-width:680px}
.story .uc-read-body h3{font-family:var(--head);font-weight:400;font-size:30px;line-height:1.22;letter-spacing:-.04em;color:#1c1c1a;margin-bottom:4px}
.story .uc-read-body p{font-size:17px;line-height:27px;color:#777}
.uc-read-body ul{display:grid;gap:12px;list-style:none;padding:0;margin:6px 0 0}
.uc-read-body li{position:relative;padding-left:26px;font-size:16px;line-height:25px;color:#555}
.uc-read-body li:before{content:"";position:absolute;left:2px;top:8px;width:9px;height:9px;border-radius:50%;background:#eef6ea;box-shadow:inset 0 0 0 2px #4f8b43}

/* Steps and facts in the Heard card style. */
.uc-step-card{list-style:none;max-width:880px;margin:0 auto;padding:10px;display:grid;gap:8px;border-radius:24px;background:#f0f0ed}
.uc-step-card li{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:baseline;gap:12px;padding:22px 24px;border-radius:16px;background:#fff}
.uc-step-n{font-family:var(--head);font-size:24px;line-height:1;color:#b9b8b2}
.uc-step-card strong{display:block;font-size:17px;line-height:26px;font-weight:500;letter-spacing:-.02em;color:#222}
.story .uc-step-card p{font-size:15px;line-height:24px;color:#777;margin-top:4px}
.uc-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:880px;margin:12px auto 0}
.uc-facts>div{padding:22px 24px;border-radius:20px;background:#f0f0ed}
.uc-facts dt{font-size:12px;color:#999}
.uc-facts dd{margin:8px 0 0;font-size:17px;line-height:24px;font-weight:500;letter-spacing:-.02em;color:#222}
.story .uc-facts p{font-size:13px;line-height:20px;color:#888;margin-top:6px}

/* FAQ from the shell, headed in the display face. */
.uc-page .page-faq{padding-top:24px}
.uc-page .page-faq .section-kicker{color:#999;font-size:13px}
.story.page-story .page-faq h2{font-family:var(--head);font-weight:400;font-size:40px;line-height:1.2;letter-spacing:-.04em;color:#1c1c1a}

/* Related links: white rows inside a warm card. */
.uc-link-card{max-width:880px;margin:0 auto;padding:10px;display:grid;gap:8px;border-radius:24px;background:#f0f0ed}
.uc-link-card>a{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 24px;border-radius:16px;background:#fff;transition:background .25s var(--ease)}
.uc-link-card>a:hover{background:#fafaf8}
.uc-link-card>a>span:first-child{display:grid;gap:4px}
.uc-link-card strong{font-size:16px;line-height:24px;font-weight:500;letter-spacing:-.02em;color:#222}
.uc-link-card>a>span>span{font-size:14px;line-height:22px;color:#888}
.uc-link-arrow{color:#999;transition:transform .3s var(--ease),color .25s var(--ease)}
.uc-link-card>a:hover .uc-link-arrow{transform:translate(2px,-2px);color:#222}

/* More use cases. */
.uc-section.uc-others{border-top:1px solid #e6e5e0;padding-top:96px}
.uc-section.uc-related{padding-top:48px}
.uc-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 24px}
.uc-tile{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.uc-tile-media{display:block;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#e9e9e4;margin-bottom:8px;box-shadow:0 1px 0 rgba(0,0,0,.03),0 12px 32px rgba(26,24,20,.07)}
.uc-tile-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.uc-tile:hover .uc-tile-media img{transform:scale(1.03)}
.uc-tile-label{font-size:13px;color:#999}
.uc-tile strong{font-size:18px;line-height:26px;font-weight:500;letter-spacing:-.02em;color:#222;text-wrap:pretty}
.uc-tile-more{font-size:14px;font-weight:500;color:#222;display:inline-flex;gap:12px;transition:gap .3s var(--ease)}
.uc-tile:hover .uc-tile-more{gap:18px}
.uc-all{text-align:center;margin-top:56px}
.uc-all .feat-link{margin-top:0}

@media(max-width:1000px){
  .uc-read-row{grid-template-columns:200px minmax(0,1fr);gap:32px}
  .uc-trio{gap:28px}
  .uc-tiles{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:880px){
  .uc-section{padding:72px 0}
  .uc-trio{grid-template-columns:1fr;gap:0}
  .uc-trio-item{padding:24px 0 28px}
  .uc-read-row{grid-template-columns:1fr;gap:16px;padding:40px 0}
  .uc-read-meta{padding-top:0}
  .uc-lead .feat{padding-top:72px}
  .feat-list .feat>.uc-card{flex:none;max-width:none}
}
@media(max-width:720px){
  .uc-page .page-hero{padding-bottom:88px}
  .feat-list{padding:0}
  .uc-section{padding:56px 0}
  .story .uc-heading h2,.story .uc-pattern .uc-heading h2,.story.page-story .page-faq h2{font-size:28px}
  .story .uc-heading>p:last-child:not(.uc-kicker){font-size:15px;line-height:24px}
  .uc-detail .uc-lead .feat-copy h3{font-size:24px}
  .story .uc-read-body h3{font-size:24px}
  .story .uc-read-body p{font-size:15px;line-height:24px}
  .uc-read-body li{font-size:15px;line-height:23px}
  .uc-trio-n{font-family:var(--head);font-size:20px;line-height:1;color:#b9b8b2}
.story .uc-trio-item h3{font-size:22px}
  .story .uc-trio-item p{font-size:15px;line-height:24px}
  .uc-step-card{padding:8px;border-radius:20px}
  .uc-step-card li{grid-template-columns:40px minmax(0,1fr);padding:18px}
  .uc-step-n{font-size:20px}
  .uc-facts{grid-template-columns:1fr}
  .uc-link-card{padding:8px;border-radius:20px}
  .uc-link-card>a{padding:16px 18px}
  .uc-section.uc-others{padding-top:56px}
  .uc-section.uc-related{padding-top:24px}
  .uc-tiles{grid-template-columns:1fr;gap:12px}
  .uc-tile{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:16px;row-gap:4px;align-items:start;padding:12px 0;border-bottom:1px solid #e6e5e0}
  .uc-tile-media{grid-row:1/4;border-radius:12px;margin:0}
  .uc-tile strong{font-size:15px;line-height:22px}
  .uc-tile-label{font-size:12px}
  .uc-tile-more{font-size:13px}
  .uc-all{margin-top:32px}
}
@media(prefers-reduced-motion:reduce){.uc-tile-media img,.uc-tile-more,.uc-link-arrow{transition:none}}