/* The showroom. Dark, quiet, and it gets out of the way of eight different clinic marks. */

@font-face { font-family: 'Inter'; src: url('/fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #0f1011;
  color: #f2f2f3;
  font: 400 16px/1.55 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1060px; margin: 0 auto; padding: 56px 20px 72px; display: grid; gap: 40px; }

.hero { display: grid; gap: 14px; max-width: 720px; }
.eyebrow { font-weight: 600; font-size: 12.5px; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; color: #8d9096; }
.hero h1 { font-weight: 600; font-size: clamp(30px, 5vw, 46px); line-height: 1.08; letter-spacing: -0.025em; }
.lede { color: #c6c8cc; font-size: 17px; }
.note { color: #8d9096; font-size: 14px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

.card {
  background: #17181a; border: 1px solid #26282b; border-radius: 18px; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr;
}
.logoWrap {
  background: var(--tint, #f4f4f5); display: grid; place-items: center;
  padding: 22px 18px; min-height: 132px; border-bottom: 1px solid #26282b;
}
.logo { max-width: 78%; max-height: 92px; object-fit: contain; }
.body { padding: 16px 16px 18px; display: grid; gap: 7px; align-content: start; }
.name { font-weight: 600; font-size: 18px; line-height: 1.2; letter-spacing: -0.01em; }
.meta { font-size: 13.5px; color: #9ea1a7; }
.bits { font-size: 13px; color: #9a9da3; }

.links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.go, .ghost {
  font-weight: 600; font-size: 13.5px; line-height: 1; text-decoration: none; border-radius: 999px; padding: 11px 14px;
}
.go { background: var(--tone, #f2f2f3); color: #ffffff; }
.ghost { color: #c6c8cc; border: 1px solid #33363a; }

.how { display: grid; gap: 12px; max-width: 720px; }
.how h2 { font-weight: 600; font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; }
.how ul { display: grid; gap: 8px; padding-left: 18px; color: #c6c8cc; }
.how strong { color: #f2f2f3; }
.fine { font-size: 13px; color: #8d9096; }

.foot { border-top: 1px solid #26282b; padding-top: 22px; }
.credit { font-weight: 600; font-size: 12.5px; line-height: 1; letter-spacing: 0.05em; color: #a4a7ad; text-decoration: none; display: inline-block; padding: 7px 2px; min-height: 26px; }

@media (max-width: 520px) { .wrap { padding: 34px 16px 56px; gap: 30px; } }