/* ClearOK use-case cards rebuilt from the canonical ClearOK landing artifacts. */
.clear-usecases{align-items:start}
.clear-usecase-card{overflow:hidden;border:1px solid #e5ebf3;border-radius:20px;background:#fff;min-width:0;display:flex;flex-direction:column;box-shadow:0 10px 28px rgba(7,21,47,.035)}
.clear-usecase-image{position:relative;aspect-ratio:16/9;flex:none;overflow:hidden;background:#edf3f7}
.clear-usecase-image img{width:100%;height:100%;object-fit:cover}
.clear-usecase-image::after{content:'';position:absolute;inset:auto 0 0;height:42px;background:linear-gradient(transparent,rgba(0,0,0,.12));pointer-events:none}
.clear-usecase-badge{position:absolute;z-index:2;left:14px;bottom:12px;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.96);display:grid;place-items:center;border:1px solid rgba(224,232,242,.92);box-shadow:0 4px 12px rgba(5,24,52,.14);backdrop-filter:blur(8px)}
.clear-usecase-badge svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.clear-usecase-badge.badge-photo{color:#176ef2}
.clear-usecase-badge.badge-freelance{color:#0a9563}
.clear-usecase-badge.badge-discord{color:#5865f2}
.clear-usecase-badge.badge-discord svg{fill:currentColor;stroke:none}
.clear-usecase-copy{padding:14px 16px 16px}
.clear-usecase-copy h4{margin:0 0 6px;font-size:clamp(.95rem,1.1vw,1.08rem);line-height:1.16;font-weight:600;letter-spacing:-.018em;color:#07152f}
.clear-usecase-copy p{margin:0;color:#66768b;font-size:clamp(.8rem,.9vw,.9rem);line-height:1.4}

/* Selected work is a chapter marker, not a second hero. */
.work-chapter{padding:56px 0 38px}
.work-chapter .eyebrow{margin:0}

/* Keep the About thesis prominent without overpowering the brand field beneath it. */
.about-hero h1{font-size:clamp(3.05rem,4.45vw,4.65rem);max-width:800px}

@media(min-width:641px) and (max-width:1050px){
  .clear-usecase-card{border-radius:14px}
  .clear-usecase-badge{width:32px;height:32px;border-radius:9px}
  .clear-usecase-badge svg{width:17px;height:17px}
  .clear-usecase-copy{padding:12px 13px 14px}
}
@media(max-width:1150px){.about-hero h1{font-size:clamp(2.95rem,4.35vw,4.15rem);max-width:720px}}
@media(max-width:900px){
  .work-chapter{padding:46px 0 32px}
  .clear-usecase-card{width:min(100%,440px);border-radius:22px}
  .about-hero h1{font-size:clamp(2.75rem,6.2vw,3.75rem);max-width:620px}
}
@media(max-width:640px){
  .work-chapter{padding:38px 0 26px}
  .clear-usecase-card{border-radius:18px}
  .clear-usecase-copy{padding:13px 15px 15px}
  .about-hero h1{font-size:clamp(2.45rem,9.2vw,3.05rem)}
}