.top-container {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

footer {
  background-color: #000;
}


/* Right-align the Login/Profile bar to match the Vercel site header (2026-09-17) */
.top-container .user-panel {
  text-align: right;
}
#full_width-879468154 {
  border-bottom: 2px solid #ffdd18;
}

/* Taller hero band so page titles can overlay on the header photo, like the Vercel site (2026-09-17) */
.top-container {
  padding-bottom: 220px;
}
.azss-page-hero {
  display: flow-root;
}
@media (max-width: 767px) {
  .top-container {
    padding-bottom: 180px;
  }
  .azss-page-hero {
    margin-top: -145px !important;
    margin-bottom: 48px !important;
  }
}

#twentyfive_seventyfive-913808612 .threequarter .inner-column,
#twentyfive_seventyfive-1469037280 .threequarter .inner-column {
  padding-top: 30px;
}

/* Header row width — Navbar.tsx uses max-w-7xl/px-8 (1280px/32px) */
.top-container > .template-row {
  max-width: 1280px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}

/* Body content + footer row width — container-content equivalent (1152px/24px) */
#content_column,
.bottom-container > .template-row {
  max-width: 1152px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* Logo height to match the Next.js Navbar (h-20 lg:h-24 w-auto) */
.top-container .template-column.quarter img {
  height: 80px !important;
  width: auto !important;
}

@media (min-width: 1024px) {
  .top-container .template-column.quarter img {
    height: 96px !important;
  }
}

/* NEW: nav link typography — text-sm font-medium tracking-wide text-white/90 */
.top-container .site-menu a {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.025em;
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.top-container .site-menu a:hover {
  color: #ffffff !important;
}

/* NEW: desktop-only horizontal layout with gap-7 spacing (matches "hidden lg:flex").
   Below 1024px, ClubExpress's own mobile slideToggle behavior is left alone. */
@media (min-width: 1024px) {
  .top-container .site-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 12px 0;
  }

  .top-container .site-menu li {
    display: inline-block;
  }
}

/* NEW: Member Login link, same typography, button chrome stripped */
.top-container .login-link {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.025em;
  color: rgba(255, 255, 255, 0.9) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

.top-container .login-link:hover {
  color: #ffffff !important;
}

/* Brand refresh (2026-09-17) - match Vercel site's button typography */
.ce-button {
  text-transform: uppercase;
  letter-spacing: 1.4px;
}

.ce-button:focus {
  outline-color: #CC0000;
}

/* Fix: remove yellow border on buttons - align with red/white brand */
.ce-button {
  border-color: #CC0000 !important;
}

.ce-button:hover {
  border-color: #8F0000 !important;
}

/* Font family alignment with Vercel site (2026-09-17) - Georgia serif headings, system-ui sans-serif body/nav/buttons */
h1, h2, h3, h4,
.content-sub-header-1 {
  font-family: Georgia, Cambria, "Times New Roman", serif !important;
  font-weight: 400 !important;
}

body {
  font-family: system-ui, -apple-system, sans-serif !important;
}

a {
  font-family: system-ui, -apple-system, sans-serif !important;
}

.top-container .site-menu a,
.top-container .login-link {
  font-family: system-ui, -apple-system, sans-serif !important;
}

.ce-button {
  font-family: system-ui, -apple-system, sans-serif !important;
  font-weight: 600 !important;
}

/* Footer top padding to mirror Vercel site's footer (py-14 = 56px) (2026-09-17) */
section.bottom-container {
  padding-top: 56px;
}



/* Hero-overlay treatment for auto-generated titles on ClubExpress system/module pages (2026-09-17) */
.crumb-trail-container:not(:empty) {
  position: relative;
  z-index: 2;
  margin-top: -118px;
}
.crumb-trail-container:not(:empty),
.crumb-trail-container:not(:empty) a,
.crumb-trail-container:not(:empty) span {
  color: rgba(255,255,255,0.75) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}
#page_content > h1 {
  position: relative;
  z-index: 2;
  font-family: Georgia, Cambria, "Times New Roman", serif;
  font-weight: 900;
  color: #ffffff;
  margin: 8px 0 64px 0;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}
@media (max-width: 767px) {
  .crumb-trail-container:not(:empty) {
    margin-top: -110px;
  }
  #page_content > h1 {
    font-size: 2em;
    margin-bottom: 48px;
  }
}


