:root{
  --premium-sans:"Manrope","Avenir Next","Segoe UI",Arial,sans-serif;
  --premium-serif:"Instrument Serif","Iowan Old Style","Times New Roman",serif;
}
body{font-family:var(--premium-sans)!important;font-size:16px;letter-spacing:-.008em}
main{max-width:1240px!important;padding-inline:28px!important}
.top{
  padding:14px 0 22px!important;
  border-color:color-mix(in srgb,var(--line,#ddd) 75%,transparent)!important;
}
.top strong{font-family:var(--premium-sans)!important;font-size:15px!important;font-weight:800!important;letter-spacing:-.02em}
.top span,.kicker,.label{font-family:var(--premium-sans)!important;font-size:10px!important;font-weight:800!important;letter-spacing:.16em!important}
.hero{
  padding:92px 0 76px!important;
  grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr)!important;
  gap:clamp(48px,7vw,96px)!important;
}
.hero h1{
  max-width:650px!important;
  font-family:var(--premium-serif)!important;
  font-size:clamp(58px,7vw,98px)!important;
  font-weight:400!important;
  letter-spacing:-.04em!important;
  line-height:.92!important;
}
.hero p{max-width:600px!important;font-size:18px!important;line-height:1.72!important}
.hero img{aspect-ratio:4/3!important;object-fit:cover!important;border-radius:22px!important;box-shadow:0 24px 65px rgba(0,0,0,.13)!important}
.meta{
  border-radius:0!important;
  border-width:1px 0!important;
  background:transparent!important;
  gap:0!important;
}
.meta div{background:transparent!important;padding:24px 24px 24px 0!important}
.meta div+div{padding-left:24px!important;border-left:1px solid var(--line,#ddd)!important}
section{margin:118px 0!important}
.title{max-width:780px!important}
.title h2,.section-heading h2{
  font-family:var(--premium-serif)!important;
  font-size:clamp(42px,5.2vw,70px)!important;
  font-weight:400!important;
  letter-spacing:-.032em!important;
  line-height:.98!important;
}
.title p,.section-heading .lead{font-size:17px!important;line-height:1.75!important}
.grid2{gap:1px!important;background:var(--line,#ddd)!important;border:1px solid var(--line,#ddd)!important}
.card{border:0!important;border-radius:0!important;padding:32px!important}
.card h3{font-size:18px!important;letter-spacing:-.02em!important}
.logo-board,.browser{border-radius:18px!important}
.palette{gap:8px!important}
.swatch{border-radius:12px!important}
.browser{box-shadow:0 18px 50px rgba(0,0,0,.1)!important}
.outcomes{gap:1px!important;background:var(--line,#ddd)!important;border:1px solid var(--line,#ddd)!important}
.outcomes .card strong{font-family:var(--premium-serif)!important;font-weight:400!important}
.commercial-lens{
  margin-inline:calc(50% - 50vw)!important;
  padding:112px max(28px,calc((100vw - 1240px)/2))!important;
  border:0!important;
}
.commercial-grid{gap:1px!important;background:#ded8cf!important;border:1px solid #ded8cf!important}
.commercial-grid article{border:0!important;border-radius:0!important;padding:28px!important}
.commercial-grid h3{font-family:var(--premium-sans)!important}
.commercial-cta{border-radius:12px!important;padding:24px 28px!important}
.cta{
  border-radius:18px!important;
  padding:58px!important;
}
.cta h2{font-family:var(--premium-serif)!important;font-weight:400!important;font-size:clamp(39px,4.8vw,62px)!important;line-height:.98!important}
.cta a,.button{border-radius:9px!important}
.obssidian-return{font-family:var(--premium-sans)!important;border-radius:9px!important}
@media(max-width:900px){
  .hero{grid-template-columns:1fr!important;padding-top:62px!important}
  .hero img{width:min(100%,760px)!important}
  .meta{grid-template-columns:1fr 1fr!important}
  .commercial-lens{margin-inline:-28px!important;padding-inline:28px!important}
}
@media(max-width:560px){
  main{padding-inline:18px!important}
  .hero{padding-top:48px!important;gap:34px!important}
  .hero h1{font-size:clamp(48px,15vw,66px)!important}
  .meta{grid-template-columns:1fr!important}
  .meta div,.meta div+div{padding:18px 0!important;border-left:0!important;border-top:1px solid var(--line,#ddd)!important}
  section{margin:82px 0!important}
  .grid2,.palette,.outcomes,.commercial-grid{grid-template-columns:1fr!important}
  .commercial-lens{margin-inline:-18px!important;padding:82px 18px!important}
  .cta{padding:34px 24px!important}
}

/* cleaner case navigation */

.top{display:none!important}
.case-breadcrumb{margin-top:22px!important}
.hero{padding-top:72px!important}