/* Preview addition: scoped to the two webinar placements. */
.webinar-feature, .webinar-resource { scroll-margin-top: 104px; }
.visual-refinement .webinar-feature {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin-top: 28px;
  padding: 28px;
  border: 1px solid #385969;
  border-radius: 10px;
  background: #0c2638;
}
.webinar-feature-art { display: block; width: 144px; height: 144px; }
body.visual-refinement .section .webinar-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  color: #fff200;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .075em;
  line-height: 1.5;
  text-transform: uppercase;
}
.webinar-eyebrow .webinar-duration { color: #c0d5df; }
body.visual-refinement .section .webinar-feature h3 {
  max-width: 29ch;
  margin: 0 0 12px;
  color: #f5f9fb;
  font-size: clamp(1.5rem, 2.1vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
}
body.visual-refinement .section .webinar-description {
  max-width: 48ch;
  margin: 0;
  color: #c7d9e3;
  font-size: 1.125rem;
  line-height: 1.5;
}
body.visual-refinement .section .webinar-speakers {
  margin: 8px 0 0;
  color: #a9c6d4;
  font-size: 1rem;
  line-height: 1.5;
}
.webinar-feature-action { display: grid; justify-items: center; gap: 10px; }
.visual-refinement .webinar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 50px;
  padding: 12px 22px;
  border: 1px solid #fff200;
  border-radius: 5px;
  color: #071321;
  background: #fff200;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.visual-refinement .webinar-button:hover { border-color: #fff76a; background: #fff76a; }
body.visual-refinement .section .webinar-access-note {
  margin: 0;
  color: #bdd0db;
  font-size: .875rem;
  line-height: 1.5;
}
.visual-refinement .webinar-resource {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-top: 24px;
  padding: 24px;
  border: 1px solid #385969;
  border-radius: 8px;
  background: #0b2233;
}
.webinar-resource-art { display: block; width: 80px; height: 80px; }
body.visual-refinement .section .webinar-resource-label {
  margin: 0 0 6px;
  color: #a6d5db;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.5;
  text-transform: uppercase;
}
body.visual-refinement .section .webinar-resource h3 {
  max-width: 40ch;
  margin: 0 0 8px;
  color: #f5f9fb;
  font-size: 1.375rem;
  line-height: 1.35;
  letter-spacing: -.015em;
}
body.visual-refinement .section .webinar-resource-note {
  margin: 0;
  color: #b9d0dd;
  font-size: 1rem;
  line-height: 1.5;
}
.visual-refinement .webinar-resource-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  color: #b5e9e6;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 5px;
  white-space: nowrap;
}
.visual-refinement .webinar-resource-link:hover { color: #f5f9fb; }
.webinar-feature a:focus-visible,
.webinar-resource a:focus-visible { outline: 3px solid #fff200; outline-offset: 5px; }
@media (max-width: 1050px) {
  .visual-refinement .webinar-feature { grid-template-columns: 112px minmax(0, 1fr); gap: 24px; }
  .webinar-feature-art { width: 112px; height: 112px; }
  .webinar-feature-action { grid-column: 2; justify-items: start; }
  .visual-refinement .webinar-resource { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
  .webinar-resource-art { width: 64px; height: 64px; }
  .webinar-resource-link { grid-column: 2; justify-self: start; }
}
@media (max-width: 600px) {
  .visual-refinement .webinar-feature { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 24px; padding: 24px; }
  .webinar-feature-art { width: 80px; height: 80px; }
  .webinar-feature-action { grid-column: 1; justify-items: start; }
  body.visual-refinement .section .webinar-feature h3 { max-width: 100%; font-size: 1.5rem; }
  body.visual-refinement .section .webinar-description { font-size: 1.0625rem; }
  .visual-refinement .webinar-resource { align-items: start; padding: 20px; }
  body.visual-refinement .section .webinar-resource h3 { font-size: 1.25rem; }
  .webinar-resource-art { margin-top: 2px; }
  .visual-refinement .webinar-resource-link { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  .visual-refinement .webinar-resource { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .visual-refinement .webinar-button { transition: none; }
}