/*
 * Layer order matters: `responsive` declarations always beat `unconditional`
 * declarations for the same property, regardless of source position.
 * This protects against Next's production CSS minifier (cssnano), which
 * can hoist/merge plain declarations that happen to be byte-identical
 * across unrelated selectors into a new rule positioned after a rule's
 * own @container override -- silently undoing the override, but only
 * in the minified production build (never in `next dev`).
 */
@layer unconditional, responsive;

/* Account creation `form` section */
.signUp_form_form__sd_4r {
  grid-area: form;

  @layer unconditional {
    flex: 1 1 100%;

    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    height: auto;
    align-items: stretch;
    justify-content: space-between;
  }

  @layer responsive {
    @container main style(--inc-inline-size-md: var(--inc-bp-md)) {
      height: unset;
    }
  }
}

.signUp_form_inner__87_8R {
  @layer unconditional {
    flex: 1;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--signUp-gap);

    width: 100%;

    padding-inline: var(--inc-base-section-padding-inline-sm);
    padding-block: 0 var(--inc-base-section-padding-block-sm);
  }

  @layer responsive {
    @container main style(--inc-inline-size-md: var(--inc-bp-md)) {
      padding-inline: var(--inc-base-section-padding-inline-sm)
        var(--inc-base-section-padding-inline-md);
      padding-block: 0 var(--inc-base-section-padding-block-md);
    }
  }
}

.signUp_form_panelsNav___YD_J {
  @layer unconditional {
    position: relative;

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-template-rows: [label-start button-start] 1fr [button-end text-start] auto [text-end label-end];

    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: baseline;

    width: 100%;
    padding: var(--inc-base-section-padding-block-sm) 0;
  }

  @layer responsive {
    @container main style(--inc-inline-size-md: var(--inc-bp-md)) {
      padding-block: var(--inc-base-section-padding-block-md);
      padding-inline-end: var(--inc-base-section-padding-inline-sm);
    }
  }
}

.signUp_form_panelsNav___YD_J:before {
  position: absolute;
  margin-bottom: calc(2 * var(--inc-base-outline-width));
  content: "";
  align-self: center;

  z-index: 10;
  grid-row: button;

  height: 1px;
  border-bottom: 1px solid var(--inc-palette-white);
}
.signUp_form_panelsNav___YD_J:has(> :first-child:nth-last-child(3)):before {
  width: calc(200% / 3);
  left: calc(100% / 6);
  right: calc(100% / 6);
}
.signUp_form_panelsNav___YD_J:has(> :first-child:nth-last-child(4)):before {
  width: calc(300% / 4);
  left: calc(100% / 8);
  right: calc(100% / 8);
}

.signUp_form_panelsNavLabel__WrNSd {
  grid-row: label;

  display: grid;
  grid-auto-flow: row;
  grid-template-rows: subgrid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  gap: 1rem;

  color: var(--inc-palette-white);
  line-height: 1;
  text-align: center;
}

.signUp_form_panelsNavButton__raB9D {
  grid-row: button;
  z-index: 20;
  align-self: center;

  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  min-width: calc((2 * var(--inc-base-border-width)) + (36rem / 16));

  aspect-ratio: 1;

  line-height: 1;
  text-box-edge: cap alphabetic;
  text-box-trim: trim-both;

  box-shadow: 0 0 0 0.5rem var(--inc-palette-grayscale-header);
}

.signUp_form_currentPanel__RbGZx {
  background-color: var(--inc-palette-primary-default-strong);
  color: var(--inc-palette-grayscale-input);
  font-weight: 900;
}
.signUp_form_currentPanel__RbGZx[data-invalid] {
  background-color: var(--inc-form-control-background-error);
  color: var(--inc-palette-primary-default-strong);
}

.signUp_form_panel__bbsQ_ {
  container: panel / inline-size;

  @layer unconditional {
    height: -moz-fit-content;
    height: fit-content;
    flex: 1 1 auto;

    will-change: margin-block-end;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
    padding-inline: var(--inc-base-section-padding-inline-sm);
    padding-block: var(--inc-base-section-padding-block-sm);
    border-radius: 0.75rem;

    color: var(--inc-palette-black);
    background-color: var(--inc-palette-grayscale-background);

    transition:
      opacity 0.24s ease-in-out,
      margin-block-end 0.24s ease-in-out;
    transition-behavior: allow-discrete;
  }

  @layer responsive {
    @container main style(--inc-inline-size-md: var(--inc-bp-md)) {
      height: 0;
    }
  }
}

.signUp_form_panelVisible__j1oOn {
  /* height: auto; */
  margin-block-end: 2rem;
}
.signUp_form_panelHidden__NkCdP,
.signUp_form_panelHidden__NkCdP > * {
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;

  /* height: 0; */
  margin-block-end: 0;
}

.signUp_form_legend__y7v1c {
  grid-column: 1 / -1;

  width: 100%;
  padding-block-end: 1rem;

  font-size: var(--inc-type-display-sm);
  font-weight: 700;
}

.signUp_form_panelHeader__0_YbY {
  grid-column: 1 / -1;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.5rem;

  margin-bottom: 0.5rem;
}

