body {
  background-color: #FDFBF9;
  margin: 0;

  --body-pad: 24px;
  padding: 0 var(--body-pad);

  display: flex; /* ensure footer sticks to bottom */
  flex-direction: column; /* ensure footer sticks to bottom */
  min-height: 100vh; /* ensure footer sticks to bottom */

  max-width: 2120px;
  margin: 0 auto;
}

@media (max-width: 480px) {
  body {
    --body-pad: 16px;
    padding: 0 var(--body-pad);
  }
}

/* Pages opt into the alternative page background by placing an empty
   <alt-background></alt-background> element anywhere in their content. */
body:has(alt-background) {
  background-color: #FFFEF7;
}

alt-background {
  display: none;
}

body {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 16px;
  color: #000000;
  line-height: 1.6;
  font-weight: 350;
}

h1-alt {
  display: block;
  font-family: "Cardo", "Hanken Grotesk", sans-serif;
  font-weight: 350;
  font-size: 30px;
  margin-bottom: 0px;
}

h2-alt {
  display: block;
  font-family: "Cardo", "Hanken Grotesk", sans-serif;
  font-weight: 350;
  font-size: 22px;
  margin-bottom: 0px;
}

h3-alt {
  display: block;
  font-family: "Cardo", "Hanken Grotesk", sans-serif;
  font-weight: 350;
  font-size: 20px;
  margin-bottom: 0px;
}

h1 {
  display: block;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 350;
  font-size: 30px;
  margin-bottom: 0px;
}

h2 {
  display: block;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 350;
  font-size: 22px;
  margin-bottom: 0px;
}

h3 {
  display: block;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 350;
  font-size: 20px;
  margin-bottom: 0px;
}

a {
  color: #000000;
}

footnote-text {
  margin-top: 16px;
  margin-bottom: 16px;
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: #8d8d8d;
}

footnote-text a {
  color: #8d8d8d;
}

:is(.btn, button, input[role="button"], a[role="button"]) {
  margin: 0;
  overflow: visible;
  text-transform: none;
  box-sizing: border-box;
  border-width: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0 24px;
  height: 40px;
  border-radius: 40px;
  background-color: #000000;
  color: #FFFFFF;
  margin-bottom: 0px;
  font-size: 14px;
  text-decoration: none;
}

:is(.btn, button, input[role="button"], a[role="button"]).invert {
  background-color: rgba(255, 255, 255, 0);
  color: #000000;
  border: 1px solid #000000;
}

:is(.btn, button, input[role="button"], a[role="button"]):disabled,
:is(.btn, button, input[role="button"], a[role="button"])[aria-disabled="true"] {
  background-color: #CCCCCC;
  color: #FFF;
  cursor: not-allowed;
  border: none;
}

:is(.btn, button, input[role="button"], a[role="button"]).full-width {
  width: 100%;
}

:is(.btn, button, input[role="button"], a[role="button"]).arrow::after {
  content: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 7.86477L0 7.86477M16 7.86477L8 15.3648M16 7.86477L7.99999 0.364777' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  margin-left: 10px;
  margin-top: 5px;
}

:is(.btn, button, input[role="button"], a[role="button"]).arrow.invert::after {
  content: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 7.86477L0 7.86477M16 7.86477L8 15.3648M16 7.86477L7.99999 0.364777' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:is(.btn, button, input[role="button"], a[role="button"]).arrow-left::before {
  content: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7.86477L17 7.86477M1 7.86477L9 15.3648M1 7.86477L9 0.364777' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  margin-right: 10px;
  margin-top: 5px;
}

:is(.btn, button, input[role="button"], a[role="button"]).arrow-left.invert::before {
  content: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7.86477L17 7.86477M1 7.86477L9 15.3648M1 7.86477L9 0.364777' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.bottom-sticky-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 24px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background-color: #FFFFFF;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bottom-sticky-button.split {
  flex-direction: row;
  gap: 8px;
}

.bottom-sticky-button.split > :first-child {
  flex: 0;
}

.bottom-sticky-button.split > :last-child {
  flex: 1;
}

:is(.btn, button, input[role="button"], a[role="button"]).no-border {
  border: none;
}

:is(row-display, .row-display) {
  display: flex;
  flex-direction: column;
}

column-display {
  display: flex;
}

centered-container-box {
  margin: 0 auto;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 720px;
  border: 1px solid #ccc;
  padding: 20px;
  background: #FFFEF7;
  border: none;
  background: none;
}

centered-container-box[width="480"] {
  max-width: 480px;
}

centered-container-box[width="720"] {
  max-width: 720px;
}

centered-container-box[width="1080"] {
  max-width: 1080px;
}

decorated-container-box {
  display: block;
  border-radius: 4px;
  background-color: #EAEAE2;
  padding: 16px;
}

/* ── Responsive preview wrapper ── */
centered-container-box-responsive {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}

centered-container-box-responsive[width="480"] {
  max-width: 480px;
}

centered-container-box-responsive[width="720"] {
  max-width: 720px;
}

centered-container-box-responsive[width="1080"] {
  max-width: 1080px;
}

.responsive-preview-inner {
  width: 100%;
  min-width: 280px;
  overflow: hidden;
  flex-shrink: 0;
  container-type: inline-size;
}

.responsive-preview-handle {
  flex-shrink: 0;
  width: 20px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  color: #B0AFA9;
  transition: color 0.15s ease;
}

.responsive-preview-handle:hover,
.responsive-preview-handle.is-dragging {
  color: #474747;
}

.responsive-preview-grip {
  display: block;
  width: 4px;
  height: 32px;
  border-left: 2px dotted currentColor;
  border-right: 2px dotted currentColor;
}

.responsive-preview-badge {
  position: absolute;
  top: 0;
  right: 24px;
  font-size: 11px;
  font-family: monospace;
  color: #B0AFA9;
  line-height: 1;
  padding: 2px 4px;
  pointer-events: none;
  user-select: none;
}

.header-bar {
  padding: 16px 0;
  display: flex;
  align-items: center;
  font-size: 18px;
  position: relative;
  z-index: 31;
}

.header-rhs {
  margin-left: auto;
}

.header-bar a {
  text-decoration: none;
  color: #000000;
}
.header-bar a:hover {
  text-decoration: underline;
}

.header-logo-link:hover {
  text-decoration: none;
}

.header-nav {
  display: none;
}

@media (min-width: 768px) {
  .header-nav {
    display: flex;
    margin-left: 20px;
  }
}

.header-nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.header-nav-item {
  position: relative;
  font-family: "Hanken Grotesk", "HK Grotesk", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  font-feature-settings: "kern";
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
}

.header-nav-item > a,
.header-nav-item > span {
  display: block;
  color: rgb(0, 0, 0);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 8px 12px;
  position: relative;
  top: -2px;
}

.header-nav-item > a:hover,
.header-nav-item > span:hover {
  text-decoration: underline;
}

.header-nav-dropdown {
  display: none;
  position: fixed;
  top: auto;
  left: 0;
  right: 0;
  background: #FFFEF7;
  border: none;
  list-style: none;
  margin: 0;
  padding: 50px 0 74px;
  z-index: 30;
}

.header-nav .header-nav-item.has-children:hover .header-nav-dropdown {
  display: block;
}

.header-nav-overlay {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 29;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  /* Never intercept the pointer: the overlay is a sibling of the nav, so
     hovering it would drop the nav's :hover and flicker the dropdown shut. */
  pointer-events: none;
}

/* Show the dimmer whenever a dropdown is open. Tied to the same :hover as the
   dropdown itself (the overlay is a following sibling of the nav) so the two
   can never desync — including on first paint when the cursor already sits
   over the nav and no mouseenter event would fire. */
.header-nav:has(.header-nav-item.has-children:hover) ~ .header-nav-overlay {
  opacity: 1;
  visibility: visible;
}

.header-nav-dropdown li a {
  display: block;
  padding: 9px 24px;
  font-family: "Hanken Grotesk", "HK Grotesk", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  font-feature-settings: "kern";
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  color: rgb(0, 0, 0);
  text-decoration: none;
}

.header-nav-dropdown li a:hover {
  text-decoration: underline;
}

.login-logo {
  margin-top: 32px;
  margin-bottom: 32px;
}

.login-title {
  margin-top: 0px;
  margin-bottom: 0px;
}

.login-subtitle {
  margin-top: 10px;
  margin-bottom: 32px;
}

.click-to-hide-blade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

#header-logged-in-detail-blade.hidden {
  display: none;
}

#header-logged-in-detail-blade .divider {
  height: 1px;
  width: 100%;
  background-color: #E6E2D9;
  margin-top: 16px;
  margin-bottom: 16px;
}

#header-logged-in-detail-blade .close-button {
  padding: 8px;
  cursor: pointer;
  text-align: right;
}

#header-logged-in-detail-blade .blade-content > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 0 0 calc(100% / 7);
  min-width: 160px;
}

#header-logged-in-detail-blade .blade-content > ul > li {
  margin-top: 16px;
  text-align: center;
}

/* Container establishes the stacking context */
#header-logged-in-detail-blade {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 20; /* above the rest of the page */
}

/* Move panel visuals onto the content wrapper so it sits above the overlay */
#header-logged-in-detail-blade .blade-content {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 11;               /* above the overlay */
  width: 400px;
  max-width: 80%;
  height: 100%;
  background-color: #FFFEF7; /* ensure overlay doesn't tint the panel */
  border-left: 1px solid #E6E2D9;
  text-align: center;
}

/* ── Mobile burger button + slide-out navigation ── */

