/* Webinar registration page. Colors, type and spacing come from tokens.css (the MHA brand kit). */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; -webkit-font-smoothing: antialiased; }
h1, h2, p, ul { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Two columns: the content, and the sign-up card that stays put while the content scrolls. */
.page {
  --top-height: 96px;
  --fold-buffer: var(--mh-space-5); /* gap above and below the sign-up card, and under the visual */
  max-width: var(--mh-container);
  margin: 0 auto;
  padding: 0 var(--mh-space-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-areas: "top signup" "hero signup" "event signup" "body signup";
  column-gap: var(--mh-space-7);
}
.top    { grid-area: top; }
.hero   { grid-area: hero; }
.event  { grid-area: event; }
.body   { grid-area: body; }
.signup { grid-area: signup; border-left: var(--mh-line-width) solid var(--mh-line); padding-left: var(--mh-space-7); }

.top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mh-space-4);
  height: var(--top-height);
  border-bottom: var(--mh-line-width) solid var(--mh-line);
}
.logo { width: 170px; }
.badge { color: var(--mh-accent); border: var(--mh-line-width) solid var(--mh-accent); border-radius: var(--mh-radius-pill); padding: var(--mh-space-2) var(--mh-space-4); white-space: nowrap; }

.hero { padding: var(--mh-space-7) 0 var(--fold-buffer); }
.hero h1 { font-size: var(--mh-font-size-heading-6); line-height: var(--mh-line-height-heading-small); }
.hero h1 .mh-highlight { font-size: 0.8em; }
.when { color: var(--mh-accent); margin-top: var(--mh-space-5); }
.lede { font-size: var(--mh-font-size-paragraph-l); margin-top: var(--mh-space-4); max-width: 46em; }

.visual-fit { margin-top: var(--mh-space-6); }
.visual {
  aspect-ratio: 16 / 9;
  border: var(--mh-line-width) solid var(--mh-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--mh-color-navy-swatch-5);
}

.event { padding: var(--mh-space-5) 0 var(--mh-space-6); }
.countdown { border: var(--mh-line-width) solid var(--mh-line); }
.countdown-label { text-align: center; padding: var(--mh-space-3); color: var(--mh-accent); border-bottom: var(--mh-line-width) solid var(--mh-line); }
.countdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.countdown-grid > div { display: flex; flex-direction: column; align-items: center; gap: var(--mh-space-1); padding: var(--mh-space-4) var(--mh-space-2); }
.countdown-grid > div + div { border-left: var(--mh-line-width) solid var(--mh-line); }
.num { font-size: var(--mh-font-size-heading-5); font-weight: var(--mh-font-weight-heading); line-height: 1; font-variant-numeric: tabular-nums; }
.strip { margin-top: var(--mh-space-4); color: var(--mh-color-navy-swatch-5); }

/* Content modules: framed by thin lines, never filled. */
.body { padding-bottom: var(--mh-space-9); display: grid; gap: var(--mh-space-6); }
.module { border: var(--mh-line-width) solid var(--mh-line); padding: var(--mh-space-6); }
.plain { padding: var(--mh-space-4) 0; }
.h-module { font-size: var(--mh-font-size-heading-7); line-height: var(--mh-line-height-heading-small); margin-bottom: var(--mh-space-4); }
.body p { font-size: var(--mh-font-size-paragraph-l); }
.body p + p { margin-top: var(--mh-space-4); }
.body ul { list-style: none; padding: 0; margin-top: var(--mh-space-4); display: grid; gap: var(--mh-space-4); font-size: var(--mh-font-size-paragraph-l); }
.body li { position: relative; padding-left: var(--mh-space-7); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px; border-radius: var(--mh-radius-pill);
  border: var(--mh-line-width) solid var(--mh-accent);
}
.checks li::after {
  content: ""; position: absolute; left: 9px; top: 7px;
  width: 7px; height: 12px; transform: rotate(45deg);
  border-right: 1.5px solid var(--mh-accent); border-bottom: 1.5px solid var(--mh-accent);
}
.dots li { padding-left: var(--mh-space-5); }
.dots li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: var(--mh-space-3); border-top: var(--mh-line-width) solid var(--mh-accent); }
.closing { margin-top: var(--mh-space-5); color: var(--mh-accent); }
.mobile-cta { display: none; }

