.account-form-stub {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(8rem, 1fr) minmax(8rem, 1fr) auto;
  align-items: end;
  gap: 0.75rem;
  width: 100%;
  max-width: 1120px;
  min-width: 0;
  margin: 0;
  padding: 0.875rem 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
}
.account-form-stub h4 { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.account-form-stub p { margin: 0.25rem 0 0; color: var(--muted); line-height: 1.3; }
.account-form-stub__field { display: flex; min-width: 0; flex-direction: column; gap: 0.3rem; }
.account-form-stub label { font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.account-form-stub input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0.45rem 0.65rem;
  color: var(--subtle);
  background: var(--light-accent);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.8125rem;
}
.account-form-stub input:disabled { cursor: not-allowed; }
.account-form-stub__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.account-form-stub .button { padding: 0.62rem 0.78rem; font-size: 0.8125rem; white-space: nowrap; }
.button--secondary { background: var(--white); color: var(--accent); border: 1px solid var(--accent); }
.button--secondary:hover { background: var(--light-accent); }
.button:disabled { opacity: 0.55; cursor: not-allowed; }


.demo-dialog { width: min(960px, calc(100% - 2rem)); max-width: none; max-height: calc(100% - 2rem); overflow: auto; padding: 0; border: 0; border-radius: 8px; color: var(--ink); background: var(--white); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); }
@media (min-width: 800px) {
  #demo-dialog {
    --dialog-grid-width: min(var(--max-width), calc(100% - 2 * var(--gutter)));
    --dialog-grid-inset: calc((var(--dialog-grid-width) + var(--col-gap)) / 24);
    width: calc(var(--dialog-grid-width) - var(--dialog-grid-inset));
    margin-left: calc((100% - var(--dialog-grid-width)) / 2 + var(--dialog-grid-inset));
  }
}
.demo-dialog::backdrop { background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(3px); }
.demo-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.demo-dialog__header h4,
.demo-dialog__header h2 { margin: 0; font-size: 1rem; }
.demo-dialog__close { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font: inherit; font-size: 1.5rem; cursor: pointer; }
.demo-dialog__close:hover { color: var(--ink); background: var(--light-accent); }
.demo-dialog__player { aspect-ratio: 16 / 9; background: var(--black); }
.demo-dialog__player iframe { display: block; width: 100%; height: 100%; border: 0; }
.demo-dialog__playlist { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 1rem; text-align: center; text-decoration: none; }
.demo-dialog__playlist:hover { color: var(--white); }

.contact-dialog { width: min(720px, calc(100% - 2rem)); }
.contact-dialog .demo-dialog__header { position: sticky; top: 0; z-index: 1; background: var(--white); }
.contact-dialog__body { padding: 1.25rem; }
.contact-dialog__social { margin-bottom: 1.25rem; }
.contact-dialog .form[hidden], .contact__form .form[hidden] { display: none; }
.contact-dialog:has(.form-success:not([hidden])) .demo-dialog__header h4,
.contact-dialog__body:has(.form-success:not([hidden])) > .text-large { display: none; }
.contact-dialog:has(.form-success:not([hidden])) .demo-dialog__header { justify-content: flex-end; }
.contact-dialog .form-success { padding: 2rem 0; font-size: var(--h3); line-height: 1.4; text-align: center; }
.support-success { color: var(--brand-red); font-size: var(--h3); line-height: 1.4; }