/* Burger shows only on mobile; desktop nav takes over at 768px */
.mobile-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #000000;
}

.mobile-nav-toggle:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .mobile-nav-toggle {
    display: none;
  }
}

/* Hide the desktop profile / sign-in controls on mobile when the burger nav
   is present — they move into the menu. Headers without a nav (no burger)
   keep them visible at all widths. */
@media (max-width: 767px) {
  .header-bar:has(.mobile-nav-toggle) .header-rhs .profile-link,
  .header-bar:has(.mobile-nav-toggle) .header-rhs .login-link {
    display: none;
  }
}

.mobile-nav-toggle-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mobile-nav-toggle-icon span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: currentColor;
}

/* Overlay container */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 40;
  visibility: hidden;
  pointer-events: none;
  box-sizing: border-box;
  /* Delay hiding until the drawer has finished sliding back out */
  transition: visibility 0s linear 0.3s;
}

/* Everything inside the drawer uses border-box so width:100% + padding
   never overflows the drawer (which would push the chevrons off-screen) */
.mobile-nav *,
.mobile-nav *::before,
.mobile-nav *::after {
  box-sizing: border-box;
}

.mobile-nav.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s; /* show immediately on open */
}

.mobile-nav-dimmer {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-nav.is-open .mobile-nav-dimmer {
  opacity: 1;
}

/* Drawer slides in from the right */
.mobile-nav-drawer {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 90%;
  background: #FFFEF7;
  border-left: 1px solid #E6E2D9;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.mobile-nav.is-open .mobile-nav-drawer {
  transform: translateX(0);
}
/* On close, is-open is removed and the drawer eases back out to the right
   (its resting translateX(100%)) while the container stays visible for 0.3s. */

/* Clips the sliding panels */
.mobile-nav-viewport {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.mobile-nav-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: #FFFEF7;
  transition: transform 0.3s ease;
}

/* Submenus rest off-screen to the right; the root rests off-screen to the left */
.mobile-nav-submenu {
  transform: translateX(100%);
}

.mobile-nav-panel:not(.mobile-nav-submenu) {
  transform: translateX(-100%);
}

/* The active panel sits in view (declared last so it wins on equal specificity) */
.mobile-nav-panel.is-active {
  transform: translateX(0);
}

.mobile-nav-panel-head {
  position: relative; /* anchor for the absolutely-centred title */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 56px;
  padding: 8px 16px;
}

/* Section title: centred in the head, independent of the back/close controls */
.mobile-nav-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Hanken Grotesk", "HK Grotesk", sans-serif;
  font-size: 14px;
  line-height: 1;
  color: #000000;
  pointer-events: none;
}

.mobile-nav-close {
  margin-left: auto; /* keep the close control on the right, with or without a back control */
  cursor: pointer;
  padding: 8px;
  box-sizing: content-box; /* keep the icon 12x12 inside the padded tap target */
  width: 12px;
  height: 12px;
  background: center / 12px 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M1 1L11 11M11 1L1 11' stroke='black' stroke-linecap='round'/%3E%3C/svg%3E");
  color: #000000;
  text-decoration: none;
}

.mobile-nav-close:hover,
.mobile-nav-back:hover {
  text-decoration: none;
}

.mobile-nav-back {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 8px;
  color: #000000;
  text-decoration: none;
}

.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  font-family: "Hanken Grotesk", "HK Grotesk", sans-serif;
  font-size: 18px;
  line-height: 22px;
  text-align: left;
  color: #000000;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
}

.mobile-nav-link:hover {
  text-decoration: underline;
}

/* Light-stroke SVG chevron. The source SVG points left; the base (drill-in)
   chevron is rotated 180deg to point right. */
.mobile-nav-chevron {
  display: inline-block;
  width: 7px;
  height: 12px;
  flex-shrink: 0;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'%3E%3Cpath d='M6 0.5L0.5 6L6 11.5' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform: rotate(180deg); /* points right */
  /* Line the chevron's centre up with the close X: the X icon centre sits
     14px in from the head's content edge (8px padding + half its 12px width),
     so the 7px chevron needs a 10.5px right offset to share that column. */
  margin-right: 10.5px;
}

.mobile-nav-chevron--left {
  transform: none; /* source SVG already points left */
  margin-right: 0; /* back chevron sits on the left, no offset needed */
}

/* Sign in / out pinned to the bottom of the root panel */
.mobile-nav-auth {
  margin-top: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-nav-auth-link {
  padding: 8px 0;
  text-align: center;
  font-family: "Hanken Grotesk", "HK Grotesk", sans-serif;
  font-size: 18px;
  line-height: 22px;
  color: #000000;
  text-decoration: none;
}

.mobile-nav-auth-link:hover {
  text-decoration: underline;
}

body.mobile-nav-lock {
  overflow: hidden;
}

footer {
  margin-top: auto;
  padding: 16px 0;
  padding-top: 64px;
  padding-bottom: 8px;
}

footer a {
  text-decoration: none;
  color: #000000;
}

footer a:hover {
  text-decoration: underline;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.footer-links > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 0 0 calc(100% / 7);
  min-width: 160px;
}

.footer-logo-pair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

img {
  position: relative;
  left: 0;
  width: 100%;
  display: block;
}

img.full-bleed {
  position: relative;
  left: calc(-1 * var(--body-pad));
  width: calc(100% + 2 * var(--body-pad));
  display: block;
}

img.rounded {
  border-radius: 4px;
}

/* ========================= */
/* SECTION ACCORDIONS (top level) */
/* ========================= */
section > details {
  padding: 24px 0 8px;
  margin: 0;
  border-top: 1px solid transparent; /* keeps spacing tidy */
}

/* Section headers (first-level summary) */
section > details > summary {
  position: relative;
  padding: 0 24px;
  margin: 0 0 8px 0;
  font-size: 1.75rem;
  line-height: 2.2rem;
  font-weight: 600;
}

/* Chevron for section headers */
section > details > summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.8;
  transition: transform 0.2s ease;
}
section > details[open] > summary::after {
  transform: translateY(-50%) rotate(-135deg);
}

/* Inner container under a section */
section > details > div {
  padding: 8px 0 24px;
}