/* Hero-overlay title for wizard-style system pages (e.g. New Member Sign Up),
   where the auto-generated h1 is nested inside .admin-page-wrapper instead of
   being a direct child of #page_content (Version 27, 2026-09-18) */
#page_content > .admin-page-wrapper > h1.wizard-header {
  position: relative;
  z-index: 2;
  margin: 8px 0 64px 0;
}
#page_content > .admin-page-wrapper > h1.wizard-header .wizard-page-title {
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}
@media (max-width: 767px) {
  #page_content > .admin-page-wrapper > h1.wizard-header { margin-bottom: 64px; }
  #page_content > .admin-page-wrapper > h1.wizard-header .wizard-page-title { font-size: 30px; }
  #page_content > .admin-page-wrapper > h1.wizard-header .wizard-page-step {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.75);
    text-shadow: 0 1px 8px rgba(0,0,0,0.45);
    margin-top: 6px;
  }
}

/* Header/footer content max-width set to exactly 1216px, measured logo-edge
   to last-nav-letter / last-footer-link edge (Version 28, 2026-09-18) */
.top-container > .template-row {
  max-width: 1300px !important;
}
.bottom-container > .template-row {
  max-width: 1408px !important;
}

/* ===== Font unification + eyebrow color to match the Vercel site (2026-09-26) ===== */

/* 1. Sans everywhere in content, footer and breadcrumb.
      Overrides fonts ClubExpress wrote inline on template columns
      (Arial, Lato, Georgia) and the Inter in footer/crumb trail. */
body :is(.template-column, .build-column, .cell-item, .footer-container, .crumb-trail-container),
body :is(.template-column, .build-column, .cell-item, .footer-container, .crumb-trail-container)
  :is(p, span, div, li, td, th, a, label, strong, b, em, i, small, ul, ol):not(.material-icons),
body .azss-nav-wrap *:not(.material-icons), body .azss-nav-wrap,
body :is(input, select, textarea, button) {
  font-family: system-ui, -apple-system, sans-serif !important;
}

/* 2. Serif headings — placed after rule 1 with higher specificity so they win. */
body :is(.template-column, .build-column, .cell-item, .top-container)
  :is(h1, h2, h3, h4, h5, h6, .content-sub-header-1),
body :is(.template-column, .build-column, .cell-item, .top-container)
  :is(h1, h2, h3, h4, h5, h6) * {
  font-family: Georgia, Cambria, "Times New Roman", serif !important;
  font-weight: 400 !important;
}

/* 3. Optional: add class="azss-eyebrow" to small labels like "JOIN US"
      to get the Vercel red uppercase kicker style. */
body :is(.template-column, .build-column, .cell-item) .azss-eyebrow {
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: #CC0000 !important;
}

/* 3b. Hero eyebrow ("JOIN US" etc.): the first line in every .azss-page-hero
       gets the Vercel red, overriding the inline pink #ff8a80. */
body .azss-page-hero p:first-child {
  color: #CC0000 !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
}

/* 4. Keep ClubExpress icon font intact (header panel, print, favorites...). */
html body .material-icons.material-icons.material-icons {
  font-family: "Material Icons" !important;
}

/* Logo + menu row 30px higher on desktop to match the Vercel header
   (logo top ~24px, nav ~65px). Relative shift keeps the hero layout unchanged;
   pointer-events keep the Login/Control Panel links above it clickable. (2026-09-26) */
@media (min-width: 1024px) {
  .top-container .template-row:has(.azss-nav-wrap) {
    position: relative;
    top: -30px;
    pointer-events: none;
  }
  .top-container .template-row:has(.azss-nav-wrap) a,
  .top-container .template-row:has(.azss-nav-wrap) label {
    pointer-events: auto;
  }
}

/* Page content as wide as the header, like the Vercel site: title, eyebrow and
   body start at the logo's left edge and end at the last menu item (1216px
   content + 24px padding each side). Also lifts inline max-widths that
   custom azss-* page wrappers set (e.g. .azss-membership-page 1100px). (2026-09-26) */
#content_column {
  max-width: 1264px !important;
}
#content_column [class*="azss-"][style*="max-width"] {
  max-width: none !important;
}

/* Banner titles 40px higher on tablet/desktop, closer to the Vercel hero
   (Vercel: eyebrow ~176px from top). The bottom margins grow by the same 40px,
   so page content still starts below the header photo. (2026-09-26) */
