/* Product showcase: the screenshots carry the detail; the page provides context. */
.showcase { overflow: clip; background: radial-gradient(ellipse 70% 380px at 84% 260px, rgba(32, 115, 107, .16), transparent 72%); }
.showcase-hero { padding-block: clamp(64px, 9vw, 130px) 0; }
.showcase-kicker, .showcase-label { color: var(--mint); font: 600 .78rem/1.4 'Barlow', sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.showcase-hero h1 { max-width: 14ch; margin-top: 22px; font: 600 clamp(4.4rem, 10vw, 9.7rem)/.86 'Barlow Condensed', sans-serif; letter-spacing: -.035em; text-wrap: balance; overflow-wrap: anywhere; }
.showcase-hero h1 span { color: var(--mint); }
.showcase-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin: 40px 0 48px; }
.showcase-intro p { max-width: 52ch; color: #c6d0d2; font-size: clamp(1.12rem, 1.5vw, 1.3rem); }
.showcase-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 24px; }
.showcase-hero-visual { margin: 0; border: 1px solid #526c68; background: #11171c; box-shadow: 0 22px 75px #0008, 0 0 55px rgba(75, 205, 174, .13); }
.showcase-hero-visual img { width: 100%; height: auto; }
.showcase-hero-visual a, .showcase-image a { display: block; position: relative; }
.showcase-hero-visual a:focus-visible, .showcase-image a:focus-visible { outline-offset: 3px; }
.showcase-enlarge { position: absolute; right: 8px; bottom: 8px; padding: 5px 8px; background: rgba(11, 14, 17, .9); color: #fff; font-size: .78rem; line-height: 1.3; }
.showcase-strip { display: flex; gap: 12px 34px; flex-wrap: wrap; padding-block: 27px; color: #b6c2c5; font-size: .85rem; }
.showcase-strip span { white-space: nowrap; }
.showcase-strip span::before { content: '+'; color: var(--mint); margin-right: 9px; }
.showcase-section { padding-block: clamp(76px, 10vw, 140px); border-top: 1px solid var(--line); }
.showcase-section.tint { background: radial-gradient(ellipse 65% 440px at 85% 10%, rgba(27, 112, 102, .11), transparent 75%), #10171a; }
.showcase-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; align-items: end; margin-bottom: 48px; }
.showcase h2 { margin-top: 16px; font: 600 clamp(3.1rem, 5.7vw, 6rem)/.95 'Barlow Condensed', sans-serif; letter-spacing: -.02em; text-wrap: balance; overflow-wrap: anywhere; }
.showcase-heading > p, .showcase-copy > p:not(.showcase-label) { max-width: 55ch; color: #bac5c8; font-size: 1.08rem; }
.showcase-heading > p { justify-self: end; }
.showcase-feature { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.showcase-feature.reverse { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
.showcase-feature.reverse .showcase-copy { order: 2; }
.showcase-copy h2 { margin-bottom: 24px; }
.showcase-copy p + p { margin-top: 18px; }
.showcase-copy .text-link { margin-top: 25px; }
.showcase-image { min-width: 0; background: #0b0e11; border: 1px solid #354147; box-shadow: 0 12px 45px rgba(0, 0, 0, .22); transition: border-color .2s ease, box-shadow .2s ease; }
.showcase-image:hover, .showcase-image:focus-within { border-color: #56877e; box-shadow: 0 12px 45px rgba(0, 0, 0, .28), 0 0 32px rgba(77, 206, 178, .1); }
.showcase-image img { width: 100%; height: auto; }
.showcase-image.dtc-shot { justify-self: center; max-width: 525px; width: 100%; }
.showcase-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.showcase-pair article { min-width: 0; }
.showcase-pair h3 { margin: 20px 0 8px; font: 600 2rem/1 'Barlow Condensed', sans-serif; }
.showcase-pair p { color: #bac5c8; max-width: 55ch; }
.showcase-note { max-width: 72ch; margin-top: 34px; color: #bac5c8; font-size: .94rem; }
.showcase-pair + .text-link { margin-top: 32px; }
.showcase-inventory + .text-link { margin-top: 28px; }
.showcase-inventory { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }
.showcase-inventory article { padding: 28px 0; border-top: 1px solid #39464c; }
.showcase-inventory h3 { font: 600 1.8rem/1.1 'Barlow Condensed', sans-serif; }
.showcase-inventory p { margin-top: 10px; color: #b8c3c6; max-width: 56ch; }
.showcase-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.showcase-nav a { padding: 10px 14px; border: 1px solid #3a484c; color: #d5e1df; font-size: .88rem; }
.showcase-nav a:hover, .showcase-nav a:focus-visible { border-color: var(--mint); color: var(--mint); }
.showcase-end-section { padding-block: clamp(40px, 4vw, 56px); }
.showcase-end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px 40px; align-items: center; }
.showcase-end h2 { margin-top: 0; }
.showcase-end p:not(.showcase-label) { color: #bac5c8; margin-top: 12px; max-width: 62ch; }
.showcase-end-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; }
@media (prefers-reduced-motion: reduce) { .showcase-image { transition: none; } }
@media (max-width: 850px) {
  .showcase-intro, .showcase-heading, .showcase-feature, .showcase-feature.reverse { grid-template-columns: 1fr; }
  .showcase-actions { justify-content: flex-start; }
  .showcase-feature.reverse .showcase-copy { order: 0; }
  .showcase-heading > p { justify-self: start; }
}
@media (max-width: 600px) {
  .showcase-hero h1 { font-size: clamp(3.8rem, 14vw, 6rem); }
  .showcase-intro { gap: 25px; margin: 30px 0 35px; }
  .showcase-pair, .showcase-inventory { grid-template-columns: 1fr; }
  .showcase-end { display: block; }
  .showcase-end-actions { margin-top: 28px; }
}