/* Sign-up card */
.card { position: sticky; top: var(--fold-buffer); margin: var(--fold-buffer) 0; padding: var(--mh-space-6); }
.card-title { font-size: var(--mh-font-size-heading-7); line-height: var(--mh-line-height-heading-large); }
.card-sub { margin-top: var(--mh-space-2); font-size: var(--mh-font-size-paragraph-s); }
.card label { display: block; margin-top: var(--mh-space-4); font-size: var(--mh-font-size-paragraph-s); font-weight: var(--mh-font-weight-label); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mh-space-3); }
.card input[type="text"], .card input[type="email"], .card input[type="tel"] {
  display: block; width: 100%; margin-top: var(--mh-space-2);
  padding: var(--mh-space-3);
  font: inherit; color: var(--mh-color-deep-black);
  background: var(--mh-color-cream-swatch-5);
  border: var(--mh-line-width) solid var(--mh-color-khaki-swatch-2);
  border-radius: var(--mh-radius-none);
}
.card input::placeholder { color: var(--mh-color-deep-black-swatch-4); }
.card input:focus-visible { outline: 2px solid var(--mh-color-navy); outline-offset: 1px; }
.card input.invalid { border-color: var(--mh-color-deep-black); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.card label.consent { display: flex; gap: var(--mh-space-2); align-items: flex-start; font-size: var(--mh-font-size-caption-m); font-weight: var(--mh-font-weight-body); color: var(--mh-color-deep-black-swatch-2); }
.consent input { margin: 1px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--mh-color-navy); }
.consent a { color: var(--mh-accent); }
.form-error { margin-top: var(--mh-space-4); font-size: var(--mh-font-size-paragraph-s); font-weight: var(--mh-font-weight-label); padding: var(--mh-space-3); border: var(--mh-line-width) solid var(--mh-color-deep-black); }
.submit { display: block; width: 100%; margin-top: var(--mh-space-5); padding: var(--mh-space-4) var(--mh-space-5); font-size: var(--mh-font-size-paragraph-m); font-weight: var(--mh-font-weight-heading); cursor: pointer; }
.submit:hover { background: var(--mh-color-gold-swatch-4); }
.submit:disabled { cursor: default; background: var(--mh-color-gold-swatch-5); }
.fine { margin-top: var(--mh-space-3); text-align: center; font-size: var(--mh-font-size-caption-l); color: var(--mh-color-deep-black-swatch-3); }

.foot { border-top: var(--mh-line-width) solid var(--mh-line); padding: var(--mh-space-7) var(--mh-space-5); text-align: center; font-size: var(--mh-font-size-paragraph-s); display: grid; gap: var(--mh-space-2); }
.foot-name { font-size: var(--mh-font-size-paragraph-l); font-weight: var(--mh-font-weight-heading); }
.foot-links { display: flex; justify-content: center; gap: var(--mh-space-5); margin-top: var(--mh-space-2); }

/* Desktop: the hero is exactly one screen tall, and the visual takes whatever height is left,
   so headline, visual and the whole sign-up card are all visible before any scrolling.
   The card runs the same height as the hero, with the same buffer above and below it. */
@media (min-width: 901px) and (min-height: 560px) {
  .hero { height: calc(100svh - var(--top-height)); display: flex; flex-direction: column; }
  .visual-fit { flex: 1 1 0; min-height: 0; container-type: size; }
  .visual { width: min(100cqw, 100cqh * 16 / 9); }
  .card { min-height: min(calc(100svh - 2 * var(--fold-buffer)), 780px); display: flex; flex-direction: column; }
  .card form { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
}
/* Short desktop screens: tighten the header and the card so the button still clears the fold. */
@media (min-width: 901px) and (max-height: 700px) {
  .page { --top-height: 72px; --fold-buffer: var(--mh-space-4); }
  .hero { padding-top: var(--mh-space-6); }
  .when { margin-top: var(--mh-space-4); }
  .lede { margin-top: var(--mh-space-3); }
  .visual-fit { margin-top: var(--mh-space-5); }
  .card { padding: var(--mh-space-5); }
  .card-sub { margin-top: var(--mh-space-1); }
  .card label { margin-top: var(--mh-space-3); }
  .card input[type="text"], .card input[type="email"], .card input[type="tel"] { margin-top: var(--mh-space-1); padding: var(--mh-space-2) var(--mh-space-3); }
  .submit { margin-top: var(--mh-space-4); padding: var(--mh-space-3) var(--mh-space-5); }
  .fine { margin-top: var(--mh-space-2); }
}

/* One column: the card follows the hero so the form is never far down the page. */
@media (max-width: 900px) {
  .page { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "hero" "signup" "event" "body"; }
  .signup { border-left: 0; padding-left: 0; }
  .card { position: static; margin: 0 0 var(--mh-space-7); padding: var(--mh-space-6) var(--mh-space-5); }
  .page { --top-height: 72px; }
  .hero { padding-top: var(--mh-space-6); }
  .logo { width: 140px; }
  .mobile-cta { display: block; text-align: center; text-decoration: none; padding: var(--mh-space-4); font-size: var(--mh-font-size-paragraph-m); font-weight: var(--mh-font-weight-heading); }
}
@media (max-width: 480px) {
  .page { padding: 0 var(--mh-space-4); }
  .hero h1 { font-size: var(--mh-font-size-heading-7); }
  .module { padding: var(--mh-space-5); }
  .num { font-size: var(--mh-font-size-heading-6); }
}