@media (min-width: 768px) {
  /* custom pages (.azss-page-hero: eyebrow + title + tagline) */
  .azss-page-hero {
    margin-top: -208px !important;
    margin-bottom: 104px !important;
  }
  /* ClubExpress system pages (breadcrumb + auto-generated title) */
  .crumb-trail-container:not(:empty) {
    margin-top: -158px;
  }
  #page_content > h1,
  #page_content > .admin-page-wrapper > h1.wizard-header {
    margin-bottom: 104px;
  }
}

/* Phones/tablets: logo, hamburger, page title and content on the same 32px
   side margins as the Vercel site (px-8). Removes the 10px column padding
   in the header row and widens the content padding from 24px to 32px. (2026-09-26) */
@media (max-width: 1023px) {
  .top-container .template-row:has(.azss-nav-wrap) > .template-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #content_column {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* Banner eyebrow/title/tagline another 20px higher, with 20px more space
   below so page content stays where it is. Overrides the values above. (2026-09-26) */
@media (min-width: 768px) {
  .azss-page-hero {
    margin-top: -228px !important;
    margin-bottom: 124px !important;
  }
  .crumb-trail-container:not(:empty) {
    margin-top: -178px;
  }
  #page_content > h1,
  #page_content > .admin-page-wrapper > h1.wizard-header {
    margin-bottom: 124px;
  }
}
@media (max-width: 767px) {
  .azss-page-hero {
    margin-top: -165px !important;
    margin-bottom: 68px !important;
  }
  .crumb-trail-container:not(:empty) {
    margin-top: -130px;
  }
  #page_content > h1 {
    margin-bottom: 68px;
  }
  #page_content > .admin-page-wrapper > h1.wizard-header {
    margin-bottom: 84px;
  }
}

/* ===== Header photo + banner title matched to the Vercel hero (2026-09-26) =====
   Replaces the earlier hero/title position rules (they can stay; these win).
   Vercel values: eyebrow 176px from the top, 12px/16px, 12px gap;
   title Georgia 60px (48px under 1024px), line height 60px; tagline 16px/26px,
   60% white, 16px above, max 576px wide; photo ends 80px below the tagline.
   The photo height is set with min-height instead of padding, so it no longer
   depends on the Login/Control Panel bar. */

.top-container {
  padding-bottom: 0 !important;
  min-height: 386px;
  box-sizing: border-box;
}

/* custom pages: eyebrow / title / tagline */
.azss-page-hero {
  margin-top: -222px !important;
  margin-bottom: 104px !important;
}
body .azss-page-hero p:first-child {
  font-size: 12px !important;
  line-height: 16px !important;
  margin: 0 0 12px 0 !important;
}
body .azss-page-hero h1 {
  font-size: 60px !important;
  line-height: 60px !important;
  margin: 0 !important;
}
body .azss-page-hero h1 + p {
  font-size: 16px !important;
  line-height: 26px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  max-width: 576px;
  margin: 16px 0 0 0 !important;
}

/* ClubExpress system pages: breadcrumb takes the eyebrow's place */
.crumb-trail-container:not(:empty) {
  margin-top: -220px !important;
}
#page_content > h1,
#page_content > .admin-page-wrapper > h1.wizard-header {
  font-size: 60px !important;
  line-height: 60px !important;
  margin: 12px 0 147px 0 !important;
}
#page_content > .admin-page-wrapper > h1.wizard-header .wizard-page-title {
  font-size: inherit !important;
}

@media (max-width: 1023px) {
  body .azss-page-hero h1,
  #page_content > h1,
  #page_content > .admin-page-wrapper > h1.wizard-header {
    font-size: 48px !important;
  }
}

/* phones: the tagline usually wraps to two lines, so the photo is 26px taller */
@media (max-width: 639px) {
  .top-container {
    min-height: 412px;
  }
  .azss-page-hero {
    margin-top: -248px !important;
  }
  .crumb-trail-container:not(:empty) {
    margin-top: -246px !important;
  }
  #page_content > h1,
  #page_content > .admin-page-wrapper > h1.wizard-header {
    margin-bottom: 173px !important;
  }
}


