/* Event layout and form; common header/footer and brand primitives use /style.css. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0px; background: var(--site-bg); color: var(--site-text); font-family: var(--site-font-body); line-height: 1.6; position: relative; }
body::before { content: ""; position: fixed; inset: 0px; background: linear-gradient(rgba(2, 6, 23, 0.35), rgba(2, 6, 23, 0.8)), url("/images/gradient-back-square-08.png") 0px 0px / 100% 100% no-repeat; opacity: 0.5; pointer-events: none; z-index: -1; }
a { color: inherit; text-decoration: none; }
.eroots-events main a:hover { text-decoration: underline; }
button { font: inherit; }
img { max-width: 100%; height: auto; }
:where(.eroots-events main) :is(h1, h2, h3, p, figure) { margin: 0px; }
p { color: var(--site-text-muted); }
.wrap { width: min(calc(var(--site-container-width) - 4rem), calc(100% - 4rem)); margin-inline: auto; }
.skip { position: fixed; top: -100px; left: 10px; background: var(--site-accent); color: var(--site-bg); padding: 12px; z-index: 10; }
.skip:focus { top: 10px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--site-accent); outline-offset: 5px; }
.hero { min-height: auto; text-align: left; display: grid; grid-template-columns: minmax(0px, 1fr) 365px; gap: 48px; padding-block: 44px 65px; align-items: start; }
.breadcrumb { font-size: 0.85rem; color: var(--site-text-muted); display: inline-block; margin-bottom: 40px; }
.eyebrow { display: block; margin-bottom: 19px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--site-accent); display: inline-block; margin-right: 7px; box-shadow: rgba(0, 229, 212, 0.45) 0px 0px 14px; }
.lead { max-width: 720px; margin-top: 25px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin-top: 30px; }
.hero-actions > span { font-size: 0.85rem; color: var(--site-text-muted); }
.hero-note { font-size: 0.82rem; margin: 17px 0px 30px; }
.map-preview img { display: block; width: 100%; }
figcaption { font-size: 0.73rem; color: var(--site-text-muted); padding: 12px 17px; }
.registration-card { margin-top: 63px; scroll-margin-top: 30px; }
.registration-card > p { margin-top: 15px; font-size: 0.92rem; }
.event-details { padding-block: 13px 15px; margin: 15px 0px; border-block: 1px solid var(--site-frame-border); display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.event-details div { padding: 7px 0px; }
.event-details dt { font-size: 0.73rem; color: var(--site-text-muted); }
.event-details dd { margin: 2px 0px 0px; font-size: 0.82rem; font-weight: 700; }
.event-details small { display: block; font-weight: 400; font-size: 0.75rem; }
.registration-card .site-button { width: 100%; min-width: 0px; }
.fine { font-size: 0.8rem; line-height: 1.7; }
.privacy { font-size: 0.7rem; line-height: 1.7; }
.privacy a { text-decoration: underline; }
.section { padding-block: 5.5rem; }
.section-intro { max-width: 850px; }
.section-intro p { margin-top: 20px; font-size: 1.08rem; line-height: 1.7; }
.three-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 24px; margin-top: 38px; }
.number { display: block; color: var(--site-accent); font-size: 0.82rem; margin-bottom: 18px; }
.insight p { margin-top: 15px; font-size: 0.97rem; }
.showcase-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.showcase p { margin-top: 22px; }
.showcase img { display: block; width: 100%; }
.text-link { display: inline-block; margin-top: 25px; color: var(--site-accent); font-weight: 700; }
.agenda-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 65px; }
.agenda-grid > div > p { margin-top: 24px; }
.agenda { list-style: none; padding: 0px; margin: 0px; }
.agenda li { display: flex; gap: 28px; border-top: 1px solid var(--site-frame-border); padding: 24px 0px; }
.minutes { color: var(--site-accent); font-size: 0.85rem; white-space: nowrap; width: 55px; flex-shrink: 0; }
.agenda p { margin-top: 10px; font-size: 0.93rem; }
.speaker-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 65px; border-top: 1px solid var(--site-frame-border); }
.speaker-card { display: flex; gap: 25px; }
.speaker-card img { width: 110px; height: 110px; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
.speaker-role { color: var(--site-accent); font-size: 0.85rem; margin: 12px 0px; }
.speaker-card p:last-child { font-size: 0.92rem; }
.audience ul { list-style: none; padding: 0px; margin: 20px 0px 0px; }
.audience li { padding: 8px 0px; border-bottom: 1px solid var(--site-frame-border); color: var(--site-text-muted); }
.faq { max-width: 900px; border-top: 1px solid var(--site-frame-border); }
.faq h2 { margin-bottom: 30px; }
.faq details { padding: 1.1rem 1.25rem; margin-top: 0.75rem; border-radius: var(--site-frame-radius); }
summary { font-size: 1rem; font-weight: 700; cursor: pointer; }
details p { margin-top: 16px; font-size: 0.94rem; }
.closing { padding: 60px; margin-block: 20px 80px; border-radius: var(--site-feature-radius); text-align: center; }
.closing .site-button { margin-top: 28px; }
.closing p { font-size: 0.85rem; margin-top: 18px; }
.index-hero { padding-block: 90px 20px; }
.index-hero h1 { max-width: 900px; }
.event-card { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; padding: 0px; margin-top: 32px; }
.event-image { display: flex; overflow: hidden; }
.event-image img { width: 100%; height: 100%; object-fit: cover; }
.event-card-copy { padding: 38px; }
.event-card p { margin-top: 20px; }
.event-date { font-size: 0.87rem; color: var(--site-text); }
.event-card .site-button { margin-top: 25px; }
.webinar-form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.webinar-field:nth-child(n+3) { grid-column: 1 / -1; }
.webinar-field label { display: block; font-size: 0.8rem; margin-bottom: 6px; color: var(--site-text); }
.webinar-field label span { color: var(--site-accent); }
.webinar-field input { display: block; width: 100%; min-width: 0px; background: var(--site-frame-bg); color: var(--site-text); border: 1px solid var(--site-frame-border); border-radius: var(--site-frame-radius); padding: 11px 10px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 0.9rem; line-height: 1.3; }
.webinar-field input:focus { outline: 2px solid var(--site-accent); outline-offset: 1px; }
.webinar-form .privacy { margin: 16px 0px; }
.webinar-form .fine { margin-top: 12px; }
.registration-fallback { display: block; font-size: 0.75rem; color: var(--site-accent); margin-top: 14px; text-decoration: underline; }
.webinar-form.is-submitting button { opacity: 0.7; cursor: wait; }
@media (max-width: 1000px) {
  .hero { gap: 30px; grid-template-columns: minmax(0px, 1fr) 330px; }
  .showcase-grid, .agenda-grid, .speaker-grid { gap: 35px; }
  .speaker-card { display: block; }
  .speaker-card img { margin-bottom: 20px; }
  
}
@media (max-width: 900px) {
  .hero { display: block; }
  .registration-card { margin-top: 30px; }
}
@media (max-width: 768px) {
  .wrap { width: calc(100% - 2.4rem); }
  
  
  
  .hero { padding-block: 25px 20px; }
  .breadcrumb { margin-bottom: 28px; }
  .registration-card { padding: 25px; }
  .three-grid, .showcase-grid, .agenda-grid, .speaker-grid, .event-card { grid-template-columns: 1fr; }
  .section { padding-block: 3.5rem; }
  .showcase-grid { gap: 30px; }
  .speaker-card { display: flex; gap: 20px; }
  .speaker-card img { width: 75px; height: 75px; }
  .speaker-grid { gap: 40px; }
  .closing { padding: 36px 22px; margin-bottom: 45px; }
  .index-hero { padding-block: 55px 0px; }
  .event-card-copy { padding: 27px; }
  .event-image img { aspect-ratio: 16 / 9; }
  
  
  .agenda li { gap: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* The actual home header/footer share /style.css; event overrides stay in main. */
.eroots-events header { position: relative; z-index: 1000; }
.eroots-events main, .eroots-events #site-footer { position: relative; z-index: 1; }
body.home-palette-dark.eroots-events main :is(h2, h3) {
  background: none !important;
  color: var(--site-text) !important;
  -webkit-text-fill-color: var(--site-text) !important;
  letter-spacing: normal;
}