:root {
  --opacity-1: .1;
  --opacity-2: .15;
  --opacity-3: .3;
  --opacity-4: .5;
  --opacity-5: .7;
  --color_brand_purple: #6f2c90;
  --color_brand_purple_dark: #320448;
  --color_brand_purple_light: #e1cbe7;
  --color_brand_orange: #f68d1e;
  --color_brand_orange_dark: #d06e06;
  --color_brand_orange_light: #ffe6cc;
  --color_functional_blue: #1f89e5;
  --color_functional_blue_light: #d2e7f9;
  --color_functional_crimson: #d53048;
  --color_functional_crimson_light: #ffe0e0;
  --color_functional_green: #2ebd86;
  --color_functional_green_light: #d4f2e6;
  --color_mono_black: #212121;
  --color_mono_black_alpha_1: #2121211a;
  --color_mono_black_alpha_2: #21212126;
  --color_mono_black_alpha_3: #212121bf;
  --color_mono_white: #fff;
  --color_mono_white_alpha_1: #ffffff1a;
  --color_mono_white_alpha_2: #ffffff26;
  --color_mono_white_alpha_3: #ffffffbf;
  --color_mono_grey_1: #f5f5f5;
  --color_mono_grey_2: #ebebeb;
  --color_mono_grey_3: #d6d6d6;
  --color_mono_grey_4: #adadad;
  --color_mono_grey_5: #737373;
}

[dir="ltr"] {
  --text-x-direction: 1;
}

[dir="rtl"] {
  --text-x-direction: -1;
}

[data-theme="not-preferred"], [data-theme="dark"] {
  --media-prefers-dark: ;
}

[data-theme="preferred"], [data-theme="light"] {
  --media-prefers-dark: initial;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="not-preferred"]), [data-theme="preferred"] {
    --media-prefers-dark: ;
  }

  [data-theme="not-preferred"] {
    --media-prefers-dark: initial;
  }
}

:root, [data-theme="preferred"], [data-theme="not-preferred"], [data-theme="light"], [data-theme="dark"] {
  --theme_scheme__dark: var(--media-prefers-dark) dark;
  --color-fg: var(--color_fg__dark, var(--color_mono_black));
  --color-fg-muted: var(--color_fg_muted__dark, var(--color_mono_grey_5));
  --color-fg-contrast: var(--color_fg_contrast__dark, var(--color_mono_white));
  --color-fg-brand-primary: var(--color_fg_brand_primary__dark, var(--color_brand_purple));
  --color-fg-brand-secondary: var(--color_fg_brand_secondary__dark, var(--color_brand_orange));
  --color-fg-negative: var(--color_fg_negative__dark, var(--color_functional_crimson));
  --color-fg-positive: var(--color_fg_positive__dark, var(--color_functional_green));
  --color-bg: var(--color_bg__dark, var(--color_mono_white));
  --color-bg-secondary: var(--color_bg_brand_secondary_light__dark, var(--color_brand_orange_light));
  --color-bg-opaque: var(--color_bg_opaque__dark, var(--color_mono_white_alpha_3));
  --color-bg-contrast: var(--color_bg_contrast__dark, var(--color_mono_black));
  --color-bg-brand-primary: var(--color_bg_brand_primary__dark, var(--color_brand_purple));
  --color-bg-brand-primary-light: var(--color_bg_brand_primary_light__dark, var(--color_brand_purple_light));
  --color-bg-brand-primary-dark: var(--color_bg_brand_primary_dark__dark, var(--color_brand_purple_dark));
  --color-bg-brand-secondary: var(--color_bg_brand_secondary__dark, var(--color_brand_orange));
  --color-bg-brand-secondary-light: var(--color_bg_brand_secondary_light__dark, var(--color_brand_orange_light));
  --color-bg-brand-secondary-dark: var(--color_bg_brand_secondary_dark__dark, var(--color_brand_orange_dark));
  --color-border: var(--color_border__dark, var(--color_mono_black_alpha_2));
  --color-border-contrast: var(--color_border_contrast__dark, var(--color_mono_black));
  --color-border-muted: var(--color_border_muted__dark, var(--color_mono_black_alpha_1));
  --color-border-negative: var(--color_border_negative__dark, var(--color_functional_crimson));
  --color-border-positive: var(--color_border_positive__dark, var(--color_functional_green));
  --color-border-selected: var(--color_border_selected__dark, var(--color_mono_black));
  color-scheme: var(--theme_scheme__dark, light);
}