/* ===== Footer like the Vercel site (2026-09-26) =====
   Logo 80px tall; on phones: logo + tagline on top, the two navigation
   columns side by side, Contact below, 32px side margins. */
.bottom-container .template-column.quarter img {
  height: 80px !important;
  width: auto !important;
  max-width: none !important;
}
@media (max-width: 767px) {
  #four_column-1184599168 {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    row-gap: 48px;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  #four_column-1184599168 .template-column {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #four_column-1184599168 .template-column:nth-child(1),
  #four_column-1184599168 .template-column:nth-child(4) {
    grid-column: 1 / -1;
  }
  #four_column-1184599168 .clear {
    display: none !important;
  }
}


/* ===== Footer background + back-to-top button like the Vercel site (2026-09-26) ===== */
section.bottom-container,
footer {
  background-color: #111827 !important;
}
html {
  scroll-behavior: smooth;
}
/* red round button, bottom right (Vercel: 44px, 24px from the edges) */
a.azss-totop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: #CC0000;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  text-decoration: none !important;
  transition: background-color 0.3s, transform 0.3s;
}
a.azss-totop:hover {
  background: #A30000;
  transform: translateY(-2px);
}
/* show it only after scrolling 400px down (browsers without scroll timelines always show it) */
@supports (animation-timeline: scroll()) {
  a.azss-totop {
    animation: azss-totop-show linear both;
    animation-timeline: scroll(root);
    animation-range: 400px 440px;
  }
  @keyframes azss-totop-show {
    from { opacity: 0; translate: 0 16px; visibility: hidden; }
    to { opacity: 1; translate: 0 0; visibility: visible; }
  }
}


/* Back-to-top button sits above the ClubExpress Help button (bottom-right, 60px tall zone)
   whenever that button is on the page; if ClubExpress removes it, the button drops back to 24px. (2026-09-26) */
body:has(iframe#launcher) a.azss-totop {
  bottom: 76px;
}


/* ===== Page spacing like the Vercel site (2026-09-26) =====
   Vercel content sections use 80px above and below (py-20).
   Here: 80px from the header photo to the first content, and 80px of
   padding before the footer, on custom and ClubExpress system pages. */
.azss-membership-page .azss-page-hero + hr {
  display: none !important;
}
.azss-page-hero {
  margin-bottom: 160px !important;
}
/* System pages: the auto title is taken out of the flow, so the content always
   starts 80px below the header photo, however many lines the title wraps to. */
#page_content:has(> h1) {
  position: relative;
  padding-top: 269px !important;
}
#page_content:has(> h1) > h1:first-of-type {
  position: absolute !important;
  top: 12px;
  left: 0;
  right: 0;
  margin: 0 !important;
}
@media (max-width: 639px) {
  #page_content:has(> h1) {
    padding-top: 295px !important;
  }
}
/* step-by-step pages (e.g. New Member Sign Up) keep the margin method */
#page_content > .admin-page-wrapper > h1.wizard-header {
  margin-bottom: 203px !important;
}
@media (max-width: 639px) {
  #page_content > .admin-page-wrapper > h1.wizard-header {
    margin-bottom: 229px !important;
  }
}
#content_column {
  padding-bottom: 80px !important;
}

/* Keep the header menu on one line between 1024px and ~1100px now that it has an Interest Groups item (2026-10-03). The menu may extend left into the empty space beside the logo, as on the Vercel site. */
@media (min-width: 1024px) {
  .azss-nav-wrap ul.azss-nav {
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    white-space: nowrap;
  }
}

/* Person icon before "Member Login" (logged-out user panel), matching the Vercel header (2026-10-03) */
#user_panel_widget a.login-link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
#user_panel_widget a.login-link::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.5 20.1a7.5 7.5 0 0115 0A17.9 17.9 0 0112 21.75c-2.68 0-5.22-.58-7.5-1.65z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.5 20.1a7.5 7.5 0 0115 0A17.9 17.9 0 0112 21.75c-2.68 0-5.22-.58-7.5-1.65z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Event pages: title overlaid on hero, content pushed below it */
#page_content:has(> .event-title-container) {
  position: relative;
  padding-top: 205px !important;
}
#page_content > .event-title-container > h1 {
  position: absolute !important;
  top: 12px; left: 0; right: 0;
  margin: 0 !important;
  float: none !important;
  z-index: 2;
  font-family: Georgia, Cambria, "Times New Roman", serif;
  font-weight: 900;
  font-size: 0 !important;          /* hides the " - Event View" suffix */
  line-height: 60px !important;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}
