/* Product Spotlight extends the existing ERDI paper / ink / lime palette. */
.erdi-spotlight { background: #f5f5f0; color: #142b2b; }
.spotlight-shell { width: min(1360px, calc(100% - 96px)); margin-inline: auto; padding-block: 28px 100px; }
.spotlight-shell * { box-sizing: border-box; }
.spotlight-shell ::selection { background: #d5ed82; color: #142b2b; }
.spotlight-shell :is(a, summary):focus-visible { outline: 3px solid #385d37; outline-offset: 6px; }
.spotlight-shell h1, .spotlight-shell h2, .spotlight-shell h3 { font-weight: 550; letter-spacing: -.035em; line-height: 1.06; text-wrap: balance; }
.spotlight-shell p { color: #53625e; line-height: 1.65; }
.spotlight-shell a { text-underline-offset: .2em; }
.spotlight-intro { padding-block: 54px 70px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: end; }
.spotlight-intro h1 { font-size: clamp(48px, 5.5vw, 84px); margin: 0; max-width: 10ch; }
.spotlight-intro p { margin: 0 0 4px; max-width: 46ch; font-size: 19px; }
.spotlight-feature { display: grid; grid-template-columns: 1.16fr 1fr; gap: clamp(36px, 5vw, 84px); align-items: center; padding-block: 44px 60px; border-top: 1px solid #d8dfd9; }
.spotlight-feature__image { display: grid; place-items: center; background: #e8ece3; min-height: 440px; padding: 40px; }
.spotlight-feature__image img { display: block; width: 100%; height: auto; max-height: 470px; object-fit: contain; }
.spotlight-feature__copy h2 { font-size: clamp(30px, 3.3vw, 50px); margin: 0 0 28px; }
.spotlight-feature__copy h2 a { color: inherit; text-decoration: none; }
.spotlight-feature__copy p { max-width: 44ch; margin: 0 0 36px; font-size: 17px; }
.spotlight-link { display: inline-flex; gap: 24px; align-items: center; min-height: 44px; color: #142b2b; font-weight: 650; text-decoration: none; border-bottom: 1px solid currentColor; padding-block: 8px; }
.spotlight-link span { transition: transform .2s ease-out; }
.spotlight-link:hover span { transform: translateX(4px); }
.spotlight-subtle { display: block; width: fit-content; padding-block: 14px; font-size: 15px; color: #53625e; }
.spotlight-next { border-top: 1px solid #d8dfd9; margin-top: 38px; padding-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.spotlight-next h2 { font-size: clamp(32px, 3.3vw, 48px); margin: 0; max-width: 14ch; }
.spotlight-next p { margin-top: 0; max-width: 50ch; }
.spotlight-article-head { max-width: 980px; margin: 48px auto 54px; text-align: center; }
.spotlight-article-head h1 { font-size: clamp(42px, 5.3vw, 76px); margin: 0 auto 28px; max-width: 20ch; }
.spotlight-article-head p { max-width: 62ch; font-size: 19px; margin: 0 auto 22px; }
.spotlight-hero-image { margin: 0; background: #e8ece3; display: grid; place-items: center; padding: 36px 40px 24px; }
.spotlight-hero-image img { width: min(740px, 100%); height: auto; object-fit: contain; max-height: 520px; }
.spotlight-hero-image figcaption { font-size: 14px; color: #53625e; text-align: center; margin-top: 20px; }
.spotlight-content { max-width: 1080px; margin-inline: auto; }
.spotlight-content .erdi-knowledge-topics { display: none; }
.spotlight-content > section { margin-top: 80px; }
.spotlight-content h2 { font-size: clamp(30px, 3.6vw, 48px); margin: 0 0 24px; }
.spotlight-content h3 { font-size: 25px; margin: 0 0 16px; }
.spotlight-story { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; }
.spotlight-story p { margin: 0 0 20px; }
.spotlight-range { background: #142b2b; padding: 44px 48px; color: #f5f5f0; }
.spotlight-range h2 { color: #f5f5f0; font-size: 36px; }
.spotlight-range p { color: #e1e9dc; margin-bottom: 0; max-width: 72ch; }
.spotlight-specs { scroll-margin-top: 110px; }
.spotlight-specs dl { margin: 0; }
.spotlight-specs dl > div { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid #d8dfd9; }
.spotlight-specs dt { color: #53625e; }
.spotlight-specs dd { margin: 0; font-weight: 550; font-variant-numeric: tabular-nums; }
.spotlight-specs .spotlight-note { font-size: 15px; margin: 24px 0 0; max-width: 76ch; }
.spotlight-use { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; }
.spotlight-use article + article { border-top: 1px solid #d8dfd9; padding-top: 28px; margin-top: 28px; }
.spotlight-use p { margin-bottom: 0; }
.spotlight-cta { background: #d5ed82; padding: 48px; }
.spotlight-cta p { color: #30462b; max-width: 64ch; }
.spotlight-cta a { margin-top: 8px; }
@media (max-width: 900px) {
  .spotlight-shell { width: calc(100% - 48px); }
  .spotlight-intro { gap: 32px; }
  .spotlight-feature { gap: 32px; }
  .spotlight-feature__image { min-height: 320px; padding: 24px; }
  .spotlight-story, .spotlight-use { gap: 36px; }
}
@media (max-width: 600px) {
  .spotlight-shell { width: calc(100% - 36px); padding-top: 20px; padding-bottom: 64px; }
  .spotlight-intro { grid-template-columns: 1fr; padding: 28px 0 34px; gap: 24px; }
  .spotlight-intro h1 { max-width: none; font-size: 48px; }
  .spotlight-intro p { font-size: 17px; }
  .spotlight-feature { grid-template-columns: 1fr; padding-block: 28px 42px; gap: 28px; }
  .spotlight-feature__image { min-height: 260px; }
  .spotlight-feature__copy h2 { font-size: 34px; margin-bottom: 20px; }
  .spotlight-feature__copy p { margin-bottom: 20px; }
  .spotlight-next { grid-template-columns: 1fr; gap: 24px; margin-top: 14px; padding-top: 36px; }
  .spotlight-article-head { margin: 30px auto 34px; text-align: left; }
  .spotlight-article-head h1 { font-size: 43px; margin: 0 0 24px; }
  .spotlight-article-head p { font-size: 17px; }
  .spotlight-hero-image { padding: 24px 12px 20px; }
  .spotlight-hero-image figcaption { font-size: 12px; max-width: 30ch; }
  .spotlight-content > section { margin-top: 48px; }
  .spotlight-story, .spotlight-use { grid-template-columns: 1fr; gap: 12px; }
  .spotlight-range, .spotlight-cta { padding: 28px 24px; }
  .spotlight-range h2 { font-size: 29px; }
  .spotlight-specs dl > div { grid-template-columns: 1fr 1.12fr; gap: 16px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .spotlight-link span { transition: none; } }

/* The same real-mesh studio used on catalogue detail pages. */
.spotlight-feature__actions { display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; }
.spotlight-link--3d { background:#d5ed82; padding:12px 18px; border-bottom:0; }
.spotlight-studio { scroll-margin-top:92px; }
.spotlight-studio .erdi-model-studio__viewport { aspect-ratio:2.05; }
.spotlight-studio .erdi-model-studio__photo { background:#e8ece3; }
.spotlight-studio :is(.erdi-model-studio__photo,.erdi-model-studio__fallback) img { display:block; width:100%; height:100%; object-fit:contain; padding:32px; }
.spotlight-studio .erdi-model-studio__status { margin:0; color:var(--ms-text); font-size:14px; line-height:1.5; }
.spotlight-studio :is(.erdi-model-studio__caption,.erdi-model-studio__hint) { margin:0; color:var(--ms-muted); font-size:13px; line-height:1.6; max-width:85ch; }
.spotlight-studio .erdi-model-studio__hint { margin:12px 0 8px; }
.spotlight-studio :is(button,[tabindex]):focus-visible { outline:2px solid var(--ms-lime); outline-offset:4px; }
@media (max-width:900px) { .spotlight-studio .erdi-model-studio__viewport { aspect-ratio:1.4; } }
@media (max-width:600px) {
 .spotlight-studio .erdi-model-studio__viewport { aspect-ratio:1.08; }
 .spotlight-studio :is(.erdi-model-studio__photo,.erdi-model-studio__fallback) img { padding:16px; }
 .spotlight-studio .erdi-model-studio__closeup { grid-column:auto; }
 .spotlight-studio .erdi-model-studio__controls button { font-size:11px; }
}