*, :before, :after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, ul, ol, dd {
  margin: 0;
}

:where(ul[role="list"], ol[role="list"]) {
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(ul, ol):not([role="list"]):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  padding-left: 1.2em;
}

:where(ul, ol):not([role="list"]):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  padding-right: 1.2em;
}

:where(ul, ol):not([role="list"]):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  padding-right: 1.2em;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.6;
}

h1, h2, h3, h4, button, input, label {
  line-height: 1.1;
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

img, picture, video, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

input, button, textarea, select {
  font: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

:target {
  scroll-margin-block: 5ex;
}

:root {
  --space-3xs: clamp(.25rem, .2283rem + .1087vi, .3125rem);
  --space-2xs: clamp(.5rem, .4783rem + .1087vi, .5625rem);
  --space-xs: clamp(.75rem, .7065rem + .2174vi, .875rem);
  --space-s: clamp(1rem, .9565rem + .2174vi, 1.125rem);
  --space-m: clamp(1.5rem, 1.4348rem + .3261vi, 1.6875rem);
  --space-l: clamp(2rem, 1.913rem + .4348vi, 2.25rem);
  --space-xl: clamp(3rem, 2.8696rem + .6522vi, 3.375rem);
  --space-2xl: clamp(4rem, 3.8261rem + .8696vi, 4.5rem);
  --space-3xl: clamp(5rem, 4.7826rem + 1.087vi, 5.625rem);
  --space-4xl: clamp(6rem, 5.581rem + 1.5vi, 7.25rem);
  --radius-s: .25rem;
  --radius-m: .5rem;
  --radius-l: .75rem;
  --radius-pill: 360px;
  --radius-round: 50%;
  --page-gutters: clamp(var(--space-m), 3vi, var(--space-xl));
  --page-max: 88rem;
  --skew-block-start: polygon(0 100%, 0 4vw, 100% 0, 100% 100%);
  --skew-block-end: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%);
  --step--2: clamp(.6944rem, .814rem + -.1196vi, .7901rem);
  --step--1: clamp(.8333rem, .9028rem + -.0694vi, .8889rem);
  --step-0: clamp(1rem, 1rem + 0vi, 1rem);
  --step-1: clamp(1.125rem, 1.1063rem + .0938vi, 1.2rem);
  --step-2: clamp(1.2656rem, 1.222rem + .218vi, 1.44rem);
  --step-3: clamp(1.4238rem, 1.3478rem + .3802vi, 1.728rem);
  --step-4: clamp(1.6018rem, 1.4839rem + .5897vi, 2.0736rem);
  --step-5: clamp(1.802rem, 1.6305rem + .8579vi, 2.4883rem);
  --step-6: clamp(2.0273rem, 1.7876rem + 1.1984vi, 2.986rem);
  --step-7: clamp(2.2807rem, 1.9551rem + 1.6281vi, 3.5832rem);
  --step-8: clamp(2.5658rem, 2.1323rem + 2.1675vi, 4.2998rem);
  --font-base: "Lato", Tahoma, system-ui, sans-serif;
  --font-display: "Marcellus", var(--font-base);
  --font-bold: 700;
  --font-semibold: 600;
  --font-normal: 400;
  --focus-outline: 2px solid var(--color-bg-brand-primary);
  --focus-outline-offset: 2px;
}

a {
  color: var(--color-fg-brand-primary);
}

a:-webkit-any(:hover, :focus-visible) {
  text-decoration: none;
}

a:is(:hover, :focus-visible) {
  text-decoration: none;
}

:-webkit-any(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  text-wrap: balance;
  margin: 0;
  font-weight: normal;
}

:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  text-wrap: balance;
  margin: 0;
  font-weight: normal;
}

:-webkit-any(h1, .text-8) {
  font-size: var(--step-8);
  line-height: 1.1;
}

:is(h1, .text-8) {
  font-size: var(--step-8);
  line-height: 1.1;
}

.text-7 {
  font-size: var(--step-7);
  line-height: 1.2;
}

:-webkit-any(h2, .text-6) {
  font-size: var(--step-6);
  line-height: 1.2;
}

:is(h2, .text-6) {
  font-size: var(--step-6);
  line-height: 1.2;
}