.learn-more-cards { grid-column: 2 / 25; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 1.5rem; }
.learn-more-card { min-width: 0; padding: 1.5rem; background: var(--white); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06); }
.learn-more-card h2 { margin-bottom: 1rem; font-size: var(--h3); line-height: 1.2; }
.learn-more-card > p:not(.demo-promo__eyebrow) { color: var(--muted); font-size: var(--text-large); }
.demo-card .demo-promo__preview { margin: 1.5rem 0; }
.form.reminder-form { display: grid; grid-template-columns: minmax(0, 400px) auto; justify-content: start; align-items: start; gap: 0.5rem 0.75rem; }
.reminder-form > .field__label { grid-column: 1 / -1; }
.reminder-form .button { align-self: start; justify-self: start; min-height: 46px; }
.reminder-form .form-status--error, .reminder-form .field-error { color: var(--brand-gold); }
.contact-dialog .reminder-form .form-status--error,
.contact-dialog .reminder-form .field-error { color: var(--brand-red-dark); }
.reminder-form .reminder-consent, .reminder-form .form-status { grid-column: 1 / -1; margin: 0; }
.reminder-form[hidden] { display: none; }
.faq-card { display: flex; flex-direction: column; contain: size; }
.faq-card > p, .faq-card > h2 { flex-shrink: 0; }
.faq-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary { padding: 1rem 0; color: var(--ink); font-size: var(--text-large); font-weight: 600; cursor: pointer; }
.faq-list summary:hover { color: var(--accent-dark); }
.faq-list details p { padding: 0 0 1rem; color: var(--muted); font-size: var(--text-normal); line-height: 1.6; }
.faq-list a { color: var(--accent-dark); }
.learn-more-card .faq-more { margin-top: 1.5rem; font-size: var(--text-normal); }
.faq-contact { padding: 0; border: 0; background: none; color: var(--accent-dark); font: inherit; text-decoration: underline; cursor: pointer; }
.walkthrough-dialog { height: min(760px, calc(100dvh - 2rem)); overflow: hidden; }
.walkthrough-dialog[open] { display: flex; flex-direction: column; }
.walkthrough-dialog .demo-dialog__header { flex-shrink: 0; }
.walkthrough-dialog__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-type: y proximity; }
.walkthrough-dialog__body:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.walkthrough-slide { --trail-marker: 2.75rem; --trail-padding: 1.5rem; --trail-gap: 1rem; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 1.5rem; min-height: 100%; padding: var(--trail-padding); padding-left: calc(var(--trail-padding) + var(--trail-marker) + var(--trail-gap)); scroll-snap-align: start; }
.walkthrough-slide:not(:last-child)::before { content: ""; position: absolute; top: calc(var(--trail-padding) + var(--trail-marker)); bottom: calc(-1 * var(--trail-padding)); left: calc(var(--trail-padding) + var(--trail-marker) / 2 - 1px); width: 2px; background: repeating-linear-gradient(to bottom, var(--brand-gold) 0 8px, transparent 8px 16px); }
.walkthrough-slide__marker { position: absolute; top: var(--trail-padding); left: var(--trail-padding); display: grid; place-items: center; width: var(--trail-marker); height: var(--trail-marker); border: 3px solid var(--brand-gold); border-radius: 50%; background: var(--brand-gold); color: var(--ink); font-size: var(--text-large); font-weight: 700; line-height: 1; }
.walkthrough-slide__copy { align-self: start; }
.walkthrough-slide h3 { margin-bottom: 1rem; }
.walkthrough-slide p:not(.demo-promo__eyebrow) { color: var(--muted); font-size: var(--text-large); line-height: 1.6; }
.walkthrough-slide img { width: 100%; height: 400px; object-fit: contain; border-radius: 6px; }
@media (min-width: 800px) {
  .walkthrough-slide { grid-template-rows: auto auto 1fr; align-content: start; align-items: start; row-gap: 0; }
  .walkthrough-slide__copy { display: contents; }
  .walkthrough-slide__copy > .demo-promo__eyebrow { grid-column: 1; grid-row: 1; }
  .walkthrough-slide__copy > h3 { grid-column: 1; grid-row: 2; }
  .walkthrough-slide__copy > p:not(.demo-promo__eyebrow) { grid-column: 1; grid-row: 3; }
  .walkthrough-slide img { grid-column: 2; grid-row: 2 / 4; align-self: start; object-position: top; }
}
.walkthrough-scroll-hint { flex-shrink: 0; margin: 0; padding: 0.75rem 1rem; border-top: 1px solid var(--border); text-align: center; color: var(--muted); font-size: var(--text-normal); }
summary:focus-visible,
.faq-contact:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.why__text { grid-column: 6 / 20; }
.why__image { grid-column: 4 / 22; margin-top: 5.2vw; margin-bottom: 3.3vw; }

.audiences { padding-top: 1vw; padding-bottom: 3.3vw; row-gap: 3.5vw; align-items: center; }
.audience-card { background: var(--white); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06); }
.audience-card--individuals { grid-column: 7 / 22; padding: 4%; }
.audience-card--employers { grid-column: 3 / 15; padding: 4%; }

.connects__text { grid-column: 4 / 21; text-align: center; }
.connects__image { grid-column: 4 / 21; margin-top: 2.5vw; }

/* Demo videos */
.video-hero { padding-top: 3vw; padding-bottom: 6.6vw; }
.video-hero h3 { grid-column: 1 / 17; margin-bottom: 2.6rem; }
.video-hero__text { grid-column: 1 / 25; }

.gallery { padding: 6.8vw 6vw 4.1vw; }
.skip-to-videos { position: absolute; left: -9999px; }
.skip-to-videos:focus { position: static; }
.video-filter { margin-bottom: 40px; }
.video-filter a { font-family: var(--heading-font); font-weight: 500; text-decoration: none; }
.video-filter a:hover,
.video-filter a[aria-current="page"] { color: var(--accent); }

.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 61px 31px; }
.video-card { overflow: hidden; background: var(--white); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06); }
.video-card a { text-decoration: none; }
.video-card__thumb { aspect-ratio: 3 / 2; overflow: hidden; background: var(--light-accent); }
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-card__date { font-size: var(--text-small); margin: 1rem 1rem 0.5rem; }
.video-card h4 { line-height: 1.2; margin: 0 1rem 0.5rem; }
.video-card__desc { font-size: var(--text-small); margin: 0 1rem 1rem; }