.signUp_form_panelSection__G7qZe {
  @layer unconditional {
    flex: 1;
    overflow-y: auto;

    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: auto;
    grid-auto-flow: row;
    align-items: start;
    align-content: start;
    justify-content: stretch;
    -moz-column-gap: var(--inc-base-form-gap-inline);
         column-gap: var(--inc-base-form-gap-inline);
    row-gap: var(--inc-base-form-gap-block);

    padding: var(--inc-base-outline-width);
    margin-bottom: 1rem;
  }

  @layer responsive {
    @container panel (min-width: 400px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}
.signUp_form_panelSection__G7qZe.signUp_form_column__h0UK3 {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
}
.signUp_form_panelSection__G7qZe.signUp_form_panelVerifySuccessState__Uf724 {
  grid-template-rows: auto 1fr;
}

.signUp_form_scrollArea__6K8kd {
  flex: 1;
  overflow-y: auto;
}
.signUp_form_scrollAreaViewport__GYGhF {
  padding: 0.5rem;
}

/** Distinct from .footer, used _within_ a panel for navigating between steps */
.signUp_form_panelFooter__Q_Mvh {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;

  width: 100%;
}
.signUp_form_panelFooter__Q_Mvh > .signUp_form_footerButton__IaYLj {
  font-size: var(--inc-type-display-xs);
  font-weight: 700;
}
.signUp_form_panelFooter__Q_Mvh:has(:first-child:last-child) {
  grid-template-columns: repeat(2, 1fr);
}
.signUp_form_panelFooter__Q_Mvh:has(:first-child:last-child) > .signUp_form_footerButton__IaYLj {
  grid-column-start: 2;
}

.signUp_form_panelFooter__Q_Mvh.signUp_form_paymentFormFooter__Z6a4G {
  grid-template-columns: repeat(3, 1fr);
  align-items: last baseline;
}
.signUp_form_panelFooter__Q_Mvh.signUp_form_paymentFormFooter__Z6a4G > .signUp_form_paymentFormCouponInput__iuOVJ {
  grid-column: 1 / span 2;
}
.signUp_form_paymentFormCouponError__OPrAx {
  grid-column: 1 / span 3;
  font-size: var(--inc-type-text-xs);
  color: var(--inc-form-control-foreground-error);
}

.signUp_form_paymentForm__dKS1o {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
  zoom: 0.98;
}

/** Used as a footer to the entire form, with links to Privacy Policy, TOS, etc. */
.signUp_form_footer__AbCQG {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;

  width: 100%;
}

.signUp_form_link__IiRhb {
  color: var(--inc-form-control-foreground);
  text-align: left;
  text-decoration: underline;
  justify-self: center;
}

.signUp_form_footerButton__IaYLj {
  justify-content: center;
}

.signUp_form_spanAllColumns__W5446 {
  grid-column: 1 / -1;
}

.signUp_form_checkboxLabel__ejx6L {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}
.signUp_form_checkboxLabel__ejx6L:has([data-disabled]) {
  color: var(--inc-form-control-label-disabled);
}

.signUp_form_checkboxLabel__ejx6L.signUp_form_licenseAcceptCheckboxLabel__B7Fdk {
  font-size: var(--inc-type-display-xs);
}

.signUp_form_searchSelectTrigger__VQ2lj {
  transform: rotate(90deg);
}
.signUp_form_panel__bbsQ_ [data-popup-open] .signUp_form_searchSelectTrigger__VQ2lj {
  transform: rotate(-90deg);
}

.signUp_form_passwordField__EGm_v {
  --icon-width: 1.5rem;

  position: relative;
}
.signUp_form_passwordField__EGm_v > input {
  padding-inline-end: calc(
    var(--inc-base-input-padding-inline) + var(--icon-width) +
      var(--inc-base-input-gap)
  );
}
.signUp_form_passwordField__EGm_v .signUp_form_passwordFieldToggle__zpcGc {
  z-index: 20;
  position: absolute;
  top: 0;
  right: var(--inc-base-input-padding-inline);
  bottom: 0;
  width: -moz-fit-content;
  width: fit-content;
  max-width: var(--icon-width);
}

.signUp_form_authMethodErrorMessage__AcV9L {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--inc-base-section-gap);
}

.signUp_form_verifyOTPDescription__vtQXO {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
  row-gap: 0.5rem;
  margin-block-start: 0.5rem;
}
.signUp_form_verifyOTPDescriptionSection__UxPvN {
  display: inline-flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: first baseline;
  gap: 1ch;
}
.signUp_form_verifyOTPDescriptionButton__Uqqf3 {
  font-size: inherit;
}
.signUp_form_leadParagraph__QQj0Y,
.signUp_form_verifyDisplayedMedium__Wd3BX {
  font-size: var(--inc-type-text-lg);
  text-wrap: balance;
}
.signUp_form_verifySuccess__Dmcex {
  align-self: stretch;

  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;

  background-color: var(--inc-palette-success-background);
  padding: var(--inc-base-section-padding-inline-sm);
  border-radius: var(--inc-base-border-radius);
  margin-block-start: 1rem;
}
.signUp_form_verifySuccessCheckmark__3FCya {
  aspect-ratio: 1;
  width: 3rem;
  height: 3rem;
  padding: 0.5rem;
  border-radius: 1.5rem;

  background: var(--inc-palette-success-default-strong);
  color: var(--inc-palette-white);
}
.signUp_form_verifySuccess__Dmcex h3 {
  font-size: var(--inc-type-display-sm);
  color: var(--inc-palette-success-default-strong);
}

.signUp_form_paymentError__4g86A {
  font-size: var(--inc-type-text-xs);
  color: var(--inc-form-control-foreground-error);
}

.signUp_form_licensePanel__cNo0w {
  @layer unconditional {
    gap: var(--inc-base-form-gap-block);

    /* Below the container's md breakpoint, cap the panel to the viewport so
       its content (the ScrollArea) scrolls internally instead of the page. */
    max-height: 70dvh;
  }

  @layer responsive {
    @container main style(--inc-inline-size-md: var(--inc-bp-md)) {
      max-height: none;
    }
  }
}
.signUp_form_licensePanelSection__gAJsl {
  margin-block-end: 0;
}

.signUp_form_licensePanel__cNo0w .signUp_form_scrollArea__6K8kd {
  flex: 1;
  overflow: hidden;
}
.signUp_form_licensePanel__cNo0w .signUp_form_scrollAreaViewport__GYGhF {
  @layer unconditional {
    max-height: 40svh;
  }

  @layer responsive {
    @container main style(--inc-inline-size-md: var(--inc-bp-md)) {
      max-height: unset;
    }
  }
}

.signUp_form_licenseFooter__Ogvoa {
  overflow: hidden;

  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-inline-end: 1rem;
  border-radius: 18px;
  margin-block-end: 1rem;

  background-color: var(--inc-palette-grayscale-input);
}
.signUp_form_licenseFooter__Ogvoa.signUp_form_success__KE0lz {
  background-color: var(--inc-palette-success-background);
}
.signUp_form_licenseAcceptCheckbox__oVIhD {
  padding: var(--inc-base-input-padding-block)
    var(--inc-base-input-padding-inline);
  border-radius: var(--inc-base-border-radius);
}
.signUp_form_licenseAcceptCheckboxControl__FnszP {
  border-color: var(--inc-form-control-foreground);
}
.signUp_form_licensePrintButton__T_8u_ {
  align-items: center;
}

.signUp_form_maxHeight20__h5CME {
  color: black;
  max-height: 20vh;
}

.signUp_form_skeleton__eZKHV {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.5rem;
}

@keyframes signUp_form_pulse__mqUdC {
  from {
    background-color: var(--inc-palette-grayscale-placeholder);
  }
  to {
    background-color: var(--inc-palette-grayscale-line);
  }
}

/* Skeleton loader styles */
.signUp_form_loader__kQvII {
  flex: 1;

  width: 100%;
  padding: var(--inc-base-input-padding-block)
    var(--inc-base-input-padding-inline);
  background-color: var(--inc-palette-grayscale-placeholder);
  border-radius: var(--inc-base-border-radius);

  animation: alternate-reverse infinite 1s linear signUp_form_pulse__mqUdC;
}
.signUp_form_loader__kQvII:not(.signUp_form_loaderTall__1IYUo):not(.signUp_form_loaderShort__xf3KL) {
  height: 3rem;
}
.signUp_form_loaderTall__1IYUo {
  height: 5rem;
}
.signUp_form_loaderShort__xf3KL {
  height: 1.5rem;
}
.signUp_form_loaderSpanTwo__E8_kC {
  grid-column: 1 / span 2;
}

/* Print-specific styles */
@media print {
  .signUp_form_printArea__0KskZ {
    color: black;
    font-size: 12pt;
    line-height: 1.2;
    margin: 1pc 0.5pc;
  }
}

@layer ui {
  .button_root__Ajtxz {
    /* Design tokens defined here */
    /* Transition timing, easing function */
    --transition: 0.3s ease-in;
    --transition-fast: 0.12s ease-out;

    /* Size */
    --gap: calc(12rem / 16);
    --padding-inline: 1rem;
    --padding-block: calc(9rem / 16);
    --border-width: 2px;
    --border-radius: var(--inc-base-border-radius);

    /* Color */
    --opacity: 1;

    --color: var(--inc-palette-primary-default);
    --color-contrast: var(--inc-palette-grayscale-background);
    --color-hover: var(--inc-palette-primary-default-strong);
    --color-hover-bg: oklch(from var(--inc-palette-grayscale-input) l c h / 0.8);
    --color-hover-border: var(--inc-palette-grayscale-placeholder);
    --color-focus: var(--inc-palette-primary-background-strong);
    --color-focus-outline: var(--inc-palette-grayscale-input);
    --color-press: var(--inc-palette-grayscale-header);

    --color-text: var(--color-contrast);
    --color-bg: var(--color);
    --color-border: transparent;
    --color-outline: transparent;

    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: first baseline;
    gap: var(--gap);

    width: auto;

    padding-inline: var(--padding-inline);
    padding-block: var(--padding-block);
    border-radius: var(--border-radius);

    background-color: var(--color-bg);
    color: var(--color-text);
    border: var(--inc-base-border-width) solid var(--color-border);
    outline: var(--inc-base-outline-width) solid var(--color-outline);

    font-size: calc(18rem / 16);
    line-height: 1;
    text-align: center;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;

    transition:
      background-color var(--transition),
      color var(--transition),
      border-color var(--transition-fast),
      outline-color var(--transition-fast),
      opacity var(--transition);
  }
  .button_root__Ajtxz:not(:has(.button_LH__K7NZ5)):not(:has(.button_RH__AG4j4)) {
    /* If button's only content is its text, center the text */
    justify-content: center;
  }

  .button_root__Ajtxz[data-disabled] {
    cursor: not-allowed;

    --opacity: 0.5;
  }

  .button_root__Ajtxz:hover:not([data-disabled]) {
    /* Fallback hover style, if no Prominence state defined  */
    background-color: oklch(from var(--color-bg) calc(l * 0.8) calc(c * 0.8) h);
  }
  .button_root__Ajtxz:focus:not([data-disabled]) {
    /* Fallback focus style, if no Prominence state defined */
    outline-color: var(--color-outline);
  }

  /* Content */
  .button_content__Q9XU0 {
    display: contents;
  }

  /* VARIANTS */
  /* Color */
  .button_root__Ajtxz.button_color_default__J6uKu,
  .button_root__Ajtxz.button_color_primary__2Q4KS {
    --color: var(--inc-palette-primary-default);
    --color-contrast: var(--inc-palette-grayscale-background);
    --color-hover: var(--inc-palette-primary-default-strong);
    --color-hover-bg: oklch(from var(--inc-palette-white) l c h / 0.8);
    --color-hover-border: var(--inc-palette-grayscale-placeholder);
    --color-focus: var(--inc-palette-primary-background-strong);
    --color-focus-outline: var(--inc-palette-white);
    --color-press: var(--inc-palette-grayscale-header);
  }

  .button_root__Ajtxz.button_color_secondary__4O9r_ {
    --color: var(--inc-palette-secondary-default);
    --color-contrast: var(--inc-palette-secondary-background);
    --color-hover: var(--inc-palette-secondary-dark);
    --color-focus: var(--inc-palette-secondary-background-strong);
  }

  .button_root__Ajtxz.button_color_tertiary__961yR {
    --color: var(--inc-palette-tertiary-default);
    --color-hover: var(--inc-palette-tertiary-default-strong);
    --color-focus: var(--inc-palette-tertiary-background-strong);
  }

  .button_root__Ajtxz.button_color_dark__dnKIS {
    --color: var(--inc-palette-grayscale-header-weak);
    --color-contrast: var(--inc-palette-grayscale-background-weak);
    --color-hover: var(--inc-palette-grayscale-header);
    --color-hover-bg: oklch(from var(--inc-palette-black) l c h / 0.8);
    --color-hover-border: var(--inc-palette-grayscale-body);
    --color-focus: var(--inc-palette-primary-background-strong);
    --color-focus-outline: var(--inc-palette-grayscale-body);
    --color-press: var(--inc-palette-black);
  }
  .button_root__Ajtxz.button_color_dark__dnKIS:hover:not([data-disabled]) {
    background-color: oklch(from var(--color-bg) 20% calc(c * 1.2) h);
  }

  .button_root__Ajtxz.button_color_light__cDn_j {
    --color: var(--inc-palette-grayscale-background-weak);
    --color-contrast: var(--inc-palette-grayscale-header-weak);
    --color-hover: var(--inc-palette-grayscale-background-weak);
    --color-hover-bg: oklch(from var(--inc-palette-grayscale-line) l c h / 0.8);
    --color-hover-border: var(--inc-palette-grayscale-placeholder);
    --color-focus: var(--inc-palette-primary-background-strong);
    --color-focus-outline: var(--inc-palette-black);
    --color-press: var(--inc-palette-white);
  }

  .button_root__Ajtxz.button_color_error__p5SeX {
    --color: var(--inc-palette-error-default);
    --color-hover: var(--inc-palette-error-default-strong);
    --color-focus: var(--inc-palette-error-background-strong);
  }

  .button_root__Ajtxz.button_color_warning__XDlDv {
    --color: var(--inc-palette-warning-default);
    --color-hover: var(--inc-palette-warning-default-strong);
    --color-focus: var(--inc-palette-warning-background-strong);
  }

  .button_root__Ajtxz.button_color_success__cMjwH {
    --color: var(--inc-palette-success-default);
    --color-hover: var(--inc-palette-success-default-strong);
    --color-focus: var(--inc-palette-success-background-strong);
  }

  /* Prominence */
  .button_root__Ajtxz.button_prominence_primary__qEkm9 {
    --color-text: oklch(from var(--color-contrast) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
    --color-bg: oklch(from var(--color-hover) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .button_root__Ajtxz.button_prominence_primary__qEkm9:hover:not([data-disabled]) {
    --opacity: 0.9;
    --color-bg: oklch(from var(--color) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .button_root__Ajtxz.button_prominence_primary__qEkm9:focus:not([data-disabled]) {
    --opacity: 0.8;
    --color-text: var(--color-contrast);
    --color-bg: oklch(from var(--color) calc(l * var(--opacity)) c h);
    --color-outline: var(--color-focus);
  }
  .button_root__Ajtxz.button_prominence_primary__qEkm9:active:not([data-disabled]) {
    --color-bg: oklch(from var(--color-press) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .button_root__Ajtxz.button_prominence_primary__qEkm9[data-disabled] {
    --opacity: 0.5;
  }

  .button_root__Ajtxz.button_prominence_secondary__4SO7B {
    --color-bg: transparent;
    --color-border: oklch(from var(--color) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
    --color-text: oklch(from var(--color) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .button_root__Ajtxz.button_prominence_secondary__4SO7B:hover:not([data-disabled]) {
    --color-text: oklch(from var(--color-hover) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
    --color-border: oklch(from var(--color-hover) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .button_root__Ajtxz.button_prominence_secondary__4SO7B:focus:not([data-disabled]) {
    --color-text: oklch(from var(--color-hover) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
    --color-border: transparent;
    --color-outline: var(--color-focus);
  }
  .button_root__Ajtxz.button_prominence_secondary__4SO7B:active:not([data-disabled]) {
    --color-text: oklch(from var(--color-press) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
    --color-border: oklch(from var(--color-press) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .button_root__Ajtxz.button_prominence_secondary__4SO7B[data-disabled] {
    --opacity: 0.5;
  }

  .button_prominence_subtle__ODIFS {
    --color-bg: transparent;
    --color-text: oklch(from var(--color) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
    --color-border: oklch(from var(--inc-palette-grayscale-line) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .button_root__Ajtxz.button_prominence_subtle__ODIFS:hover:not([data-disabled]) {
    --color-text: oklch(from var(--color-hover) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
    --color-border: oklch(from var(--color-hover-border) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .button_root__Ajtxz.button_prominence_subtle__ODIFS:focus:not([data-disabled]) {
    --color-border: transparent;
    --color-outline: var(--color-focus-outline);
  }
  .button_root__Ajtxz.button_prominence_subtle__ODIFS:active:not([data-disabled]) {
    --color-border: oklch(from var(--color-press) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
    --color-text: oklch(from var(--color-press) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .button_root__Ajtxz.button_prominence_subtle__ODIFS[data-disabled] {
    --opacity: 0.5;
  }

  .button_prominence_ghost__7NJhs {
    --color-bg: transparent;
    --color-text: oklch(from var(--color-contrast) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .button_root__Ajtxz.button_prominence_ghost__7NJhs:hover:not([data-disabled]) {
    --color-text: oklch(from var(--color-contrast-hover) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
    --color-bg: oklch(from var(--color-hover-bg) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .button_root__Ajtxz.button_prominence_ghost__7NJhs:focus:not([data-disabled]) {
    --color-outline: var(--color-focus-outline);
  }
  .button_root__Ajtxz.button_prominence_ghost__7NJhs:active:not([data-disabled]) {
    --color-text: oklch(from var(--color-press) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .button_root__Ajtxz.button_prominence_ghost__7NJhs[data-disabled] {
    --opacity: 0.5;
  }

  /* Density styles */
  /* Dense (default) */
  .button_root__Ajtxz.button_density_dense__tnbdw {
    --padding-inline: 1rem;
    --padding-block: calc(9rem / 16);
  }

  /* Spacious (use for CTAs, marketing contexts) */
  .button_root__Ajtxz.button_density_spacious__t3tQd {
    --padding-inline: 2rem;
    --padding-block: calc(18rem / 16);
  }

  /* Border styles */
  .button_root__Ajtxz.button_rounded__hHsF4 {
    --border-radius: 999px;
    --padding-inline: var(--padding-block);

    corner-shape: round;
  }
}

@layer ui {
  @keyframes spinner_rotate__FoG0q {
    from {
      transform: rotate(0turn);
    }
    to {
      transform: rotate(1turn);
    }
  }

  .spinner_root__jUv9N {
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    color: currentColor;

    transform: rotate(0turn);
    transform-origin: center center;
    animation: spinner_rotate__FoG0q 1s linear infinite;
  }
}

@layer ui {
  .fieldset_root__gg5iR {
    width: 100%;
  }

  .fieldset_legend__VQEoM {
    width: 100%;
  }
}

@layer ui {
  .field_root__xyw3O {
    /* Color */
    --opacity: 1;

    --color: var(--inc-palette-grayscale-background);
    --color-contrast: var(--inc-palette-grayscale-header);
    --color-hover: var(--inc-palette-primary-default-strong);
    --color-hover-bg: oklch(from var(--inc-palette-grayscale-input) l c h / 0.8);
    --color-hover-border: var(--inc-palette-grayscale-placeholder);
    --color-focus: var(--inc-palette-primary-background-strong);
    --color-focus-outline: var(--inc-palette-grayscale-input);
    --color-press: var(--inc-palette-grayscale-header);

    --color-text: var(--color-contrast);
    --color-bg: var(--color);
    --color-border: transparent;
    --color-outline: transparent;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--inc-base-label-gap);
  }
  .field_root__xyw3O[hidden] {
    display: none;
  }

  .field_label__vnYhE {
    color: var(--inc-form-control-foreground);
    font-size: var(--inc-type-text-xs);
    font-weight: 700;
  }

  .field_control__YlmoY {
    padding: var(--inc-base-input-padding-block) var(--inc-base-input-padding-inline);

    background-color: var(--color-bg);
    outline: var(--inc-base-outline-width) solid var(--color-outline);

    color: var(--color-text);
    caret-color: var(--color-text);
    font-family: inherit;
    font-size: var(--inc-type-text-md);
    line-height: 1;

    transition:
      color 0.24s ease-in-out,
      background-color 0.24s ease-in-out,
      border-color 0.24s ease-in-out,
      outline-color 0.4s ease-in;
  }
  .field_control__YlmoY:not(.field_underline__cWciX) {
    border: var(--inc-base-border-width) solid var(--color-border);
    border-radius: var(--inc-base-border-radius);
  }
  .field_control__YlmoY.field_underline__cWciX {
    border-bottom: var(--inc-base-border-width) solid var(--color-border);
  }
  .field_control__YlmoY::-moz-placeholder {
    color: var(--inc-palette-grayscale-placeholder);
  }
  .field_control__YlmoY::placeholder {
    color: var(--inc-palette-grayscale-placeholder);
  }
  .field_control__YlmoY:focus,
  .field_control__YlmoY:focus-within {
    background-color: var(--inc-form-control-background-active);
    border-color: var(--inc-form-control-border-active);
    outline-color: var(--inc-form-control-outline-active);
  }

  .field_root__xyw3O[data-disabled] .field_label__vnYhE {
    color: var(--inc-form-control-label-disabled);
  }
  .field_root__xyw3O[data-disabled] .field_control__YlmoY {
    background-color: var(--inc-form-control-background-disabled);
  }

  .field_label__vnYhE,
  .field_description__SZMhl,
  .field_error__mq6m5,
  .field_validity__MUakG {
    transition:
      color 0.24s ease-in-out,
      opacity 0.24s ease-in-out;
  }

  .field_description__SZMhl,
  .field_error__mq6m5,
  .field_validity__MUakG {
    color: var(--inc-palette-grayscale-label);
    font-size: var(--inc-type-text-xs);
    opacity: 1;

    @starting-style {
      opacity: 0;
    }
  }

  .field_root__xyw3O[data-filled][data-valid]:not([data-disabled]) .field_label__vnYhE,
  .field_root__xyw3O[data-filled][data-valid]:not([data-disabled]) .field_error__mq6m5,
  .field_root__xyw3O[data-filled][data-valid]:not([data-disabled]) .field_validity__MUakG {
    color: var(--inc-form-control-foreground-success);
  }
  .field_root__xyw3O[data-filled][data-valid]:not([data-disabled]) .field_control__YlmoY {
    border-color: var(--inc-form-control-foreground-success);
    background-color: var(--inc-form-control-background-success);
  }

  .field_root__xyw3O[data-touched][data-invalid]:not([data-disabled]) .field_label__vnYhE,
  .field_root__xyw3O[data-touched][data-invalid]:not([data-disabled]) .field_error__mq6m5,
  .field_root__xyw3O[data-touched][data-invalid]:not([data-disabled]) .field_validity__MUakG {
    color: var(--inc-form-control-foreground-error);
  }
  .field_root__xyw3O[data-touched][data-invalid]:not([data-disabled]) .field_control__YlmoY {
    border-color: var(--inc-form-control-foreground-error);
    background-color: var(--inc-form-control-background-error);
  }

  /* VARIANTS */
  /* Color */
  .field_control__YlmoY.field_color_default__KcnfN,
  .field_control__YlmoY.field_color_primary__wBb8d {
    --color: var(--inc-palette-primary-default);
    --color-contrast: var(--inc-palette-grayscale-background);
    --color-hover: var(--inc-palette-primary-default-strong);
    --color-hover-bg: oklch(from var(--inc-palette-white) l c h / 0.8);
    --color-hover-border: var(--inc-palette-grayscale-placeholder);
    --color-focus: var(--inc-palette-primary-background-strong);
    --color-focus-outline: var(--inc-palette-white);
    --color-press: var(--inc-palette-grayscale-header);
  }

  .field_control__YlmoY.field_color_secondary__ChwS8 {
    --color: var(--inc-palette-secondary-default);
    --color-contrast: var(--inc-palette-secondary-background);
    --color-border: var(--inc-palette-secondary-default);
    --color-hover: var(--inc-palette-secondary-dark);
    --color-focus: var(--inc-palette-secondary-background-strong);
  }

  .field_control__YlmoY.field_color_tertiary__KqVoR {
    --color: var(--inc-palette-tertiary-default);
    --color-hover: var(--inc-palette-tertiary-default-strong);
    --color-focus: var(--inc-palette-tertiary-background-strong);
  }

  .field_control__YlmoY.field_color_dark___kf6y {
    --color: var(--inc-palette-grayscale-header-weak);
    --color-contrast: var(--inc-palette-grayscale-background-weak);
    --color-hover: var(--inc-palette-grayscale-header);
    --color-hover-bg: oklch(from var(--inc-palette-black) l c h / 0.8);
    --color-hover-border: var(--inc-palette-grayscale-body);
    --color-focus: var(--inc-palette-primary-background-strong);
    --color-focus-outline: var(--inc-palette-grayscale-body);
    --color-press: var(--inc-palette-black);
  }
  .field_control__YlmoY.field_color_dark___kf6y:hover:not([data-disabled]) {
    background-color: oklch(from var(--color-bg) 20% calc(c * 1.2) h);
  }

  .field_control__YlmoY.field_color_light__4vJnn {
    --color: var(--inc-palette-grayscale-background-weak);
    --color-contrast: var(--inc-palette-grayscale-header-weak);
    --color-hover: var(--inc-palette-grayscale-background-weak);
    --color-hover-bg: oklch(from var(--inc-palette-grayscale-line) l c h / 0.8);
    --color-hover-border: var(--inc-palette-grayscale-placeholder);
    --color-focus: var(--inc-palette-primary-background-strong);
    --color-focus-outline: var(--inc-palette-black);
    --color-press: var(--inc-palette-white);
  }

  .field_control__YlmoY.field_color_error__twxoo {
    --color: var(--inc-palette-error-default);
    --color-hover: var(--inc-palette-error-default-strong);
    --color-focus: var(--inc-palette-error-background-strong);
  }

  .field_control__YlmoY.field_color_warning__AOWnR {
    --color: var(--inc-palette-warning-default);
    --color-hover: var(--inc-palette-warning-default-strong);
    --color-focus: var(--inc-palette-warning-background-strong);
  }

  .field_control__YlmoY.field_color_success__ARYxV {
    --color: var(--inc-palette-success-default);
    --color-hover: var(--inc-palette-success-default-strong);
    --color-focus: var(--inc-palette-success-background-strong);
  }

  /* Prominence */
  .field_control__YlmoY.field_prominence_primary__k_fzp {
    --color-text: oklch(from var(--color-contrast) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
    --color-bg: oklch(from var(--color-hover) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .field_control__YlmoY.field_prominence_primary__k_fzp:hover:not([data-disabled]) {
    --opacity: 0.9;
    --color-bg: oklch(from var(--color) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .field_control__YlmoY.field_prominence_primary__k_fzp:focus:not([data-disabled]) {
    --opacity: 0.9;
    --color-bg: oklch(from var(--color) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
    --color-outline: var(--color-focus);
  }
  .field_control__YlmoY.field_prominence_primary__k_fzp:active:not([data-disabled]) {
    --color-bg: oklch(from var(--color-press) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .field_control__YlmoY.field_prominence_primary__k_fzp[data-disabled] {
    --opacity: 0.5;
  }

  .field_control__YlmoY.field_prominence_secondary__CFThq {
    --color-bg: transparent;
    --color-border: oklch(from var(--color) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
    --color-text: oklch(from var(--color) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .field_control__YlmoY.field_prominence_secondary__CFThq:hover:not([data-disabled]) {
    --color-text: oklch(from var(--color-hover) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
    --color-border: oklch(from var(--color-hover) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .field_control__YlmoY.field_prominence_secondary__CFThq:focus:not([data-disabled]) {
    --color-text: oklch(from var(--color-hover) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
    --color-border: transparent;
    --color-outline: var(--color-focus);
  }
  .field_control__YlmoY.field_prominence_secondary__CFThq:active:not([data-disabled]) {
    --color-text: oklch(from var(--color-press) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
    --color-border: oklch(from var(--color-press) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .field_control__YlmoY.field_prominence_secondary__CFThq[data-disabled] {
    --opacity: 0.5;
  }

  .field_prominence_subtle__eAwjh {
    --color-bg: transparent;
    --color-text: oklch(from var(--color) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
    --color-border: oklch(from var(--inc-palette-grayscale-line) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .field_control__YlmoY.field_prominence_subtle__eAwjh:hover:not([data-disabled]) {
    --color-text: oklch(from var(--color-hover) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
    --color-border: oklch(from var(--color-hover-border) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .field_control__YlmoY.field_prominence_subtle__eAwjh:focus:not([data-disabled]) {
    --color-border: transparent;
    --color-outline: var(--color-focus-outline);
  }
  .field_control__YlmoY.field_prominence_subtle__eAwjh:active:not([data-disabled]) {
    --color-border: oklch(from var(--color-press) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
    --color-text: oklch(from var(--color-press) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .field_control__YlmoY.field_prominence_subtle__eAwjh[data-disabled] {
    --opacity: 0.5;
  }

  .field_prominence_ghost__QsHAE {
    --color-bg: transparent;
    --color-text: oklch(from var(--color-contrast) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .field_control__YlmoY.field_prominence_ghost__QsHAE:hover:not([data-disabled]) {
    --color-text: oklch(from var(--color-contrast-hover) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
    --color-bg: oklch(from var(--color-hover-bg) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .field_control__YlmoY.field_prominence_ghost__QsHAE:focus:not([data-disabled]) {
    --color-outline: var(--color-focus-outline);
  }
  .field_control__YlmoY.field_prominence_ghost__QsHAE:active:not([data-disabled]) {
    --color-text: oklch(from var(--color-press) calc(l * var(--opacity)) calc(c * var(--opacity)) h);
  }
  .field_control__YlmoY.field_prominence_ghost__QsHAE[data-disabled] {
    --opacity: 0.5;
  }

  /* Density styles */
  /* Dense (default) */
  .field_control__YlmoY.field_density_dense__90DBU {
    --padding-inline: 1rem;
    --padding-block: calc(9rem / 16);
  }

  /* Spacious (use for CTAs, marketing contexts) */
  .field_control__YlmoY.field_density_spacious__aScHH {
    --padding-inline: 2rem;
    --padding-block: calc(18rem / 16);
  }

  /* Border styles */
  .field_control__YlmoY.field_rounded__sQDzI {
    --border-radius: 999px;
    --padding-inline: var(--padding-block);

    corner-shape: round;
  }
}

/*
  Chrome autofill's UA styles can only be overridden with !important, and
  cascade layers invert priority for !important declarations (an unlayered
  !important always loses to a layered one). These rules must stay outside
  @layer ui so a consumer's own unlayered !important override still wins.
*/
.field_control__YlmoY:-webkit-autofill {
  /* biome-ignore lint/complexity/noImportantStyles: Chrome only lets !important override its built-in autofill UA styles */
  -webkit-box-shadow: 0 0 0px 1000px var(--inc-form-control-background) inset !important;
  /* biome-ignore lint/complexity/noImportantStyles: Chrome only lets !important override its built-in autofill UA styles */
  -webkit-text-fill-color: var(--inc-form-control-foreground) !important;
}
.field_control__YlmoY:focus:-webkit-autofill,
.field_control__YlmoY:focus-within:-webkit-autofill {
  /* biome-ignore lint/complexity/noImportantStyles: Chrome only lets !important override its built-in autofill UA styles */
  -webkit-box-shadow: 0 0 0px 1000px var(--inc-form-control-background-active) inset !important;
}
.field_control__YlmoY[data-touched][data-invalid]:not([data-disabled]):focus-within:-webkit-autofill {
  /* biome-ignore lint/complexity/noImportantStyles: Chrome only lets !important override its built-in autofill UA styles */
  -webkit-box-shadow: 0 0 0px 1000px var(--inc-form-control-background-error) inset !important;
}
.field_control__YlmoY[data-filled][data-valid]:not([data-disabled]):focus-within:-webkit-autofill {
  /* biome-ignore lint/complexity/noImportantStyles: Chrome only lets !important override its built-in autofill UA styles */
  -webkit-box-shadow: 0 0 0px 1000px var(--inc-form-control-background-success) inset !important;
}

@layer ui {
  .input_root__DFScg {
    --padding-inline: var(--inc-base-input-padding-inline);
    --padding-block: var(--inc-base-input-padding-block);

    padding-inline: var(--padding-inline);
    padding-block: var(--padding-block);
    border: none;

    background-color: var(--inc-palette-grayscale-input);
    color: var(--inc-palette-grayscale-header);
    font-family: inherit;
    font-size: var(--inc-type-text-md);
  }
  .input_root__DFScg:not(.input_underline__5ADRY) {
    /* border: var(--inc-base-border-width) solid var(--inc-palette-grayscale-line); */
    border-radius: var(--inc-base-border-radius);
  }
  .input_root__DFScg.input_underline__5ADRY {
    border-bottom: var(--inc-base-border-width) solid var(--inc-palette-grayscale-line);
  }

  .input_root__DFScg::-moz-placeholder {
    color: var(--inc-palette-grayscale-placeholder);
  }

  .input_root__DFScg::placeholder {
    color: var(--inc-palette-grayscale-placeholder);
  }

  .input_root__DFScg:focus,
  .input_root__DFScg:focus-within {
    outline: var(--inc-base-outline-width) solid var(--inc-palette-primary-background-strong);
  }

  /* Density styles */
  .input_root__DFScg.input_density_dense__zK2V5 {
    /* Default: Dense */
    padding-inline: var(--padding-inline);
    padding-block: var(--padding-block);
  }
  .input_root__DFScg.input_density_spacious__DFzQp {
    /* Spacious */
    --padding-inline: 2rem;
    --padding-block: calc(18rem / 16);
  }
}

@layer ui {
  .password_root__GNjTR {
    --icon-width: 1.5rem;

    position: relative;
  }
  .password_root__GNjTR > input {
    padding-inline-end: calc(var(--inc-base-input-padding-inline) + var(--icon-width) + var(--inc-base-input-gap));
  }
  .password_root__GNjTR .password_toggle__CPhu4 {
    z-index: 20;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: var(--inc-base-input-padding-inline);
    bottom: 0;

    width: -moz-fit-content;

    width: fit-content;
    max-width: var(--icon-width);
    height: var(--icon-width);
    padding: 0;
    border-radius: var(--icon-width);

    color: var(--inc-form-control-foreground);

    outline: var(--inc-base-outline-width) solid var(--inc-form-control-outline);
    outline-offset: var(--inc-base-input-gap);

    transition: outline-color 0.12s ease-in-out;
  }
  .password_root__GNjTR .password_toggle__CPhu4:hover,
  .password_root__GNjTR .password_toggle__CPhu4:focus {
    outline-color: var(--inc-form-control-outline-active);
  }
}

@layer ui {
  .radioGroup_root__RqsK_ {
    container: radioGroup / inline-size;

    display: flex;
    flex-flow: column nowrap;
    gap: 0.25rem;
  }

  .radioGroup_caption__33ABR {
    width: 100%;
  }

  .radioGroup_option__svkUa {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 1ch;

    color: currentColor;
    outline: var(--inc-base-outline-width) solid var(--inc-form-control-outline);
    border-radius: var(--inc-base-border-radius);
  }
  .radioGroup_option__svkUa:focus-within {
    outline-color: var(--inc-form-control-outline-active);
  }

  .radioGroup_radio___AhjO {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 2rem;
    height: 2rem;

    padding: 0.25rem;
    border: 1px solid currentColor;
    border-radius: 1rem;
    margin: 0;

    background-color: transparent;
    color: currentColor;

    transition: outline-color 0.24s ease-in-out;
  }

  .radioGroup_indicator__JEFnJ {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.75rem;
    background-color: var(--inc-form-radio-indicator);

    transition: background-color 0.16s ease-in;
  }
  .radioGroup_indicator__JEFnJ[data-checked] {
    background-color: var(--inc-form-radio-indicator-checked);
  }
}

/** 
  @layer ui-after {…} wins over @layer ui {…} wins over @layer ui-before {…}; 
  Styles written outside any @layer beats styles within any @layer.
*/
@layer ui-before, ui, ui-after;

/* The below custom properties are used with @container queries (and in combination with custom --inc-bp-[size-ident] breakpoint properties) to change attribute values relative to a container's inline-size. */
@property --inc-inline-size-sm {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 100vi;
}

@property --inc-inline-size-md {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 100vi;
}

@property --inc-inline-size-lg {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 100vi;
}

/* 
  When using `ui` components:
  Apply the `root` class to your application's layout root element.
*/
.root_root__FZ4cP {
  /*  
    Necessary for Base UI portaled components' popups to render on top of the entire page.
    https://base-ui.com/react/overview/quick-start#portals
  */
  isolation: isolate;
}

@layer ui {
  .root_root__FZ4cP {
    /* Root container, for @container queries using our breakpoint custom properties. */
    container: uiRoot / inline-size;

    /* Use 16px as base font-size, to help scoot around edge case Safari mobile bugs to do with small-text inputs. */
    font-size: 16px;

    /* COLORS */
    /* 
      Palette
      Color palette defined here, to be assigned semantic values in
      component CSS module files.

      (N.B. Incantio property namespace is defined by '--inc-' prefix.)
    */
    --inc-palette-black: oklch(0% 0 0);
    --inc-palette-white: oklch(100% 0.00011 271.152);

    --inc-palette-red: oklch(74.862% 0.15442 35.782);
    --inc-palette-yellow: oklch(77.533% 0.15387 87.008);
    --inc-palette-green: oklch(75.009% 0.12777 118.563);
    --inc-palette-blue: oklch(73.494% 0.08654 188.822);

    --inc-palette-brown: oklch(69.421% 0.06358 84.771);

    /* DLS tokens */
    /* Primary */
    --inc-palette-primary-default-strong: oklch(61.733% 0.17789 34.19);
    --inc-palette-primary-default: oklch(75.633% 0.14997 38.368);
    --inc-palette-primary-default-weak: oklch(84.406% 0.09491 49.83);
    --inc-palette-primary-background-strong: oklch(91.423% 0.0493 50.038);
    --inc-palette-primary-background: oklch(98.123% 0.01005 48.2);

    /* Secondary */
    --inc-palette-secondary-dark: oklch(59.658% 0.0915 279.584);
    --inc-palette-secondary-default: oklch(77.191% 0.06153 280.68);
    --inc-palette-secondary-default-weak: oklch(87.366% 0.06203 275.01);
    --inc-palette-secondary-background-strong: oklch(92.219% 0.02995 269.133);
    --inc-palette-secondary-background: oklch(96.806% 0.01515 273.84);

    /* Tertiary */
    --inc-palette-tertiary-dark: oklch(57.227% 0.05313 218.028);
    --inc-palette-tertiary-default: oklch(74.844% 0.09021 189.084);
    --inc-palette-tertiary-default-weak: oklch(82.532% 0.10559 188.524);
    --inc-palette-tertiary-background-strong: oklch(91.334% 0.0751 190.808);
    --inc-palette-tertiary-background: oklch(96.204% 0.02825 191.494);

    /* Error */
    --inc-palette-error-default-strong: oklch(47.261% 0.1843 30.961);
    --inc-palette-error-default: oklch(58.806% 0.2315 30.552);
    --inc-palette-error-default-weak: oklch(70.753% 0.18525 19.638);
    --inc-palette-error-background-strong: oklch(78.986% 0.12234 16.409);
    --inc-palette-error-background: oklch(96.913% 0.01511 17.018);

    /* Warning */
    --inc-palette-warning-default-strong: oklch(67.976% 0.13674 86.46);
    --inc-palette-warning-default: oklch(77.93% 0.15435 88.091);
    --inc-palette-warning-default-weak: oklch(87.839% 0.14145 87.837);
    --inc-palette-warning-background-strong: oklch(93.683% 0.0823 94.064);
    --inc-palette-warning-background: oklch(98.052% 0.02099 85.922);

    /* Success */
    --inc-palette-success-default-strong: oklch(58.313% 0.12531 114.609);
    --inc-palette-success-default: oklch(76.52% 0.1325 118.222);
    --inc-palette-success-default-weak: oklch(89.444% 0.12171 123.603);
    --inc-palette-success-background-strong: oklch(94.189% 0.08953 124.974);
    --inc-palette-success-background: oklch(96.974% 0.03606 118.98);

    /* Grayscale */
    --inc-palette-grayscale-background: oklch(92.863% 0.00857 84.5);
    --inc-palette-grayscale-background-weak: oklch(98.857% 0.0016 66.216);
    --inc-palette-grayscale-input: oklch(100% 0.00011 271.152);
    --inc-palette-grayscale-line: oklch(89.834% 0.01492 70.746);
    --inc-palette-grayscale-placeholder: oklch(78.154% 0.01966 83.03);
    --inc-palette-grayscale-label: oklch(59.009% 0.01046 62.307);
    --inc-palette-grayscale-body: oklch(46.518% 0.00879 80.644);
    --inc-palette-grayscale-header-weak: oklch(39.268% 0.00985 73.536);
    --inc-palette-grayscale-header: oklch(23.108% 0.00406 84.552);

    /* Form state tokens */
    /* Control (i.e. Input) */
    --inc-form-control-label: var(--inc-palette-grayscale-label);
    --inc-form-control-label-disabled: oklch(from var(--inc-palette-grayscale-label) calc(l + ((1 - l) / 2)) calc(c * 0.5) h);

    --inc-form-control-placeholder: var(--inc-palette-grayscale-placeholder);

    --inc-form-control-foreground: var(--inc-palette-grayscale-header);
    --inc-form-control-foreground-success: var(--inc-palette-success-default-strong);
    --inc-form-control-foreground-error: var(--inc-palette-error-default-strong);
    --inc-form-control-foreground-disabled: oklch(from var(--inc-palette-grayscale-header) calc(l * 1.5) calc(c * 0.5) h);

    --inc-form-control-background: var(--inc-palette-grayscale-input);
    --inc-form-control-background-active: var(--inc-palette-grayscale-background);
    --inc-form-control-background-disabled: oklch(from var(--inc-palette-grayscale-input) l calc(c * 0.5) h / 0.5);
    --inc-form-control-background-success: var(--inc-palette-success-background);
    --inc-form-control-background-error: var(--inc-palette-error-background);

    --inc-form-control-border: transparent;
    --inc-form-control-border-active: var(--inc-palette-grayscale-header);

    --inc-form-control-outline: transparent;
    --inc-form-control-outline-active: var(--inc-palette-primary-background-strong, oklch(91.423% 0.0493 50.038));

    /* OTP */
    --inc-form-otp-gap: 0.5rem;
    --inc-form-otp-padding-block: 1rem;
    --inc-form-otp-filled-incomplete-background: var(--inc-palette-secondary-background);
    --inc-form-otp-filled-complete-background: var(--inc-palette-success-background);

    /* Popup */
    --inc-form-popup-foreground: var(--inc-palette-grayscale-header);
    --inc-form-popup-background: var(--inc-palette-grayscale-background);
    --inc-form-popup-border: var(--inc-palette-grayscale-line);

    /* Radio */
    --inc-form-radio-indicator: transparent;
    --inc-form-radio-indicator-checked: var(--inc-palette-primary-default-strong);

    /* GLOBAL COLOR TOKENS */
    /* Theme */
    --inc-color-background: var(--inc-palette-grayscale-header);
    --inc-color-foreground: var(--inc-palette-grayscale-background);

    /* User type */
    --inc-color-userType-artist: var(--inc-palette-blue);
    --inc-color-userType-creator: var(--inc-palette-green);

    /* TYPOGRAPHY */
    /* If 16 = 2vi, then */
    /* 64 = 4, 56 = 3.5, 48 = 3, 36 = 2.25, 24 = 1.5, 18 = 1.125 */
    /* 20 = 1.25, 18 = 1.125, 15 = 0.9375, 13 = 0.8125 */
    /* Type: Display */
    --inc-type-display-xl--min: 32px;
    --inc-type-display-xl--max: 64px;
    --inc-type-display-xl: clamp(var(--inc-type-display-xl--min), 4vi, var(--inc-type-display-xl--max));

    --inc-type-display-lg--min: 28px;
    --inc-type-display-lg--max: 56px;
    --inc-type-display-lg: clamp(var(--inc-type-display-lg--min), 3.5vi, var(--inc-type-display-lg--max));

    --inc-type-display-md--min: 24px;
    --inc-type-display-md--max: 48px;
    --inc-type-display-md: clamp(var(--inc-type-display-md--min), 3vi, var(--inc-type-display-md--max));

    --inc-type-display-sm--min: 20px;
    --inc-type-display-sm--max: 36px;
    --inc-type-display-sm: clamp(var(--inc-type-display-sm--min), 2.25vi, var(--inc-type-display-sm--max));

    --inc-type-display-xs--min: 20px;
    --inc-type-display-xs--max: 24px;
    --inc-type-display-xs: clamp(var(--inc-type-display-xs--min), 1.5vi, var(--inc-type-display-xs--max));

    --inc-type-display-xxs--min: 18px;
    --inc-type-display-xxs--max: 18px;
    --inc-type-display-xxs: clamp(var(--inc-type-display-xxs--min), 1.125vi, var(--inc-type-display-xxs--max));

    /* Type: Text */
    --inc-type-text-lg--min: 20px;
    --inc-type-text-lg--max: 20px;
    --inc-type-text-lg: clamp(var(--inc-type-text-lg--min), 1.25vi, var(--inc-type-text-lg--max));

    --inc-type-text-md--min: 17px;
    --inc-type-text-md--max: 18px;
    --inc-type-text-md: clamp(var(--inc-type-text-md--min), 1.125vi, var(--inc-type-text-md--max));

    --inc-type-text-sm--min: 15px;
    --inc-type-text-sm--max: 15px;
    --inc-type-text-sm: clamp(var(--inc-type-text-sm--min), 0.9375vi, var(--inc-type-text-sm--max));

    --inc-type-text-xs--min: 13px;
    --inc-type-text-xs--max: 13px;
    --inc-type-text-xs: clamp(var(--inc-type-text-xs--min), 0.8125vi, var(--inc-type-text-xs--max));

    /* Type: Link */
    --inc-type-link-lg--min: 20px;
    --inc-type-link-lg--max: 20px;
    --inc-type-link-lg: clamp(var(--inc-type-link-lg--min), 1.25vi, var(--inc-type-link-lg--max));

    --inc-type-link-md--min: 17px;
    --inc-type-link-md--max: 18px;
    --inc-type-link-md: clamp(var(--inc-type-link-md--min), 1.125vi, var(--inc-type-link-md--max));

    --inc-type-link-sm--min: 15px;
    --inc-type-link-sm--max: 15px;
    --inc-type-link-sm: clamp(var(--inc-type-link-sm--min), 0.9375vi, var(--inc-type-link-sm--max));

    --inc-type-link-xs--min: 13px;
    --inc-type-link-xs--max: 13px;
    --inc-type-link-xs: clamp(var(--inc-type-link-xs--min), 0.8125vi, var(--inc-type-link-xs--max));

    /* BREAKPOINTS */
    --inc-bp-sm: 600px;
    --inc-bp-md: 900px;
    --inc-bp-lg: 1200px;

    --inc-inline-size-sm: min(var(--inc-bp-sm), 100vi);
    --inc-inline-size-md: min(var(--inc-bp-md), 100vi);
    --inc-inline-size-lg: min(var(--inc-bp-lg), 100vi);

    /* SPACING and DIMENSIONS */
    /* Base dimensions */
    --inc-base-outline-width: 0.25rem;

    --inc-base-border-width: 2px;
    --inc-base-border-radius: 0.5rem;

    --inc-base-padding-inline: 1.5rem;
    --inc-base-padding-block: 2rem;

    --inc-base-section-padding-inline-sm: 1rem;
    --inc-base-section-padding-block-sm: 1.333rem;
    --inc-base-section-padding-inline-md: 1.875rem;
    --inc-base-section-padding-block-md: 2.5rem;
    --inc-base-section-gap: 1rem;

    --inc-base-form-gap-inline: 0.5rem;
    --inc-base-form-gap-block: 1rem;

    --inc-base-label-gap: 0.25rem;

    --inc-base-input-padding-inline: calc(20rem / 16);
    --inc-base-input-padding-block: calc(9rem / 16);
    --inc-base-input-gap: 0.5rem;

    --inc-base-popup-corner-radius: 0.75rem;
  }

  .root_fadeOut__psIAV {
    opacity: 0;
    transition: opacity 0.4s ease-in;

    @starting-style {
      opacity: 1;
    }
  }

  .root_fadeIn__0SMqe {
    opacity: 1;
    transition: opacity 0.4s ease-in;

    @starting-style {
      opacity: 0;
    }
  }
}

@layer ui {
  .otp_root___YoOI {
    display: flex;
    flex-flow: row nowrap;
    gap: var(--inc-form-otp-gap);
  }

  .otp_input__3TZcZ {
    flex: 1;
    aspect-ratio: 0.75;

    padding: var(--inc-form-otp-padding-block) 0;
    border: var(--inc-base-border-width) solid var(--inc-form-control-border);
    border-radius: var(--inc-base-border-radius);
    background-color: var(--inc-form-control-background);
    outline: var(--inc-base-outline-width) solid var(--inc-form-control-outline);

    font-size: var(--inc-type-display-sm);
    font-weight: 700;
    text-align: center;

    transition:
      color 0.24s ease-in-out,
      background-color 0.24s ease-in-out,
      border-color 0.24s ease-in-out,
      outline-color 0.4s ease-in;
  }
  .otp_input__3TZcZ:focus:not([data-disabled]),
  .otp_input__3TZcZ:hover:not([data-disabled]) {
    background-color: var(--inc-form-control-background-active);
    border-color: var(--inc-form-control-border-active);
  }
  .otp_input__3TZcZ:focus:not([data-disabled]) {
    outline-color: var(--inc-form-control-outline-active);
  }
  .otp_input__3TZcZ[data-filled]:not([data-disabled]) {
    background-color: var(--inc-form-otp-filled-incomplete-background);
  }
  .otp_input__3TZcZ[data-filled][data-complete]:not([data-disabled]) {
    background-color: var(--inc-form-otp-filled-complete-background);
  }
}

@layer ui {
  .checkbox_root__pWpEI {
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    align-items: center;
    justify-content: center;
    border: var(--inc-base-border-width) solid var(--inc-form-control-border);
    border-radius: 6px;
    background-color: var(--inc-form-control-background);
    color: var(--inc-form-control-foreground);
    padding: 0;
    margin: 0;

    transition:
      color 0.24s ease-in-out,
      border-color 0.24s ease-in-out,
      background-color 0.24s ease-in-out;
  }
  .checkbox_root__pWpEI[data-disabled] {
    background-color: var(--inc-form-control-background-disabled);
    color: var(--inc-form-control-foreground-disabled);
  }

  .checkbox_root__pWpEI[data-checked],
  .checkbox_root__pWpEI[data-indeterminate] {
    border-color: var(--inc-form-control-border-active);
    background-color: var(--inc-form-control-foreground);
  }

  .checkbox_root__pWpEI:focus-visible {
    border-color: var(--inc-form-control-border-active);
    outline: var(--inc-base-outline-width) solid var(--inc-palette-primary-background-strong);
  }

  .checkbox_indicator__9K5nb {
    display: flex;
  }
  .checkbox_root__pWpEI[data-checked] .checkbox_indicator__9K5nb,
  .checkbox_root__pWpEI[data-indeterminate] .checkbox_indicator__9K5nb {
    color: var(--inc-form-control-background);
  }
  .checkbox_root__pWpEI[data-disabled] .checkbox_indicator__9K5nb {
    color: var(--inc-form-control-foreground-disabled);
  }
}

@layer ui {
  .scrollArea_root__YxIwG {
    --scrollbar-width: 1.5rem;
    --thumb-width: 1rem;

    container: scrollArea / inline-size;

    box-sizing: border-box;
    width: 100%;
    border-radius: var(--inc-base-border-radius);
    outline: var(--inc-base-outline-width) solid var(--inc-form-control-outline);

    transition: outline-color 0.24s ease-in-out;
  }
  .scrollArea_root__YxIwG:has(.scrollArea_viewport__Nrpex:focus-visible) {
    outline-color: var(--inc-form-control-outline-active);
  }

  .scrollArea_viewport__Nrpex {
    --fade-size: 40px;

    width: 100%;
    height: 100%;
    background: var(--inc-form-control-background);
    outline: none;

    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      black min(var(--fade-size), var(--scroll-area-overflow-y-start)),
      black calc(100% - min(var(--fade-size), var(--scroll-area-overflow-y-end, var(--fade-size)))),
      transparent 100%
    );

            mask-image: linear-gradient(
      to bottom,
      transparent 0,
      black min(var(--fade-size), var(--scroll-area-overflow-y-start)),
      black calc(100% - min(var(--fade-size), var(--scroll-area-overflow-y-end, var(--fade-size)))),
      transparent 100%
    );
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
  }

  .scrollArea_root__YxIwG:has(.scrollArea_viewport__Nrpex + .scrollArea_scrollbar__CxMcM) .scrollArea_viewport__Nrpex {
    max-width: calc(100cqi - var(--scrollbar-width));
  }

  .scrollArea_content__usB_V {
    padding: 1rem;
  }

  .scrollArea_scrollbar__CxMcM {
    display: flex;
    justify-content: center;
    padding-block: 0.25rem;
    background-color: var(--inc-form-control-background-disabled);
    margin: 1px;
  }
  .scrollArea_scrollbar__CxMcM[data-orientation="horizontal"] {
    height: var(--scrollbar-width);
    border-bottom-left-radius: var(--inc-base-border-radius);
    border-bottom-right-radius: var(--inc-base-border-radius);
  }
  .scrollArea_scrollbar__CxMcM[data-orientation="vertical"] {
    width: var(--scrollbar-width);
    border-top-right-radius: var(--inc-base-border-radius);
    border-bottom-right-radius: var(--inc-base-border-radius);
  }
  .scrollArea_scrollbar__CxMcM[data-scrolling] {
    transition-duration: 0ms;
  }
  .scrollArea_scrollbar__CxMcM:not(.scrollArea_persistent__f77Z1) {
    opacity: 0;
    transition: opacity 150ms;
    pointer-events: none;
  }
  .scrollArea_scrollbar__CxMcM:not(.scrollArea_persistent__f77Z1)[data-hovering],
  .scrollArea_scrollbar__CxMcM:not(.scrollArea_persistent__f77Z1)[data-scrolling] {
    opacity: 1;
    pointer-events: auto;
  }

  .scrollArea_thumb__tORYu {
    width: var(--thumb-width);
    background-color: var(--inc-form-control-foreground);
    border-radius: var(--inc-base-border-radius);
  }
}

/*
 * Layer order matters: `responsive` declarations always beat `unconditional`
 * declarations for the same property, regardless of source position.
 * This protects against Next's production CSS minifier (cssnano), which
 * can hoist/merge plain declarations that happen to be byte-identical
 * across unrelated selectors into a new rule positioned after a rule's
 * own @container override -- silently undoing the override, but only
 * in the minified production build (never in `next dev`).
 */
@layer unconditional, responsive;

/* `hero` img */
.signUp_hero_hero__zddIp {
  grid-area: hero;

  @layer unconditional {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 2;

    opacity: 1;
    transition: opacity 0.4s ease-out;

    @starting-style {
      opacity: 0;
    }
  }

  @layer responsive {
    @container main style(--inc-inline-size-md: var(--inc-bp-md)) {
      --gutter: max(50svw - (var(--signUp-max-w, 1200px) / 2), 0);

      height: 100%;
      aspect-ratio: unset;
      width: max(100% + (50svw - 600px), 100%);
      justify-self: end;
    }
  }
}

.signUp_hero_hero__zddIp.signUp_hero_artist__MZLsj {
  background-color: var(--inc-color-userType-artist);
}
.signUp_hero_hero__zddIp.signUp_hero_creator__s3q_V {
  background-color: var(--inc-color-userType-creator);
}

.signUp_hero_hero__zddIp .signUp_hero_heroImage__fgo5d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/*
 * Layer order matters: `responsive` declarations always beat `unconditional`
 * declarations for the same property, regardless of source position.
 * This protects against Next's production CSS minifier (cssnano), which
 * can hoist/merge plain declarations that happen to be byte-identical
 * across unrelated selectors into a new rule positioned after a rule's
 * own @container override -- silently undoing the override, but only
 * in the minified production build (never in `next dev`).
 */
@layer unconditional, responsive;

/* `intro` plan summary cards */
.signUp_plans_intro__nkmh5 {
  /* --scrollbar-width: 0.5rem;
  --thumb-width: 0.5rem; */

  grid-area: intro;

  flex: 1 0 100%;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

.signUp_plans_plansViewport__jWRUo {
  background-color: transparent;
}
.signUp_plans_plansScrollbar__zGg6g {
  /* padding-block: 0; */
  border-radius: var(--inc-base-border-radius);
}
.signUp_plans_plansScrollbarThumb__gL_6B {
  /* background-color: var(--inc-palette-yellow); */
}

.signUp_plans_inner__icPst {
  @layer unconditional {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--signUp-gap);

    min-height: -moz-fit-content;

    min-height: fit-content;
    padding-inline: var(--inc-base-section-padding-inline-sm);
    padding-block: var(--inc-base-outline-width)
      var(--inc-base-section-padding-block-sm);
    background-color: var(--inc-color-background);
  }

  /* Query on container 'main' (of Sign Up page) to see whether or not
  its inline-size is wider than our -md breakpoint */
  @layer responsive {
    @container main style(--inc-inline-size-md: var(--inc-bp-md)) {
      padding-inline: var(--inc-base-section-padding-inline-md)
        var(--inc-base-section-padding-inline-sm);
      padding-block: var(--inc-base-outline-width)
        var(--inc-base-section-padding-block-md);
    }
  }
}

.signUp_plans_redirect__K6iv7 {
  container: redirect / inline-size;

  padding: var(--inc-base-padding-inline);
  border: 1px solid currentColor;
  border-radius: var(--inc-base-border-radius);
}
.signUp_plans_redirectFlow__ussQL {
  @layer unconditional {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 1rem;
  }

  @layer responsive {
    @container redirect (min-width: 360px) {
      flex-flow: row nowrap;
      align-items: last baseline;
    }
  }
}
.signUp_plans_redirect__K6iv7 p {
  flex: 1;
  width: 100%;
}
.signUp_plans_redirectLink__ZQGuJ {
  flex: 0 1 auto;
  width: -moz-fit-content;
  width: fit-content;
}

.signUp_plans_contactUsFooter__LFKCy {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: var(--inc-base-padding-block);

  width: 100%;

  padding-inline: var(--inc-base-padding-inline);
  padding-block: var(--inc-base-padding-block);
  border-radius: var(--inc-base-border-radius);

  background-color: #d9d9d9;
  color: var(--inc-palette-black);

  font-size: 2rem;
  line-height: 1;
  font-weight: 800;
  text-align: left;
}

/*
 * Layer order matters: `responsive` declarations always beat `unconditional`
 * declarations for the same property, regardless of source position.
 * This protects against Next's production CSS minifier (cssnano), which
 * can hoist/merge plain declarations that happen to be byte-identical
 * across unrelated selectors into a new rule positioned after a rule's
 * own @container override -- silently undoing the override, but only
 * in the minified production build (never in `next dev`).
 */
@layer unconditional, responsive;

.signUp_plan_plan__frCQ5 {
  outline: 0.25rem solid transparent;
  transition: outline-color 0.4s ease-in-out;
}
.signUp_plan_plan__frCQ5.signUp_plan_selected__tIgpC {
  outline-color: var(--signUp-color-selected);
}
.signUp_plan_plan__frCQ5.signUp_plan_hidden__AAymi {
  opacity: 0;
  display: none;
}

/* Container for H3 and details toggle */
.signUp_plan_headerWithDetailsToggle__4IdmG {
  display: flex;
  flex-flow: row nowrap;
  align-items: first baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block-end: 0.5rem;
}
.signUp_plan_headerWithDetailsToggle__4IdmG .signUp_plan_planH3__XlGMW {
  flex: 1;
}
.signUp_plan_headerWithDetailsToggle__4IdmG .signUp_plan_detailsButton__ytU9E {
  flex: 0;
  min-width: -moz-fit-content;
  min-width: fit-content;
}
.signUp_plan_headerWithDetailsToggle__4IdmG .signUp_plan_detailsButton__ytU9E svg {
  transition: transform 0.4s ease-in-out;
}

.signUp_plan_planH3__XlGMW {
  color: var(--signUp-color-label);
  font-size: var(--inc-type-display-md);
  font-weight: 800;
  line-height: 1;
}
.signUp_plan_plan__frCQ5 header p {
  font-size: var(--inc-type-text-lg);
  padding-block-start: 0.5rem;
}

.signUp_plan_planUl__k6rNJ {
  display: list;
  list-style-type: disc;
  list-style-position: outside;
  margin-inline-start: 1rem;
}
.signUp_plan_planUl__k6rNJ > *:not(:last-child) {
  padding-block-end: 4px;
}

.signUp_plan_planFooter__YHAcQ {
  @layer unconditional {
    gap: 1rem;
  }

  @layer responsive {
    @container card (min-width: 360px) {
      align-items: last baseline;
    }
  }
}
.signUp_plan_planFooter__YHAcQ.signUp_plan_hasOneFreePlan__1ZtEx {
  flex-flow: row nowrap;
  align-items: baseline;
}
.signUp_plan_planFooter__YHAcQ h4 {
  font-size: var(--inc-type-display-xs);
  font-weight: 900;
}
.signUp_plan_planFooter__YHAcQ .signUp_plan_ratePeriodLabel__Khcrx {
  padding-inline-start: 1ch;
  font-size: var(--inc-type-text-xs);
}

/* Rates radioGroup */
.signUp_plan_rates__KQegW {
  flex: 0 1 auto;
  align-self: stretch;
  width: 100%;
}

/* TODO: switch to grid, with (composable) templates for free, discounted, period */
.signUp_plan_rate__IrE82 {
  padding-inline: calc(0.5 * var(--inc-base-padding-inline));
  padding-block: calc(0.5 * var(--inc-base-padding-block));
  border-radius: var(--inc-base-border-radius);

  background-color: oklch(
    from var(--color-background-footer) calc(l * 0.8) c h
  );

  transition: background-color 0.24s ease-in;
}
.signUp_plan_rate__IrE82:has([data-checked]) {
  background: oklch(from var(--color-background-footer) calc(l * 0.6) c h);
}
.signUp_plan_rate__IrE82.signUp_plan_hideUnselectedRates__s5pT3 {
  display: none;
}

.signUp_plan_signUpPlanRate__NFPE9 {
  flex: 1 1 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.5rem;

  width: 100%;
  line-height: 1.2;
}

.signUp_plan_value__GQrFz {
  flex: 1;
  display: inline-flex;
  flex-flow: row wrap;
  justify-content: flex-start;

  width: 100%;
  text-align: left;
}
.signUp_plan_value__GQrFz .signUp_plan_valuePeriod__gV6pU {
  margin-inline-end: auto;
}
.signUp_plan_discountAnnotation__1MVXy,
.signUp_plan_rateAnnotation__Y18TN {
  font-size: 1rem;
  width: 100%;
}
.signUp_plan_discountAnnotation__1MVXy {
  flex: 1;
  padding-block-start: 0.5ch;
  text-align: right;
  text-wrap: balance;
  font-weight: 600;
}

.signUp_plan_planRateCTA__KjHy5 {
  font-weight: 800;
}

.signUp_plan_rates__KQegW + .signUp_plan_planRateCTA__KjHy5 {
  flex: 1;
  width: 100%;
  justify-content: center;
}

.signUp_plan_ratesButtonGroup__wo62Y {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--inc-base-outline-width);

  width: 100%;
}

.signUp_plan_ratesButtonGroup__wo62Y:has(:not(:first-child:last-child)) {
  border-radius: var(--inc-base-border-radius);
  /* outline: var(--inc-base-border-width) solid currentColor;
  outline-offset: var(--inc-base-outline-width); */
}

.signUp_plan_ratesButtonGroup__wo62Y > button {
  flex: 1;
  align-items: center;
}

.signUp_plan_ratesButtonGroup__wo62Y > button:first-child:not(:first-child:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.signUp_plan_ratesButtonGroup__wo62Y > button:last-child:not(:first-child:last-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

@layer ui {
  .card_root__UZVIh {
    --border-radius: var(--inc-base-padding-inline);
    --padding-block-sm: calc((1 * var(--inc-base-padding-block)) / 4);
    --padding-block-md: calc((3 * var(--inc-base-padding-block)) / 8);
    --padding-block-lg: calc((1 * var(--inc-base-padding-block)) / 2);
    --padding-inline: var(--padding-block-lg);

    --color-background: oklch(14.479% 0.00002 271.152);
    --color-text: oklch(83.902% 0.0001 271.152);

    --color-background-footer: oklch(31.714% 0.00004 271.152);

    container: card / inline-size;

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;

    /* Hide overflow to display border-radius. */
    overflow: hidden;
    border-radius: var(--border-radius);

    /* 
    No padding applied to Root component;
    subcomponents provide their own padding.
    */
  }

  .card_header__O6U4Y {
    padding-inline: var(--padding-inline);
    padding-block: var(--padding-block-lg) var(--padding-block-md);

    background-color: var(--color-background);
    color: var(--color-text);
  }

  .card_body__DoYQY {
    padding-inline: var(--padding-inline);
    padding-block: var(--padding-block-sm) var(--padding-block-lg);

    background-color: var(--color-background);
    color: var(--color-text);
  }
  .card_root__UZVIh:has(.card_header__O6U4Y + .card_body__DoYQY) .card_body__DoYQY {
    padding-block-start: 0;
  }

  .card_footer___Nfoe {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: first baseline;

    padding-inline: var(--padding-inline);
    padding-block: var(--padding-block-md) var(--padding-inline);

    background-color: var(--color-background-footer);
  }
  .card_footer___Nfoe.card_footerCentered__3Bvdk {
    justify-content: space-evenly;
  }

  @container card (max-width: 360px) {
    .card_footer___Nfoe {
      flex-flow: column nowrap;
      align-items: stretch;
      row-gap: 1rem;
    }
  }
}

/*
 * Layer order matters: `responsive` declarations always beat `unconditional`
 * declarations for the same property, regardless of source position.
 * This protects against Next's production CSS minifier (cssnano), which
 * can hoist/merge plain declarations that happen to be byte-identical
 * across unrelated selectors into a new rule positioned after a rule's
 * own @container override -- silently undoing the override, but only
 * in the minified production build (never in `next dev`).
 */
@layer unconditional, responsive;

.signUp_main__NoVWq {
  --signUp-color-label: var(--inc-palette-brown);
  --signUp-color-label-highlight: oklch(
    from var(--inc-palette-brown) calc(l * 1.2) c h
  );
  --signUp-color-selected: var(--inc-palette-primary-default-strong);
  --signUp-gap: 2rem;
  --signUp-max-w: 1200px;

  flex: 1;
  container: main / inline-size;

  display: flex;
  flex-flow: column nowrap;
  justify-content: stretch;
  align-items: stretch;

  background-color: var(--inc-color-background);
  border-top: var(--inc-base-outline-width, 0.25rem) solid transparent;

  transition: border-top-color 0.4s ease-in-out;
}
.signUp_main__NoVWq.signUp_ARTIST__R_7q3 {
  border-top-color: var(--inc-color-userType-artist);
}
.signUp_main__NoVWq.signUp_CREATOR__pPRFK {
  border-top-color: var(--inc-color-userType-creator);
}

.signUp_steps__0vbMB {
  @layer unconditional {
    display: grid;
    width: 100%;

    grid-template-areas: "hero" "header" "step" "form" "intro";
    grid-template-rows: [hero] 1fr [header] auto [step] auto [form] auto [intro] auto;
    grid-template-columns: [hero header intro step form] 1fr;
    gap: 0;

    transition: grid-template-rows 0.4s ease-in-out;
  }

  @layer responsive {
    @container main style(--inc-inline-size-md: var(--inc-bp-md)) {
      flex: 1 0 auto;
      height: 0;
      max-width: var(--signUp-max-w);
      margin-inline: auto;

      grid-template-areas: "hero header step" "hero intro form";
      grid-template-rows: [hero-start header-start step-start] auto [header-end step-end intro-start form-start] 1fr [intro-end form-end hero-end];
      grid-template-columns: [hero] 1fr [header intro] 1fr [step form] 0fr;

      /* Governs animation to/from "INITIAL" and "FORM" steps. */
      transition:
        grid-template-columns 0.4s ease-in-out,
        grid-template-rows 0.4s ease-in-out;
    }
  }
}

/* Step 0: Plan selection state, showing `hero` img and `intro` plan summary cards. */
.signUp_step0__g6_dj .signUp_steps__0vbMB {
  @layer unconditional {
    grid-template-rows: [hero] 1fr [header] auto [step] 0% [form] 0% [intro] 100%;
    grid-template-columns: [hero header intro step form] 1fr;
  }

  @layer responsive {
    @container main style(--inc-inline-size-md: var(--inc-bp-md)) {
      grid-template-rows: [hero intro form] 1fr;
      grid-template-columns: [hero-start] 50% [hero-end header-start intro-start] 50% [intro-end header-end step-start form-start] 0% [step-end form-end];
    }
  }
}

/* Step 1: Post-CTA-conversion "form" state, showing `intro` plan summary cards and account creation `form` section. */
.signUp_step1__5yisw .signUp_steps__0vbMB {
  @layer unconditional {
    grid-template-rows: [hero] auto [header] auto [step] auto [form] 1fr [intro] auto;
    grid-template-columns: [hero header intro step form] 1fr;
  }

  @layer responsive {
    @container main style(--inc-inline-size-md: var(--inc-bp-md)) {
      grid-template-rows: [hero-start header-start step-start] auto [header-end step-end intro-start form-start] 1fr [intro-end form-end hero-end];
      grid-template-columns: [hero-start] 0% [hero-end header-start intro-start] 50% [intro-end header-end step-start form-start] 50% [form-end step-end];
    }
  }
}
.signUp_fullWidthStep__rzVTX .signUp_steps__0vbMB {
  @layer unconditional {
    grid-template-rows: [hero] auto [header] auto [step] auto [form] 1fr [intro] auto;
    grid-template-columns: [hero header intro step form] 1fr;
  }

  @layer responsive {
    @container main style(--inc-inline-size-md: var(--inc-bp-md)) {
      grid-template-rows: [hero-start header-start step-start] auto [header-end step-end intro-start form-start] 1fr [intro-end form-end hero-end];
      grid-template-columns: [hero-start] 0% [hero-end header-start intro-start form-start] 50% [intro-end header-end step-start] 50% [form-end step-end];
    }
  }
}

.signUp_planHeader__jZ7ri {
  grid-area: header;

  @layer unconditional {
    padding: var(--inc-base-section-padding-block-sm)
      var(--inc-base-section-padding-inline-sm);
  }

  @layer responsive {
    @container main style(--inc-inline-size-md: var(--inc-bp-md)) {
      padding: var(--inc-base-section-padding-block-md)
        var(--inc-base-section-padding-inline-md);
    }
  }
}

.signUp_planHeader__jZ7ri h2 {
  margin-bottom: 0.5rem;
  color: var(--signUp-color-label);
  font-size: var(--inc-type-display-lg);
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.25px;
  text-wrap-style: balance;
}
.signUp_planHeader__jZ7ri h2.signUp_ARTIST__R_7q3 {
  color: var(--inc-color-userType-artist);
}
.signUp_planHeader__jZ7ri h2.signUp_CREATOR__pPRFK {
  color: var(--inc-color-userType-creator);
}
.signUp_planHeader__jZ7ri p {
  font-weight: 800;
}

.signUp_nav__vORrS {
  grid-area: step;
  align-self: center;
}

.signUp_steps__0vbMB.signUp_rerouting__xgvBt {
  flex: 1;
  grid-column: 1 / -1;
  grid-row: 1 / -1;

  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;

  width: calc(100% - (2 * var(--inc-base-section-adding-inline-md)));

  padding: var(--inc-base-section-padding-block-md)
    var(--inc-base-section-padding-inline-md);
  background-color: var(--inc-palette-black);
  border-radius: var(--inc-base-border-radius);
  margin: var(--inc-base-section-padding-block-md)
    var(--inc-base-section-padding-inline-md);

  color: var(--inc-palette-white);
  font-size: var(--inc-type-text-md);
  font-weight: 800;
  text-align: center;
}