*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
dialog,
div,
span,
applet,
button,
input,
select,
textarea,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
main,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  background: rgba(0, 0, 0, 0);
  border: 0;
  font: inherit;
  font-size: 100%;
  margin: 0;
  min-width: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul,
menu {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}
img,
svg {
  display: block;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
:root {
  --rgb-black: 11, 18, 21;
  --rgb-black-dark: 0, 0, 0;
  --rgb-blue: 37, 99, 235;
  --rgb-blurple: 85, 34, 250;
  --rgb-cherokee: 204, 61, 51;
  --rgb-green: 11, 138, 15;
  --rgb-green-dark: 0, 117, 0;
  --rgb-grey: 231, 232, 233;
  --rgb-highlight: 253, 224, 71;
  --rgb-orange: 248, 121, 23;
  --rgb-paper: 250, 248, 244;
  --rgb-purple: 153, 50, 204;
  --rgb-purple-light: 112, 84, 195;
  --rgb-red: 255, 1, 1;
  --rgb-red-dark: 235, 1, 1;
  --rgb-yellow: 255, 214, 10;
  --rgb-white: 255, 255, 255;
  --rgb-target: 255, 255, 156;
  --color-black: rgb(var(--rgb-black));
  --color-black-dark: rgb(var(--rgb-black-dark));
  --color-blue: rgb(var(--rgb-blue));
  --color-blurple: rgb(var(--rgb-blurple));
  --color-cherokee: rgb(var(--rgb-cherokee));
  --color-green: rgb(var(--rgb-green));
  --color-green-dark: rgb(var(--rgb-green-dark));
  --color-grey: rgb(var(--rgb-grey));
  --color-highlight: rgb(var(--rgb-highlight));
  --color-orange: rgb(var(--rgb-orange));
  --color-paper: rgb(var(--rgb-paper));
  --color-purple: rgb(var(--rgb-purple));
  --color-purple-light: rgb(var(--rgb-purple-light));
  --color-red: rgb(var(--rgb-red));
  --color-red-dark: rgb(var(--rgb-red-dark));
  --color-yellow: rgb(var(--rgb-yellow));
  --color-white: rgb(var(--rgb-white));
  --color-target: rgb(var(--rgb-target));
  --font-family: "Graphik", Sans-Serif;
  --font-size: max(1.375rem, 2.225vw);
  --font-size-xxxx-small: max(0.875rem, 50%);
  --font-size-xxx-small: max(0.9375rem, 60%);
  --font-size-xx-small: max(1rem, 65%);
  --font-size-x-small: max(1.0625rem, 75%);
  --font-size-small: 85%;
  --font-size-medium: 120%;
  --font-size-large: 140%;
  --font-size-x-large: 160%;
  --font-size-xx-large: 200%;
  --letter-spacing-loose: -0.0175em;
  --letter-spacing: -0.025em;
  --letter-spacing-tight: -0.03375em;
  --letter-spacing-x-tight: -0.04125em;
  --line-height: 1.4;
  --space-neutral: 1.4em;
  --space-small: 0.5em;
  --space-medium: 1em;
  --space-large: 2em;
  --space-x-large: 3em;
  --space-xx-large: 4em;
  --space-xxx-large: 5em;
  --transition: 0.1s ease;
  --transition-slow: 0.2s ease;
}
@media (min-width: 64em) {
  :root {
    --font-size-medium: 125%;
    --font-size-large: 175%;
    --font-size-x-large: 200%;
    --font-size-xx-large: 300%;
  }
}
@font-face {
  font-display: swap;
  font-family: "Graphik";
  font-style: normal;
  font-weight: 400;
  src:
    url(../fonts/Graphik-Regular-Web.woff2) format("woff2"),
    url(../fonts/Graphik-Regular-Web.woff) format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Graphik";
  font-style: italic;
  font-weight: 400;
  src:
    url(../fonts/Graphik-RegularItalic-Web.woff2) format("woff2"),
    url(../fonts/Graphik-RegularItalic-Web.woff) format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Graphik";
  font-style: normal;
  font-weight: 500;
  src:
    url(../fonts/Graphik-Medium-Web.woff2) format("woff2"),
    url(../fonts/Graphik-Medium-Web.woff) format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Graphik";
  font-style: italic;
  font-weight: 500;
  src:
    url(../fonts/Graphik-MediumItalic-Web.woff2) format("woff2"),
    url(../fonts/Graphik-MediumItalic-Web.woff) format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Graphik";
  font-style: normal;
  font-weight: 600;
  src:
    url(../fonts/Graphik-Semibold-Web.woff2) format("woff2"),
    url(../fonts/Graphik-Semibold-Web.woff) format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Graphik";
  font-style: italic;
  font-weight: 600;
  src:
    url(../fonts/Graphik-SemiboldItalic-Web.woff2) format("woff2"),
    url(../fonts/Graphik-SemiboldItalic-Web.woff) format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Graphik";
  font-style: normal;
  font-weight: 700;
  src:
    url(../fonts/Graphik-Bold-Web.woff2) format("woff2"),
    url(../fonts/Graphik-Bold-Web.woff) format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Graphik";
  font-style: italic;
  font-weight: 700;
  src:
    url(../fonts/Graphik-BoldItalic-Web.woff2) format("woff2"),
    url(../fonts/Graphik-BoldItalic-Web.woff) format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Graphik";
  font-style: normal;
  font-weight: 800;
  src:
    url(../fonts/Graphik-Black-Web.woff2) format("woff2"),
    url(../fonts/Graphik-Black-Web.woff) format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Graphik";
  font-style: italic;
  font-weight: 800;
  src:
    url(../fonts/Graphik-BlackItalic-Web.woff2) format("woff2"),
    url(../fonts/Graphik-BlackItalic-Web.woff) format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Sharpie";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/SharpiePro-Regular.woff) format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Monaspace";
  font-style: normal;
  font-weight: 500;
  src:
    url(../fonts/MonaspaceRadon-Medium.woff2) format("woff2"),
    url(../fonts/MonaspaceRadon-Medium.woff) format("woff");
}
html {
  background: var(--color-white);
  font-size: 16px;
  min-height: -webkit-fill-available;
  scroll-padding-top: calc(var(--font-size) * 2.1 + var(--space-neutral));
}
html:has(dialog[open]) {
  overflow: hidden;
}
body {
  background: var(--color-white);
  color: var(--color-black);
  display: flex;
  flex-direction: column;
  font-family: var(--font-family);
  font-feature-settings: "liga", "ss05";
  font-size: var(--font-size);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height);
  min-height: 100vh;
  -webkit-tap-highlight-color: rgba(var(--rgb-black), 0);
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}
body.has-nav-phrase {
  opacity: 0;
}
@supports (-webkit-touch-callout: none) {
  body {
    min-height: -webkit-fill-available;
  }
}
a {
  color: var(--color-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.0925em;
}
b,
strong {
  color: var(--color-black);
  font-weight: 600;
}
i,
em {
  font-style: italic;
}
img,
source,
video {
  height: auto;
  max-width: 100%;
  width: 100%;
}
button,
input {
  color: var(--color-black);
  font-family: var(--font-family);
  font-feature-settings: "liga", "ss05";
  font-size: inherit;
  font-weight: 400;
  letter-spacing: inherit;
  line-height: inherit;
}
video::cue {
  font-family: var(--font-family);
  font-feature-settings: "liga", "ss05";
  font-size: var(--font-size-small);
  font-weight: 500;
  letter-spacing: var(--letter-spacing);
  line-height: 1;
}
u {
  background: url(../images/general/underline.svg) bottom center / 100% 0.15em no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding-bottom: 0.1em;
  text-decoration: none;
}
@media (hover: hover) {
  a:focus,
  a:hover {
    color: var(--color-black);
  }
}
.space-top--neutral {
  margin-top: var(--space-neutral) !important;
}
.space-top--small {
  margin-top: var(--space-small) !important;
}
.space-top--medium {
  margin-top: var(--space-medium) !important;
}
.space-top--large {
  margin-top: var(--space-large) !important;
}
.space-top--x-large {
  margin-top: var(--space-x-large) !important;
}
.space-top--xx-large {
  margin-top: var(--space-xx-large) !important;
}
.space-top--xxx-large {
  margin-top: var(--space-xxx-large) !important;
}
.space-bottom--neutral {
  margin-bottom: var(--space-neutral) !important;
}
.space-bottom--small {
  margin-bottom: var(--space-small) !important;
}
.space-bottom--medium {
  margin-bottom: var(--space-medium) !important;
}
.space-bottom--large {
  margin-bottom: var(--space-large) !important;
}
.space-bottom--x-large {
  margin-bottom: var(--space-x-large) !important;
}
.space-bottom--xx-large {
  margin-bottom: var(--space-xx-large) !important;
}
.space-bottom--xxx-large {
  margin-bottom: var(--space-xxx-large) !important;
}
.apps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  justify-content: center;
  width: 100%;
}
.apps a {
  border-radius: 0.2em;
  overflow: hidden;
  width: min(100%, 4.625em);
}
.blockquotes {
  display: grid;
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}
.blockquotes section {
  column-gap: var(--space-large);
  column-width: 10.5em;
  margin-top: calc(-1 * var(--space-large));
}
.blockquotes section blockquote {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-medium);
  margin-top: var(--space-large);
  width: 100%;
}
.blockquotes section blockquote q {
  font-size: var(--font-size-xxx-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.3125em;
  margin-top: -0.5625em;
}
.blockquotes section blockquote cite {
  font-size: var(--font-size-xxxx-small);
  font-style: italic;
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  line-height: 1.2;
  margin-bottom: -0.25em;
  margin-top: -0.425em;
}
@media (min-width: 64em) {
  .blockquotes {
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }
}
.books {
  display: grid;
  gap: var(--space-x-large);
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}
.books section {
  display: grid;
  gap: var(--space-neutral);
}
.books section figure {
  max-width: 16em;
}
.books section figure a img {
  border-radius: 0.2em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  overflow: hidden;
}
.books section article {
  align-content: center;
  display: grid;
  gap: var(--space-neutral);
}
.books section article h2 {
  font-size: var(--font-size-medium);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.15;
  margin-bottom: -0.1875em;
  margin-top: -0.4375em;
}
.books section article h2 a {
  font-weight: inherit;
}
.books section article p {
  font-size: var(--font-size-x-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.325em;
  margin-top: -0.5625em;
}
.books section article ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}
.books section article ul li a {
  background: var(--color-white);
  border-radius: 0.25em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  color: var(--color-black);
  display: flex;
  font-size: var(--font-size-xxx-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  line-height: 1.4em;
  padding: 0.5625em 0.95em 0.65em 0.95em;
  text-decoration: none;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
}
@media (hover: hover) {
  .books section figure a img {
    outline: 0.1em solid rgba(0, 0, 0, 0);
    outline-offset: 0.24em;
    transition:
      outline-color var(--transition-slow),
      outline-offset var(--transition-slow);
  }
  .books section figure a:focus img,
  .books section figure a:hover img {
    outline-color: var(--color-black);
    outline-offset: 0.12em;
  }
  .books section article ul li a {
    transition: box-shadow var(--transition);
  }
  .books section article ul li a:focus,
  .books section article ul li a:hover {
    box-shadow:
      0 0 0 1px rgba(var(--rgb-black), 0.85),
      0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  }
}
@media (min-width: 64em) {
  .books {
    gap: var(--space-large);
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }
  .books section {
    grid-template-columns: repeat(12, 1fr);
  }
  .books section figure {
    grid-column: span 3;
    max-width: none;
  }
  .books section article {
    grid-column: span 8;
  }
  .books section article ul {
    gap: 0.6em;
  }
}
.bootstrapped {
  display: grid;
  gap: var(--space-neutral);
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}
.bootstrapped__item {
  align-content: start;
  color: var(--color-black);
  display: grid;
  gap: var(--space-medium);
  text-decoration: none;
}
.bootstrapped__item figure {
  background: var(--color-white);
  border-radius: 0.2em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  overflow: hidden;
}
.bootstrapped__item p {
  color: var(--color-black);
  font-size: var(--font-size-xxx-small);
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.3em;
  margin-top: -0.5625em;
}
.bootstrapped__item p strong {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 0.0925em;
}
@media (hover: hover) {
  .bootstrapped__item figure {
    outline: 0.1em solid rgba(0, 0, 0, 0);
    outline-offset: 0.24em;
    transition:
      outline-color var(--transition-slow),
      outline-offset var(--transition-slow);
  }
  .bootstrapped__item:focus figure,
  .bootstrapped__item:hover figure {
    outline-color: var(--color-black);
    outline-offset: 0.12em;
  }
  .bootstrapped__item:focus p strong,
  .bootstrapped__item:hover p strong {
    color: var(--color-black);
  }
}
@media (min-width: 32em) {
  .bootstrapped {
    grid-template-columns: repeat(12, 1fr);
  }
  .bootstrapped__item {
    grid-column: span 6;
  }
}
@media (min-width: 48em) {
  .bootstrapped__item {
    grid-column: span 4;
  }
}
@media (min-width: 64em) {
  .bootstrapped {
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }
}
.button {
  background-color: var(--color-white);
  border-radius: 0.25em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  color: var(--color-black);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--font-size-xxx-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  line-height: 1.4em;
  padding: 0.5625em 0.95em 0.65em 0.95em;
  text-decoration: none;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
}
.button--icon {
  background-position: 0.75em center;
  background-repeat: no-repeat;
  background-size: 1.4em auto;
  padding-left: 2.4em;
}
.button--basecamp {
  background-image: url(../images/general/icon-basecamp.svg);
}
.button--ios {
  background-image: url(../images/general/icon-apple.svg);
}
.button--android {
  background-image: url(../images/general/icon-android.svg);
}
.button--pwa {
  padding-left: 4em;
  background-image: url(../images/general/icon-apple.svg), url(../images/general/icon-windows.svg);
  background-position:
    0.75em center,
    2.25em center;
}
.button--green {
  background: var(--color-green);
  box-shadow: none;
  color: var(--color-white);
  font-weight: 500;
}
@media (hover: hover) {
  .button {
    transition: box-shadow var(--transition);
  }
  .button:focus,
  .button:hover {
    box-shadow:
      0 0 0 1px rgba(var(--rgb-black), 0.85),
      0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  }
  .button--green {
    transition:
      background var(--transition),
      box-shadow var(--transition);
  }
  .button--green:focus,
  .button--green:hover {
    background: var(--color-green-dark);
    box-shadow: none;
    color: var(--color-white);
  }
}
.checklist {
  display: grid;
  gap: 0.8em;
  margin-top: -0.125em;
}
.checklist li {
  font-size: var(--font-size-xx-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.325em;
  margin-top: -0.35em;
  padding-left: 1.65em;
  position: relative;
}
.checklist li:before {
  align-items: center;
  background: url(../images/general/icon-checkmark.svg) center center / 0.55em auto no-repeat
    var(--color-green);
  border-radius: 100%;
  content: "";
  display: flex;
  height: 1.175em;
  justify-content: center;
  left: 0;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  top: 0.1em;
  width: 1.175em;
}
.classes {
  display: grid;
  gap: var(--space-medium);
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}
.classes__header,
.classes__article,
.classes__output {
  display: grid;
}
.classes__header h2 {
  font-size: var(--font-size-medium);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.15;
  margin-bottom: -0.1875em;
  margin-top: -0.4375em;
  position: relative;
}
.classes__header h2 a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
.classes__header br {
  display: none;
}
.classes__article {
  gap: var(--space-medium);
}
.classes__article p {
  font-size: var(--font-size-x-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.325em;
  margin-top: -0.5625em;
}
.classes__article br {
  display: none;
}
@media (min-width: 64em) {
  .classes {
    grid-template-columns: repeat(12, 1fr);
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }
  .classes__header br,
  .classes__article br {
    display: inline;
  }
  .classes__header,
  .classes__output {
    grid-column: 1 / -1;
  }
  .classes__article {
    grid-column: span 9;
  }
}
.columns {
  display: grid;
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}
.columns section {
  display: grid;
  gap: var(--space-large);
  margin-inline: auto;
  position: relative;
  width: min(100%, 35em);
}
.columns section header {
  display: grid;
  gap: var(--space-neutral);
  text-align: center;
}
.columns section header h1 {
  font-size: var(--font-size-x-large);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-x-tight);
  line-height: 1.15;
  margin-bottom: -0.175em;
  margin-top: -0.4375em;
}
.columns section header br {
  display: none;
}
.columns section article {
  display: grid;
  gap: 1.75em;
}
.columns section article div {
  align-content: start;
  display: grid;
  flex: 1;
  font-size: var(--font-size-x-small);
  letter-spacing: var(--letter-spacing);
  line-height: var(--space-neutral);
  margin-bottom: -0.325em;
  margin-top: -0.5625em;
}
.columns section article div dl {
  --flow-space: 0;
  align-items: start;
  background: url(../images/general/jf-signature.svg) left top / auto 2.325em no-repeat;
  display: flex;
  flex-direction: column;
  font-size: 85%;
  letter-spacing: var(--letter-spacing-loose);
  line-height: var(--space-neutral);
  margin-left: -0.6em;
  margin-top: 1.175em;
  padding-top: 2.575em;
}
.columns section article div dl dt,
.columns section article div dl dd {
  margin-left: 0.6em;
}
.columns section article div > * + * {
  padding-top: var(--flow-space, var(--space-neutral));
}
@media (min-width: 48em) {
  .columns section header br {
    display: inline;
  }
  .columns section article {
    display: flex;
    gap: var(--space-large);
  }
}
@media (min-width: 64em) {
  .columns {
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }
}
.data-classes__output {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-medium);
}
.data-classes__class {
  align-items: center;
  color: var(--color-black);
  display: flex;
  font-weight: 400;
  gap: 0.4125em;
  min-width: 9.786125em;
  text-decoration: none;
}
.data-classes__date {
  align-items: start;
  background: var(--color-white);
  border-radius: 0.25em;
  box-shadow:
    inset 0 0 0 1px rgba(var(--rgb-black), 0.125),
    0 0.1em 0.2em 0.05em rgba(var(--rgb-black), 0.05);
  display: grid;
  height: 1.6em;
  line-height: 1;
  min-width: 1.6em;
  overflow: hidden;
  text-align: center;
  width: 1.6em;
}
.data-classes__date dt {
  background: var(--color-red-dark);
  color: var(--color-white);
  font-size: 40%;
  font-weight: 600;
  letter-spacing: var(--letter-spacing-loose);
  padding-bottom: 0.325em;
  padding-top: 0.35em;
  text-transform: uppercase;
}
.data-classes__date dd {
  font-size: 80%;
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: -0.0875em;
  margin-top: -0.1375em;
}
.data-classes__details {
  font-size: var(--font-size-xxx-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.3em;
  margin-top: -0.375em;
}
.data-classes__details dt {
  color: var(--color-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.0925em;
}
.data-classes--details .data-classes__class {
  min-width: 9.3em;
}
@media (hover: hover) {
  .data-classes__class:focus .data-classes__details dt,
  .data-classes__class:hover .data-classes__details dt {
    color: var(--color-black);
  }
}
.data-signups {
  align-items: center;
  display: none;
  gap: 0.6em;
  position: relative;
}
.data-signups__value,
.data-signups__copy {
  letter-spacing: var(--letter-spacing);
  position: relative;
  z-index: 1;
}
.data-signups__value {
  font-size: var(--font-size-x-large);
  font-weight: 700;
  margin-bottom: -0.3em;
  margin-top: -0.375em;
  min-width: 2.7em;
  text-align: center;
}
.data-signups__copy {
  font-size: var(--font-size-x-small);
  margin-bottom: -0.3125em;
  margin-top: -0.375em;
}
.data-signups svg {
  height: auto;
  left: -0.3em;
  max-width: 100%;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  top: -0.7em;
  width: 5em;
}
.data-signups svg path {
  fill: var(--color-yellow);
}
.data-signups--display {
  display: flex;
}
@media (min-width: 64em) {
  .data-signups {
    gap: 0.7em;
    justify-items: center;
    position: absolute;
    right: 0;
    top: -0.375em;
  }
  .data-signups svg {
    left: auto;
    width: 6em;
  }
  .data-signups--display {
    display: grid;
  }
}
.details {
  display: grid;
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}
.details details summary {
  align-items: start;
  cursor: pointer;
  display: flex;
  gap: 0.4em;
  justify-content: start;
  list-style: none;
  padding-bottom: 0.8em;
  padding-top: 0.8em;
  position: relative;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}
.details details summary p {
  font-size: var(--font-size-x-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  text-underline-offset: 0.0925em;
}
.details details summary:before {
  background: url(../images/general/icon-details.svg) center center / 100% auto no-repeat;
  content: "";
  height: 1.075em;
  min-width: 0.6875em;
  pointer-events: none;
  transition: transform var(--transition);
  width: 0.6875em;
}
.details details summary::-webkit-details-marker {
  display: none;
}
.details details article {
  display: grid;
  gap: 0.4875em;
  margin-bottom: -0.25em;
  margin-top: -0.4375em;
  padding: 0.0875em 0 1.1em 1.0875em;
  width: min(100%, 31em);
}
.details details article p,
.details details article ul {
  font-size: var(--font-size-xx-small);
  letter-spacing: var(--letter-spacing);
}
.details details article ul {
  display: grid;
  list-style: disc;
  padding-left: 1em;
}
.details details[open] summary:before {
  transform: rotate(90deg);
}
.details details:not(:last-child) {
  border-bottom: 1px solid var(--color-grey);
}
@media (hover: hover) {
  .details details:not([open]) summary:hover p {
    color: var(--color-blue);
    text-decoration: underline;
  }
}
@media (min-width: 64em) {
  .details {
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }
}
.features {
  display: grid;
  position: relative;
}
.features__container {
  align-items: start;
  display: flex;
  gap: var(--space-medium);
  margin-bottom: calc(-1 * var(--space-medium));
  margin-top: calc(-1 * var(--space-medium));
  overflow-x: scroll;
  overscroll-behavior-x: contain;
  padding: var(--space-medium);
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
}
.features__container::-webkit-scrollbar {
  height: 0;
}
.features__item {
  align-content: start;
  display: grid;
  min-width: calc(100vw - var(--space-medium) * 3);
}
.features__item.modal-trigger {
  text-decoration: none;
}
.features__item figure {
  border-radius: 0.2em;
  display: grid;
  place-items: center;
  position: relative;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}
.features__item figure img {
  border-radius: 0.2em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  overflow: hidden;
}
.features__item figure span {
  background: var(--color-yellow);
  color: var(--color-black);
  font-family: "Sharpie", Sans-Serif;
  font-size: var(--font-size-xx-small);
  font-variant-ligatures: none;
  font-weight: 400;
  left: 0;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.3em 0.5em 0.4em 0.5em;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  transform: rotate(-2deg) translate(-0.7625em, -0.875em);
  white-space: nowrap;
}
.features__item figure:before {
  background: url(../images/general/icon-play.svg) center center / 0.8em auto no-repeat
    var(--color-black);
  border-radius: 100%;
  content: "";
  height: 1.8em;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: scale(0.85);
  width: 1.8em;
  will-change: transform;
  z-index: 1;
}
.features__controls {
  bottom: calc(100% + var(--space-neutral));
  right: var(--space-neutral);
}
@media (hover: hover) {
  .features__item figure {
    outline: 0.1em solid rgba(0, 0, 0, 0);
    outline-offset: 0.24em;
    transition:
      outline-color var(--transition-slow),
      outline-offset var(--transition-slow);
  }
  .features__item figure:before {
    transition:
      opacity var(--transition-slow),
      transform var(--transition-slow);
  }
  .features__item:focus figure,
  .features__item:hover figure {
    outline-color: var(--color-black);
    outline-offset: 0.12em;
  }
  .features__item:focus figure:before,
  .features__item:hover figure:before {
    opacity: 1;
    transform: scale(1);
  }
}
@media (min-width: 48em) {
  .features__item {
    min-width: 20em;
  }
}
@media (min-width: 64em) {
  .features__container {
    padding-left: var(--space-neutral);
    padding-right: var(--space-neutral);
  }
  .features__item {
    min-width: 15em;
  }
}
.footer {
  display: grid;
  gap: var(--space-neutral);
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}
.footer__headline {
  display: grid;
  gap: 0.4em;
  margin-bottom: -0.2125em;
  margin-top: -0.2625em;
}
.footer__headline dt {
  font-size: var(--font-size-x-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
}
.footer__headline dd {
  font-size: var(--font-size-xx-small);
  letter-spacing: var(--letter-spacing);
}
.footer__classes,
.footer__apps,
.footer__newsletter,
.footer__support,
.footer__links {
  display: grid;
  gap: var(--space-medium);
}
.footer__classes,
.footer__apps,
.footer__newsletter {
  border-bottom: 1px solid var(--color-grey);
  padding-bottom: var(--space-neutral);
}
.footer__apps ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}
.footer__hey {
  display: flex;
}
.footer__hey a {
  background: rgba(var(--rgb-blurple), 0.05);
  border-radius: 0.25em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-blurple), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-blurple), 0.05);
  color: var(--color-black);
  font-size: var(--font-size-xxx-small);
  font-weight: 500;
  line-height: 1.4em;
  padding: 0.575em 1em 0.6375em 1em;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}
.footer__hey a span {
  display: block;
  font-size: 80%;
  letter-spacing: var(--letter-spacing);
}
.footer__hey a strong {
  background: url(../images/general/icon-hey.svg) left center / 1.4em auto no-repeat;
  color: var(--color-blurple);
  display: inline-block;
  font-weight: 700;
  padding-left: 1.425em;
}
.footer__links {
  border-top: 1px solid var(--color-grey);
  padding-top: var(--space-neutral);
}
.footer__legal {
  border-top: 1px solid var(--color-grey);
  display: grid;
  gap: 0.7em;
  padding-bottom: var(--space-neutral);
  padding-top: var(--space-neutral);
}
.footer__legal p {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-xxxx-small);
  gap: 0.25em;
  letter-spacing: var(--letter-spacing-loose);
  line-height: 1.4em;
}
.footer__legal p a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.06em;
}
.footer__legal p span {
  display: none;
}
.footer__legal p .icon {
  display: flex;
  gap: 0.2em;
}
.footer__legal p .icon svg {
  align-self: center;
  max-height: 100%;
  overflow: visible;
  pointer-events: none;
  width: auto;
}
.footer__legal p .icon strong {
  color: inherit;
  font-weight: 600;
}
.footer__legal p .icon--basecamp svg {
  height: 1.35em;
}
.footer__legal p .icon--37signals {
  display: none;
}
.footer__legal p .icon--37signals svg {
  height: 1.25em;
}
.footer__legal ul {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-small);
}
.footer__legal ul li {
  color: inherit;
  display: flex;
  font-size: var(--font-size-xxxx-small);
  letter-spacing: var(--letter-spacing-loose);
  line-height: 1.4em;
}
.footer__legal ul li a {
  color: inherit;
  display: flex;
  font-weight: inherit;
  text-decoration: none;
  text-underline-offset: 0.06em;
  white-space: nowrap;
}
@media (hover: hover) {
  .footer__hey a {
    transition: box-shadow var(--transition);
  }
  .footer__hey a:focus,
  .footer__hey a:hover {
    box-shadow:
      0 0 0 1px rgba(var(--rgb-blurple), 0.2),
      0 0 0.1em 0.02em rgba(var(--rgb-blurple), 0.1);
  }
  .footer__legal a:focus,
  .footer__legal a:hover {
    text-decoration: underline;
  }
}
@media (min-width: 30em) {
  .footer__legal p span {
    display: initial;
  }
  .footer__legal p .icon--37signals {
    display: flex;
  }
}
@media (min-width: 48em) {
  .footer__legal {
    align-items: center;
    grid-auto-flow: column;
    grid-column: 1 / -1;
    justify-content: space-between;
    padding-bottom: 0.35em;
    padding-top: 0.35em;
  }
  .footer__legal ul li {
    line-height: 2.2em;
  }
}
@media (min-width: 64em) {
  .footer {
    align-items: start;
    gap: var(--space-large);
    grid-template-columns: repeat(12, 1fr);
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }
  .footer__classes,
  .footer__apps {
    grid-column: 1 / -1;
    padding-bottom: var(--space-large);
  }
  .footer__apps ul {
    gap: 0.6em;
  }
  .footer__newsletter {
    border-bottom: none;
    grid-column: span 5;
    padding-bottom: 0;
  }
  .footer__support {
    grid-column: span 7;
  }
  .footer__links {
    grid-column: 1 / -1;
  }
}
.frame {
  display: flex;
  flex-direction: column;
  position: relative;
}
.frame--black {
  background: var(--color-black);
  color: var(--color-white);
}
.headline {
  display: grid;
  gap: var(--space-medium);
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}
.headline header,
.headline article {
  display: grid;
}
.headline header h1,
.headline header h2,
.headline header h3,
.headline header h4 {
  font-size: var(--font-size-medium);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.15;
  margin-bottom: -0.1875em;
  margin-top: -0.4375em;
  position: relative;
}
.headline header h1 a,
.headline header h2 a,
.headline header h3 a,
.headline header h4 a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
.headline header br {
  display: none;
}
.headline article {
  gap: var(--space-medium);
}
.headline article p {
  font-size: var(--font-size-x-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.325em;
  margin-top: -0.5625em;
}
.headline article br {
  display: none;
}
.headline footer p {
  align-items: center;
  display: flex;
  gap: 0.5em;
}
.headline footer p span {
  font-size: var(--font-size-xxx-small);
  letter-spacing: var(--letter-spacing-loose);
  line-height: var(--line-height);
}
.headline--align-center {
  justify-items: center;
  text-align: center;
}
.headline--align-center header,
.headline--align-center article {
  justify-items: center;
}
.headline--width-narrow header,
.headline--width-narrow article {
  width: min(100%, 24em);
}
@media (hover: hover) {
  .headline header h1 a:focus,
  .headline header h1 a:hover,
  .headline header h2 a:focus,
  .headline header h2 a:hover,
  .headline header h3 a:focus,
  .headline header h3 a:hover,
  .headline header h4 a:focus,
  .headline header h4 a:hover {
    color: var(--color-blue);
    text-decoration: underline;
  }
}
@media (min-width: 64em) {
  .headline {
    grid-template-columns: repeat(12, 1fr);
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }
  .headline header br,
  .headline article br {
    display: inline;
  }
  .headline header,
  .headline footer {
    grid-column: 1 / -1;
  }
  .headline article {
    grid-column: span 9;
  }
  .headline--align-center {
    grid-template-columns: none;
  }
  .headline--align-center header,
  .headline--align-center article {
    grid-column: auto;
  }
}
.help {
  display: grid;
  gap: var(--space-x-large);
  grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}
.help__site {
  display: grid;
  gap: var(--space-medium);
}
.help__site figure {
  background: var(--color-white);
  border-radius: 0.2em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  overflow: hidden;
}
.help__site h2 {
  font-size: var(--font-size-small);
  font-weight: 700;
  letter-spacing: var(--letter-spacing);
  line-height: 1.15;
  margin-bottom: -0.175em;
  margin-top: -0.425em;
  text-align: center;
  text-underline-offset: 0.0925em;
}
@media (hover: hover) {
  .help__site figure {
    outline: 0.1em solid rgba(0, 0, 0, 0);
    outline-offset: 0.24em;
    transition:
      outline-color var(--transition-slow),
      outline-offset var(--transition-slow);
  }
  .help__site:focus figure,
  .help__site:hover figure {
    outline-color: var(--color-black);
    outline-offset: 0.12em;
  }
}
@media (min-width: 64em) {
  .help {
    gap: var(--space-neutral);
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }
}
.illustration {
  display: grid;
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}
.illustration picture {
  margin-bottom: -0.1625em;
  margin-top: -1.1875em;
}
@media (min-width: 48em) {
  .illustration picture {
    margin-bottom: 0;
  }
}
@media (min-width: 64em) {
  .illustration {
    margin-left: var(--space-xxx-large);
    margin-right: var(--space-xxx-large);
  }
}
.image {
  display: flex;
  flex-direction: column;
  gap: var(--space-medium);
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, 34em);
}
.image figure {
  display: grid;
  flex: 1;
}
.image figure img {
  border-radius: 0.2em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  overflow: hidden;
}
.image figure figcaption {
  font-size: var(--font-size-xxx-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.3em;
  margin-top: 0.625em;
  text-align: center;
}
.image--width-small {
  width: min(100%, 20em);
}
@media (hover: hover) {
  .image figure a img {
    outline: 0.1em solid rgba(0, 0, 0, 0);
    outline-offset: 0.24em;
    transition:
      outline-color var(--transition-slow),
      outline-offset var(--transition-slow);
  }
  .image figure a:focus img,
  .image figure a:hover img {
    outline-color: var(--color-black);
    outline-offset: 0.12em;
  }
}
@media (min-width: 64em) {
  .image {
    align-items: start;
    flex-direction: row;
    padding-left: var(--space-neutral);
    padding-right: var(--space-neutral);
  }
  .image--width-small {
    width: min(100%, 28em);
  }
}
.integrations {
  display: grid;
  gap: var(--space-x-large);
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}
.integrations__category {
  display: grid;
  gap: var(--space-neutral);
}
.integrations__category header h2 {
  font-size: var(--font-size-medium);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.15;
  margin-bottom: -0.1875em;
  margin-top: -0.4375em;
}
.integrations__category header h2 a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
.integrations__category section {
  display: grid;
  gap: var(--space-neutral);
}
.integrations__integration {
  align-content: start;
  background: var(--color-white);
  border-radius: 0.2em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  color: var(--color-black);
  display: grid;
  overflow: hidden;
  text-decoration: none;
}
.integrations__integration header {
  align-items: center;
  background: var(--color-paper);
  border-bottom: 1px solid rgba(var(--rgb-black), 0.1);
  display: flex;
  gap: 0.35em;
  padding: 0.5em;
}
.integrations__integration header figure {
  background: var(--color-white);
  border-radius: 0.15em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  overflow: hidden;
  padding: 0.075em;
  width: 1.2em;
}
.integrations__integration header figure img {
  border-radius: 0.075em;
  overflow: hidden;
}
.integrations__integration header h3 {
  font-size: var(--font-size-xx-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
}
.integrations__integration article {
  padding: 0.8em;
}
.integrations__integration article p {
  font-size: var(--font-size-xxx-small);
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.3em;
  margin-top: -0.375em;
}
@media (hover: hover) {
  .integrations__category header h2 a:focus,
  .integrations__category header h2 a:hover {
    color: var(--color-blue);
    text-decoration: underline;
  }
  .integrations__integration {
    outline: 0.1em solid rgba(0, 0, 0, 0);
    outline-offset: 0.24em;
    transition:
      outline-color var(--transition-slow),
      outline-offset var(--transition-slow);
  }
  .integrations__integration:focus,
  .integrations__integration:hover {
    outline-color: var(--color-black);
    outline-offset: 0.12em;
  }
}
@media (min-width: 32em) {
  .integrations__category section {
    grid-template-columns: repeat(12, 1fr);
  }
  .integrations__integration {
    grid-column: span 6;
  }
}
@media (min-width: 64em) {
  .integrations {
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }
  .integrations__integration {
    grid-column: span 4;
  }
}
.intro {
  display: grid;
  gap: var(--space-neutral);
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
}
.intro__body {
  display: grid;
  gap: var(--space-large);
}
.intro__body h1 {
  font-size: var(--font-size-x-large);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.15;
  margin-bottom: -0.175em;
  margin-top: -0.4375em;
}
.intro__body ul {
  display: grid;
  gap: var(--space-large);
}
.intro__body ul li {
  font-size: 120%;
  letter-spacing: var(--letter-spacing);
  line-height: 1.2;
  margin-bottom: -0.175em;
  margin-top: -0.4375em;
  position: relative;
}
.intro__body .modal-trigger,
.intro__body strong {
  color: inherit;
  font-weight: 700;
  letter-spacing: var(--letter-spacing);
}
.intro__body a,
.intro__body button {
  pointer-events: auto;
}
.intro__body br {
  display: none;
}
.intro__aside {
  margin-inline: auto;
  padding-top: var(--space-neutral);
  width: min(100%, 28em);
}
.intro__aside .visual {
  grid-template-columns: auto;
  margin-left: 0;
  margin-right: 0;
  transform: rotate(-3deg);
}
.intro__aside .visual__button:before,
.intro__aside .visual__button:after {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0.2em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  content: "";
  height: 90%;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  width: 90%;
}
.intro__aside .visual__button:before {
  background-image: url(../images/screenshots/to-dos-thumbnail.webp);
  transform: rotate(-6.5deg) translate(-3em, 1em);
}
.intro__aside .visual__button:after {
  background-image: url(../images/screenshots/latest-activity-thumbnail.webp);
  transform: rotate(4deg) translate(3em, 2em);
}
.intro__aside .visual__figure img {
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0.5em 1.4em 0 rgba(var(--rgb-black), 0.05),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
}
.intro__loop {
  display: grid;
  gap: 0.4375em;
  justify-items: start;
}
@media (hover: hover) {
  .intro__body .modal-trigger:focus,
  .intro__body .modal-trigger:hover {
    color: var(--color-blue);
  }
  .intro__aside .visual__button:before,
  .intro__aside .visual__button:after {
    transition:
      filter var(--transition-slow),
      opacity var(--transition-slow),
      transform var(--transition-slow);
    will-change: transform;
  }
  .intro__aside .visual__button:focus:before,
  .intro__aside .visual__button:focus:after,
  .intro__aside .visual__button:hover:before,
  .intro__aside .visual__button:hover:after {
    filter: blur(0.25em);
    opacity: 0.6;
  }
  .intro__aside .visual__button:focus:before,
  .intro__aside .visual__button:hover:before {
    transform: rotate(-8.5deg) translate(-4em, 1.2em);
  }
  .intro__aside .visual__button:focus:after,
  .intro__aside .visual__button:hover:after {
    transform: rotate(6deg) translate(4em, 2.2em);
  }
}
@media (min-width: 48em) {
  .intro__loop {
    display: block;
    gap: 0;
    justify-items: initial;
  }
}
@media (min-width: 64em) {
  .intro {
    grid-template-columns: repeat(24, 1fr);
    padding-left: var(--space-neutral);
    padding-right: var(--space-neutral);
  }
  .intro__body {
    grid-column: span 17;
  }
  .intro__body h1 {
    letter-spacing: var(--letter-spacing-x-tight);
  }
  .intro__body ul li {
    font-size: 150%;
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1.15;
  }
  .intro__body .modal-trigger,
  .intro__body strong {
    letter-spacing: var(--letter-spacing-tight);
  }
  .intro__body br {
    display: inline;
  }
  .intro__aside {
    display: flex;
    flex-direction: column;
    grid-column: span 7;
    justify-content: center;
    margin-inline: initial;
    padding-top: 0;
    width: auto;
  }
  .intro__aside .visual {
    position: absolute;
    right: 0;
    transform: rotate(-3deg) translate(4.8125em, -0.5em);
    width: 16em;
  }
  .intro__aside .visual__button:before {
    transform: rotate(-6.5deg) translate(-2.275em, 1em);
  }
  .intro__aside .visual__button:after {
    transform: rotate(4deg) translate(2.05em, 3.15em);
  }
}
@media (min-width: 64em) and (hover: hover) {
  .intro__aside .visual__button:focus:before,
  .intro__aside .visual__button:hover:before {
    transform: rotate(-8.5deg) translate(-3.3em, 1.1em);
  }
  .intro__aside .visual__button:focus:after,
  .intro__aside .visual__button:hover:after {
    transform: rotate(6deg) translate(2.8em, 3.4em);
  }
}
.jlmdmj-headline,
.jlmdmj-content,
.jlmdmj-images,
.jlmdmj-video,
.jlmdmj-videos,
.jlmdmj-image,
.jlmdmj-grid {
  display: grid;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
}
@media (min-width: 64em) {
  .jlmdmj-headline,
  .jlmdmj-content,
  .jlmdmj-images,
  .jlmdmj-video,
  .jlmdmj-videos,
  .jlmdmj-image,
  .jlmdmj-grid {
    padding-left: var(--space-neutral);
    padding-right: var(--space-neutral);
  }
}
.jlmdmj-headline {
  gap: 1.225em;
}
.jlmdmj-headline h1,
.jlmdmj-headline h2 {
  color: var(--color-white);
  font-size: var(--font-size-x-large);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-x-tight);
  line-height: 1.15;
  margin-bottom: -0.175em;
  text-align: center;
}
.jlmdmj-headline h1 {
  margin-top: -0.425em;
}
.jlmdmj-headline h2 {
  margin-top: -0.25em;
}
.jlmdmj-content {
  gap: var(--space-neutral);
  margin-inline: auto;
  width: min(100%, 26em);
}
.jlmdmj-content p {
  font-size: var(--font-size-x-small);
  letter-spacing: var(--letter-spacing);
}
.jlmdmj-content p a {
  color: var(--color-white);
}
.jlmdmj-content p strong {
  color: var(--color-white);
  font-weight: 700;
}
.jlmdmj-content div.webby {
  background: rgba(var(--rgb-white), 0.05);
  border: 0.1em dashed rgba(var(--rgb-white), 0.2);
  border-radius: 0.4em;
  display: grid;
  font-size: var(--font-size-xx-small);
  gap: 0.6em;
  justify-items: center;
  letter-spacing: var(--letter-spacing);
  padding: var(--space-neutral);
  text-align: center;
}
.jlmdmj-content div.webby picture {
  width: 4.5em;
}
.jlmdmj-content div.webby strong {
  color: var(--color-white);
  font-weight: 700;
}
@media (min-width: 48em) {
  .jlmdmj-content div.webby {
    align-items: center;
    gap: var(--space-neutral);
    grid-auto-flow: column;
    justify-items: start;
    text-align: left;
  }
}
@media (min-width: 64em) {
  .jlmdmj-content div.webby {
    margin-left: calc(-1 * var(--space-neutral));
    margin-right: calc(-1 * var(--space-neutral));
  }
}
.jlmdmj-images {
  gap: var(--space-small);
  margin-inline: auto;
  width: min(100%, 40em);
}
.jlmdmj-images__container {
  display: grid;
  position: relative;
}
.jlmdmj-images__images {
  cursor: pointer;
  display: grid;
}
.jlmdmj-images__images picture {
  display: none;
}
.jlmdmj-images__images picture img {
  border-radius: 0.2em;
  overflow: hidden;
}
.jlmdmj-images__images picture.selected {
  display: grid;
}
.jlmdmj-images__button {
  background-color: var(--color-white);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 0.35em auto;
  border-radius: 100%;
  box-shadow:
    0 0.4em 0.8em -0.2em rgba(var(--rgb-black-dark), 0.4),
    0 0.2em 0.4em -0.1em rgba(var(--rgb-black-dark), 0.4);
  cursor: pointer;
  height: 1.4em;
  position: absolute;
  top: calc(50% - 0.7em);
  width: 1.4em;
  z-index: 1;
}
.jlmdmj-images__button--previous {
  background-image: url(../images/jlmdmj/icon-previous.svg);
  left: -0.7em;
}
.jlmdmj-images__button--next {
  background-image: url(../images/jlmdmj/icon-next.svg);
  right: -0.7em;
}
.jlmdmj-images__list {
  display: flex;
  justify-content: center;
}
.jlmdmj-images__list li {
  cursor: pointer;
  display: grid;
  height: 1em;
  place-content: center;
  width: 1em;
}
.jlmdmj-images__list li:after {
  background: rgba(var(--rgb-white), 0.25);
  border-radius: 100%;
  content: "";
  height: 0.4em;
  pointer-events: none;
  width: 0.4em;
}
.jlmdmj-images__list li.selected:after {
  background: var(--color-white);
}
@media (hover: hover) {
  .jlmdmj-images__button {
    transition: transform var(--transition);
    will-change: transform;
  }
  .jlmdmj-images__button:hover,
  .jlmdmj-images__button:focus {
    transform: scale(1.03);
  }
  .jlmdmj-images__button:active {
    transform: scale(0.99);
  }
  .jlmdmj-images__list li:not(.selected):after {
    transition: background var(--transition);
  }
  .jlmdmj-images__list li:not(.selected):hover:after {
    background: rgba(var(--rgb-white), 0.5);
  }
}
.jlmdmj-video {
  margin-inline: auto;
  width: min(100%, 40em);
}
.jlmdmj-videos {
  gap: var(--space-medium);
  margin-inline: auto;
  width: min(100%, 40em);
}
.jlmdmj-videos__container .video {
  display: none;
}
.jlmdmj-videos__container .video.selected {
  display: grid;
}
.jlmdmj-videos__chooser {
  align-items: start;
  display: grid;
  gap: var(--space-medium);
  grid-template-columns: repeat(4, 1fr);
}
.jlmdmj-videos__chooser button {
  border-radius: 0.2em;
  cursor: pointer;
  display: grid;
  grid-column: span 2;
  overflow: hidden;
  transition: transform var(--transition);
  will-change: transform;
}
.jlmdmj-videos__chooser button picture {
  position: relative;
}
.jlmdmj-videos__chooser button picture img {
  opacity: 0.9;
}
.jlmdmj-videos__chooser button picture:after {
  background: linear-gradient(
    180deg,
    rgba(var(--rgb-black-dark), 0.6) 0,
    rgba(var(--rgb-black-dark), 0.15) 80%
  );
  content: "";
  inset: 0;
  position: absolute;
}
.jlmdmj-videos__chooser button p {
  background: rgba(var(--rgb-white), 0.1);
  color: rgba(var(--rgb-white), 0.65);
  font-size: var(--font-size-xxx-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.3em;
  margin-top: -0.375em;
  padding: 0.8em;
  text-align: center;
}
.jlmdmj-videos__chooser button.selected picture img {
  opacity: 1;
}
.jlmdmj-videos__chooser button.selected picture:after {
  opacity: 0;
}
.jlmdmj-videos__chooser button.selected p {
  background: var(--color-white);
  color: var(--color-black-dark);
}
@media (hover: hover) {
  .jlmdmj-videos__chooser button:not(.selected) picture img {
    transition: opacity var(--transition);
  }
  .jlmdmj-videos__chooser button:not(.selected) picture:after {
    transition: opacity var(--transition);
  }
  .jlmdmj-videos__chooser button:not(.selected) p {
    transition:
      background var(--transition),
      color var(--transition);
  }
  .jlmdmj-videos__chooser button:not(.selected):active {
    transform: scale(0.99) translateY(0.025em);
  }
  .jlmdmj-videos__chooser button:not(.selected):focus picture img,
  .jlmdmj-videos__chooser button:not(.selected):hover picture img {
    opacity: 1;
  }
  .jlmdmj-videos__chooser button:not(.selected):focus picture:after,
  .jlmdmj-videos__chooser button:not(.selected):hover picture:after {
    opacity: 0.6;
  }
  .jlmdmj-videos__chooser button:not(.selected):focus p,
  .jlmdmj-videos__chooser button:not(.selected):hover p {
    background: rgba(var(--rgb-white), 0.1);
    color: var(--color-white);
  }
}
@media (min-width: 48em) {
  .jlmdmj-videos__chooser button {
    grid-column: auto;
  }
}
.jlmdmj-image {
  margin-inline: auto;
  width: min(100%, 40em);
}
.jlmdmj-image picture {
  display: block;
}
.jlmdmj-image picture img {
  border-radius: 0.2em;
  overflow: hidden;
}
.jlmdmj-grid {
  gap: var(--space-medium);
  grid-template-columns: repeat(2, 1fr);
  margin-inline: auto;
  width: min(100%, 40em);
}
.jlmdmj-grid picture {
  display: block;
}
.jlmdmj-grid picture img {
  border-radius: 0.2em;
  overflow: hidden;
}
.jlmdmj-grid video {
  border-radius: 0.2em;
  display: block;
  overflow: hidden;
}
@media (min-width: 64em) {
  .jlmdmj-grid__grid {
    gap: var(--space-neutral);
  }
}
body.jlmdmj {
  background: var(--color-black-dark);
  color: #c7d7df;
}
body.jlmdmj .nav-basic {
  color: var(--color-white);
}
body.jlmdmj .footer__legal {
  border-top: 1px solid rgba(var(--rgb-white), 0.2);
}
.learn {
  display: grid;
  position: relative;
}
.learn__container {
  align-items: start;
  display: flex;
  gap: var(--space-medium);
  margin-bottom: calc(-1 * var(--space-medium));
  margin-top: calc(-1 * var(--space-medium));
  overflow-x: scroll;
  overscroll-behavior-x: contain;
  padding: var(--space-medium);
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
}
.learn__container::-webkit-scrollbar {
  height: 0;
}
.learn__item {
  align-content: start;
  display: grid;
  gap: var(--space-medium);
  min-width: calc(100vw - var(--space-medium) * 3);
}
.learn__item.modal-trigger {
  text-decoration: none;
}
.learn__item figure {
  background: var(--color-white);
  border-radius: 0.2em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  display: grid;
  overflow: hidden;
  place-items: center;
  position: relative;
}
.learn__item figure:before {
  background: url(../images/general/icon-play.svg) center center / 0.8em auto no-repeat
    var(--color-black);
  border-radius: 100%;
  content: "";
  height: 1.8em;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: scale(0.85);
  width: 1.8em;
  will-change: transform;
  z-index: 1;
}
.learn__item dl {
  display: grid;
  gap: 0.7em;
  white-space: normal;
}
.learn__item dl dt {
  font-size: var(--font-size-xx-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.3125em;
  margin-top: -0.525em;
  text-decoration: underline;
  text-underline-offset: 0.0925em;
}
.learn__item dl dd {
  color: var(--color-black);
  font-size: var(--font-size-xxx-small);
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.3em;
  margin-top: -0.5625em;
}
.learn__controls {
  bottom: calc(100% + var(--space-neutral));
  right: var(--space-neutral);
}
@media (hover: hover) {
  .learn__item figure {
    outline: 0.1em solid rgba(0, 0, 0, 0);
    outline-offset: 0.24em;
    transition:
      outline-color var(--transition-slow),
      outline-offset var(--transition-slow);
  }
  .learn__item figure:before {
    transition:
      opacity var(--transition-slow),
      transform var(--transition-slow);
  }
  .learn__item:focus figure,
  .learn__item:hover figure {
    outline-color: var(--color-black);
    outline-offset: 0.12em;
  }
  .learn__item:focus figure:before,
  .learn__item:hover figure:before {
    opacity: 1;
    transform: scale(1);
  }
}
@media (min-width: 48em) {
  .learn__item {
    min-width: 20em;
  }
}
@media (min-width: 64em) {
  .learn__container {
    padding-left: var(--space-neutral);
    padding-right: var(--space-neutral);
  }
  .learn__item {
    min-width: 15em;
  }
}
.letter {
  display: grid;
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}
.letter__container {
  display: grid;
  margin-inline: auto;
  position: relative;
  width: min(100%, 28em);
}
.letter__container:before,
.letter__container:after {
  background: var(--color-white);
  border-radius: 0.025em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.075),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.025),
    0 0.4em 1.6em -0.8em rgba(var(--rgb-black), 0.1),
    0 0.8em 1.2em -1.6em rgba(var(--rgb-black), 0.2),
    0 1.2em 1.6em -2.4em rgba(var(--rgb-black), 0.3),
    0 1.6em 2.4em -3.2em rgba(var(--rgb-black), 0.4);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.letter__container:before {
  transform: rotate(-1.75deg) translate(-0.1%, 0.1%);
}
.letter__container:after {
  height: 97.8%;
  transform: rotate(1.45deg) translate(0.2%, 1.1%);
}
.letter__article {
  background: var(--color-white);
  border-radius: 0.025em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.075),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.025),
    0 0.4em 1.6em -0.8em rgba(var(--rgb-black), 0.1),
    0 0.8em 1.2em -1.6em rgba(var(--rgb-black), 0.2),
    0 1.2em 1.6em -2.4em rgba(var(--rgb-black), 0.3),
    0 1.6em 2.4em -3.2em rgba(var(--rgb-black), 0.4);
  display: grid;
  padding: var(--space-neutral);
  position: relative;
  z-index: 1;
}
.letter__article h2,
.letter__article h3 {
  font-weight: 700;
  letter-spacing: var(--letter-spacing);
  line-height: 1.15;
}
.letter__article h2 a,
.letter__article h3 a {
  font-weight: inherit;
}
.letter__article h2 {
  --flow-space: 3.525em;
  font-size: var(--font-size-small);
  margin-bottom: -0.175em;
  margin-top: -0.425em;
}
.letter__article h3 {
  font-size: var(--font-size-x-small);
  margin-bottom: -0.175em;
  margin-top: -0.4375em;
}
.letter__article h3 + * {
  --flow-space: 1.5em;
}
.letter__article hr {
  --flow-space: 0;
  align-items: center;
  display: grid;
  height: var(--space-xxx-large);
}
.letter__article hr + * {
  --flow-space: 0;
}
.letter__article hr:before {
  background: var(--color-grey);
  content: "";
  height: 0.0625em;
  width: 5em;
}
.letter__article p,
.letter__article ol,
.letter__article ul {
  font-size: var(--font-size-xx-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.325em;
  margin-top: -0.5375em;
}
.letter__article ol li + li,
.letter__article ul li + li {
  margin-top: var(--flow-space, 0.7em);
}
.letter__article ol {
  list-style: decimal;
}
.letter__article ul {
  list-style: disc;
}
.letter__article > * + * {
  padding-top: var(--flow-space, 2.2375em);
}
.letter__signature {
  align-items: center;
  background: url(../images/general/jf-signature.svg) left top / auto 3.5em no-repeat;
  display: flex;
  font-size: var(--font-size-xxx-small);
  gap: var(--space-small);
  letter-spacing: var(--letter-spacing-loose);
  margin-bottom: -0.4125em;
  margin-top: 3.375em;
  padding-top: 4.5em;
  position: relative;
}
.letter__signature dl dt {
  font-weight: 600;
}
.letter__signature dl dd {
  font-style: italic;
}
.letter__signature:before {
  background: url(../images/general/jf-avatar.jpg) center center / cover no-repeat;
  border-radius: 100%;
  content: "";
  display: inline-flex;
  height: 3em;
  width: 3em;
}
.letter--narrow .letter__container {
  width: min(100%, 24em);
}
@media (min-width: 32em) {
  .letter__container {
    transform: rotate(-0.75deg);
  }
  .letter__container:before {
    transform: rotate(-2.2deg) translate(0.4%, 0.1%);
    width: 99%;
  }
  .letter__container:after {
    height: 97.1%;
    transform: rotate(2.1deg) translate(0.2%, 1.5%);
  }
  .letter__article {
    padding: var(--space-large);
  }
}
@media (min-width: 64em) {
  .letter__article {
    padding: var(--space-x-large);
  }
}
.main {
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  padding-top: var(--space-xxx-large);
  position: relative;
}
.main--basic,
.main--roadblock {
  flex: 1;
  padding-top: 0;
}
.marquee {
  display: grid;
  overflow-x: clip;
  position: relative;
}
.marquee a {
  align-items: center;
  background: var(--color-black);
  display: flex;
  height: 1.5em;
  justify-self: center;
  overflow: hidden;
  position: relative;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  width: 102%;
}
.marquee a ul {
  color: var(--color-white);
  display: flex;
  font-size: var(--font-size-xxx-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  position: absolute;
  white-space: nowrap;
  will-change: transform;
}
.marquee a ul li {
  background: url(../images/general/stars.svg) right center / 4em auto no-repeat;
  margin: -0.3625em 1em -0.3125em 0;
  padding-right: 5em;
}
.marquee--left a {
  transform: rotate(1.2deg);
}
.marquee--left a ul {
  animation: marquee 120s linear infinite;
}
.marquee--right a {
  transform: rotate(-1.2deg);
}
.marquee--right a ul {
  animation: marquee 120s linear infinite;
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.modal-trigger {
  color: var(--color-blue);
  cursor: pointer;
  font-weight: 600;
  text-align: inherit;
  text-decoration: underline;
  text-underline-offset: 0.0925em;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}
@media (hover: hover) {
  .modal-trigger:focus,
  .modal-trigger:hover {
    color: var(--color-black);
  }
}
.modal {
  align-items: center;
  display: none;
  height: 100%;
  left: 0;
  overflow: auto;
  padding: var(--space-medium);
  position: fixed;
  top: 0;
  width: 100%;
}
.modal__backdrop {
  backdrop-filter: blur(1em);
  -webkit-backdrop-filter: blur(1em);
  background: rgba(var(--rgb-white), 0.8);
  cursor: zoom-out;
  inset: 0;
  position: fixed;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}
.modal__container {
  display: grid;
  position: relative;
}
.modal__close {
  background: url(../images/general/icon-close.svg) center center / 0.425em auto no-repeat
    var(--color-black);
  border-radius: 100%;
  cursor: pointer;
  height: 1.2em;
  position: absolute;
  right: -0.6em;
  top: -0.6em;
  width: 1.2em;
}
.modal__image,
.modal__video {
  background: var(--color-white);
  border-radius: 0.2em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  display: grid;
  overflow: hidden;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}
.modal__image {
  cursor: zoom-out;
}
.modal__video {
  position: relative;
}
.modal__video button {
  cursor: pointer;
  display: grid;
  inset: 0;
  place-items: center;
  position: absolute;
}
.modal__video button:before,
.modal__video button:after {
  content: "";
  pointer-events: none;
  position: absolute;
}
.modal__video button:before {
  background: linear-gradient(
    180deg,
    rgba(var(--rgb-black), 0.6) 0,
    rgba(var(--rgb-black), 0.15) 80%
  );
  inset: 0;
  transition: opacity var(--transition-slow);
}
.modal__video button:after {
  background: url(../images/general/icon-video.svg) center center / 0.8em auto no-repeat
    var(--color-white);
  border-radius: 100%;
  box-shadow:
    0 0.2em 0.8em -0.4em rgba(var(--rgb-black), 0.05),
    0 0.3em 0.9em -0.5em rgba(var(--rgb-black), 0.15),
    0 0.4em 1em -0.6em rgba(var(--rgb-black), 0.25),
    0 0.5em 1.1em -0.7em rgba(var(--rgb-black), 0.35),
    0 0.6em 1.2em -0.8em rgba(var(--rgb-black), 0.45);
  height: 2.2em;
  width: 2.2em;
}
.modal__video--playing button {
  display: none;
}
.modal[open] {
  display: grid;
}
.modal:modal {
  max-height: none;
  max-width: none;
}
.modal::backdrop {
  background: none;
}
@media (hover: hover) {
  .modal__close {
    transition: transform var(--transition);
    will-change: transform;
  }
  .modal__close:hover {
    transform: scale(1.06);
  }
  .modal__video button:before {
    transition: opacity var(--transition);
  }
  .modal__video button:after {
    transition: transform var(--transition);
    will-change: transform;
  }
  .modal__video button:hover:before {
    opacity: 0.9;
  }
  .modal__video button:hover:after {
    transform: scale(1.03);
  }
}
@media (min-width: 64em) {
  .modal {
    padding: var(--space-neutral);
  }
}
.nav-basic {
  display: grid;
  padding: var(--space-x-large) var(--space-medium);
  place-items: center;
  position: relative;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}
.nav-basic__logo {
  align-items: center;
  display: flex;
  font-size: var(--font-size-xx-small);
  letter-spacing: var(--letter-spacing-loose);
  line-height: var(--space-neutral);
  white-space: pre;
}
.nav-basic__logo a {
  color: inherit;
  display: flex;
  font-weight: 600;
  gap: 0.2em;
  text-decoration: none;
}
.nav-basic__logo a svg {
  align-self: center;
  height: 1.35em;
  max-height: 100%;
  overflow: visible;
  pointer-events: none;
  width: auto;
}
.nav-basic__logo a span {
  font-weight: 600;
}
.nav-basic__link {
  position: absolute;
  right: var(--space-medium);
}
.nav-basic__link a {
  background: var(--color-white);
  border-radius: 0.25em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  color: var(--color-black);
  display: flex;
  font-size: var(--font-size-xxxx-small);
  font-weight: inherit;
  letter-spacing: var(--letter-spacing-loose);
  line-height: 2.2em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  text-decoration: none;
  white-space: nowrap;
}
@media (hover: hover) {
  .nav-basic__link a {
    transition: box-shadow var(--transition);
  }
  .nav-basic__link a:focus,
  .nav-basic__link a:hover {
    box-shadow:
      0 0 0 1px rgba(var(--rgb-black), 0.85),
      0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
    text-decoration: none;
  }
}
@media (min-width: 64em) {
  .nav-basic {
    padding-left: var(--space-neutral);
    padding-right: var(--space-neutral);
  }
  .nav-basic__link {
    right: var(--space-neutral);
  }
}
#nav-active {
  display: none;
}
#nav-active:checked ~ #nav-underlay {
  display: flex;
}
#nav-active:checked ~ .nav {
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
}
#nav-active:checked ~ .nav .nav__mobile {
  display: grid;
}
#nav-active:checked ~ .nav .nav__toggle:before {
  transform: rotate(-45deg) translateY(0);
}
#nav-active:checked ~ .nav .nav__toggle:after {
  transform: rotate(45deg) translateY(0);
}
@media (min-width: 64em) {
  #nav-active:checked ~ #nav-underlay,
  #nav-active:checked ~ .nav .nav__mobile,
  #nav-active:checked ~ .nav .nav__toggle {
    display: none;
  }
}
#nav-underlay {
  backdrop-filter: blur(1em);
  -webkit-backdrop-filter: blur(1em);
  background: rgba(var(--rgb-white), 0.5);
  display: none;
  inset: 0;
  position: fixed;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  z-index: 99;
}
@media (min-width: 64em) {
  #nav-underlay {
    display: none;
  }
}
.nav {
  backdrop-filter: blur(0.5em);
  -webkit-backdrop-filter: blur(0.5em);
  background: rgba(var(--rgb-white), 0.9);
  position: fixed;
  top: 0;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  width: 100%;
  z-index: 100;
}
.nav__container {
  align-items: center;
  display: flex;
  gap: var(--space-small);
  justify-content: space-between;
  padding: var(--space-small) var(--space-medium);
  width: 100%;
}
.nav__logo {
  align-items: center;
  display: flex;
  flex: 1;
  font-size: var(--font-size-xxxx-small);
  gap: 0.25em;
  letter-spacing: var(--letter-spacing-loose);
  line-height: 1.4em;
}
.nav__logo a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.06em;
}
.nav__logo .icon {
  display: flex;
  gap: 0.2em;
}
.nav__logo .icon svg {
  align-self: center;
  max-height: 100%;
  overflow: visible;
  pointer-events: none;
  width: auto;
}
.nav__logo .icon strong {
  font-weight: 600;
}
.nav__logo .icon--basecamp svg {
  height: 1.35em;
}
.nav__logo .icon--37signals {
  display: none;
}
.nav__logo .icon--37signals svg {
  height: 1.25em;
}
.nav__phrase {
  display: none;
}
.nav__links {
  align-items: center;
  display: none;
  gap: var(--space-small);
}
.nav__links a {
  color: var(--color-black);
  display: flex;
  font-size: var(--font-size-xxxx-small);
  font-weight: inherit;
  letter-spacing: var(--letter-spacing-loose);
  line-height: 2.2em;
  text-decoration: none;
  text-underline-offset: 0.06em;
  white-space: nowrap;
}
.nav__buttons {
  align-items: center;
  display: flex;
  gap: var(--space-small);
}
.nav__button {
  border-radius: 0.25em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  color: var(--color-black);
  cursor: pointer;
  display: flex;
  font-size: var(--font-size-xxxx-small);
  font-weight: inherit;
  letter-spacing: var(--letter-spacing-loose);
  line-height: 2.2em;
  padding-left: 0.7625em;
  padding-right: 0.7625em;
  text-decoration: none;
  text-underline-offset: 0.06em;
  white-space: nowrap;
}
.nav__button--signup {
  background: var(--color-green);
  box-shadow: none;
  color: var(--color-white);
  font-weight: 500;
}
.nav__toggle {
  cursor: pointer;
  display: grid;
  font-size: var(--font-size-xxxx-small);
  height: 2.2em;
  margin-right: -0.5em;
  place-items: center;
  position: relative;
  width: 2.2em;
}
.nav__toggle:before,
.nav__toggle:after {
  background: var(--color-black);
  content: "";
  height: 0.125em;
  pointer-events: none;
  position: absolute;
  transition: transform var(--transition);
  width: 1.2em;
  will-change: transform;
}
.nav__toggle:before {
  transform: translateY(-0.225em);
}
.nav__toggle:after {
  transform: translateY(0.225em);
}
.nav__mobile {
  display: none;
  gap: var(--space-large);
  justify-items: center;
  margin: var(--space-x-large) var(--space-medium);
  text-align: center;
}
.nav__mobile a {
  font-size: var(--font-size-medium);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.2875em;
  margin-top: -0.5625em;
}
.nav--stuck {
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  transition: box-shadow var(--transition);
}
@media (hover: hover) {
  .nav__logo a:focus,
  .nav__logo a:hover,
  .nav__links a:focus,
  .nav__links a:hover {
    text-decoration: underline;
  }
  .nav__button {
    transition:
      background var(--transition),
      box-shadow var(--transition);
  }
  .nav__button:focus,
  .nav__button:hover {
    box-shadow:
      0 0 0 1px rgba(var(--rgb-black), 0.85),
      0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  }
  .nav__button--signup:focus,
  .nav__button--signup:hover {
    background: var(--color-green-dark);
    box-shadow: none;
    color: var(--color-white);
  }
}
@media (min-width: 64em) {
  .nav__container {
    padding-left: var(--space-neutral);
    padding-right: var(--space-neutral);
  }
  .nav__links {
    display: flex;
  }
  .nav__toggle,
  .nav__mobile {
    display: none;
  }
}
@media (min-width: 80em) {
  .nav__logo .icon--37signals {
    display: flex;
  }
  .nav__phrase {
    display: initial;
  }
  .nav__phrase--js {
    opacity: 0;
  }
}
.new {
  display: grid;
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}
.new__container {
  display: grid;
  gap: var(--space-x-large);
}
.new__post {
  align-items: start;
  display: grid;
  gap: var(--space-neutral);
}
.new__post header {
  display: grid;
  gap: 0.7em;
}
.new__post header time {
  font-size: var(--font-size-xxx-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.3em;
  margin-top: -0.575em;
}
.new__post header h2 {
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: -0.1875em;
  margin-top: -0.4375em;
}
.new__post header h2 a {
  font-weight: inherit;
}
.new__post section {
  display: grid;
  gap: var(--space-neutral);
}
.new__post section button {
  display: grid;
}
.new__post section button figure {
  background: var(--color-white);
  border-radius: 0.2em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  display: grid;
  overflow: hidden;
  place-items: center;
  position: relative;
}
.new__post section button figure:before {
  background: url(../images/general/icon-play.svg) center center / 0.8em auto no-repeat
    var(--color-black);
  border-radius: 100%;
  content: "";
  height: 1.8em;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: scale(0.85);
  width: 1.8em;
  z-index: 1;
}
.new__post section article {
  display: grid;
  gap: var(--space-medium);
}
.new__post section article p {
  font-size: var(--font-size-x-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.325em;
  margin-top: -0.5625em;
}
@media (hover: hover) {
  .new section button figure {
    outline: 0.1em solid rgba(0, 0, 0, 0);
    outline-offset: 0.24em;
    transition:
      outline-color var(--transition-slow),
      outline-offset var(--transition-slow);
  }
  .new section button figure:before {
    transition:
      opacity var(--transition-slow),
      transform var(--transition-slow);
    will-change: transform;
  }
  .new section button:focus figure,
  .new section button:hover figure {
    outline-color: var(--color-black);
    outline-offset: 0.12em;
  }
  .new section button:focus figure:before,
  .new section button:hover figure:before {
    opacity: 1;
    transform: scale(1);
  }
}
@media (min-width: 48em) {
  .new__container {
    gap: normal;
    padding-left: var(--space-neutral);
  }
  .new__post {
    display: flex;
    padding-bottom: var(--space-x-large);
    position: relative;
  }
  .new__post header {
    flex: 1;
    position: sticky;
    top: calc(var(--font-size) * 2.1 + var(--space-neutral));
    z-index: 1;
  }
  .new__post header:after {
    background: var(--color-green);
    border-radius: 100%;
    box-shadow: 0 0 0 0.3em var(--color-white);
    content: "";
    height: 0.5em;
    left: -1.25em;
    pointer-events: none;
    position: absolute;
    top: -0.1625em;
    width: 0.5em;
  }
  .new__post section {
    flex: 2;
  }
  .new__post:before,
  .new__post:after {
    border-radius: 0.1em;
    content: "";
    left: -1.05em;
    pointer-events: none;
    position: absolute;
    width: 0.1em;
  }
  .new__post:before {
    bottom: 100%;
    height: var(--space-x-large);
  }
  .new__post:after {
    background: var(--color-grey);
    height: 100%;
    top: 0;
  }
  .new__post:first-child:before {
    background: linear-gradient(180deg, rgba(var(--rgb-grey), 0) 0, var(--color-grey) 100%);
  }
  .new__post:last-child {
    padding-bottom: 0;
  }
  .new__post:last-child:after {
    background: linear-gradient(0deg, rgba(var(--rgb-grey), 0) 0, var(--color-grey) 75%);
  }
}
@media (min-width: 64em) {
  .new {
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }
}
.newsletter-archive {
  display: grid;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, 24em);
}
.newsletter-archive h2 {
  --flow-space: var(--space-xx-large);
  font-size: var(--font-size-x-small);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-loose);
  margin-bottom: -0.325em;
  margin-top: -0.35em;
}
.newsletter-archive ul {
  display: grid;
  gap: var(--space-neutral);
}
.newsletter-archive ul li {
  display: grid;
  gap: 0.7em;
}
.newsletter-archive ul li time {
  font-size: var(--font-size-xxx-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.3em;
  margin-top: -0.575em;
}
.newsletter-archive ul li a {
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: -0.1875em;
  margin-top: -0.4375em;
}
.newsletter-archive > * + * {
  padding-top: var(--flow-space, var(--space-neutral));
}
@media (min-width: 64em) {
  .newsletter-archive {
    padding-left: var(--space-neutral);
    padding-right: var(--space-neutral);
  }
}
.newsletter {
  display: grid;
  position: relative;
}
.newsletter__container {
  align-items: center;
  display: flex;
  position: relative;
  width: min(100%, 16em);
}
.newsletter__container form {
  align-items: center;
  background: rgba(var(--rgb-black), 0.02);
  border: none;
  border-radius: 0.25em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.85),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  display: flex;
  flex: 1;
  font-size: var(--font-size-xxx-small);
  grid-auto-flow: column;
  grid-template-columns: 1fr auto;
  letter-spacing: var(--letter-spacing);
  line-height: 1.4em;
  transition:
    background var(--transition),
    box-shadow var(--transition);
}
.newsletter__container form input,
.newsletter__container form button {
  display: flex;
  padding: 0.5625em 0.95em 0.65em 0.95em;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}