:-webkit-any(h3, .text-5) {
  font-size: var(--step-5);
  line-height: 1.2;
}

:is(h3, .text-5) {
  font-size: var(--step-5);
  line-height: 1.2;
}

:-webkit-any(h4, .text-4) {
  font-size: var(--step-4);
  line-height: 1.3;
}

:is(h4, .text-4) {
  font-size: var(--step-4);
  line-height: 1.3;
}

:-webkit-any(h5, .text-3) {
  font-size: var(--step-3);
  line-height: 1.4;
}

:is(h5, .text-3) {
  font-size: var(--step-3);
  line-height: 1.4;
}

:-webkit-any(h6, .text-2) {
  font-size: var(--step-2);
  line-height: 1.5;
}

:is(h6, .text-2) {
  font-size: var(--step-2);
  line-height: 1.5;
}

.text-1 {
  font-size: var(--step-1);
  line-height: 1.6;
}

.icon {
  width: var(--icon-size, 1.5rem);
  height: var(--icon-size, 1.5rem);
  vertical-align: middle;
}

.hidden {
  display: none !important;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

button, .button, [class^="button-"] {
  justify-content: center;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-2xs) var(--space-m);
  border-radius: var(--radius-pill);
  background: var(--color-fg-contrast);
  color: var(--color-bg-brand-primary);
  cursor: pointer;
  border: 0;
  text-decoration: none;
  display: inline-flex;
  box-shadow: 0 1px 3px #00000059;
}

:is(button, .button, [class^="button-"]):not(:disabled):where(:hover, :focus-visible) {
  background-color: var(--color-bg-brand-primary-dark);
  color: var(--color-fg-contrast);
}

:is(button, .button, [class^="button-"]):not(:disabled):where(:active) {
  box-shadow: inset 0 0 4px #0003;
}

:is(button, .button, [class^="button-"]):where(:disabled) {
  opacity: .5;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: no-preference) {
  button, .button, [class^="button-"] {
    transition: all .2s;
  }
}

.button-mono {
  background-color: var(--color-bg);
  color: var(--color-fg);
}

.button-mono:where(:hover, :focus-visible) {
  background-color: var(--color-bg-brand-primary);
  color: var(--color-fg-contrast);
}

.button-text {
  box-shadow: none;
  color: var(--color-fg-interactive);
  cursor: pointer;
  background-color: #0000;
  border: 0;
  padding: 0;
  text-decoration: underline;
}

.button-text:where(:hover, :focus-visible) {
  color: var(--color-fg-interactive-hover);
  text-decoration: none;
}

.button-plain {
  padding: var(--space-3xs);
  box-shadow: none;
  font-size: var(--font-size, var(--step-0));
  font-weight: var(--font-normal);
  background-color: #0000;
  line-height: 1;
  text-decoration: none;
}

.button-plain:where(:hover, :focus-visible) {
  color: var(--color-bg-brand-secondary);
}

@media (prefers-reduced-motion: no-preference) {
  .button-plain {
    transition: all .2s;
  }
}

* {
  box-sizing: border-box;
}

html, body {
  color: var(--color-fg);
  font-family: var(--font-base);
  background-color: var(--color-bg);
  margin: 0 auto;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-y: scroll;
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

:where(img, svg, video) {
  height: auto;
  max-width: 100%;
}

:where(a[href], area, button, input:not([type="text"], [type="email"], [type="number"], [type="password"], [type=""], [type="tel"], [type="url"]), label[for], select, summary, [tabindex]:not([tabindex*="-"], pre)) {
  cursor: pointer;
}

.page {
  grid-template: "header"
                 "main" 1fr
                 "footer"
                 / 1fr;
  display: grid;
}

.page > header {
  grid-area: header;
}

.page > main {
  grid-area: main;
  min-width: 0;
}

.page > footer {
  grid-area: footer;
}

.breakout {
  --gutter-max: calc(1rem + 10vw);
  --gap: var(--space-s);
  --content: min(var(--page-max), 100% - var(--gap) * 2);
  --gutter: minmax(var(--gap), var(--gutter-max));
  --popout: minmax(0px, 1rem);
  grid-template-columns: [full-start] 1fr [gutter-start] var(--gutter) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--gutter) [gutter-end] 1fr [full-end];
  display: grid;
}

:where(.breakout) > * {
  grid-column: content-start / content-end;
}

.bleed {
  grid-column: full;
}