/* ========================= */
/* INNER ACCORDIONS */
/* ========================= */
section > details > div > details {
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
section > details > div > details:last-child {
  border-bottom: none;
}

/* Inner summaries (questions) */
section > details > div > details > summary {
  position: relative;
  padding: 0 32px 0 24px;
  font-size: 1.125rem;
  line-height: 1.625rem;
  font-weight: 500;
  color: #111;
}

/* Plus icon */
section > details > div > details > summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-position: center;
  opacity: 0.9;
  transition: background-image 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23111' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Change icon to × when open */
section > details > div > details[open] > summary::after {
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%23111' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Inner content */
section > details > div > details > div {
  padding: 12px 24px 0 24px;
  color: #2a2a2a;
  font-size: 1rem;
  line-height: 1.6;
}
section > details > div > details > div p {
  margin: 0 0 12px;
}

/* Reset summary markers */
details summary {
  list-style: none;
  cursor: pointer;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary:focus-visible {
  outline: 3px solid rgba(0, 0, 0, 0.2);
  outline-offset: 2px;
}

accordion-list-picker {
  display: block;
  background-color: #EAEAE2;
  padding: 16px;
}

accordion-list-picker summary {
  position: relative;
  display: block;
  margin: 16px 0;
}

accordion-list-picker > details > summary::after {
  content: "";
  position: absolute;
  right: 8px;
  width: 6px;
  height: 6px;
  top: 50%;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.8;
  transition: transform 0.2s ease;
}

accordion-list-picker > details[open] > summary::after {
  transform: translateY(-50%) rotate(-135deg);
}

accordion-list-picker list-item {
  position: relative;
  display: block;
  padding: 15px;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  margin: 4px 0;
}

accordion-list-picker list-item[selected],
accordion-list-picker list-item:has(input[type="radio"]:checked) {
  border: 1px solid #000000;
}

/* checkmark */
accordion-list-picker list-item[selected]::after,
accordion-list-picker list-item:has(input[type="radio"]:checked)::after {
  content: "";
  position: absolute;
  right: 20px;
  width: 20px;
  height: 20px;
  top: 55%;
  transform: translateY(-45%) rotate(0deg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='%231F1F1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

accordion-list-picker list-item:hover {
  border: 1px solid #C4C4C4;
}

accordion-list-picker list-item[selected]:hover,
accordion-list-picker list-item:has(input[type="radio"]:checked):hover {
  border: 1px solid #000000;
}

accordion-list-picker list-item img {
  width: 34px;
  height: 34px;
}

accordion-list-picker list-item text-title {
  display: block;
  font-size: 16px;
  line-height: 1.3;
}

accordion-list-picker list-item text-subtitle {
  display: block;
  font-size: 14px;
  line-height: 1.3;
  color: #4E4E4D;
}

/* override how accordion-list-picker fits inside sheet-body as it has a default padding */
sheet-body:has(accordion-list-picker) {
  padding: 0px 0px env(safe-area-inset-bottom);
}
@media (min-width: 768px) {
  sheet-body:has(accordion-list-picker) {
    padding: 0px 0px 0px; /* remove env(safe-area-inset-bottom) */
  }
}

:where(pagesheet-modal) {
  /* Tunables */
  --sheet-width: min(640px, 100vw);
  --sheet-radius: 10px;
  --sheet-shadow: 0 8px 24px rgba(0,0,0,.18);
  --sheet-ease: cubic-bezier(.22, 1, .36, 1);
  --dur-open: 360ms;
  --backdrop: rgba(0,0,0,.85);
  --bg: #E9E8E2;
  --text: #111;
  --muted: #6b7280;
  --border: #e5e7eb;

  position: fixed;
  inset: 0;
  display: grid;
  place-items: end center;
  pointer-events: none;
  z-index: 9999;
  transition: opacity var(--dur-open) var(--sheet-ease);

  overscroll-behavior: contain; /* Stops scroll chaining */
  overflow: hidden;             /* No visual scroll, but takes wheel/touch */
  touch-action: none;           /* On touch devices */
}

pagesheet-modal:not([open]) {
  visibility: hidden;
  opacity: 0;
}

pagesheet-modal[open] {
  visibility: visible;
  opacity: 1;
}

/* Backdrop */
pagesheet-modal > sheet-backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  opacity: 0;
  transition: opacity var(--dur-open) ease;
}
pagesheet-modal[open] > sheet-backdrop { opacity: 1; pointer-events: auto; }

/* Sheet surface */
pagesheet-modal > sheet-surface {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border-top-left-radius: var(--sheet-radius);
  border-top-right-radius: var(--sheet-radius);
  box-shadow: var(--sheet-shadow);
  transform: translateY(100%);
  transition: transform var(--dur-open) var(--sheet-ease);
  pointer-events: auto;

  display: grid;
  grid-template-rows: auto 1fr auto; /* header, body, footer */
  max-height: min(85vh, 720px);
  min-height: 30vh;
  overflow: hidden;
  contain: layout paint;
}

pagesheet-modal.full-height > sheet-surface {
  min-height: 85vh;
}

pagesheet-modal[open] { pointer-events: auto; }
pagesheet-modal[open] > sheet-surface { transform: translateY(0); }

sheet-surface:focus {
  outline: none;
}

sheet-header { position: relative; padding: 14px 20px 10px; display: block; }
sheet-title {
  display: block;
  text-align: center;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 400;
  font-size: 16px;
}

sheet-body {
  display: block;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
}

/* Footer: responsive 1 or 2 column grid
   - Default: single column, buttons full width
   - When horizontal space >= 480px: two columns, each 50%
 */
sheet-footer {
  display: grid;
  gap: 12px;
  justify-content: stretch;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  sheet-footer {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  pagesheet-modal > sheet-surface,
  pagesheet-modal > sheet-backdrop {
    transition: none !important;
  }
}

/* Close button area */
sheet-close {
  z-index: 10;
  position: absolute;
  top: 9px;
  left: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #000;
  user-select: none;
}

/* Create the X using two lines via pseudo-elements */
sheet-close::before,
sheet-close::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 1px;
  background: currentColor;
  border-radius: 1px;
}

sheet-close::before {
  transform: rotate(45deg);
}

sheet-close::after {
  transform: rotate(-45deg);
}

@media (min-width: 568px) {
  ios-footer-color {
    display: none;
    opacity: 0;
  }

  /* Center the host grid */
  pagesheet-modal {
    place-items: center;
  }

  /* Tweak the surface to look like a dialog */
  pagesheet-modal > sheet-surface {
    width: min(720px, 90vw);
    max-height: min(60vh, 680px);
    min-height: unset;
    border-radius: 20px;
    transform: translateY(12px) scale(.98);
    opacity: 0;
    transition:
      transform var(--dur-open) var(--sheet-ease),
      opacity var(--dur-open) var(--sheet-ease);
  }

  pagesheet-modal.full-height > sheet-surface {
    min-height: 60vh;
  }

  /* Open state for centered dialog */
  pagesheet-modal[open] > sheet-surface {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  /* Footer/body: drop safe-area padding on large screens */
  sheet-body {
    padding: 16px 24px 20px;
  }

  sheet-footer {
    padding: 12px 24px 16px;
  }
}

/* OR condition: apply large-screen styles when forced-as-modal is present, regardless of viewport */
pagesheet-modal.forced-as-modal ios-footer-color {
  display: none;
  opacity: 0;
}

/* Center the host grid */
pagesheet-modal.forced-as-modal {
  place-items: center;
}

/* Tweak the surface to look like a dialog */
pagesheet-modal.forced-as-modal > sheet-surface {
  width: min(720px, 90vw);
  max-height: min(60vh, 680px);
  min-height: unset;
  border-radius: 20px;
  transform: translateY(12px) scale(.98);
  opacity: 0;
  transition:
    transform var(--dur-open) var(--sheet-ease),
    opacity var(--dur-open) var(--sheet-ease);
}

pagesheet-modal.forced-as-modal.full-height > sheet-surface {
  min-height: 60vh;
}

/* Open state for centered dialog */
pagesheet-modal.forced-as-modal[open] > sheet-surface {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Footer/body: drop safe-area padding */
pagesheet-modal.forced-as-modal sheet-body {
  padding: 16px 24px 20px;
}

pagesheet-modal.forced-as-modal sheet-footer {
  padding: 12px 24px 16px;
}

sheet-footer :is(.btn, button) {
  width: 100%;
}

/* If there is only ONE button in the footer, span all grid columns so it is truly full width even on wide screens */
sheet-footer :is(.btn, button):only-child {
  grid-column: 1 / -1;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

.status-dot-red {
  background-color: #BC4C4F;
}

.status-dot-green {
  background-color: #15947A;
}

traffic-light-icon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

traffic-light-icon.red {
  background-color: #BC4C4F;
}

traffic-light-icon.lightred {
  background-color: #B87460;
}

traffic-light-icon.softmauve {
  background-color: #BA9C9A;
}

traffic-light-icon.green {
  background-color: #5F9B88;
}

traffic-light-icon.yellow {
  background-color: #D5AB4F;
}

traffic-light-icon.grey {
  background-color: #8D8D8D;
}

traffic-light-icon.lightgreen {
  background-color: #B3DEAA;
}


traffic-light {
  color: #3C393A;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

traffic-light-title {
  display: flex;
  align-items: center;
}

traffic-light-subtitle {
  padding-left: 18px;
  color: #828282;
  display: block;
}

icon-with-text {
  margin-left: 14px;
  margin-right: 14px;
  margin-top: 8px;
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: '#3C393A';
}

icon {
  margin-top: 2px;
  display: inline-block;
  width: 21px;
  min-width: 21px;
  height: 21px;
  background: center / 100% 100% no-repeat;
}

/* Attribute-driven icon sources */
icon[image="pay-at-house"] {
    background-image: url('data:image/svg+xml;base64,PHN2ZwogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxIgogICB3aWR0aD0iMjgiCiAgIGhlaWdodD0iMjgiCiAgIHZpZXdCb3g9IjAgMCAyOCAyOCIKICAgc29kaXBvZGk6ZG9jbmFtZT0idGlja2V0UG9saWN5LnN2ZyIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMS40LjIgKGViZjBlOTQwLCAyMDI1LTA1LTA4KSIKICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiCiAgIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMSIgLz4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgaWQ9Im5hbWVkdmlldzEiCiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjMDAwMDAwIgogICAgIGJvcmRlcm9wYWNpdHk9IjAuMjUiCiAgICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBpbmtzY2FwZTpwYWdlY2hlY2tlcmJvYXJkPSIwIgogICAgIGlua3NjYXBlOmRlc2tjb2xvcj0iI2QxZDFkMSIKICAgICBpbmtzY2FwZTp6b29tPSIwLjkyODU3MTQzIgogICAgIGlua3NjYXBlOmN4PSIxMy40NjE1MzgiCiAgICAgaW5rc2NhcGU6Y3k9IjE0IgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iODk2IgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjI0NSIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iMzQiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJnMSI+CiAgICA8aW5rc2NhcGU6cGFnZQogICAgICAgeD0iMCIKICAgICAgIHk9IjAiCiAgICAgICBpbmtzY2FwZTpsYWJlbD0iMSIKICAgICAgIGlkPSJwYWdlMSIKICAgICAgIHdpZHRoPSIyOCIKICAgICAgIGhlaWdodD0iMjgiCiAgICAgICBtYXJnaW49IjAiCiAgICAgICBibGVlZD0iMCIgLz4KICA8L3NvZGlwb2RpOm5hbWVkdmlldz4KICA8ZwogICAgIGlkPSJnMSIKICAgICBpbmtzY2FwZTpncm91cG1vZGU9ImxheWVyIgogICAgIGlua3NjYXBlOmxhYmVsPSIxIj4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDEiCiAgICAgICBkPSJNIDAsMy41IEggMSBWIDEgaCAxMi45OTk2MDkgdiAyIGggMC45OTk5OTkgViAwIEggMCBaIgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMyw0LjAwMTMwMjcsMjEuMzMzMzMzKSIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDIiCiAgICAgICBkPSJNIDAsNiBDIDEuNjg0OTM3LDYgMy4wNzczMTIsNC42NzEzMjUgMy4wNzczMTIsMy4wMDAwNzkgMy4wNzczMTIsMS4zMjg4NzMgMS42ODQ5NzksMCAwLDAgViAxIEMgMS4xNjE2MzMsMSAyLjA3NzMxMiwxLjkwOTY1OSAyLjA3NzMxMiwzLjAwMDA3OSAyLjA3NzMxMiw0LjA5MDQ1OCAxLjE2MTY3NSw1IDAsNSBaIgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMyw0LjAwMzkwNjcsMTgpIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoMyIKICAgICAgIGQ9Ik0gMCwzLjUgSCAxNS4wMDA0NDcgViAtNC4zNmUtNCBIIDE0LjAwMDQ0OCBWIDIuNSBIIDEgViAwLjA0OTE0NiBIIDAgWiIKICAgICAgIHN0eWxlPSJmaWxsOiMxNzE4MWE7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmUiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzMzMsMCwwLC0xLjMzMzMzMzMsNCwxMS4zMzMzMzMpIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoNCIKICAgICAgIGQ9Im0gMCwyLjk2MzEyNyBjIDAsMS42NDYwMTIgMS4zNTk4NTksMi45NjI2NTQgMy4wMTQ5NDEsMi45NjI2NTQgdiAtMSBDIDEuODkyMjMzLDQuOTI1NzgxIDEsNC4wMzcxNTMgMSwyLjk2MzEyNyAxLDEuODg5MSAxLjg5MjIzMywxLjAwMDQ3MiAzLjAxNDk0MSwxLjAwMDQ3MiB2IC0xIEMgMS4zNTk4NTksNC43MmUtNCAwLDEuMzE3MTEzIDAsMi45NjMxMjcgWiIKICAgICAgIHN0eWxlPSJmaWxsOiMxNzE4MWE7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmUiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzMzMsMCwwLC0xLjMzMzMzMzMsMTkuOTc3ODY0LDE3LjkwMTA0MSkiIC8+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGg1IgogICAgICAgZD0ibSAwLC0xLjAzZS00IHYgMi4xMjMxNSBoIDEgdiAtMi4xMjMxNSB6IgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywxMC42NzMxNzcsMTAuNjY2NjY3KSIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDYiCiAgICAgICBkPSJNIDAsMCBWIDIgSCAxIFYgMCBaIgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywxMC42NzU3ODEsMTUuMzMzMzMzKSIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDciCiAgICAgICBkPSJNIDAsNS4zZS01IFYgMi4xMjMwNDcgSCAxIFYgNS4zZS01IFoiCiAgICAgICBzdHlsZT0iZmlsbDojMTcxODFhO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMzMzLDAsMCwtMS4zMzMzMzMzLDEwLjY3NTc4MSwyMC4xNjQwNjMpIiAvPgogIDwvZz4KPC9zdmc+');
}

icon[image="members-only-event"] {
  background-image: url("data:image/svg+xml;base64,PHN2ZwogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxIgogICB3aWR0aD0iMjgiCiAgIGhlaWdodD0iMjgiCiAgIHZpZXdCb3g9IjAgMCAyOCAyOCIKICAgc29kaXBvZGk6ZG9jbmFtZT0iZ3Vlc3RQb2xpY3lXaXRob3V0R3Vlc3RzLnN2ZyIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMS40LjIgKGViZjBlOTQwLCAyMDI1LTA1LTA4KSIKICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiCiAgIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMSIgLz4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgaWQ9Im5hbWVkdmlldzEiCiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjMDAwMDAwIgogICAgIGJvcmRlcm9wYWNpdHk9IjAuMjUiCiAgICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBpbmtzY2FwZTpwYWdlY2hlY2tlcmJvYXJkPSIwIgogICAgIGlua3NjYXBlOmRlc2tjb2xvcj0iI2QxZDFkMSIKICAgICBpbmtzY2FwZTp6b29tPSIwLjkyODU3MTQzIgogICAgIGlua3NjYXBlOmN4PSIxMy40NjE1MzgiCiAgICAgaW5rc2NhcGU6Y3k9IjE0IgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iODk2IgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjI0NSIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iMzQiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJnMSI+CiAgICA8aW5rc2NhcGU6cGFnZQogICAgICAgeD0iMCIKICAgICAgIHk9IjAiCiAgICAgICBpbmtzY2FwZTpsYWJlbD0iMSIKICAgICAgIGlkPSJwYWdlMSIKICAgICAgIHdpZHRoPSIyOCIKICAgICAgIGhlaWdodD0iMjgiCiAgICAgICBtYXJnaW49IjAiCiAgICAgICBibGVlZD0iMCIgLz4KICA8L3NvZGlwb2RpOm5hbWVkdmlldz4KICA8ZwogICAgIGlkPSJnMSIKICAgICBpbmtzY2FwZTpncm91cG1vZGU9ImxheWVyIgogICAgIGlua3NjYXBlOmxhYmVsPSIxIj4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDEiCiAgICAgICBkPSJNIDIuNTM3NTg4LDQuMDAxOTUzIEMgMS42Nzk4NDcsNC4wMDE5NTMgMSwzLjMyMTQwOCAxLDIuNTAwODQ5IDEsMS42ODAyOSAxLjY3OTg0NywwLjk5OTc0NCAyLjUzNzU4OCwwLjk5OTc0NCBjIDAuODU3NzQyLDAgMS41Mzc1ODksMC42ODA1NDYgMS41Mzc1ODksMS41MDExMDUgMCwwLjgyMDU1OSAtMC42Nzk4NDcsMS41MDExMDQgLTEuNTM3NTg5LDEuNTAxMTA0IHogTSAwLDIuNTAwODQ5IGMgMCwxLjM4OTggMS4xNDQ2NzIsMi41MDExMDQgMi41Mzc1ODgsMi41MDExMDQgMS4zOTI5MTcsMCAyLjUzNzU4OSwtMS4xMTEzMDQgMi41Mzc1ODksLTIuNTAxMTA0IDAsLTEuMzg5ODAxIC0xLjE0NDY3MiwtMi41MDExMDUgLTIuNTM3NTg5LC0yLjUwMTEwNSBDIDEuMTQ0NjcyLC0yLjU2ZS00IDAsMS4xMTEwNDggMCwyLjUwMDg0OSBaIgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywxMC42MTcxODgsMTAuNjczMTc3KSIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDIiCiAgICAgICBkPSJNIDUuNDg5LDguMDEyNjk1IEMgMy4wMTE1NzEsOC4wMTI2OTUgMSw2LjAwMDk4NyAxLDMuNTIzNjk0IFYgMC45OTk3ODUgaCA4Ljk3ODAwMSB2IDIuNTIzOTA5IGMgMCwyLjQ3NzQzIC0yLjAxMTcwOSw0LjQ4OTAwMSAtNC40ODkwMDEsNC40ODkwMDEgeiBNIDAsMy41MjM2OTQgYyAwLDMuMDI5NTU3IDIuNDU5MjY1LDUuNDg5MDAxIDUuNDg5LDUuNDg5MDAxIDMuMDI5NTU4LDAgNS40ODkwMDEsLTIuNDU5MjY2IDUuNDg5MDAxLC01LjQ4OTAwMSBWIC0yLjE1ZS00IEggMCBaIgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMyw2LjY4MDk4OTMsMjMuOTk0NzkyKSIgLz4KICA8L2c+Cjwvc3ZnPgo=");
}

icon[image="film-certificate"] {
    background-image: url("data:image/svg+xml;base64,PHN2ZwogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxIgogICB3aWR0aD0iMjgiCiAgIGhlaWdodD0iMjgiCiAgIHZpZXdCb3g9IjAgMCAyOCAyOCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMSIgLz4KICA8ZwogICAgIGlkPSJnMSI+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGgxIgogICAgICAgZD0iTSA3LjQ5OTczOSwxMy45OTkwMjMgQyAzLjkxMDAzMywxMy45OTkwMjMgMSwxMS4wODg5OTEgMSw3LjQ5OTI4NSAxLDMuOTA5NTc4IDMuOTEwMDMzLDAuOTk5NTQ3IDcuNDk5NzM5LDAuOTk5NTQ3IGMgMy41ODk3MDYsMCA2LjQ5OTc0LDIuOTEwMDMyIDYuNDk5NzQsNi40OTk3MzggMCwzLjU4OTcwNiAtMi45MTAwMzQsNi40OTk3MzggLTYuNDk5NzQsNi40OTk3MzggeiBNIDAsNy40OTkyODUgYyAwLDQuMTQxOTkxIDMuMzU3NzQ4LDcuNDk5NzM4IDcuNDk5NzM5LDcuNDk5NzM4IDQuMTQxOTksMCA3LjQ5OTczOSwtMy4zNTc3NDcgNy40OTk3MzksLTcuNDk5NzM4IDAsLTQuMTQxOTkyIC0zLjM1Nzc0OSwtNy40OTk3MzggLTcuNDk5NzM5LC03LjQ5OTczOCBDIDMuMzU3NzQ4LC00LjUzZS00IDAsMy4zNTcyOTQgMCw3LjQ5OTI4NSBaIgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMyw0LDIzLjk5ODY5NykiIC8+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGgyIgogICAgICAgZD0iTSAwLjI2NjE2MiwzLjUzZS00IDAsNS45MjM4MjggSCAxLjUyNzMyOCBMIDEuMjY5MzgsMy41M2UtNCBaIgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywxMi45Nzc4NjQsMTYuMDA1MjA4KSIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDMiCiAgICAgICBkPSJNIDIsMSBDIDIsMC40NDc3MTUgMS41NTIyODQsMCAxLDAgMC40NDc3MTUsMCAwLDAuNDQ3NzE1IDAsMSAwLDEuNTUyMjg1IDAuNDQ3NzE1LDIgMSwyIDEuNTUyMjg0LDIgMiwxLjU1MjI4NSAyLDEgWiIKICAgICAgIHN0eWxlPSJmaWxsOiMxNzE4MWE7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzMzMsMCwwLC0xLjMzMzMzMzMsMTIuNjYyNzYsMjApIiAvPgogIDwvZz4KPC9zdmc+");
}

icon[image="film-duration"] {
    background-image: url("data:image/svg+xml;base64,PHN2ZwogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxIgogICB3aWR0aD0iMjgiCiAgIGhlaWdodD0iMjgiCiAgIHZpZXdCb3g9IjAgMCAyOCAyOCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMSIgLz4KICA8ZwogICAgIGlkPSJnMSI+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGgxIgogICAgICAgZD0iTSAwLDggSCAxMS4wMDI1NDIgViA0ZS02IEggMC4wMDYyNTIgWiBNIDEuMDAwNzgyLDcgMS4wMDU0NzIsMS4wMDAwMDQgaCA4Ljk5NzA3MSBWIDcgWiIKICAgICAgIHN0eWxlPSJmaWxsOiMxNzE4MWE7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmUiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzMzMsMCwwLC0xLjMzMzMzMzMsNS4zMzA3MjkzLDIyLjY2NjY2NykiIC8+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGgyIgogICAgICAgZD0iTSAzLjY0MTE2MSw2LjA0OTgwNSBWIC04LjZlLTUgTCAwLjAxNzU1MSwxLjAxMjYyOSAwLjI4NjcxNCwxLjk3NTcyMyAyLjY0MTE2MSwxLjMxNzcxIFYgNC42ODA2MjMgTCAwLjMwNDI2NSwzLjkzNDE5NiAwLDQuODg2NzgzIFoiCiAgICAgICBzdHlsZT0iZmlsbDojMTcxODFhO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMzMzLDAsMCwtMS4zMzMzMzMzLDE5LjE0MTkyNywyMS4yNzM0MzcpIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoMyIKICAgICAgIGQ9Ik0gMS40ZS01LDMuMDI2MjE0IEMgMC4wMDUwMDEsNC42NzkwMDggMS4zNDg3ODIsNi4wMTQ3NCAzLjAwMTU4OSw2LjAwOTc1MiA0LjY1NDM4NCw2LjAwNDc2NCA1Ljk5MDExNSw0LjY2MDk4NCA1Ljk4NTEyOCwzLjAwODE3NyA1Ljk4MDE1NiwxLjM2MSA0LjY0NzY5NiwwLjAwNDc3NiAyLjk4OTQ2NCwwLjAwOTc3OSAxLjMzNDM2NCwwLjAxNDc3NCAtMC4wMDQ5NjcsMS4zNzU3MTggMS40ZS01LDMuMDI2MjE0IFogTSAyLjk5ODU3MSw1LjAwOTc1NiBDIDEuODk4MDU5LDUuMDEzMDc3IDEuMDAzMzMsNC4xMjM3MjEgMS4wMDAwMDksMy4wMjMxOTYgMC45OTY2ODEsMS45MjAzNzMgMS44OTQyNjIsMS4wMTMwODkgMi45OTI0ODIsMS4wMDk3NzUgNC4wODc1NjgsMS4wMDY0NyA0Ljk4MTc5NSwxLjkwNTM3MyA0Ljk4NTEzMiwzLjAxMTE5NCA0Ljk4ODQ1Myw0LjExMTcwNiA0LjA5OTA5Niw1LjAwNjQzNSAyLjk5ODU3MSw1LjAwOTc1NiBaIgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMyw1LjkyMzE3NzMsMTMuMzQ2MzU1KSIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDQiCiAgICAgICBkPSJNIDIuMjExNDI0LDMuNDIyODUyIEMgMS41NDIzNzMsMy40MjI4NTIgMSwyLjg4MDQ3OSAxLDIuMjExNDI4IDEsMS41NDIzNzcgMS41NDIzNzMsMS4wMDAwMDQgMi4yMTE0MjQsMS4wMDAwMDQgYyAwLjY2OTA1MSwwIDEuMjExNDI0LDAuNTQyMzczIDEuMjExNDI0LDEuMjExNDI0IDAsMC42NjkwNTEgLTAuNTQyMzczLDEuMjExNDI0IC0xLjIxMTQyNCwxLjIxMTQyNCB6IE0gMCwyLjIxMTQyOCBjIDAsMS4yMjEzMzUgMC45OTAwODgsMi4yMTE0MjQgMi4yMTE0MjQsMi4yMTE0MjQgMS4yMjEzMzYsMCAyLjIxMTQyNCwtMC45OTAwODkgMi4yMTE0MjQsLTIuMjExNDI0IEMgNC40MjI4NDgsMC45OTAwOTIgMy40MzI3Niw0ZS02IDIuMjExNDI0LDRlLTYgMC45OTAwODgsNGUtNiAwLDAuOTkwMDkyIDAsMi4yMTE0MjggWiIKICAgICAgIHN0eWxlPSJmaWxsOiMxNzE4MWE7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmUiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzMzMsMCwwLC0xLjMzMzMzMzMsMTIuNzM5NTg0LDEzLjIzMDQ2OSkiIC8+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGg1IgogICAgICAgZD0iTSAxLjk5ODMxNSwwIEggMCB2IDEgaCAxLjk5ODMxNSB6IgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMyw4LjAxMTcxODcsMjApIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoNiIKICAgICAgIGQ9Im0gMC41NzE3NzcsMC40NTQxNDggYyAwLjIxMjAxNiwwLjQxMzExOSAwLjMyMzc0LDAuODU0MzAxIDAuMzI2MzM4LDEuMzE5Mzg1IDAuMDAyMDc5LDAuMzk4MDUgLTAuNjE2MzAyLDAuMzk4NTcgLTAuNjE4OSwwIEMgMC4yNzcxMzYsMS40MTkxMzQgMC4xOTkxODksMS4wODI0MDIgMC4wMzcwNTksMC43NjY0NTYgLTAuMTQ0Mjk4LDAuNDEyNTc3IDAuMzg5MzgsMC4wOTkyMjkgMC41NzEyNTYsMC40NTQxNDggWiIKICAgICAgIHN0eWxlPSJmaWxsOiMxNzE4MWE7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzMzMsMCwwLC0xLjMzMzMzMzMsMTIuNTgyMDMxLDEzLjM0Mzc0OSkiIC8+CiAgPC9nPgo8L3N2Zz4=");
}

icon[image="with-guests"] {
    background-image: url("data:image/svg+xml;base64,PHN2ZwogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxIgogICB3aWR0aD0iMjgiCiAgIGhlaWdodD0iMjgiCiAgIHZpZXdCb3g9IjAgMCAyOCAyOCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMSIgLz4KICA8ZwogICAgIGlkPSJnMSI+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGgxIgogICAgICAgZD0iTSAyLjU0MDc0OSw0LjAwODc4OSBDIDEuNjgxMjYyLDQuMDA4Nzg5IDEsMy4zMjY4NTQgMSwyLjUwNDU4IDEsMS42ODIzMDYgMS42ODEyNjIsMS4wMDAzNzEgMi41NDA3NDksMS4wMDAzNzEgYyAwLjg1OTQ4OCwwIDEuNTQwNzUsMC42ODE5MzUgMS41NDA3NSwxLjUwNDIwOSAwLDAuODIyMjc0IC0wLjY4MTI2MiwxLjUwNDIwOSAtMS41NDA3NSwxLjUwNDIwOSB6IE0gMCwyLjUwNDU4IGMgMCwxLjM5MTUxNSAxLjE0NjA4OCwyLjUwNDIwOSAyLjU0MDc0OSwyLjUwNDIwOSAxLjM5NDY2MiwwIDIuNTQwNzUsLTEuMTEyNjk0IDIuNTQwNzUsLTIuNTA0MjA5IDAsLTEuMzkxNTE1IC0xLjE0NjA4OCwtMi41MDQyMDkgLTIuNTQwNzUsLTIuNTA0MjA5IEMgMS4xNDYwODgsMy43MWUtNCAwLDEuMTEzMDY1IDAsMi41MDQ1OCBaIgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMyw5LjI0NzM5NiwxMC42ODIyOTIpIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoMiIKICAgICAgIGQ9Ik0gNS41LDguMDA2ODM2IEMgMy4wMTUxMiw4LjAwNjgzNiAxLDUuOTk1MzYzIDEsMy41MjE0MzQgViAwLjk5OTcwNyBoIDEwIHYgLTEgSCAwIHYgMy41MjE3MjcgYyAwLDMuMDI4OTQ5IDIuNDY1NTczLDUuNDg1NDAyIDUuNSw1LjQ4NTQwMiAxLjI3ODk5OCwwIDIuNDU3ODIzLC0wLjQzNjg5MiAzLjM5MjUzMSwtMS4xNjg3NDQgTCA4LjI3NjA0NCw3LjA1MDcyNiBDIDcuNTExMDA4LDcuNjQ5NzMxIDYuNTQ3NjU1LDguMDA2ODM2IDUuNSw4LjAwNjgzNiBaIgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMyw1LjMzMzMzMzMsMjQpIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoMyIKICAgICAgIGQ9Ik0gMCwtNGUtNiBWIDUgSCAxIFYgLTRlLTYgWiIKICAgICAgIHN0eWxlPSJmaWxsOiMxNzE4MWE7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmUiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzMzMsMCwwLC0xLjMzMzMzMzMsMTguNjY2NjY3LDIxLjMzMzMzMykiIC8+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGg0IgogICAgICAgZD0iTSAwLC00LjAzODA4MyBWIDEgaCAxLjAwMDAwMSB2IC01LjAzODA4MyB6IgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDAsLTEuMzMzMzMzMywtMS4zMzMzMzMzLDAsMTcuMjgyNTUyLDE4LjY2NjY2NykiIC8+CiAgPC9nPgo8L3N2Zz4=");
}

icon[image="location"] {
    background-image: url("data:image/svg+xml;base64, PHN2ZwogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxIgogICB3aWR0aD0iMjgiCiAgIGhlaWdodD0iMjgiCiAgIHZpZXdCb3g9IjAgMCAyOCAyOCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMSIgLz4KICA8ZwogICAgIGlkPSJnMSI+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGgxIgogICAgICAgZD0iTSA2LjM3ODQxOCwxMy43MzI0MjIgMTIuNzQ5OTk1LDguMzQwNTc4IDEyLjc1LC00LjA5ZS00IEggMCBWIDguMzQwNzU1IFogTSAwLjk3NjU5MSw3Ljg4NzUxOCBWIDAuOTc2MTgxIGggMTAuNzk2ODE3IGwgLTRlLTYsNi45MTE0ODIgLTUuMzk1MzM1LDQuNTY1NzE2IHoiCiAgICAgICBzdHlsZT0iZmlsbDojMTcxODFhO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMzMzLDAsMCwtMS4zMzMzMzMzLDUuNSwyMy4xMTcxODgpIiAvPgogIDwvZz4KPC9zdmc+");
}

icon[image="trainer-info"] {
    background-image: url("data:image/svg+xml;base64,PHN2ZwogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxIgogICB3aWR0aD0iMjgiCiAgIGhlaWdodD0iMjgiCiAgIHZpZXdCb3g9IjAgMCAyOCAyOCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMSIgLz4KICA8ZwogICAgIGlkPSJnMSI+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGgxIgogICAgICAgZD0iTSA5Ljg4OTc5Miw1LjIyNzczNSBDIDkuNDk1ODM5LDcuMzAyMDY0IDcuNjczMTY1LDguODcwNDMyIDUuNDg0MTgsOC44NzA0MzIgYyAtMi40NzY3MTgsMCAtNC40ODQ0OTUsLTIuMDA3Nzc2IC00LjQ4NDQ5NSwtNC40ODQ0OTQgMCwtMS4zNTE0MjUgMC41OTY4ODYsLTIuNTYzMTg5IDEuNTQ0NzIyLC0zLjM4NjY0MyBIIDMuOTY4MzU5IFYgLTMuOWUtNCBIIDIuMTkxNzg2IEMgMC44NjA4MSwxLjAwMDIzNyAwLDIuNTkyNTYxIDAsNC4zODU5MzggYyAwLDMuMDI4ODI4IDIuNDU1MzUxLDUuNDg0MTc5IDUuNDg0MTgsNS40ODQxNzkgMi43NDI1NzcsMCA1LjAxNDk1MywtMi4wMTMxNzggNS40MTk5NzUsLTQuNjQyMzgyIHoiCiAgICAgICBzdHlsZT0iZmlsbDojMTcxODFhO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMzMzLDAsMCwtMS4zMzMzMzMzLDQuMDEzMDIxMywyMi42Njc5NjkpIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoMiIKICAgICAgIGQ9Ik0gMC44NTMxMTUsMy43MDg5NDggQyAxLjE5MTI0NywzLjk0OTM3IDEuNjA1MzM1LDQuMDkwODIgMi4wNTEwOTksNC4wOTA4MiBoIDIuODk1OTM3IGMgMC4wMTczOTEsMCAwLjAzNDg0OCwtMi4wMWUtNCAwLjA1MjIxNCwtNi4xZS00IGwgOC40ZS00LC0yZS01IEMgNi4yNjM2MzgsNC4wNTgzNDMgNy4xNzg2NTIsMi44OTQxODIgNi45NjA3NSwxLjY2Njk1NiBMIDYuOTYwNDUzLDEuNjY1Mjg2IDYuNjUzMTQ2LDIuNTdlLTQgNS42NzAwNjUsMC4xODE3IDUuOTc2NzIyLDEuODQzMjA1IEMgNi4wODk2NTcsMi40ODQzMjUgNS42MDkzNzYsMy4wNzQ1NzkgNC45NzUzMTgsMy4wOTA4MTEgNC45NjYwNTgsMy4wOTEwMjYgNC45NTY1NzksMy4wOTExMzUgNC45NDcwMzYsMy4wOTExMzUgSCAyLjA1MTA5OSBjIC0wLjIzMTQ4LDAgLTAuNDQ0MjYyLC0wLjA3Mjg4OCAtMC42MTg3MTQsLTAuMTk2OTM3IEMgMS4xMTI2MTcsMi42NjY4ODEgMC45NDg1MzcsMi4yNjczMDkgMS4wMTM3MjYsMS44NjY3MzMgYyA2ZS02LC0zLjZlLTUgMS4yZS01LC03LjJlLTUgMS44ZS01LC0xLjA4ZS00IEwgMS4yOTAxNzUsMC4xNzE0MjMgMC4zMDM1MjEsMC4wMTA1MzMgMC4wMjcwNTUsMS43MDU5NTEgYyAtMC4xMjQzMDYsMC43NjMzNTggMC4xODQ2MjIsMS41NDY5NzkgMC44MjYwNiwyLjAwMjk5NyB6IgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMyw2LjYzNjcxODcsMTEuNDU0NDI3KSIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDMiCiAgICAgICBkPSJNIDAsMi42MjMwNDcgSCA1Ljk3NzMyMiBWIC00LjMzZS00IEggMCBaIE0gMC45OTk2ODUsMS42MjMzNjIgdiAtMC42MjQxMSBoIDMuOTc3OTUxIHYgMC42MjQxMSB6IgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywxMy4zMzMzMzMsMjAuNDE5MjcxKSIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDQiCiAgICAgICBkPSJNIDIuMDE1NjUsNS4wMDAzMTUgSCAxIGMgLTQuNGUtNSwwIC04LjdlLTUsMCAtMS4yOWUtNCwtMTBlLTcgLTNlLTUsLTIuOWUtNSAtNi4yZS01LC02ZS01IC05LjNlLTUsLTkuMWUtNSAtMy4yZS01LC0zLjJlLTUgLTYuM2UtNSwtNi4zZS01IC05LjJlLTUsLTkuNGUtNSAtMTBlLTcsLTQuMmUtNSAtMTBlLTcsLTguNWUtNSAtMTBlLTcsLTEuMjllLTQgViAxIGMgMCwtNC40ZS01IDAsLTguN2UtNSAxMGUtNywtMS4yOWUtNCAyLjllLTUsLTMuMWUtNSA2ZS01LC02LjJlLTUgOS4xZS01LC05LjRlLTUgMy4yZS01LC0zLjJlLTUgNi4zZS01LC02LjJlLTUgOS40ZS01LC05LjFlLTUgNC4yZS01LDAgOC41ZS01LC0xMGUtNyAxLjI5ZS00LC0xMGUtNyBoIDEuMDE1NjUgYyA0LjRlLTUsMCA4LjdlLTUsMTBlLTcgMS4yOWUtNCwxMGUtNyAzLjFlLTUsMi45ZS01IDYuMmUtNSw1LjllLTUgOS4zZS01LDkuMWUtNSAzLjJlLTUsMy4yZS01IDYuMmUtNSw2LjNlLTUgOS4yZS01LDkuNGUtNSAwLDQuMmUtNSAwLDguNWUtNSAwLDEuMjllLTQgdiA0IGMgMCw0LjRlLTUgMCw4LjdlLTUgMCwxLjI5ZS00IC0zZS01LDMuMWUtNSAtNmUtNSw2LjJlLTUgLTkuMmUtNSw5LjRlLTUgLTMuMWUtNSwzLjFlLTUgLTYuM2UtNSw2LjJlLTUgLTkuM2UtNSw5LjFlLTUgLTQuMmUtNSwxMGUtNyAtOC41ZS01LDEwZS03IC0xLjI5ZS00LDEwZS03IHogTSAxLDYgQyAwLjQ0NzcxNSw2IDAsNS41NTIyODUgMCw1IFYgMSBDIDAsMC40NDc3MTUgMC40NDc3MTUsMCAxLDAgaCAxLjAxNTY1IGMgMC41NTIyODUsMCAxLDAuNDQ3NzE1IDEsMSB2IDQgYyAwLDAuNTUyMjg1IC0wLjQ0NzcxNSwxIC0xLDEgeiIKICAgICAgIHN0eWxlPSJmaWxsOiMxNzE4MWE7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmUiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzMzMsMCwwLC0xLjMzMzMzMzMsMTAuNjM2NzE5LDIyLjY2NjY2NykiIC8+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGg1IgogICAgICAgZD0iTSAyLDUuMDAwMzE1IEggMSBjIC00LjRlLTUsMCAtOC43ZS01LDAgLTEuMjllLTQsLTEwZS03IC0zLjFlLTUsLTIuOWUtNSAtNi4yZS01LC02ZS01IC05LjRlLTUsLTkuMWUtNSAtMy4xZS01LC0zLjJlLTUgLTYuMmUtNSwtNi4zZS01IC05LjFlLTUsLTkuNGUtNSAtMTBlLTcsLTQuMmUtNSAtMTBlLTcsLTguNWUtNSAtMTBlLTcsLTEuMjllLTQgViAxIGMgMCwtNC40ZS01IDAsLTguN2UtNSAxMGUtNywtMS4yOWUtNCAyLjllLTUsLTMuMWUtNSA2ZS01LC02LjJlLTUgOS4xZS01LC05LjRlLTUgMy4yZS01LC0zLjJlLTUgNi4zZS01LC02LjJlLTUgOS40ZS01LC05LjFlLTUgNC4yZS01LDAgOC41ZS01LC0xMGUtNyAxLjI5ZS00LC0xMGUtNyBoIDEgYyA0LjRlLTUsMCA4LjdlLTUsMTBlLTcgMS4yOWUtNCwxMGUtNyAzLjFlLTUsMi45ZS01IDYuMmUtNSw2ZS01IDkuNGUtNSw5LjFlLTUgMy4xZS01LDMuMmUtNSA2LjJlLTUsNi4zZS01IDkuMWUtNSw5LjRlLTUgMCw0LjJlLTUgMWUtNiw4LjVlLTUgMWUtNiwxLjI5ZS00IHYgNCBjIDAsNC40ZS01IC0xZS02LDguN2UtNSAtMWUtNiwxLjI5ZS00IC0yLjllLTUsMy4xZS01IC02ZS01LDYuMmUtNSAtOS4xZS01LDkuNGUtNSAtMy4yZS01LDMuMWUtNSAtNi4zZS01LDYuMmUtNSAtOS40ZS01LDkuMWUtNSAtNC4yZS01LDEwZS03IC04LjVlLTUsMTBlLTcgLTEuMjllLTQsMTBlLTcgeiBNIDEsNiBDIDAuNDQ3NzE1LDYgMCw1LjU1MjI4NSAwLDUgViAxIEMgMCwwLjQ0NzcxNSAwLjQ0NzcxNSwwIDEsMCBIIDIgQyAyLjU1MjI4NSwwIDMsMC40NDc3MTUgMywxIFYgNSBDIDMsNS41NTIyODUgMi41NTIyODUsNiAyLDYgWiIKICAgICAgIHN0eWxlPSJmaWxsOiMxNzE4MWE7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmUiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzMzMsMCwwLC0xLjMzMzMzMzMsMTkuOTcwMDUyLDIyLjY2NjY2NykiIC8+CiAgPC9nPgo8L3N2Zz4=");
}

icon[image="i-circle"] {
    background-image: url("data:image/svg+xml;base64,PHN2ZwogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxIgogICB3aWR0aD0iMjUuMzMzMzMyIgogICBoZWlnaHQ9IjI1LjMzMzMzMiIKICAgdmlld0JveD0iMCAwIDI1LjMzMzMzMiAyNS4zMzMzMzIiCiAgIHNvZGlwb2RpOmRvY25hbWU9ImkuY2lyY2xlLnN2ZyIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMS40LjIgKGViZjBlOTQwLCAyMDI1LTA1LTA4KSIKICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiCiAgIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMSIgLz4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgaWQ9Im5hbWVkdmlldzEiCiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjMDAwMDAwIgogICAgIGJvcmRlcm9wYWNpdHk9IjAuMjUiCiAgICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBpbmtzY2FwZTpwYWdlY2hlY2tlcmJvYXJkPSIwIgogICAgIGlua3NjYXBlOmRlc2tjb2xvcj0iI2QxZDFkMSIKICAgICBpbmtzY2FwZTp6b29tPSIxLjAyNjMxNTgiCiAgICAgaW5rc2NhcGU6Y3g9IjEyLjE3OTQ4NyIKICAgICBpbmtzY2FwZTpjeT0iMTIuNjY2NjY2IgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTUxMiIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSI5MjEiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjYxIgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0iZzEiPgogICAgPGlua3NjYXBlOnBhZ2UKICAgICAgIHg9IjAiCiAgICAgICB5PSIwIgogICAgICAgaW5rc2NhcGU6bGFiZWw9IjEiCiAgICAgICBpZD0icGFnZTEiCiAgICAgICB3aWR0aD0iMjUuMzMzMzMyIgogICAgICAgaGVpZ2h0PSIyNS4zMzMzMzIiCiAgICAgICBtYXJnaW49IjAiCiAgICAgICBibGVlZD0iMCIgLz4KICA8L3NvZGlwb2RpOm5hbWVkdmlldz4KICA8ZwogICAgIGlkPSJnMSIKICAgICBpbmtzY2FwZTpncm91cG1vZGU9ImxheWVyIgogICAgIGlua3NjYXBlOmxhYmVsPSIxIj4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDEiCiAgICAgICBkPSJNIDE3LjUsOS45OTk5OTkgQyAxNy41LDUuMzA1NTc4IDEzLjY5NDQyMSwxLjUgOSwxLjUgdiAtMSBjIDUuMjQ2NzA1LDAgOS41LDQuMjUzMjk0IDkuNSw5LjQ5OTk5OSB6IE0gOSwxLjUgQyA0LjMwNTU3OSwxLjUgMC41LDUuMzA1NTc4IDAuNSw5Ljk5OTk5OSBoIC0xIEMgLTAuNSw0Ljc1MzI5NCAzLjc1MzI5NSwwLjUgOSwwLjUgWiBNIDAuNSw5Ljk5OTk5OSBDIDAuNSwxNC42OTQ0MiA0LjMwNTU4LDE4LjUgOSwxOC41IHYgMSBjIC01LjI0NjcwNSwwIC05LjUsLTQuMjUzMjk2IC05LjUsLTkuNTAwMDAxIHogTSA5LDE4LjUgYyA0LjY5NDQyMSwwIDguNSwtMy44MDU1OCA4LjUsLTguNTAwMDAxIGggMSBDIDE4LjUsMTUuMjQ2NzA0IDE0LjI0NjcwNSwxOS41IDksMTkuNSBaIgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLjY2NjY2NjY3LDI2KSIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDIiCiAgICAgICBkPSJtIDIuMjIyNjU2LC0yLjI0MjE4OCB6IG0gMS4xMDYsOC4yODgwMDEgdiAxLjQ3IGggMS4zNDQwMDEgdiAtMS40NyB6IG0gMC4wNywtOC4yODgwMDEgdiA2LjkwMjAwMSBoIDEuMjA0IHYgLTYuOTAyMDAxIHoiCiAgICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMzMzLDAsMCwtMS4zMzMzMzMzLDcuMzMzMzMzMywxNS42NzcwODMpIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoMyIKICAgICAgIGQ9IiIKICAgICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICBhcmlhLWxhYmVsPSJpIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMzMzLDAsMCwxLjMzMzMzMzMsMTAuMjk2ODc1LDE4LjY2NjY2NykiIC8+CiAgPC9nPgo8L3N2Zz4KCg==");
}

icon[image="icon-validation"] {
    background-image: url("data:image/svg+xml;base64,PHN2ZwogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxIgogICB3aWR0aD0iMjQiCiAgIGhlaWdodD0iMjQiCiAgIHZpZXdCb3g9IjAgMCAyNCAyNCIKICAgc29kaXBvZGk6ZG9jbmFtZT0iaWNvblZhbGlkYXRpb24uc3ZnIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIxLjQuMiAoZWJmMGU5NDAsIDIwMjUtMDUtMDgpIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzCiAgICAgaWQ9ImRlZnMxIiAvPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBpZD0ibmFtZWR2aWV3MSIKICAgICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgICAgYm9yZGVyY29sb3I9IiMwMDAwMDAiCiAgICAgYm9yZGVyb3BhY2l0eT0iMC4yNSIKICAgICBpbmtzY2FwZTpzaG93cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMC4wIgogICAgIGlua3NjYXBlOnBhZ2VjaGVja2VyYm9hcmQ9IjAiCiAgICAgaW5rc2NhcGU6ZGVza2NvbG9yPSIjZDFkMWQxIgogICAgIGlua3NjYXBlOnpvb209IjEuMDgzMzMzMyIKICAgICBpbmtzY2FwZTpjeD0iMTEuNTM4NDYyIgogICAgIGlua3NjYXBlOmN5PSIxMiIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE1MTIiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iOTIxIgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSI2MSIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIwIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9ImcxIj4KICAgIDxpbmtzY2FwZTpwYWdlCiAgICAgICB4PSIwIgogICAgICAgeT0iMCIKICAgICAgIGlua3NjYXBlOmxhYmVsPSIxIgogICAgICAgaWQ9InBhZ2UxIgogICAgICAgd2lkdGg9IjI0IgogICAgICAgaGVpZ2h0PSIyNCIKICAgICAgIG1hcmdpbj0iMCIKICAgICAgIGJsZWVkPSIwIiAvPgogIDwvc29kaXBvZGk6bmFtZWR2aWV3PgogIDxnCiAgICAgaWQ9ImcxIgogICAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiCiAgICAgaW5rc2NhcGU6bGFiZWw9IjEiPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoMSIKICAgICAgIGQ9Ik0gNS42NDI2MTUsMS4wNjc0NTkgNS4yODI3NzMsMC43MjAzMDggNS42NDcwMTEsMC4zNDI3NTUgNi4wMDY2NDEsMC43MjQ2OTkgWiBNIDYuMDAyNDU3LDEuNDE0NjEgMC4zNTk4NDIsNy4yNjM1MDMgLTAuMzU5ODQyLDYuNTY5MjAxIDUuMjgyNzczLDAuNzIwMzA4IFogbSA5LjYzMzUxNiwxMC45OTU2MDkgLTEwLjM1NzM4NSwtMTEgMC43MjgwNTMsLTAuNjg1NTIgMTAuMzU3Mzg2LDExIHoiCiAgICAgICBzdHlsZT0iZmlsbDojMTcxODFhO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMzMzLDAsMCwtMS4zMzMzMzMzLDEuMzMzMzMzMywyMC4wODk5NDUpIiAvPgogIDwvZz4KPC9zdmc+Cgo=");
}

hr {
  border: none;
  border-top: 1px solid #CCCCBF;
  margin: 16px 0;
}

table.full-width {
  width: 100%;
}

table.borderless-row-divided {
  border-spacing: 0;
}

table.borderless-row-divided td,
table.borderless-row-divided th {
  border: 0;
  padding: 5px 0px;
  font-weight: normal;
}

table.borderless-row-divided tr + tr td,
table.borderless-row-divided tr + tr th {
  border-top: 1px solid #ddd;
}

/* alignment — also table-scoped */
table .align-left {
  text-align: left;
}

table .align-right {
  text-align: right;
}

list-item {
  display: flex;
  align-items: stretch;
  margin-bottom: 8px;
}

list-item > img {
  width: 170px;
  height: 170px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  flex: 0 0 auto;
}

list-item {
  position: relative;
}

list-item > image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 170px;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
  z-index: 1;
}

list-item > image-overlay traffic-light-title {
  color: #fff;
}

list-item > content {
  margin-left: 8px;
  margin-right: 8px;
}

.check-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-family: inherit;
  color: #1f1f1f;
}

/* visually hide the native box but keep it accessible */
.check-field input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* custom square */
.check-field .box{
  position: relative;
  inline-size: 1.6em;     /* square size relative to text */
  block-size: 1.6em;
  border: 1px solid #1f1f1f;
  background: transparent;
  flex: 0 0 auto;
  margin-left: 8px;
  margin-right: 8px;
}

/* checkmark */
.check-field .box::after{
  content: "";
  position: absolute;
  left: 20%;
  top: 20%;
  inline-size: 80%;
  block-size: 80%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='%231F1F1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  visibility: hidden;
}

/* show check when checked */
.check-field input:checked + .box::after{
  /*transform: rotate(45deg) scale(1);*/
  visibility: visible;
}

/* focus-visible ring for keyboard users */
.check-field input:focus-visible + .box{
  box-shadow: 0 0 0 3px rgba(0,0,0,.12);
}

/* copy styling */
.check-field .text{
  line-height: 1.35;
}

/* wrapper */
:is(.select-field, select-field) {
  position: relative;
  display: block;
  /*max-width: 360px;*/
  margin: 8px 0;
  font-family: inherit; /* make sure it inherits */
}

/* the box */
:is(.select-field, select-field) select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 58px;
  padding: 20px 24px 0 20px;
  border: 1px solid #a1a1a1;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0);
  color: #1f1f1f;
  font-size: 18px;
  font-weight: 400;
  transition: border-color .18s ease, box-shadow .18s ease;
}

:is(.select-field, select-field) select:focus {
  outline: none;
  border-color: #111111;
  box-shadow: 0 0 0 2px rgba(0,0,0,.05) inset;
}

/* custom chevron */
:is(.select-field, select-field)::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
  opacity: .8;
}

/* floating label (starts centered) */
:is(.select-field, select-field) label {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;            /* only size, inherits family */
  font-weight: 400;
  color: #5f5f5f;
  pointer-events: none;
  transition: transform .15s ease, top .15s ease, font-size .15s ease, opacity .15s ease;
  opacity: .9;
}

/* move the label up on focus or when a value is chosen */
:is(.select-field, select-field):has(select:focus) label,
:is(.select-field, select-field):has(select:valid) label {
  top: 5px;
  transform: none;
  font-size: 12px;             /* smaller when floated */
  opacity: .9;
}

/* container */
text-field {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 24px 16px 8px;
  border-bottom: 1px solid #8D8D8D;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  font-family: "Hanken Grotesk", "HK Grotesk", sans-serif;
  color: #000000;
  line-height: 1.6;
  font-weight: 500;
  overflow: hidden;
}

text-field.standalone {
  padding: 24px 4px;
}

/* floating label (default = large, centered-ish) */
text-field label {
  position: absolute;
  left: 16px;
  top: 24px;
  width: 100%;
  padding-right: 32px;
  pointer-events: none;
  transition: transform .25s ease-in-out, top .25s ease-in-out, font-size .25s ease-in-out, line-height .25s ease-in-out;
  font-family: "Hanken Grotesk", HK Grotesk, sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 1.125rem;
  line-height: 1.625rem;
}

text-field.standalone label {
  left: 4px;
}

/* required asterisk */
text-field.standalone:has(input[required]) label::after {
  content: ' *';
  color: #c0392b;
}

/* compact (floated) state */
text-field:focus-within label,
text-field:has(input:not(:placeholder-shown)) label{
  top: 8px;
  font-size: 0.75rem;
  line-height: 1rem;
}

/* inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel" i]
{
  margin: 0;
  width: 100%;
  border: none;
  outline: 0;
  padding: 0;
  background: transparent;
  box-sizing: border-box;
  font-family: "Hanken Grotesk", HK Grotesk, sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.625rem;
}

input[readonly] {
  color: #8D8D8D;
  cursor: default;
}

text-field:has(input[readonly]) label {
  color: #8D8D8D;
  cursor: default;
}

input[readonly][pagesheet-modal-open]:not([pagesheet-modal-open=""]) {
  color: #000000;
  cursor: pointer;
}

text-field:has(input[readonly][pagesheet-modal-open]:not([pagesheet-modal-open=""])) label {
  color: #000000;
  cursor: pointer;
}

box-decoration {
  display: block;
  color: #000000;
  line-height: 1.6;
  font-weight: 500;
  box-sizing: border-box;
  border: 1px solid #8D8D8D;
  border-radius: 4px;
  margin: 16px 0;
}

box-decoration > *:not(:last-child) {
  border-bottom: 1px solid #8D8D8D;
}

box-decoration > :is(.select-field, select-field) select {
  border: 0;
  border-bottom: 0;
}

box-decoration > *:last-child {
  border-bottom: 0;
}

/* Ensure the modal itself never shows a border-bottom (defensive) */
box-decoration > pagesheet-modal {
  border-bottom: 0;
}

/* If the last child is a pagesheet-modal, also remove border from the element before it */
box-decoration:has(> pagesheet-modal:last-child)
  > *:nth-last-child(2) {
  border-bottom: 0 !important;
}

/* If the last child is a pagesheet-modal, remove the border from the element before it…
   …EXCEPT when that element is an error row */
box-decoration:has(> pagesheet-modal:last-child)
  > *:nth-last-child(2):not(.error) {
  border-bottom: 0 !important;
}

/* If the last child is pagesheet-modal AND the element before it is .error,
   treat that .error row like the last visual row (keep bottom red + rounded corners) */
box-decoration:has(> pagesheet-modal:last-child)
  > .error:nth-last-child(2) {
  /* keep its bottom border red (your base .error border already does this) */
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

box-decoration:has(> pagesheet-modal:last-child)
  > .error:nth-last-child(2) {
    border: 1px solid #C62828 !important;
}

box-decoration > .error:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

box-decoration > .error:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

box-decoration > .error:first-child:last-child {
  border-radius: 4px;
}

box-decoration > .error {
  border: 1px solid #C62828;
  margin: -1px;              /* overlap shared borders */
  position: relative;
  z-index: 1;
}

box-decoration > .error + * {
  border-top: 0;
}

box-decoration > *:has(+ .error) {
  border-bottom: 0;
}

/* container */
textarea-field {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 24px 16px 8px;
  border-bottom: 1px solid #8D8D8D;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  font-family: "Hanken Grotesk", "HK Grotesk", sans-serif;
  color: #000000;
  line-height: 1.6;
  font-weight: 500;
  overflow: hidden;
}

textarea-field.standalone {
  padding: 24px 4px;
}

/* label (compact default state) */
textarea-field label {
  position: absolute;
  left: 16px;
  top: 8px;
  width: 100%;
  padding-right: 32px;
  pointer-events: none;
  font-family: "Hanken Grotesk", HK Grotesk, sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 0.75rem;
  line-height: 1rem;
}

textarea-field.standalone label {
  left: 4px;
}

/* required asterisk */
textarea-field.standalone:has(textarea[required]) label::after {
  content: ' *';
  color: #c0392b;
}

/* (previous compact state rule removed; compact is now default) */

/* textarea */
textarea-field textarea {
  margin: 0;
  width: 100%;
  border: none;
  outline: 0;
  padding: 0;
  background: transparent;
  box-sizing: border-box;
  font-family: "Hanken Grotesk", HK Grotesk, sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.625rem;
  resize: vertical;
  min-height: 120px;
}

input[readonly] {
  color: #8D8D8D;
  cursor: default;
}

textarea-field:has(input[readonly]) label {
  color: #8D8D8D;
  cursor: default;
}

input[readonly][pagesheet-modal-open]:not([pagesheet-modal-open=""]) {
  color: #000000;
  cursor: pointer;
}

textarea-field:has(input[readonly][pagesheet-modal-open]:not([pagesheet-modal-open=""])) label {
  color: #000000;
  cursor: pointer;
}

switch-field {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  align-items: center;
}

switch-field content {
  font-size: 0.875rem;
  color: #000;
  line-height: 1rem;
  max-width: 80%;
}

switch-field content a {
  color: #000;
}

switch-toggle {
  display: inline-block;
}

switch-toggle .switch-toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
/* visual track */
switch-toggle .switch-toggle__label {
  padding: 1px;
  width: 42px;
  height: 24px;
  border: 1px solid #000;
  cursor: pointer;
  display: inline-block;
  border-radius: 24px;
  position: relative;
  transition: background-color 0.2s ease;
}
/* knob */
switch-toggle .switch-toggle__label::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 1px;
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
}
/* on state */
switch-toggle .switch-toggle__input:checked + .switch-toggle__label {
  background-color: #000;
}

switch-toggle .switch-toggle__input:checked + .switch-toggle__label::after {
  transform: translateX(20px);
}
/* focus ring */
switch-toggle .switch-toggle__input:focus + .switch-toggle__label {
  outline: 2px solid #9cf;
  outline-offset: 2px;
}