.video-player { aspect-ratio: 16 / 9; position: relative; background: var(--black); }
.video-player iframe,
.video-player img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video-embed__pending {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.7);
  color: var(--white);
  font-size: var(--text-small);
}
.video-detail { max-width: 922px; margin: 80px auto 0; padding: 0 var(--gutter); box-sizing: content-box; }
.video-detail__date { margin-bottom: 10px; }
.video-detail h2 { margin-bottom: 19px; }

.pager { display: flex; justify-content: space-between; align-items: center; padding: 43px 6vw; margin-top: 127px; min-height: 130px; }
.pager a { display: flex; align-items: center; gap: 24px; text-decoration: none; font-family: var(--heading-font); font-size: var(--h3); font-weight: 500; letter-spacing: -0.02em; }
.pager__next { margin-left: auto; text-align: right; }
.pager svg { width: 22px; height: 44px; flex: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.related { padding: 76px var(--gutter) 43px; }
.related h2 { margin-bottom: 32px; }
.related .video-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.related .video-card { padding: 15px; }
.related .video-card__thumb { aspect-ratio: 4 / 3; }
.related .video-card__date,
.related .video-card__desc { display: none; }
.related .video-card h4 { font-family: var(--body-font); font-weight: 400; letter-spacing: 0; margin: 0; }

/* League + Contact */
.league-banner { padding: 7vw; }
.league-banner img { width: 100%; }
.league { padding-bottom: 5.3vw; }
.league h2 { grid-column: 1 / 12; grid-row: 1; align-self: start; }
.league__text { grid-column: 11 / 25; grid-row: 1; }
.league__form { grid-column: 7 / 19; grid-row: 2; background: var(--white); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06); padding: 6%; }

.contact { padding-top: 6.5vw; padding-bottom: 14.2vw; }
.contact__intro { grid-column: 1 / 11; }
.contact__intro .social-links { margin-top: 12px; }
.contact__form { grid-column: 14 / 25; padding: 1.5rem; background: var(--white); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06); }

/* Forms */
.form { display: flex; flex-direction: column; gap: 20px; }
.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form legend,
.form .field__label { display: block; font-size: 1rem; line-height: 1.75; padding: 0; }
.form .required { font-size: var(--text-small); margin-left: 0.2em; }
.form__name { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form__name label { display: block; font-size: 12px; line-height: 2.25; }
.form input[type="text"],
.form input[type="email"],
.form textarea {
  display: block;
  width: 100%;
  padding: 10px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid #d1d5db;
  border-radius: 8px;
}
.form input[type="text"],
.form input[type="email"] { height: 46px; }
.form textarea { height: 100px; resize: vertical; }
.form input:focus,
.form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.form .choice { display: flex; align-items: center; gap: 0.6rem; margin: 8px 0; font-size: var(--text-small); }
.form .choice input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.form .field-error { color: #c20000; font-size: var(--text-small); margin: 0.3rem 0 0; }
.form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-status:empty { display: none; }
.form-status--error { color: #c20000; }

/* Deferred responsive styles */
@media (max-width: 799px) {

  .learn-more-cards { grid-template-columns: 1fr; row-gap: 4rem; }
  .form.reminder-form { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
  .learn-more-card { padding: 1rem; }
  .walkthrough-slide { --trail-marker: 2rem; --trail-padding: 1rem; --trail-gap: 0.75rem; grid-template-columns: 1fr; gap: 1rem; }
  .walkthrough-slide img { height: 240px; }
  .account-form-stub { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; width: 100%; max-width: none; padding: 0.75rem; }
  .account-form-stub__intro,
  .account-form-stub__actions { grid-column: 1 / -1; }
  .account-form-stub__intro p { display: none; }
  .account-form-stub .button { flex: 1; min-width: 0; padding: 0.55rem 0.5rem; font-size: 0.75rem; white-space: normal; }
  .audience-card--individuals, .audience-card--employers { padding: 8%; }
  .gallery { padding: 12vw var(--gutter); }
  .video-grid, .related .video-grid { grid-template-columns: 1fr; }
  .related .video-grid { grid-template-columns: 1fr 1fr; }
  .pager { padding: 2rem var(--gutter); margin-top: 3rem; }
  .league-banner { padding: var(--gutter); }
  .form__name { grid-template-columns: 1fr; }
}

@media (min-width: 800px) and (max-width: 1100px) {
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .account-form-stub { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: none; }
  .account-form-stub__intro,
  .account-form-stub__actions { grid-column: 1 / -1; }
  .account-form-stub__intro p { display: none; }
}