.newsletter__container form input {
  appearance: none;
  border: none;
  flex: 1;
  padding-right: 0;
  transition: color var(--transition);
  vertical-align: middle;
}
.newsletter__container form input::placeholder {
  color: rgba(var(--rgb-black), 0.35);
  transition: color var(--transition);
}
.newsletter__container form input:focus::placeholder {
  color: rgba(var(--rgb-black), 0);
}
.newsletter__container form button {
  cursor: pointer;
  font-weight: 600;
  transition: color var(--transition);
}
.newsletter__container form:has(input:placeholder-shown) {
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
}
.newsletter__container form:has(input:focus) {
  background: var(--color-white);
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.85),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
}
.newsletter__container:after {
  align-items: center;
  background: url(../images/general/icon-checkmark.svg) center center / 0.55em auto no-repeat
    var(--color-green);
  border-radius: 100%;
  content: "";
  display: flex;
  font-size: var(--font-size-xx-small);
  height: 1.175em;
  justify-content: center;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: -0.5875em;
  top: -0.5875em;
  transform: scale(0.5);
  transition:
    opacity var(--transition),
    transform var(--transition);
  width: 1.175em;
  will-change: transform;
}
.newsletter--page {
  margin-left: var(--space-neutral);
  margin-right: var(--space-neutral);
}
.newsletter--page .newsletter__container {
  margin-inline: auto;
}
.newsletter--success .newsletter__container:after {
  opacity: 1;
  transform: scale(1);
}
.newsletter--error .newsletter__container form {
  box-shadow:
    0 0 0 1px var(--color-red),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
}
.newsletter--error .newsletter__container form input,
.newsletter--error .newsletter__container form button {
  color: var(--color-red);
}
.path {
  display: none;
  position: relative;
  visibility: hidden;
}
.path__header {
  padding: 2.5em var(--space-neutral) 0 var(--space-neutral);
  position: relative;
}
.path__header section {
  display: grid;
  gap: var(--space-neutral);
}
.path__header section dl {
  display: grid;
  gap: 0.7em;
}
.path__header section dl dt {
  font-size: var(--font-size-medium);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.15;
  margin-bottom: -0.1875em;
  margin-top: -0.2375em;
}
.path__header section dl dd {
  margin-bottom: -0.3em;
  margin-top: -0.55em;
}
.path__header section p {
  font-size: var(--font-size-x-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.325em;
  margin-top: -0.5625em;
}
.path__visual {
  display: grid;
  justify-content: center;
  margin-top: 1.5em;
}
.path__svg {
  position: relative;
}
.path__svg svg {
  height: 56em;
  overflow: visible;
  width: auto;
}
.path__svg svg path {
  fill: none;
  stroke: var(--color-black);
  stroke-dasharray: 0 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.path__svg svg marker polygon {
  fill: var(--color-black);
}
.path__point {
  display: grid;
  justify-items: center;
  position: absolute;
}
.path__point dl {
  display: grid;
  gap: 0.4em;
  position: absolute;
  top: -0.4125em;
  width: 16em;
}
.path__point dl dt {
  font-size: var(--font-size-xx-small);
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
}
.path__point dl dt strong {
  font-weight: 600;
}
.path__point dl dd {
  font-size: var(--font-size-xxxx-small);
  letter-spacing: var(--letter-spacing);
}
.path__point:before {
  background-color: var(--color-white);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 1.4em auto;
  border-radius: 100%;
  content: "";
  height: 2.35em;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  width: 2.35em;
}
.path__point:first-child:before {
  background-color: rgba(0, 0, 0, 0);
}
.path__point--logo-airtable:before {
  background-image: url(../images/paths/airtable.png);
}
.path__point--logo-asana:before {
  background-image: url(../images/paths/asana.png);
}
.path__point--logo-basecamp:before {
  background-image: url(../images/paths/basecamp.svg);
}
.path__point--logo-clickup:before {
  background-image: url(../images/paths/clickup.png);
}
.path__point--logo-email:before {
  background-image: url(../images/paths/email.svg);
}
.path__point--logo-google-docs:before {
  background-image: url(../images/paths/google-docs.png);
}
.path__point--logo-google-sheets:before {
  background-image: url(../images/paths/google-sheets.png);
}
.path__point--logo-jira:before {
  background-image: url(../images/paths/jira.png);
}
.path__point--logo-mentions:before {
  background-image: url(../images/paths/mentions.png);
}
.path__point--logo-microsoft-azure:before {
  background-image: url(../images/paths/microsoft-azure.png);
}
.path__point--logo-microsoft-teams:before {
  background-image: url(../images/paths/microsoft-teams.png);
}
.path__point--logo-monday:before {
  background-image: url(../images/paths/monday.png);
}
.path__point--logo-moxie:before {
  background-image: url(../images/paths/moxie.png);
}
.path__point--logo-notion:before {
  background-image: url(../images/paths/notion.png);
}
.path__point--logo-slack:before {
  background-image: url(../images/paths/slack.png);
}
.path__point--logo-text:before {
  background-image: url(../images/paths/text.svg);
}
.path__point--logo-trello:before {
  background-image: url(../images/paths/trello.png);
}
.path__point--logo-trillian:before {
  background-image: url(../images/paths/trillian.png);
}
.path__point--logo-whatsapp:before {
  background-image: url(../images/paths/whatsapp.png);
}
.path__point--logo-wrike:before {
  background-image: url(../images/paths/wrike.png);
}
.path__point--align-center dl {
  text-align: center;
  top: 1.75em;
  width: 13.5em;
}
.path__point--align-left dl {
  left: 1.25em;
  text-align: left;
}
.path__point--align-right dl {
  justify-items: end;
  right: 1.25em;
  text-align: right;
}
.path__footer {
  display: grid;
  justify-items: center;
  margin: var(--space-medium) var(--space-neutral) var(--space-large) var(--space-neutral);
  position: relative;
  text-align: center;
}
.path__footer:before {
  background: url(../images/paths/basecamp.svg) center center / 100% auto no-repeat;
  content: "";
  height: 3.2em;
  margin-bottom: var(--space-neutral);
  pointer-events: none;
  width: 3.2em;
}
.path__footer h4 {
  font-size: var(--font-size-medium);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.15;
  margin-bottom: -0.1875em;
  margin-top: -0.4375em;
}
.path__footer h4 br {
  display: none;
}
.path__footer blockquote {
  display: grid;
  gap: var(--space-medium);
  margin-bottom: var(--space-neutral);
  margin-top: var(--space-medium);
}
.path__footer blockquote q {
  font-size: var(--font-size-xx-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.3em;
  margin-top: -0.3875em;
}
.path__footer blockquote q br {
  display: none;
}
.path__footer blockquote cite {
  font-size: var(--font-size-xxx-small);
  font-style: italic;
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  line-height: 1.2;
  margin-bottom: -0.25em;
  margin-top: -0.425em;
}
.path__footer a {
  background: var(--color-green);
  border-radius: 0.25em;
  color: var(--color-white);
  display: flex;
  font-size: var(--font-size-xxx-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  line-height: 1.4em;
  padding: 0.5625em 0.95em 0.65em 0.95em;
  text-decoration: none;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
}
.path--loaded {
  visibility: visible;
}
.path--plot,
.path.selected {
  display: grid;
}
.path--alex-de-simone .path__visual {
  padding-top: 3.2625em;
}
.path--alex-de-simone .path__point:first-child {
  margin-left: -0.575em;
  margin-top: -2.15em;
}
.path--brett-robison .path__visual {
  padding-top: 2.725em;
}
.path--brett-robison .path__point:first-child {
  margin-left: 0.875em;
  margin-top: -2.0375em;
}
.path--brian-garside .path__visual {
  padding-top: 3.25em;
}
.path--brian-garside .path__point:first-child {
  margin-left: 0.475em;
  margin-top: -2.1625em;
}
.path--dan-unger .path__visual {
  padding-top: 3.2375em;
}
.path--dan-unger .path__point:first-child {
  margin-left: -0.575em;
  margin-top: -2.15em;
}
.path--doug-seidl .path__visual {
  padding-top: 3.075em;
}
.path--doug-seidl .path__point:first-child {
  margin-left: -0.375em;
  margin-top: -2.175em;
}
.path--fernando-araujo .path__visual {
  padding-top: 3.2375em;
}
.path--fernando-araujo .path__point:first-child {
  margin-left: 0.5625em;
  margin-top: -2.15em;
}
.path--helen-ryan .path__visual {
  padding-top: 3.0875em;
}
.path--helen-ryan .path__point:first-child {
  margin-left: -0.9875em;
  margin-top: -1.9875em;
}
.path--ian-parsons .path__visual {
  padding-top: 3.075em;
}
.path--ian-parsons .path__point:first-child {
  margin-left: 0.9875em;
  margin-top: -1.9875em;
}
.path--johanne-brierre .path__visual {
  padding-top: 3em;
}
.path--johanne-brierre .path__point:first-child {
  margin-left: 1.15em;
  margin-top: -1.9em;
}
.path--lucien-odey .path__visual {
  padding-top: 3.1em;
}
.path--lucien-odey .path__point:first-child {
  margin-left: -0.625em;
  margin-top: -2.125em;
}
.path--ryan-almusawi .path__visual {
  padding-top: 3.2375em;
}
.path--ryan-almusawi .path__point:first-child {
  margin-left: -0.375em;
  margin-top: -2.1875em;
}
.path--sebastien-bossi-croci .path__visual {
  padding-top: 3.2125em;
}
.path--sebastien-bossi-croci .path__point:first-child {
  margin-left: 0.525em;
  margin-top: -2.1625em;
}
.path--stefan-strassburger .path__visual {
  padding-top: 3.2875em;
}
.path--stefan-strassburger .path__point:first-child {
  margin-left: -0.3125em;
  margin-top: -2.2em;
}
@media (hover: hover) {
  .path__footer a {
    transition: background var(--transition);
  }
  .path__footer a:focus,
  .path__footer a:hover {
    background: var(--color-green-dark);
  }
}
@media (min-width: 64em) {
  .path__header {
    padding-left: 2.5em;
    padding-right: 2.5em;
  }
  .path__footer {
    margin: var(--space-medium) var(--space-large) var(--space-x-large) var(--space-large);
  }
  .path__footer h4 br,
  .path__footer blockquote q br {
    display: inline;
  }
  .path__footer blockquote {
    margin-left: var(--space-large);
    margin-right: var(--space-large);
  }
}
.paths-feature {
  display: grid;
  margin-top: var(--space-large);
  pointer-events: none;
  position: relative;
}
.paths-feature__link {
  margin-inline: auto;
  position: relative;
  width: min(100%, 14em);
}
.paths-feature__link .path {
  z-index: 1;
}
.paths-feature__link .path:before {
  background: var(--color-paper);
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0.5em 1.4em 0 rgba(var(--rgb-black), 0.05),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  border-radius: 0.2em;
  content: "";
  inset: 0;
  overflow: hidden;
  pointer-events: auto;
  position: absolute;
  transform: rotate(-3deg);
}
.paths-feature__link .path .path__visual {
  padding: 1.875em 2.125em 0.75em 2.125em;
}
.paths-feature__link .path .path__svg svg {
  height: 12.75em;
}
.paths-feature__link .path .path__svg svg path {
  stroke-dasharray: 1 12;
  stroke-width: 5.375;
}
.paths-feature__link .path .path__point:first-child {
  margin-left: -0.9875em;
  margin-top: 1.075em;
}
.paths-feature__link .path .path__point:first-child:before {
  background-color: rgba(0, 0, 0, 0);
}
.paths-feature__link .path .path__point:before {
  background-color: var(--color-paper);
  background-size: 1.1em auto;
  height: 1.5em;
  width: 1.5em;
}
.paths-feature__link .path .path__footer {
  margin: 0 0 1.375em 0;
}
.paths-feature__link .path .path__footer:before {
  height: 2.2em;
  margin: 0;
  width: 2.2em;
}
.paths-feature__link:before,
.paths-feature__link:after {
  background: var(--color-paper);
  border-radius: 0.2em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  content: "";
  inset: 0;
  overflow: hidden;
  position: absolute;
}
.paths-feature__link:before {
  transform: rotate(5deg) scale(0.94) translate(0.125em, -0.3em);
}
.paths-feature__link:after {
  transform: rotate(-10deg) scale(0.95) translate(-0.125em, 0.625em);
}
.paths-feature__label {
  background: var(--color-yellow);
  color: var(--color-black);
  font-family: "Sharpie", Sans-Serif;
  font-size: var(--font-size-xx-small);
  font-variant-ligatures: none;
  font-weight: 400;
  left: 0;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.3em 0.5em 0.4em 0.5em;
  pointer-events: auto;
  position: absolute;
  text-transform: uppercase;
  top: 0;
  transform: rotate(-5deg) translate(-1.45em, -0.75em);
  white-space: nowrap;
  z-index: 2;
}
@media (hover: hover) {
  .paths-feature__link .path:before {
    outline: 0.1em solid rgba(0, 0, 0, 0);
    outline-offset: 0.24em;
    transition:
      outline-color var(--transition-slow),
      outline-offset var(--transition-slow);
  }
  .paths-feature__link:before,
  .paths-feature__link:after {
    transition:
      filter var(--transition-slow),
      opacity var(--transition-slow),
      transform var(--transition-slow);
    will-change: transform;
  }
  .paths-feature__link:focus .path:before,
  .paths-feature__link:hover .path:before {
    outline-color: var(--color-black);
    outline-offset: 0.12em;
  }
  .paths-feature__link:focus:before,
  .paths-feature__link:focus:after,
  .paths-feature__link:hover:before,
  .paths-feature__link:hover:after {
    filter: blur(0.25em);
    opacity: 0.8;
  }
  .paths-feature__link:focus:before,
  .paths-feature__link:hover:before {
    transform: rotate(7deg) scale(0.94) translate(1.125em, -0.1em);
  }
  .paths-feature__link:focus:after,
  .paths-feature__link:hover:after {
    transform: rotate(-12deg) scale(0.95) translate(-1.125em, 0.825em);
  }
}
@media (min-width: 48em) {
  .paths-feature {
    height: 100%;
    margin-top: 0;
    overflow-x: clip;
    padding-left: 3em;
    position: absolute;
    right: calc(-1 * var(--space-medium));
  }
  .paths-feature__link {
    margin-inline: initial;
    position: relative;
    transform: translate(1.25em, -3em);
    width: auto;
  }
  .paths-feature__link .path:before {
    transform: rotate(-5deg);
  }
  .paths-feature__link:before {
    transform: rotate(-16deg) translate(-0.125em, 0.875em);
  }
  .paths-feature__link:after {
    transform: rotate(-11deg) translate(-0.125em, 0.5em);
  }
  .paths-feature__label {
    transform: rotate(-5deg) translate(-1.85em, -0.925em);
  }
}
@media (min-width: 48em) and (hover: hover) {
  .paths-feature__link:focus:before,
  .paths-feature__link:hover:before {
    transform: rotate(-21deg) translate(-0.375em, 1.125em);
  }
  .paths-feature__link:focus:after,
  .paths-feature__link:hover:after {
    transform: rotate(-13deg) translate(-0.25em, 0.625em);
  }
}
@media (min-width: 64em) {
  .paths-feature {
    right: calc(-1 * var(--space-neutral));
  }
}
.paths-nav {
  display: flex;
  position: relative;
}
.paths-nav__container {
  display: flex;
  gap: var(--space-medium);
  margin-bottom: calc(-1 * var(--space-large));
  margin-top: calc(-1 * var(--space-large));
  overflow-x: scroll;
  overscroll-behavior-x: contain;
  padding: var(--space-large) var(--space-medium);
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
}
.paths-nav__container::-webkit-scrollbar {
  height: 0;
}
.paths-nav__item {
  cursor: pointer;
  display: grid;
  justify-items: center;
  min-width: 6em;
  padding-bottom: 1.5em;
  position: relative;
}
.paths-nav__item .path {
  background: var(--color-paper);
  border-radius: 0.2em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  display: grid;
  grid-template-columns: initial;
  height: 7.875em;
  outline: 0.1em solid rgba(0, 0, 0, 0);
  outline-offset: 0.24em;
  place-items: center;
  transition:
    box-shadow var(--transition),
    outline-color var(--transition-slow),
    outline-offset var(--transition-slow),
    transform var(--transition-slow);
  width: 100%;
  will-change: transform;
}
.paths-nav__item .path__visual {
  margin-top: 0;
  padding-bottom: 1.2375em;
}
.paths-nav__item .path__visual svg {
  height: 4.875em;
}
.paths-nav__item .path__visual svg path {
  stroke-dasharray: 0 13;
  stroke-width: 8;
}
.paths-nav__item .path__point:before {
  background-color: var(--color-paper);
  background-size: 0.6em auto;
  height: 0.7em;
  width: 0.7em;
}
.paths-nav__item .path__point:last-child {
  margin-top: 0.725em;
}
.paths-nav__item .path__point:last-child:before {
  background-color: rgba(0, 0, 0, 0);
  background-size: 100% auto;
  height: 0.9em;
  width: 0.9em;
}
.paths-nav__item .path--alex-de-simone .path__visual {
  padding-top: 0.9375em;
}
.paths-nav__item .path--alex-de-simone .path__point:first-child {
  margin-left: -0.2375em;
  margin-top: -0.725em;
}
.paths-nav__item .path--alex-de-simone .path__point:last-child {
  margin-left: 0.275em;
}
.paths-nav__item .path--brett-robison .path__visual {
  padding-top: 0.9375em;
}
.paths-nav__item .path--brett-robison .path__point:first-child {
  margin-left: 0.3025em;
  margin-top: -0.70625em;
}
.paths-nav__item .path--brett-robison .path__point:last-child {
  margin-left: -0.275em;
}
.paths-nav__item .path--brian-garside .path__visual {
  padding-top: 1.0875em;
}
.paths-nav__item .path--brian-garside .path__point:first-child {
  margin-left: 0.15em;
  margin-top: -0.7375em;
}
.paths-nav__item .path--brian-garside .path__point:last-child {
  margin-left: 0.0875em;
}
.paths-nav__item .path--dan-unger .path__visual {
  padding-top: 1.075em;
}
.paths-nav__item .path--dan-unger .path__point:first-child {
  margin-left: -0.2em;
  margin-top: -0.725em;
}
.paths-nav__item .path--dan-unger .path__point:last-child {
  margin-left: 0.175em;
}
.paths-nav__item .path--doug-seidl .path__visual {
  padding-top: 1.05em;
}
.paths-nav__item .path--doug-seidl .path__point:first-child {
  margin-left: -0.15em;
  margin-top: -0.7375em;
}
.paths-nav__item .path--doug-seidl .path__point:last-child {
  margin-left: -0.2375em;
}
.paths-nav__item .path--fernando-araujo .path__visual {
  padding-top: 1.075em;
}
.paths-nav__item .path--fernando-araujo .path__point:first-child {
  margin-left: 0.1875em;
  margin-top: -0.7125em;
}
.paths-nav__item .path--fernando-araujo .path__point:last-child {
  margin-left: -0.1875em;
}
.paths-nav__item .path--helen-ryan .path__visual {
  padding-top: 1.05em;
}
.paths-nav__item .path--helen-ryan .path__point:first-child {
  margin-left: -0.375em;
  margin-top: -0.6875em;
}
.paths-nav__item .path--helen-ryan .path__point:last-child {
  margin-left: 0.2875em;
}
.paths-nav__item .path--ian-parsons .path__visual {
  padding-top: 1.05em;
}
.paths-nav__item .path--ian-parsons .path__point:first-child {
  margin-left: 0.325em;
  margin-top: -0.6875em;
}
.paths-nav__item .path--ian-parsons .path__point:last-child {
  margin-left: 0.25em;
}
.paths-nav__item .path--johanne-brierre .path__visual {
  padding-top: 1.05em;
}
.paths-nav__item .path--johanne-brierre .path__point:first-child {
  margin-left: 0.3875em;
  margin-top: -0.675em;
}
.paths-nav__item .path--johanne-brierre .path__point:last-child {
  margin-left: -0.15em;
}
.paths-nav__item .path--lucien-odey .path__visual {
  padding-top: 1.05em;
}
.paths-nav__item .path--lucien-odey .path__point:first-child {
  margin-left: -0.225em;
  margin-top: -0.725em;
}
.paths-nav__item .path--lucien-odey .path__point:last-child {
  margin-left: -0.2125em;
}
.paths-nav__item .path--ryan-almusawi .path__visual {
  padding-top: 1.075em;
}
.paths-nav__item .path--ryan-almusawi .path__point:first-child {
  margin-left: -0.2em;
  margin-top: -0.725em;
}
.paths-nav__item .path--ryan-almusawi .path__point:last-child {
  margin-left: -0.5em;
}
.paths-nav__item .path--sebastien-bossi-croci .path__visual {
  padding-top: 1.0875em;
}
.paths-nav__item .path--sebastien-bossi-croci .path__point:first-child {
  margin-left: 0.175em;
  margin-top: -0.7375em;
}
.paths-nav__item .path--sebastien-bossi-croci .path__point:last-child {
  margin-left: -0.15em;
}
.paths-nav__item .path--stefan-strassburger .path__visual {
  padding-top: 1.1em;
}
.paths-nav__item .path--stefan-strassburger .path__point:first-child {
  margin-left: -0.125em;
  margin-top: -0.75em;
}
.paths-nav__item .path--stefan-strassburger .path__point:last-child {
  margin-left: 0.2625em;
}
.paths-nav__item header {
  align-content: end;
  bottom: 0;
  display: grid;
  font-family: "Monaspace", Monospace;
  height: 1.5em;
  justify-items: center;
  letter-spacing: normal;
  margin-bottom: -0.125em;
  position: absolute;
  transition: transform var(--transition-slow);
  will-change: transform;
}
.paths-nav__item header h2 {
  font-size: max(0.625rem, 40%);
  letter-spacing: normal;
  text-transform: uppercase;
}
.paths-nav__item header h3 {
  font-size: max(0.5rem, 32.5%);
  letter-spacing: normal;
}
.paths-nav__item.selected .path {
  outline-color: var(--color-black);
  outline-offset: 0.12em;
  transform: translateY(0);
}
.paths-nav__item.selected header {
  transform: translateY(0);
}
.paths-nav__item:first-child .path__point:first-child:after,
.paths-nav__item:first-child .path__point:last-child:after {
  align-self: center;
  font-family: "Monaspace", Monospace;
  font-size: max(0.5rem, 32.5%);
  letter-spacing: normal;
  pointer-events: none;
  position: absolute;
}
.paths-nav__item:first-child .path__point:first-child:after {
  content: "start";
  right: calc(100% + 1.5em);
}
.paths-nav__item:first-child .path__point:last-child:after {
  content: "end";
  left: calc(100% + 2.125em);
}
.paths-nav__controls {
  bottom: calc(100% + var(--space-neutral));
  right: var(--space-neutral);
}
@media (hover: hover) {
  .paths-nav__item:not(.selected):focus .path,
  .paths-nav__item:not(.selected):hover .path {
    box-shadow:
      0 0 0 1px rgba(var(--rgb-black), 0.175),
      0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
    transform: translateY(-0.2em);
  }
  .paths-nav__item:not(.selected):focus header,
  .paths-nav__item:not(.selected):hover header {
    transform: translateY(-0.2em);
  }
}
@media (min-width: 64em) {
  .paths-nav__container {
    padding-left: var(--space-neutral);
    padding-right: var(--space-neutral);
  }
}
.paths {
  display: grid;
  margin-inline: auto;
  position: relative;
  width: min(100%, 28em);
}
.paths:before,
.paths:after {
  background: var(--color-white);
  border-radius: 0.025em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.075),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.025),
    0 0.4em 1.6em -0.8em rgba(var(--rgb-black), 0.1),
    0 0.8em 1.2em -1.6em rgba(var(--rgb-black), 0.2),
    0 1.2em 1.6em -2.4em rgba(var(--rgb-black), 0.3),
    0 1.6em 2.4em -3.2em rgba(var(--rgb-black), 0.4);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.paths:before {
  transform: rotate(-2.6deg) translate(0.9%, 0);
  width: 98%;
}
.paths:after {
  height: 97%;
  transform: rotate(1.2deg) translate(0.1%, 1.5%);
}
.paths__container {
  display: grid;
  position: relative;
  z-index: 1;
}
.paths__container:before {
  background: var(--color-white);
  border-radius: 0.025em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.075),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.025),
    0 0.4em 1.6em -0.8em rgba(var(--rgb-black), 0.1),
    0 0.8em 1.2em -1.6em rgba(var(--rgb-black), 0.2),
    0 1.2em 1.6em -2.4em rgba(var(--rgb-black), 0.3),
    0 1.6em 2.4em -3.2em rgba(var(--rgb-black), 0.4);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  transform: rotate(-0.5deg);
}
.pricing {
  display: grid;
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}
.pricing__packages {
  display: grid;
  gap: var(--space-medium);
  justify-content: center;
}
.pricing__package {
  background: var(--color-paper);
  border-radius: 0.2em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  display: grid;
  max-width: 24em;
  overflow: clip;
}
.pricing__package header {
  display: grid;
  padding: var(--space-neutral);
}
.pricing__package header h2 {
  align-items: center;
  display: flex;
  justify-self: start;
  padding-bottom: 1.1em;
  position: relative;
}
.pricing__package header h2 strong {
  font-size: var(--font-size-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.3125em;
  margin-top: -0.3375em;
}
.pricing__package header h2 span {
  background: var(--color-yellow);
  color: var(--color-black);
  font-family: "Sharpie", Sans-Serif;
  font-size: var(--font-size-x-small);
  font-variant-ligatures: none;
  font-weight: 400;
  left: 100%;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 0.25em 0.45em 0.3em 0.45em;
  position: absolute;
  text-transform: uppercase;
  transform: rotate(-3deg) translate(0.35em, 0.05em);
  transform-origin: left bottom;
  white-space: nowrap;
}
.pricing__package header h3 {
  font-size: var(--font-size-xx-small);
  letter-spacing: var(--letter-spacing);
  line-height: 1.3;
  margin-bottom: -0.2375em;
  margin-top: -0.5125em;
  padding-bottom: 1.625em;
}
.pricing__package header h3 br {
  display: none;
}
.pricing__package header ul {
  display: grid;
  font-size: 55%;
  gap: 0.15em;
  letter-spacing: var(--letter-spacing);
  list-style: disc;
  margin-bottom: -0.3375em;
  margin-top: -0.525em;
  padding-left: 1.125em;
}
.pricing__package article {
  background: var(--color-white);
  border-radius: 0 0 0.2em 0.2em;
  border-top: 1px solid rgba(var(--rgb-black), 0.1);
  display: grid;
  gap: 0.8em;
  padding: var(--space-neutral);
}
.pricing__package article h4 {
  font-size: var(--font-size-x-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  line-height: 1.3;
  margin-bottom: -0.2375em;
  margin-top: -0.5125em;
}
.pricing__package article p {
  font-size: var(--font-size-xxx-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.325em;
  margin-top: -0.5375em;
}
.pricing__package article a {
  background: var(--color-green);
  border-radius: 0.25em;
  color: var(--color-white);
  display: flex;
  font-size: var(--font-size-xxx-small);
  font-weight: 500;
  justify-self: start;
  letter-spacing: var(--letter-spacing);
  line-height: 1.4em;
  padding: 0.4em 0.875em 0.4875em 0.875em;
  text-decoration: none;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
}
.pricing__package--free header h2 span {
  background: rgba(var(--rgb-black), 0.055);
  color: var(--color-black);
}
.pricing__helper {
  align-items: center;
  display: none;
  height: 1.4em;
  justify-content: center;
  margin-left: 0.1em;
  margin-right: 0.1em;
  position: relative;
  vertical-align: top;
  width: 1.4em;
  z-index: 1;
}
.pricing__helper button {
  background: rgba(var(--rgb-black), 0.055);
  border-radius: 100%;
  color: var(--color-black);
  cursor: pointer;
  display: grid;
  font-size: var(--font-size-small);
  min-height: 1.625em;
  min-width: 1.625em;
  place-content: center;
}
.pricing__helper small {
  backdrop-filter: blur(0.3em);
  -webkit-backdrop-filter: blur(0.3em);
  background: rgba(var(--rgb-black), 0.8);
  border-radius: 0.4em;
  bottom: calc(100% + 0.45em);
  color: var(--color-white);
  font-size: var(--font-size-xxxx-small);
  letter-spacing: var(--letter-spacing-loose);
  opacity: 0;
  padding: 0.8em 1.2em;
  pointer-events: none;
  position: absolute;
  text-align: center;
  transition:
    opacity var(--transition),
    transform var(--transition);
  transform: scale(0.9) translateY(0.5em);
  width: 18em;
  will-change: transform;
}
.pricing--try-basecamp .pricing__package--free header h2 span {
  background: var(--color-yellow);
  color: var(--color-black);
}
.pricing--try-basecamp .pricing__package--plus header h2 span,
.pricing--try-basecamp .pricing__package--pro header h2 span {
  background: rgba(var(--rgb-black), 0.055);
  color: var(--color-black);
}
@media (hover: hover) {
  .pricing__package article a {
    transition: background var(--transition);
  }
  .pricing__package article a:focus,
  .pricing__package article a:hover {
    background: var(--color-green-dark);
  }
  .pricing__helper {
    display: inline-flex;
  }
  .pricing__helper:focus small,
  .pricing__helper:hover small {
    opacity: 1;
    transform: scale(1);
  }
}
@media (min-width: 56em) {
  .pricing__packages {
    align-items: center;
    gap: 0;
    grid-auto-flow: column;
    grid-template-columns: repeat(24, 1fr);
  }
  .pricing__package {
    max-width: none;
  }
  .pricing__package--free {
    order: 2;
  }
  .pricing__package--plus {
    order: 1;
    z-index: 1;
  }
  .pricing__package--pro {
    grid-column: span 10;
    z-index: 2;
  }
  .pricing__package--free,
  .pricing__package--plus {
    border-radius: 0 0.2em 0.2em 0;
    grid-column: span 7;
  }
  .pricing--try-basecamp .pricing__package--free {
    order: 0;
  }
  .pricing--try-basecamp .pricing__package--pro {
    order: 2;
  }
  .pricing--try-basecamp .pricing__package--free,
  .pricing--try-basecamp .pricing__package--plus {
    border-radius: 0.2em 0 0 0.2em;
  }
}
@media (min-width: 64em) {
  .pricing {
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }
}
.prose {
  display: grid;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, 28em);
}
.prose__content {
  display: grid;
  position: relative;
}
.prose__content h2 {
  --flow-space: 2.3875em;
  font-size: var(--font-size-medium);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.15;
  margin-bottom: -0.1875em;
  margin-top: -0.4375em;
}
.prose__content h3 {
  --flow-space: 1.65em;
  font-size: var(--font-size-small);
  font-weight: 700;
  letter-spacing: var(--letter-spacing);
  line-height: 1.15;
  margin-bottom: -0.175em;
  margin-top: -0.425em;
}
.prose__content h3 + * {
  --flow-space: 1.3em;
}
.prose__content p,
.prose__content ol,
.prose__content ul {
  font-size: var(--font-size-x-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.3125em;
  margin-top: -0.5375em;
}
.prose__content ol,
.prose__content ul {
  padding-left: 2em;
}
.prose__content ol li,
.prose__content ul li {
  --flow-space: 0.7em;
}
.prose__content ol li + li,
.prose__content ul li + li {
  margin-top: var(--flow-space, 0.7em);
}
.prose__content ol {
  list-style: decimal;
}
.prose__content ul {
  list-style: disc;
}
.prose__content b,
.prose__content strong {
  font-weight: 600;
}
.prose__content > * + * {
  padding-top: var(--flow-space, 1.825em);
}
.prose__figure {
  --flow-space: 1.4em;
  display: grid;
}
.prose__figure img {
  border-radius: 0.2em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  overflow: hidden;
}
.prose__highlight {
  --flow-space: 0;
  padding-bottom: var(--space-large);
  padding-top: var(--space-large);
  text-align: center;
}
.prose__highlight strong {
  font-weight: 700;
}
.prose__highlight br {
  display: none;
}
.prose__highlight + * {
  --flow-space: 0;
}
@media (min-width: 64em) {
  .prose {
    padding-left: var(--space-neutral);
    padding-right: var(--space-neutral);
  }
  .prose__highlight br {
    display: inline;
  }
}
.roadblock {
  display: grid;
  gap: var(--space-medium);
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  min-height: 100vh;
  place-content: center;
  position: relative;
}
.roadblock figure,
.roadblock header,
.roadblock article {
  margin-inline: auto;
}
.roadblock figure {
  width: min(100%, 1.8em);
}
.roadblock figure svg {
  height: auto;
  max-width: 100%;
  overflow: visible;
  width: 100%;
}
.roadblock header,
.roadblock article {
  text-align: center;
  width: min(100%, 20em);
}
.roadblock header h1 {
  font-size: var(--font-size-medium);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.15;
  margin-bottom: -0.1875em;
  margin-top: -0.4375em;
}
.roadblock article p {
  font-size: var(--font-size-x-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.3125em;
  margin-top: -0.5375em;
}
@media (min-width: 64em) {
  .roadblock {
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }
}
.scroll-snap {
  scroll-padding-inline: var(--space-neutral);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.scroll-snap__item {
  scroll-snap-align: start;
}
.scroll-snap-controls {
  background: var(--color-white);
  border-radius: 0.15em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  display: none;
  position: absolute;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}
@media (hover: hover) {
  .scroll-snap-controls {
    transition: box-shadow var(--transition);
  }
  .scroll-snap-controls:hover {
    box-shadow:
      0 0 0 1px rgba(var(--rgb-black), 0.85),
      0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  }
}
@media (min-width: 64em) {
  .scroll-snap-controls {
    display: flex;
  }
}
.scroll-snap-control {
  background-repeat: no-repeat;
  background-size: 0.4375em auto;
  cursor: pointer;
  height: 1.1em;
  transition:
    opacity var(--transition),
    transform var(--transition);
  width: 1.1em;
}
.scroll-snap-control:disabled {
  opacity: 0.2;
  pointer-events: none;
}
.scroll-snap-control--previous {
  background-image: url(../images/general/icon-previous.svg);
  background-position: left 0.375em center;
}
.scroll-snap-control--next {
  background-image: url(../images/general/icon-next.svg);
  background-position: right 0.375em center;
}
@media (hover: hover) {
  .scroll-snap-control {
    will-change: transform;
  }
  .scroll-snap-control--previous:active {
    transform: translateX(-0.03em);
  }
  .scroll-snap-control--next:active {
    transform: translateX(0.03em);
  }
}
.statement {
  display: grid;
  gap: var(--space-large);
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}
.statement section {
  display: grid;
  gap: var(--space-neutral);
  position: relative;
}
.statement section header {
  display: grid;
  gap: var(--space-neutral);
  position: relative;
}
.statement section header h1,
.statement section header h2 {
  font-size: var(--font-size-x-large);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-x-tight);
  line-height: 1.15;
  margin-bottom: -0.175em;
  margin-top: -0.4375em;
}
.statement section header h1 a,
.statement section header h2 a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
.statement section header h3 {
  font-size: var(--font-size-large);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.2;
  margin-bottom: -0.2125em;
  margin-top: -0.2625em;
}
.statement section header h4 {
  font-size: var(--font-size-medium);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.15;
  margin-bottom: -0.1875em;
  margin-top: -0.4375em;
}
.statement section header h6 {
  font-size: var(--font-size-xx-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.325em;
  margin-top: -0.525em;
}
.statement section header h6 span {
  padding-left: 0.3em;
  padding-right: 0.3em;
}
.statement section header .modal-trigger,
.statement section header strong {
  color: inherit;
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
}
.statement section header a {
  font-weight: inherit;
}
.statement section header br {
  display: none;
}
.statement section header mark {
  font-weight: inherit;
}
.statement section article {
  display: grid;
  gap: 0.7em;
}
.statement section article p {
  margin-bottom: -0.3em;
  margin-top: -0.55em;
}
.statement section article strong {
  font-weight: 700;
}
.statement section article br {
  display: none;
}
.statement figure {
  margin-inline: auto;
  width: min(100%, 36em);
}
.statement--align-center section {
  align-items: center;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.statement--align-center section header {
  width: min(100%, 28em);
}
.statement--align-center section article {
  justify-items: center;
  width: min(100%, 34em);
}
.statement--gap-large section {
  gap: var(--space-large);
}
.statement--article-small section article p {
  font-size: var(--font-size-small);
  margin-bottom: -0.3em;
  margin-top: -0.55em;
}
.statement--header-large section header h1,
.statement--header-large section header h2 {
  font-size: var(--font-size-xx-large);
  margin-bottom: -0.1875em;
  margin-top: -0.43625em;
}
@media (hover: hover) {
  .statement section header h1 a:focus,
  .statement section header h1 a:hover,
  .statement section header h2 a:focus,
  .statement section header h2 a:hover {
    color: var(--color-blue);
    text-decoration: underline;
  }
}
@media (min-width: 48em) {
  .statement--paths-feature section {
    grid-template-columns: repeat(12, 1fr);
  }
  .statement--paths-feature section header {
    grid-column: span 9;
  }
  .statement--paths-feature section article {
    grid-column: span 9;
  }
}
@media (min-width: 64em) {
  .statement {
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }
  .statement section {
    grid-template-columns: repeat(12, 1fr);
  }
  .statement section header br,
  .statement section article br {
    display: inline;
  }
  .statement section header {
    grid-column: span 9;
  }
  .statement section article {
    grid-column: span 10;
  }
  .statement--align-center section {
    grid-template-columns: initial;
  }
  .statement--align-center section header,
  .statement--align-center section article {
    grid-column: initial;
  }
  .statement--full-width section header {
    grid-column: 1 / -1;
    width: auto;
  }
}
.support {
  display: flex;
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}
.support__form {
  display: grid;
  gap: var(--space-large);
  width: min(100%, 24em);
}
.support__form fieldset {
  display: grid;
  gap: 0.8em;
}
.support__form fieldset label {
  align-items: start;
  display: flex;
  font-size: var(--font-size-small);
  font-weight: 700;
  gap: 0.2875em;
  letter-spacing: var(--letter-spacing);
  line-height: 1.15;
  margin-bottom: -0.175em;
  margin-top: -0.425em;
}
.support__form fieldset label span {
  display: flex;
  flex: 1;
}
.support__form fieldset label strong {
  background: var(--color-yellow);
  border-radius: 1em;
  display: flex;
  font-size: var(--font-size-xxxx-small);
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1;
  margin-top: 0.3925em;
  padding: 0.3em 0.725em 0.275em 0.725em;
  text-transform: uppercase;
  white-space: nowrap;
}
.support__form fieldset p {
  font-size: var(--font-size-xx-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.325em;
  margin-top: -0.5375em;
}
.support__form fieldset select,
.support__form fieldset input[type="email"],
.support__form fieldset input[type="text"],
.support__form fieldset textarea {
  appearance: none;
  background-color: rgba(var(--rgb-black), 0.02);
  border-radius: 0.25em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  color: var(--color-black);
  font-size: var(--font-size-xxx-small);
  letter-spacing: var(--letter-spacing);
  line-height: 1.4em;
  padding: 0.5625em 0.95em 0.65em 0.95em;
  transition:
    background var(--transition),
    box-shadow var(--transition);
}
.support__form fieldset select:focus,
.support__form fieldset input[type="email"]:focus,
.support__form fieldset input[type="text"]:focus,
.support__form fieldset textarea:focus {
  background-color: var(--color-white);
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.85),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
}
.support__form fieldset select {
  background-image: url(../images/general/icon-select.svg);
  background-position: right 0.9em center;
  background-repeat: no-repeat;
  background-size: 0.6em auto;
}
.support__form fieldset input[type="email"]::placeholder,
.support__form fieldset input[type="text"]::placeholder,
.support__form fieldset textarea::placeholder {
  color: rgba(var(--rgb-black), 0.35);
  transition: color var(--transition);
}
.support__form fieldset input[type="email"]:focus::placeholder,
.support__form fieldset input[type="text"]:focus::placeholder,
.support__form fieldset textarea:focus::placeholder {
  color: rgba(var(--rgb-black), 0);
}
.support__form fieldset input[type="file"] {
  display: flex;
  font-size: var(--font-size-xx-small);
  letter-spacing: var(--letter-spacing);
}
.support__form fieldset.error label strong {
  background: var(--color-red);
  color: var(--color-white);
}
.support__form fieldset.error select,
.support__form fieldset.error input[type="email"],
.support__form fieldset.error input[type="text"],
.support__form fieldset.error textarea {
  box-shadow:
    0 0 0 1px var(--color-red),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  color: var(--color-red);
}
.support__form fieldset.error select::placeholder,
.support__form fieldset.error input[type="email"]::placeholder,
.support__form fieldset.error input[type="text"]::placeholder,
.support__form fieldset.error textarea::placeholder {
  color: var(--color-red);
}
.support__form fieldset.error .error {
  color: var(--color-red);
  font-size: var(--font-size-xxx-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.3em;
  margin-top: -0.375em;
}
.support__form button {
  background: var(--color-green);
  border-radius: 0.25em;
  color: var(--color-white);
  cursor: pointer;
  font-size: var(--font-size-xxx-small);
  font-weight: 500;
  justify-self: start;
  letter-spacing: var(--letter-spacing);
  line-height: 1.4em;
  padding: 0.5625em 0.95em 0.65em 0.95em;
}
@media (hover: hover) {
  .support__form button {
    transition: background var(--transition);
  }
  .support__form button:focus,
  .support__form button:hover {
    background: var(--color-green-dark);
  }
}
@media (min-width: 64em) {
  .support {
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }
}
.target:not(#packages) {
  animation: target 1.6s 0.4s ease-out;
}
@keyframes target {
  0% {
    background-color: var(--color-target);
  }
  100% {
    background-color: rgba(var(--rgb-target), 0);
  }
}
.testimonials {
  display: grid;
  position: relative;
}
.testimonials__container {
  display: flex;
  gap: var(--space-medium);
  margin-bottom: calc(-1 * var(--space-medium));
  margin-top: calc(-1 * var(--space-medium));
  overflow-x: scroll;
  overscroll-behavior-x: contain;
  padding: var(--space-medium);
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
}
.testimonials__container::-webkit-scrollbar {
  height: 0;
}
.testimonials__item {
  background: var(--color-paper);
  border-radius: 0.2em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  display: grid;
  gap: var(--space-medium);
  min-width: calc(100vw - var(--space-medium) * 3);
  padding: var(--space-neutral);
  white-space: normal;
}
.testimonials__item p,
.testimonials__item q {
  font-size: var(--font-size-xxx-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.3em;
  margin-top: -0.3875em;
}
.testimonials__item--blockquote {
  align-content: space-between;
}
.testimonials__item--blockquote cite {
  font-size: var(--font-size-xxxx-small);
  font-style: italic;
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  line-height: 1.2;
  margin-bottom: -0.25em;
  margin-top: -0.425em;
}
.testimonials__item--link {
  place-content: center;
  text-align: center;
}
.testimonials__controls {
  bottom: calc(100% + var(--space-neutral));
  right: var(--space-neutral);
}
@media (hover: hover) {
  .testimonials__item--link {
    outline: 0.1em solid rgba(0, 0, 0, 0);
    outline-offset: 0.24em;
    transition:
      outline-color var(--transition-slow),
      outline-offset var(--transition-slow);
  }
  .testimonials__item--link:focus,
  .testimonials__item--link:hover {
    outline-color: var(--color-black);
    outline-offset: 0.12em;
  }
}
@media (min-width: 32em) {
  .testimonials__item {
    min-width: 16em;
  }
}
@media (min-width: 64em) {
  .testimonials__container {
    padding-left: var(--space-neutral);
    padding-right: var(--space-neutral);
  }
  .testimonials__item {
    min-width: 15em;
  }
}
.tracking {
  align-content: end;
  display: grid;
  inset: 0;
  pointer-events: none;
  position: fixed;
  text-align: center;
  z-index: 1000;
}
.tracking__container {
  align-items: center;
  background: var(--color-purple-light);
  display: grid;
  gap: 0.75em;
  justify-content: center;
  padding: var(--space-medium);
  pointer-events: auto;
}
.tracking__content p {
  color: var(--color-white);
  font-size: var(--font-size-xxx-small);
  letter-spacing: var(--letter-spacing-loose);
  margin-bottom: -0.2625em;
  margin-top: -0.4625em;
}
.tracking__buttons {
  display: flex;
  gap: 0.3em;
  justify-content: center;
}
.tracking__buttons button {
  border-radius: 0.25em;
  cursor: pointer;
  display: flex;
  font-size: var(--font-size-xxxx-small);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-loose);
  line-height: 2.2em;
  padding-left: 0.7625em;
  padding-right: 0.7625em;
  transition: background var(--transition);
  white-space: nowrap;
}
.tracking__buttons button.deny {
  background: rgba(var(--rgb-black), 0.1);
  color: var(--color-white);
}
.tracking__buttons button.deny:hover {
  background: rgba(var(--rgb-black), 0.15);
}
.tracking__buttons button.grant {
  background: var(--color-white);
  color: var(--color-black);
}
.tracking__buttons button.grant:hover {
  background: rgba(var(--rgb-white), 0.925);
}
.tracking--hidden {
  display: none !important;
}
@media (min-width: 48em) {
  .tracking__container {
    gap: 0.3em;
    grid-auto-flow: column;
    padding: var(--space-small) var(--space-neutral);
  }
  .tracking__content p {
    font-size: var(--font-size-xxxx-small);
    margin-bottom: 0;
    margin-top: 0;
  }
  .tracking__buttons {
    margin-left: 0.3em;
  }
}
.color-blue,
.color-cherokee,
.color-green,
.color-grey,
.color-orange,
.color-purple,
.color-yellow {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.color-blue--solid,
.color-cherokee--solid,
.color-green--solid,
.color-grey--solid,
.color-orange--solid,
.color-purple--solid,
.color-yellow--solid {
  padding-left: 0.1375em;
  padding-right: 0.1375em;
}
.color-blue {
  color: var(--color-blue);
}
.color-blue--solid {
  box-shadow: inset 0 -1.105em 0 var(--color-blue);
  color: var(--color-white);
}
.color-cherokee {
  color: var(--color-cherokee);
}
.color-cherokee--solid {
  box-shadow: inset 0 -1.105em 0 var(--color-cherokee);
  color: var(--color-white);
}
.color-green {
  color: var(--color-green);
}
.color-green--solid {
  box-shadow: inset 0 -1.105em 0 var(--color-green);
  color: var(--color-white);
}
.color-grey {
  color: var(--color-grey);
}
.color-grey--solid {
  box-shadow: inset 0 -1.105em 0 var(--color-grey);
  color: var(--color-black);
}
.color-orange {
  color: var(--color-orange);
}
.color-orange--solid {
  box-shadow: inset 0 -1.105em 0 var(--color-orange);
  color: var(--color-white);
}
.color-purple {
  color: var(--color-purple);
}
.color-purple--solid {
  box-shadow: inset 0 -1.105em 0 var(--color-purple);
  color: var(--color-white);
}
.color-yellow {
  color: var(--color-yellow);
}
.color-yellow--solid {
  box-shadow: inset 0 -1.105em 0 var(--color-yellow);
  color: var(--color-black);
}
.font-sharpie {
  font-family: "Sharpie", Sans-Serif !important;
  font-size: 105% !important;
  font-style: normal !important;
  font-variant-ligatures: none !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: 100% !important;
}
.highlight {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: inset 0 -1.15em 0 var(--color-highlight);
  color: var(--color-black);
  font-weight: 600;
  padding-bottom: 0.02375em;
  padding-left: 0.1625em;
  padding-right: 0.1625em;
}
.highlight--dark {
  box-shadow: inset 0 -1.15em 0 var(--color-purple);
  color: var(--color-white);
}
.highlight--time {
  box-shadow: inset 0 -1.375em 0 var(--color-highlight);
  display: inline-block;
  padding-left: 0.2625em;
  padding-right: 0.2625em;
  transform: rotate(-1.25deg);
}
.video-inline {
  border-radius: 0.125em;
  font-weight: 700;
  height: 1.625em;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  white-space: nowrap;
}
.video-inline__loop {
  display: grid;
  inset: 0;
  justify-content: center;
  pointer-events: none;
  position: absolute;
}
.video-inline__label {
  background: rgba(var(--rgb-black), 0.35);
  display: grid;
  height: 100%;
  position: relative;
  z-index: 1;
}
.video-inline__label div {
  color: var(--color-white);
  align-items: center;
  display: flex;
  margin: -0.05em 0.3875em 0 0.3875em;
}
.video-inline__label div span {
  align-items: end;
  display: inline-flex;
  height: 1em;
  justify-content: center;
  pointer-events: none;
  width: 0.9125em;
}
.video-inline__label div span svg {
  height: 0.7625em;
  width: 0.7625em;
}
@media (hover: hover) {
  .video-inline {
    outline: 0.05em solid rgba(0, 0, 0, 0);
    outline-offset: 0.1em;
    transition:
      outline-color var(--transition-slow),
      outline-offset var(--transition-slow);
  }
  .video-inline .video-inline__loop video {
    transition: transform var(--transition-slow);
    will-change: transform;
  }
  .video-inline .video-inline__label {
    transition: background var(--transition);
    color: inherit;
  }
  .video-inline:focus,
  .video-inline:hover {
    color: var(--color-white);
    outline-color: var(--color-black);
    outline-offset: 0.05em;
  }
  .video-inline:focus .video-inline__loop video,
  .video-inline:hover .video-inline__loop video {
    transform: scale(1.15);
  }
  .video-inline:focus .video-inline__label,
  .video-inline:hover .video-inline__label {
    background: rgba(var(--rgb-black), 0.45);
  }
}
@media (min-width: 48em) {
  .video-inline {
    position: absolute;
    top: 50%;
    transform: translate(0.4375em, -0.7875em);
  }
}
.video {
  display: grid;
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}
.video__container {
  border-radius: 0.2em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  display: grid;
  margin-inline: auto;
  overflow: hidden;
  position: relative;
  width: min(100%, 35em);
}
.video button {
  cursor: pointer;
  display: grid;
  inset: 0;
  place-items: center;
  position: absolute;
}
.video button:before,
.video button:after {
  content: "";
  pointer-events: none;
  position: absolute;
}
.video button:before {
  background: linear-gradient(
    180deg,
    rgba(var(--rgb-black), 0.6) 0,
    rgba(var(--rgb-black), 0.15) 80%
  );
  display: none;
  inset: 0;
  transition: opacity var(--transition-slow);
}
.video button:after {
  background: url(../images/general/icon-video.svg) center center / 0.8em auto no-repeat
    var(--color-white);
  border-radius: 100%;
  box-shadow:
    0 0.2em 0.8em -0.4em rgba(var(--rgb-black), 0.05),
    0 0.3em 0.9em -0.5em rgba(var(--rgb-black), 0.15),
    0 0.4em 1em -0.6em rgba(var(--rgb-black), 0.25),
    0 0.5em 1.1em -0.7em rgba(var(--rgb-black), 0.35),
    0 0.6em 1.2em -0.8em rgba(var(--rgb-black), 0.45);
  height: 2.2em;
  width: 2.2em;
}
.video--full-width {
  margin-left: 0;
  margin-right: 0;
}
.video--full-width .video__container {
  margin-inline: initial;
  width: 100%;
}
.video--overlay button:before {
  display: block;
}
.video--playing button {
  display: none;
}
@media (hover: hover) {
  .video button:before {
    transition: opacity var(--transition);
  }
  .video button:after {
    transition: transform var(--transition);
    will-change: transform;
  }
  .video button:hover:before {
    opacity: 0.9;
  }
  .video button:hover:after {
    transform: scale(1.03);
  }
}
@media (min-width: 64em) {
  .video {
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }
  .video--full-width {
    margin-left: 0;
    margin-right: 0;
  }
}
.visual {
  display: grid;
  gap: var(--space-large);
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}
.visual__column {
  display: grid;
  gap: var(--space-large);
}
.visual__aside {
  display: grid;
  gap: 0.7em;
  margin-top: -0.9em;
}
.visual__aside p {
  font-size: var(--font-size-xxx-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.3em;
  margin-top: -0.575em;
}
.visual__button {
  color: var(--color-black);
  cursor: zoom-in;
  display: grid;
  font-weight: 400;
  place-items: center;
  position: relative;
  text-decoration: none;
}
.visual__figure {
  display: grid;
  gap: var(--space-medium);
  grid-area: 1 / 1;
  position: relative;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  z-index: 1;
}
.visual__figure img {
  border-radius: 0.2em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05);
  overflow: hidden;
}
.visual__figure span {
  background: var(--color-yellow);
  color: var(--color-black);
  font-family: "Sharpie", Sans-Serif;
  font-size: var(--font-size-xx-small);
  font-variant-ligatures: none;
  font-weight: 400;
  left: 0;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.3em 0.5em 0.4em 0.5em;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  transform: rotate(-2deg) translate(-0.7625em, -0.875em);
  white-space: nowrap;
}
.visual__play {
  background: url(../images/general/icon-play.svg) center center / 0.8em auto no-repeat
    var(--color-black);
  border-radius: 100%;
  grid-area: 1 / 1;
  height: 1.8em;
  opacity: 0;
  pointer-events: none;
  position: relative;
  transform: scale(0.85);
  width: 1.8em;
  will-change: transform;
  z-index: 2;
}
.visual__play--visible {
  opacity: 1;
  transform: scale(1);
}
@media (hover: hover) {
  .visual .visual__button .visual__figure img {
    outline: 0.1em solid rgba(0, 0, 0, 0);
    outline-offset: 0.24em;
    transition:
      outline-color var(--transition-slow),
      outline-offset var(--transition-slow);
  }
  .visual .visual__button .visual__play {
    transition:
      opacity var(--transition-slow),
      transform var(--transition-slow);
  }
  .visual .visual__button:focus .visual__figure img,
  .visual .visual__button:hover .visual__figure img {
    outline-color: var(--color-black);
    outline-offset: 0.12em;
  }
  .visual .visual__button:focus .visual__play,
  .visual .visual__button:hover .visual__play {
    opacity: 1;
    transform: scale(1);
  }
  .visual .visual__button:focus .visual__play--visible,
  .visual .visual__button:hover .visual__play--visible {
    transform: scale(1.1);
  }
}
@media (min-width: 48em) {
  .visual {
    gap: var(--space-neutral);
    grid-template-columns: repeat(12, 1fr);
  }
  .visual__column {
    align-content: start;
    gap: var(--space-neutral);
    grid-column: 1 / -1;
  }
  .visual__column--end {
    align-content: end;
  }
  .visual__column--flex {
    display: flex;
  }
  .visual__column--grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .visual__column--1 {
    grid-column: span 1;
  }
  .visual__column--2 {
    grid-column: span 2;
  }
  .visual__column--3 {
    grid-column: span 3;
  }
  .visual__column--4 {
    grid-column: span 4;
  }
  .visual__column--5 {
    grid-column: span 5;
  }
  .visual__column--6 {
    grid-column: span 6;
  }
  .visual__column--7 {
    grid-column: span 7;
  }
  .visual__column--8 {
    grid-column: span 8;
  }
  .visual__column--9 {
    grid-column: span 9;
  }
  .visual__column--10 {
    grid-column: span 10;
  }
  .visual__column--11 {
    grid-column: span 11;
  }
  .visual__aside {
    grid-column: 1 / -1;
    margin-top: 0;
  }
}
@media (min-width: 64em) {
  .visual {
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }
}
.visual--pwa {
  margin-left: 0;
  margin-right: 0;
  width: min(100%, 17em);
}
.visual--walkthrough .visual__column {
  margin-inline: auto;
  width: min(100%, 35em);
}
.visual--walkthrough .visual__play {
  opacity: 1;
  transform: scale(1.3);
}
@media (hover: hover) {
  .visual--walkthrough .visual__button:focus .visual__play,
  .visual--walkthrough .visual__button:hover .visual__play {
    transform: scale(1.4);
  }
}
.yes-label {
  background: var(--color-yellow);
  color: var(--color-black);
  font-family: "Sharpie", Sans-Serif;
  font-size: 105%;
  font-variant-ligatures: none;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.15em 0.35em 0.25em 0.35em;
  position: absolute;
  text-transform: uppercase;
  transform: rotate(-4deg) translate(0.275em, -0.175em);
}
.yes {
  display: grid;
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}
.yes ul {
  display: grid;
  gap: 0.8em;
  margin-top: -0.125em;
}
.yes ul li {
  font-size: var(--font-size-xx-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.325em;
  margin-top: -0.35em;
  padding-left: 1.65em;
  position: relative;
}
.yes ul li:before {
  align-items: center;
  background: url(../images/general/icon-checkmark.svg) center center / 0.55em auto no-repeat
    var(--color-green);
  border-radius: 100%;
  content: "";
  display: flex;
  height: 1.175em;
  justify-content: center;
  left: 0;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  top: 0.1em;
  width: 1.175em;
}
@media (min-width: 64em) {
  .yes {
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }
  .yes ul li:after {
    background: var(--color-yellow);
    color: var(--color-black);
    content: "YES!";
    display: inline-block;
    font-family: "Sharpie", Sans-Serif;
    font-size: var(--font-size-small);
    font-variant-ligatures: none;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1;
    margin-left: 0.4em;
    padding: 0.3em 0.425em 0.35em 0.5em;
    pointer-events: none;
    text-transform: uppercase;
    vertical-align: top;
  }
  .yes ul li:nth-child(odd):after {
    transform: rotate(-3.5deg) translateY(-0.05em);
  }
  .yes ul li:nth-child(even):after {
    transform: rotate(3.5deg) translateY(0.15em);
  }
}