#page_content > .event-title-container > h1 > span {
  font-size: 60px;
  color: #fff;
}
#page_content > .event-title-container::after {
  content: ""; display: block; clear: both;
}
/* Event name: more breathing room above and below */
#page_content .event-detail-content > .title-container {
  margin: 32px 0 24px 0;
}
#page_content .event-detail-content > .title-container h2 {
  margin: 0;
}
@media (max-width: 1023px) {
  #page_content > .event-title-container > h1 > span { font-size: 48px; }
}
@media (max-width: 639px) {
  #page_content:has(> .event-title-container) { padding-top: 231px !important; }
}

/* Event icons use Material Symbols, not the classic Material Icons font */
html body .material-icons.material-icons.material-icons.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
}

/* Fall Fest 2026: hide ClubExpress's automatic Volunteer button on this event only;
   the event description has its own button that goes straight to the sign-up form (2026-10-08) */
a.ce-button[href*="page_id=2664"][href*="event_id=3073394"]:not(.azss-volunteer-btn) {
  display: none !important;
}

/* Hero-overlay title for the Volunteering Signup page, where the auto-generated h1
   sits alone inside a bare div (matches the system-page title rules above) (2026-10-08) */
#page_content > div:not([class]):not([id]) > h1:only-child {
  position: relative;
  z-index: 2;
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
  font-size: 60px !important;
  line-height: 60px !important;
  margin: 12px 0 147px !important;
}
@media (max-width: 1023px) {
  #page_content > div:not([class]):not([id]) > h1:only-child { font-size: 48px !important; }
}
@media (max-width: 639px) {
  #page_content > div:not([class]):not([id]) > h1:only-child { margin-bottom: 173px !important; }
}

/* Volunteering listing page: show every slot with its Required / Assigned counts
   without having to expand the opportunity (2026-10-08) */
.vol-opprtunity-details {
  display: block !important;
}
/* ...and hide the "Search For Opportunities" box there. Scoped with :has() to the
   public listing so the same search box on admin pages stays (2026-10-08) */
#page_content:has(.vol-opprtunity-container) > .manager-search-wrapper {
  display: none !important;
}

/* Swiss Market – Fall 2026: hide the "Number of People Who Will Attend" counter (it starts at 1)
   and the Activities/Items preview, leaving just Order Now. Scoped by the .azss-swiss-market class
   on the "Swiss Market" heading in that event's description (2026-10-08) */
.event-detail-content:has(.azss-swiss-market) #register_section > h3,
.event-detail-content:has(.azss-swiss-market) #register_section > .registrant-type-options,
.event-detail-content:has(.azss-swiss-market) #register_section > .field-note,
.event-detail-content:has(.azss-swiss-market) .detail-control:has(.activities-items-title),
.event-detail-content:has(.azss-swiss-market) #ctl00_ctl00_user_actions_register_button {
  display: none !important;
}

/* Fall Fest: more space above and below the "Volunteer or bring a dish" button (2026-10-08) */
p:has(> a.azss-volunteer-btn) { margin: 28px 0 36px !important; }

/* Larger reading text for an older audience, matching the Vercel site (2026-10-08): text we write (event descriptions, custom pages) goes from 15px to 17px. ClubExpress system pages (profile, forms, registration details) keep their own sizes; enlarging them made them crowded. */
#page_content {
  font-size: 17px;
}

/* Event pages: more breathing room (2026-10-08). Taller lines in the details, and more space between the description paragraphs, list items and headings. */
.event-detail-content {
  line-height: 1.5;
}
.event-detail-content .form-row {
  margin-bottom: 10px;
}
.event-detail-content .section.full p,
.event-detail-content .section.full li {
  line-height: 1.65;
}
.event-detail-content .section.full p {
  margin: 0 0 12px;
}
.event-detail-content .section.full li + li {
  margin-top: 6px;
}
.event-detail-content .section.full h3 {
  margin: 32px 0 10px;
}

/* Event pages: the registrant-type note stays with the list above it, and the bottom Register Now button gets its own space (2026-10-08). */
#register_section .field-note {
  margin-top: 8px;
}
#register_section .register-now-button.lower-button {
  margin-top: 32px;
}