@font-face {
  font-display: swap;
  font-family: 'Graphik';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/graphik/Graphik-Regular-Web-baae6413a81bd87d4dfe66428211a800bf7967560443b20a8d51e7ffda8e5d7c.woff2) format("woff2"), url(/assets/graphik/Graphik-Regular-Web-41b9a98a8ddf7943538faf4f3a80c5db9f5003f4199e0115cfed9159d8236929.woff) format("woff"); }
@font-face {
  font-display: swap;
  font-family: 'Graphik';
  font-style: italic;
  font-weight: 400;
  src: url(/assets/graphik/Graphik-RegularItalic-Web-0056c337e64b8799415fae7ea81a5d455ad18d628b2fa3fdead06cd33283ef67.woff2) format("woff2"), url(/assets/graphik/Graphik-RegularItalic-Web-4121e3d9aaf9929e381d9ff257884fc289b96068f1fd1a9aeab64466136f27f2.woff) format("woff"); }
@font-face {
  font-display: swap;
  font-family: 'Graphik';
  font-style: normal;
  font-weight: 500;
  src: url(/assets/graphik/Graphik-Medium-Web-82e581c6849a9fe22a3112745941670a8a0f03ddffeaf578b6692925bcc0e4ca.woff2) format("woff2"), url(/assets/graphik/Graphik-Medium-Web-a2baa3c48bb6bfae32c21fa94efe70762420adc4050aad35680441d91cfe29ba.woff) format("woff"); }
@font-face {
  font-display: swap;
  font-family: 'Graphik';
  font-style: italic;
  font-weight: 500;
  src: url(/assets/graphik/Graphik-MediumItalic-Web-90f1ef27afb92c3d6fa96ad15dd8a73954a77e624ac80c42cd50a7cc66fb20d8.woff2) format("woff2"), url(/assets/graphik/Graphik-MediumItalic-Web-144af1ae21217e0329a5ab3b800f8d376d16ed6bc8193b7067f716b485f8e647.woff) format("woff"); }
@font-face {
  font-display: swap;
  font-family: 'Graphik';
  font-style: normal;
  font-weight: 600;
  src: url(/assets/graphik/Graphik-Semibold-Web-234badd8e3315235e514ef002fbec07b3a441c200f94c8ea85404374613f47e7.woff2) format("woff2"), url(/assets/graphik/Graphik-Semibold-Web-19ea7351ecbf5bcbab40deab3577eca080cc58f05ef55a1758a5a1e6ad200529.woff) format("woff"); }
@font-face {
  font-display: swap;
  font-family: 'Graphik';
  font-style: italic;
  font-weight: 600;
  src: url(/assets/graphik/Graphik-SemiboldItalic-Web-f0522a378a7559fe7f3ca9091a6fe8bcbbe6a61ddefe909c3e9852470d565db4.woff2) format("woff2"), url(/assets/graphik/Graphik-SemiboldItalic-Web-f2264e920c31b330fe30c8394af69e10ac323ba77c6c7cbfdb8ae980c8877bfc.woff) format("woff"); }
@font-face {
  font-display: swap;
  font-family: 'Graphik';
  font-style: normal;
  font-weight: 700;
  src: url(/assets/graphik/Graphik-Bold-Web-0a0c48f57159d0417681ef3bd32d266c474dda9717f094e842405fe09d95655e.woff2) format("woff2"), url(/assets/graphik/Graphik-Bold-Web-a205a8f65a8bf3a8919340e1339ab228049d2f6ec160809a9089619ab9e25d69.woff) format("woff"); }
@font-face {
  font-display: swap;
  font-family: 'Graphik';
  font-style: italic;
  font-weight: 700;
  src: url(/assets/graphik/Graphik-BoldItalic-Web-c61aaa644ab1d414b444d3f988f3676c331e8726dc1b8f3a501074027a8403c6.woff2) format("woff2"), url(/assets/graphik/Graphik-BoldItalic-Web-0f0c4ad2ec3116ff083b2fbfb5a452e5fb81276efe92efaca3781a29a4a310b8.woff) format("woff"); }
@font-face {
  font-display: swap;
  font-family: 'Graphik';
  font-style: normal;
  font-weight: 800;
  src: url(/assets/graphik/Graphik-Black-Web-555e433ffb0c63f8551a7dccb41585ce04d1da1b5714bb367ee86386750d5f48.woff2) format("woff2"), url(/assets/graphik/Graphik-Black-Web-3ef37bfbf773568d1f75c9615775037ee73a9722fa1af6e619938cf372a80415.woff) format("woff"); }
@font-face {
  font-display: swap;
  font-family: 'Graphik';
  font-style: italic;
  font-weight: 800;
  src: url(/assets/graphik/Graphik-BlackItalic-Web-e1283bc332c24d29551f20025b9485b02d39bb272984d5eb4892b31fe5845d12.woff2) format("woff2"), url(/assets/graphik/Graphik-BlackItalic-Web-eea1d96dbb36923f1d4f7564db1e20558601dd7f92b10e8a9d8f2d130c63b344.woff) format("woff"); }
@font-face {
  font-display: swap;
  font-family: 'Tiempos';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/tiempos/TiemposTextWeb-Regular-6d5e77064bdadfa0da01beb1ef4bab6aa9b5f42a3a48a517f299751a8109fb0d.woff2) format("woff2"), url(/assets/tiempos/TiemposTextWeb-Regular-9691a0ce70943bf274a29326d3656c5bb5a808dbcfffba6579fa04defea77b30.woff) format("woff"); }
@font-face {
  font-display: swap;
  font-family: 'Tiempos';
  font-style: italic;
  font-weight: 400;
  src: url(/assets/tiempos/TiemposTextWeb-RegularItalic-67578565dc9eaefe5579515eb15602b0f1cf26938d02baab2bbfac07572c2938.woff2) format("woff2"), url(/assets/tiempos/TiemposTextWeb-RegularItalic-1396e181969b40541f1fcc8b81488859e02ecaebb872f72281b52256dbb76872.woff) format("woff"); }
@font-face {
  font-display: swap;
  font-family: 'Tiempos';
  font-style: normal;
  font-weight: 700;
  src: url(/assets/tiempos/TiemposTextWeb-Bold-c2e19dbb0d588a0dae94cee7bab0de4892ba052aee92b82d71f46afa38f85af5.woff2) format("woff2"), url(/assets/tiempos/TiemposTextWeb-Bold-20e34d09111b23eeb1d86cc2ab547f3b6abebc8377684f4e57aa4e21c80c3aa2.woff) format("woff"); }
@font-face {
  font-display: swap;
  font-family: 'Tiempos';
  font-style: italic;
  font-weight: 700;
  src: url(/assets/tiempos/TiemposTextWeb-BoldItalic-abe9b6adbea6fa3fa816ac500701987a362bfe8260e851d82efdd96aabed5a16.woff2) format("woff2"), url(/assets/tiempos/TiemposTextWeb-BoldItalic-78c4d2e63df641b0d3ce16ee7a8bdd8161c49fb657253c1dcd4f7dc5791ce7fb.woff) format("woff"); }
@font-face {
  font-display: swap;
  font-family: 'Plot Holes';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/plotholes/PlotHolesBB-Regular-605619e84b9a70cd19be8d00af2db40ce3d6c3a66968713999f8d39decbc8e70.woff2) format("woff2"), url(/assets/plotholes/PlotHolesBB-Regular-082226f115ebe25f9e35b00ef08a90ba5e26044f4baa972d7d5293d0e70e8cdc.woff) format("woff"); }
@font-face {
  font-display: swap;
  font-family: 'Plot Holes';
  font-style: italic;
  font-weight: 400;
  src: url(/assets/plotholes/PlotHolesBB-Italic-56f98e899396c0e137b5a1aadd3904680de660ad7ed15150a2a237a0a6f96f26.woff2) format("woff2"), url(/assets/plotholes/PlotHolesBB-Italic-636556553a3ebd2ba2f32134514697d2620a187ff687feb40d80c8d6c1d31a7a.woff) format("woff"); }
@font-face {
  font-display: swap;
  font-family: 'Plot Holes';
  font-style: normal;
  font-weight: 700;
  src: url(/assets/plotholes/PlotHolesBB-Bold-669b49db814c45f565fb046450a6baade74441a94050032f0a09c5b99b274681.woff2) format("woff2"), url(/assets/plotholes/PlotHolesBB-Bold-b75d42a1e2a5ecbb26f8e78ce10c071f20a950b6893d76624453ae00682b28f9.woff) format("woff"); }
@font-face {
  font-display: swap;
  font-family: 'Plot Holes';
  font-style: italic;
  font-weight: 700;
  src: url(/assets/plotholes/PlotHolesBB-BoldItalic-3338e0a7d963b732434ae308602cee805ff8ba6f2c9bcec55c8a8147d8972882.woff2) format("woff2"), url(/assets/plotholes/PlotHolesBB-BoldItalic-4ae8d27ae38df32ca680b20d73ad69cd78b35efd4a1b0d684aad32fca968ec9c.woff) format("woff"); }
*, *::before, *::after {
  box-sizing: border-box; }

html, body, 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: transparent;
  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-app: 255, 252, 249;
  --rgb-black: 29, 45, 53;
  --rgb-black-dark: 0, 0, 0;
  --rgb-black-light: 39, 55, 63;
  --rgb-blue: 30, 100, 230;
  --rgb-blue-dark: 10, 80, 210;
  --rgb-blurple: 85, 34, 250;
  --rgb-brass: 216, 198, 166;
  --rgb-eggshell: 252, 244, 242;
  --rgb-eggshell-dark: 242, 234, 232;
  --rgb-eggshell-darker: 235, 227, 225;
  --rgb-green: 38, 136, 41;
  --rgb-green-dark: 18, 116, 21;
  --rgb-grey: 142, 150, 154;
  --rgb-grey-dark: 69, 85, 93;
  --rgb-grey-light: 233, 234, 235;
  --rgb-orange: 255, 125, 15;
  --rgb-orange-dark: 240, 110, 0;
  --rgb-pink: 255, 92, 122;
  --rgb-pink-dark: 235, 72, 102;
  --rgb-purple: 88, 86, 214;
  --rgb-purple-dark: 68, 66, 194;
  --rgb-red: 245, 25, 45;
  --rgb-red-dark: 225, 5, 25;
  --rgb-red-light: 255, 55, 75;
  --rgb-sunny: 255, 205, 5;
  --rgb-teal: 40, 177, 204;
  --rgb-teal-dark: 20, 157, 184;
  --rgb-yellow: 255, 226, 0;
  --rgb-yellow-light: 255, 255, 225;
  --rgb-warm-1: 255, 247, 239;
  --rgb-warm-2: 245, 237, 229;
  --rgb-warm-3: 235, 227, 219;
  --rgb-warm-4: 225, 217, 209;
  --rgb-white: 255, 255, 255;
  --rgb-tool-chat: 40, 177, 204;
  --rgb-tool-card-table: 255, 162, 55;
  --rgb-tool-docs-and-files: 255, 204, 0;
  --rgb-tool-message-board: 27, 106, 201;
  --rgb-tool-mission-control: 27, 106, 201;
  --rgb-tool-schedule: 255, 45, 85;
  --rgb-tool-to-dos: 60, 179, 113;
  --color-app: rgb(var(--rgb-app));
  --color-black: rgb(var(--rgb-black));
  --color-black-dark: rgb(var(--rgb-black-dark));
  --color-black-light: rgb(var(--rgb-black-light));
  --color-blue: rgb(var(--rgb-blue));
  --color-blue-dark: rgb(var(--rgb-blue-dark));
  --color-blurple: rgb(var(--rgb-blurple));
  --color-brass: rgb(var(--rgb-brass));
  --color-eggshell: rgb(var(--rgb-eggshell));
  --color-eggshell-dark: rgb(var(--rgb-eggshell-dark));
  --color-eggshell-darker: rgb(var(--rgb-eggshell-darker));
  --color-green: rgb(var(--rgb-green));
  --color-green-dark: rgb(var(--rgb-green-dark));
  --color-grey: rgb(var(--rgb-grey));
  --color-grey-dark: rgb(var(--rgb-grey-dark));
  --color-grey-light: rgb(var(--rgb-grey-light));
  --color-orange: rgb(var(--rgb-orange));
  --color-orange-dark: rgb(var(--rgb-orange-dark));
  --color-pink: rgb(var(--rgb-pink));
  --color-pink-dark: rgb(var(--rgb-pink-dark));
  --color-purple: rgb(var(--rgb-purple));
  --color-purple-dark: rgb(var(--rgb-purple-dark));
  --color-red: rgb(var(--rgb-red));
  --color-red-dark: rgb(var(--rgb-red-dark));
  --color-red-light: rgb(var(--rgb-red-light));
  --color-sunny: rgb(var(--rgb-sunny));
  --color-teal: rgb(var(--rgb-teal));
  --color-teal-dark: rgb(var(--rgb-teal-dark));
  --color-yellow: rgb(var(--rgb-yellow));
  --color-yellow-light: rgb(var(--rgb-yellow-light));
  --color-warm-1: rgb(var(--rgb-warm-1));
  --color-warm-2: rgb(var(--rgb-warm-2));
  --color-warm-3: rgb(var(--rgb-warm-3));
  --color-warm-4: rgb(var(--rgb-warm-4));
  --color-white: rgb(var(--rgb-white));
  --color-tool-chat: rgb(var(--rgb-tool-chat));
  --color-tool-card-table: rgb(var(--rgb-tool-card-table));
  --color-tool-docs-and-files: rgb(var(--rgb-tool-docs-and-files));
  --color-tool-message-board: rgb(var(--rgb-tool-message-board));
  --color-tool-mission-control: rgb(var(--rgb-tool-mission-control));
  --color-tool-schedule: rgb(var(--rgb-tool-schedule));
  --color-tool-to-dos: rgb(var(--rgb-tool-to-dos));
  --space-neutral: 1.4em;
  --space-xxx-small: 0.2em;
  --space-xx-small: 0.4em;
  --space-x-small: 0.6em;
  --space-small: 0.8em;
  --space-medium: 1em;
  --space-large: 2em;
  --space-x-large: 3em;
  --space-xx-large: 4em;
  --space-xxx-large: 5em;
  --font-family: 'Graphik', Sans-Serif;
  --font-size-base: clamp(1.3rem, 1.9vw, 1.7rem);
  --font-size-xxx-small: 45%;
  --font-size-xx-small: 55%;
  --font-size-x-small: 62%;
  --font-size-small: 80%;
  --font-size-medium: 100%;
  --font-size-large: 125%;
  --font-size-x-large: 160%;
  --font-size-xx-large: 200%;
  --font-size-xxx-large: 260%;
  --max-width-xxx-small: 35rem;
  --max-width-xx-small: 45rem;
  --max-width-x-small: 54rem;
  --max-width-small: 65rem;
  --max-width-medium: 90rem;
  --max-width-large: 100rem;
  --transition: 0.1s cubic-bezier(0.33, 1, 0.68, 1);
  --transition-slow: 0.2s cubic-bezier(0.33, 1, 0.68, 1);
  --transition-x-slow: 0.3s cubic-bezier(0.33, 1, 0.68, 1); }
html {
  background: var(--color-white);
  font-size: 16px;
  overflow-x: hidden;
  scroll-behavior: smooth; }
  html.has-sticky {
    overflow-x: initial; }

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-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-synthesis: none;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.4;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(var(--rgb-black), 0);
  -webkit-text-size-adjust: 100%; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700; }
  h1 a,
  h2 a,
  h3 a,
  h4 a,
  h5 a,
  h6 a {
    font-weight: inherit;
    text-decoration-thickness: 0.1em; }

h1 {
  font-size: var(--font-size-xx-large);
  letter-spacing: -0.03em;
  line-height: 1.1; }

h2 {
  font-size: var(--font-size-x-large);
  letter-spacing: -0.03em;
  line-height: 1.1; }

h3 {
  font-size: var(--font-size-large);
  letter-spacing: -0.03em;
  line-height: 1.2; }

h4 {
  font-size: var(--font-size-medium);
  line-height: 1.2; }

h5 {
  font-size: var(--font-size-medium);
  line-height: 1.2; }

h6 {
  font-size: var(--font-size-medium);
  line-height: 1.2; }

ol,
ul {
  padding-left: 2ch; }
  ol li + li,
  ul li + li {
    margin-top: var(--flow-space, 0.3em); }
  ol ol,
  ol ul,
  ul ol,
  ul ul {
    margin-top: var(--flow-space, 0.3em); }
  ol ul,
  ul ul {
    list-style: circle; }

ol {
  list-style: decimal; }

ul {
  list-style: disc; }

dl dt {
  font-weight: 700; }

a {
  color: var(--color-blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.06em;
  transition: color var(--transition); }
  a:hover, a:focus {
    color: var(--color-black); }

hr {
  --flow-space: 0;
  align-items: center;
  display: flex;
  height: calc(var(--space-x-large) * 2); }
  hr + * {
    --flow-space: 0; }
  hr:before {
    background: var(--color-eggshell-dark);
    border-radius: 3px;
    content: '';
    height: 3px;
    width: 7em; }

u {
  background: url(/assets/new/underline-bab0e2c4eb33516c5e26526da5d7cba72d9282773536deb8332b4dd6f160e30c.svg) bottom center/100% 0.15em no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding-bottom: 0.1em;
  text-decoration: none; }

mark {
  background: url(/assets/new/mark-bottom-cb8b720f1c9f14423226caf08a1a385532b71ea5bc38cf295322bf5aea7065f3.svg) bottom center/97% 78% no-repeat, url(/assets/new/mark-top-76e8ffca77ad525896436827d1efbf6cef9a1e9bc0edeb1a7a94daf192e0484d.svg) top left/96% 100% no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: var(--color-black); }

b,
strong {
  font-weight: 700; }

i,
em {
  font-style: italic; }

img,
source,
video {
  height: auto;
  max-width: 100%;
  width: 100%; }

video::cue {
  font-family: var(--font-family);
  font-feature-settings: 'liga', 'ss05';
  font-size: var(--font-size-small);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1; }

button,
input,
select,
textarea {
  color: var(--color-black);
  font-family: var(--font-family);
  font-feature-settings: 'liga', 'ss05';
  font-size: var(--font-size-base);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.4; }

table {
  border: 1px solid var(--color-grey-light);
  border-collapse: collapse;
  font-size: var(--font-size-x-small);
  letter-spacing: -0.02em;
  line-height: 1.3;
  table-layout: fixed;
  width: 100%; }
  table thead {
    background: rgba(var(--rgb-grey-light), 0.4); }
  table tbody tr:nth-of-type(even) {
    background: rgba(var(--rgb-grey-light), 0.2); }
  table th,
  table td {
    border: 1px solid var(--color-grey-light);
    padding: 0.7em 0.95em; }
  table th {
    font-weight: 700; }

@media (min-width: 64em) {
  h1 {
    font-size: var(--font-size-xxx-large);
    line-height: 1; }

  h2 {
    font-size: var(--font-size-xx-large); }

  h3 {
    font-size: var(--font-size-x-large); }

  h4 {
    font-size: var(--font-size-large);
    letter-spacing: -0.025em;
    line-height: 1.1; }

  h5 {
    font-size: var(--font-size-large);
    letter-spacing: -0.025em; }

  table {
    font-size: var(--font-size-small); }
    table thead tr {
      text-align: center; }
    table th {
      vertical-align: middle; } }
.site {
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative; }
  .site--jlmdmj {
    background: var(--color-black-dark);
    flex: 1;
    min-height: auto; }
.article {
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
  position: relative; }
  .article__hero {
    margin-inline: auto;
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    width: min(100%, 80rem); }
    .article__hero img {
      border-radius: 0.4rem;
      overflow: hidden; }
  .article__body {
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    text-align: left;
    width: min(100%, var(--max-width-x-small)); }
  .article__content {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-small);
    line-height: 1.5; }
    .article__content h1 + *,
    .article__content h2 + * {
      --flow-space: 0.7em; }
    .article__content h3 + *,
    .article__content h4 + *,
    .article__content h5 + *,
    .article__content h6 + * {
      --flow-space: 0.6em; }
    .article__content b,
    .article__content strong {
      font-weight: 600; }
    .article__content blockquote:not(.well) {
      border-left: 3px solid var(--color-grey-light);
      color: rgba(var(--rgb-black), 0.7);
      display: flex;
      flex-direction: column;
      font-style: italic;
      gap: 0.4em;
      margin-left: 1em;
      padding-left: 1em; }
    .article__content blockquote.well {
      background-color: var(--color-eggshell);
      padding: 1em 1.5em;
      border-radius: 0.2em; }
      .article__content blockquote.well.green {
        background-color: #e3f7e4; }
    .article__content > * + * {
      margin-top: var(--flow-space, 1em); }
  .article__anchors {
    display: flex; }
    .article__anchors dl {
      display: flex;
      flex-direction: column;
      font-weight: 700;
      gap: 0.3em;
      line-height: 1.4; }
      .article__anchors dl dd {
        display: flex;
        gap: 0.5em;
        position: relative; }
        .article__anchors dl dd:before {
          color: var(--color-grey);
          content: '#';
          font-weight: 400; }
  .article__image, .article__video {
    --flow-space: 0;
    margin-bottom: 0.9em;
    margin-top: 2.4em; }
    .article__image figure, .article__video figure {
      display: flex;
      flex-direction: column; }
      .article__image figure img,
      .article__image figure video, .article__video figure img,
      .article__video figure video {
        border-radius: 0.2rem;
        overflow: hidden; }
      .article__image figure figcaption, .article__video figure figcaption {
        color: var(--color-grey);
        font-size: var(--font-size-small);
        letter-spacing: -0.02em;
        margin-bottom: -0.2em;
        margin-top: var(--space-small);
        text-align: center; }
    .article__image--border figure img, .article__image--border figure video, .article__video--border figure img, .article__video--border figure video {
      border: 1px solid rgba(var(--rgb-black), 0.1); }
  @media (min-width: 64em) {
    .article__hero {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
    .article__body {
      padding-left: 0;
      padding-right: 0; } }
.articles {
  display: flex;
  flex-direction: column;
  position: relative; }
  .articles__headline, .articles__articles, .articles__categories {
    margin-inline: auto;
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    width: min(100%, 80rem); }
  .articles__headline {
    display: flex; }
    .articles__headline header {
      flex: 1; }
  .articles__articles {
    display: grid;
    gap: 1.5em; }
  .articles__article {
    display: flex;
    flex-direction: column;
    text-align: left; }
    .articles__article__image {
      margin-bottom: 0.7em; }
      .articles__article__image a img {
        border-radius: 0.4rem;
        overflow: hidden; }
    .articles__article__content {
      display: flex;
      flex-direction: column; }
      .articles__article__content h6 {
        font-size: var(--font-size-xx-small);
        letter-spacing: -0.005em;
        line-height: 1;
        margin-bottom: 0.7em; }
        .articles__article__content h6 a {
          color: initial;
          font-weight: 500;
          text-decoration: none;
          transition: none; }
          .articles__article__content h6 a:hover, .articles__article__content h6 a:focus {
            color: var(--color-blue);
            text-decoration: underline;
            text-decoration-thickness: 0.1em; }
      .articles__article__content h3 {
        font-size: var(--font-size-medium);
        font-weight: 600;
        letter-spacing: -0.02em;
        line-height: 1.2; }
        .articles__article__content h3 a {
          text-decoration: underline;
          text-decoration-thickness: 0.1em; }
      .articles__article__content p {
        font-size: var(--font-size-small);
        font-weight: 400;
        letter-spacing: -0.02em;
        line-height: 1.3;
        margin-top: 0.5em; }
    .articles__article__meta {
      align-items: center;
      display: flex;
      gap: 0.3em;
      margin-top: 0.4em; }
      .articles__article__meta a img {
        border-radius: 100%;
        overflow: hidden;
        width: 1.6em; }
      .articles__article__meta ul {
        line-height: 1.3;
        list-style: none;
        padding: 0; }
        .articles__article__meta ul li {
          font-size: var(--font-size-xx-small);
          font-weight: 500;
          letter-spacing: -0.005em;
          margin: 0; }
          .articles__article__meta ul li a {
            color: initial;
            font-weight: 500;
            text-decoration: none;
            transition: none; }
            .articles__article__meta ul li a:hover, .articles__article__meta ul li a:focus {
              color: var(--color-blue);
              text-decoration: underline;
              text-decoration-thickness: 0.1em; }
          .articles__article__meta ul li time {
            color: var(--color-grey-dark);
            display: inline-flex;
            font-weight: 400;
            letter-spacing: -0.01em; }
  .articles__more {
    display: flex;
    justify-content: center; }
  .articles__categories {
    display: grid;
    gap: var(--space-medium); }
  .articles__category {
    background: rgba(var(--rgb-blue), 0.1);
    border-radius: 0.4rem;
    box-shadow: 0 0 0 2px rgba(var(--rgb-blue), 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.9em 1.2em;
    text-align: left;
    text-decoration: none;
    transition: background var(--transition), box-shadow var(--transition), color var(--transition); }
    .articles__category dl dt {
      font-size: var(--font-size-small);
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.2;
      text-decoration: underline;
      text-decoration-thickness: 0.1em; }
    .articles__category dl dd {
      color: initial;
      font-size: var(--font-size-x-small);
      font-weight: 400;
      letter-spacing: -0.02em;
      margin-top: 0.6em; }
    .articles__category p {
      color: initial;
      font-size: var(--font-size-x-small);
      font-weight: 500;
      letter-spacing: -0.02em;
      margin-top: 1.5em; }
    .articles__category:hover, .articles__category:focus {
      background: rgba(var(--rgb-blue), 0.15);
      box-shadow: 0 0 0 2px rgba(var(--rgb-blue), 0.25); }
  .articles--related {
    gap: 1.5em; }
    .articles--related .articles__headline header {
      border-bottom: 3px solid var(--color-eggshell-dark);
      padding-bottom: 0.6em;
      text-align: left; }
  @media (min-width: 48em) {
    .articles__articles {
      grid-template-columns: repeat(4, 1fr); }
    .articles__article {
      grid-column: span 2; }
      .articles__article--featured {
        grid-column: span 4; }
    .articles__categories {
      grid-template-columns: repeat(4, 1fr); }
    .articles__category {
      grid-column: span 2; } }
  @media (min-width: 64em) {
    .articles__headline, .articles__articles, .articles__categories {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
    .articles--flow .articles__headline,
    .articles--flow .articles__articles,
    .articles--flow .articles__categories {
      width: min(100%, var(--max-width-medium)); }
    .articles--flow .articles__articles {
      grid-template-columns: repeat(6, 1fr); }
    .articles--flow .articles__article__content h3 {
      font-size: var(--font-size-small); }
    .articles--flow .articles__article__content p {
      font-size: 70%; }
    .articles--flow .articles__article:last-child:nth-child(3n-1) {
      grid-column-end: -2; }
    .articles--flow .articles__article:last-child:nth-child(3n-2) {
      grid-column-end: 5; }
    .articles--flow .articles__article:nth-last-child(2):nth-child(3n+1) {
      grid-column-end: 4; }
    .articles--flow .articles__categories {
      grid-template-columns: repeat(8, 1fr); } }
.badges {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  justify-content: center;
  list-style: none;
  padding: 0; }
  .badges .badge {
    display: flex;
    justify-content: center;
    margin: 0; }
    .badges .badge a {
      background-color: var(--color-black-dark);
      background-repeat: no-repeat;
      background-size: 1.3em 1.3em;
      border-radius: 0.2em;
      color: var(--color-white);
      display: inline-flex;
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.3em;
      max-width: 10em;
      overflow: hidden;
      padding: 0.55em 1em 0.65em 2.3em;
      text-decoration: none;
      transition: background var(--transition), transform var(--transition);
      white-space: nowrap;
      will-change: transform; }
      .badges .badge a:hover, .badges .badge a:focus {
        background-color: rgba(var(--rgb-black-dark), 0.85); }
      .badges .badge a:active {
        transform: scale(0.99) translateY(1px); }
    .badges .badge--mac a {
      background-image: url(/assets/new/badge-mac-9d75652c4c7f4d9c0be39501e78ce79b8e0f9564fa10336b61070312f4200f57.svg);
      background-position: 0.7em 0.45em;
      max-width: none; }
    .badges .badge--windows a {
      background-color: #04AAE8;
      background-image: url(/assets/new/badge-windows-f72c2e4c51e9dd29cdc6a7cd653d1f757feceae8a754c39b5272138103a1bfea.svg);
      background-position: 0.7em center;
      max-width: none; }
      .badges .badge--windows a:hover, .badges .badge--windows a:focus {
        background-color: rgba(4, 170, 232, 0.85); }
    .badges .badge--image a {
      padding: 0; }
  @media (min-width: 48em) {
    .badges {
      flex-direction: row; } }
.body {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  text-align: left;
  width: min(100%, var(--max-width-large)); }
  .body div {
    flex: 1;
    font-size: var(--font-size-small);
    margin-bottom: -0.265em; }
    .body div > * + * {
      margin-top: var(--flow-space, 1.4em); }
    .body div h2 {
      --flow-space: 0.5em;
      margin-top: -0.195em; }
      .body div h2 + p {
        --flow-space: 1em; }
  .body aside {
    background: var(--color-yellow-light);
    border: 2px solid var(--color-grey-light);
    border-radius: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: 1.3em 1.6em 1.4em 1.5em; }
    .body aside h3 {
      font-size: var(--font-size-medium);
      letter-spacing: -0.02em; }
    .body aside ul {
      font-size: var(--font-size-small);
      padding-left: 1.1em; }
      .body aside ul li a {
        letter-spacing: -0.03em; }
  @media (min-width: 48em) {
    .body {
      flex-direction: row; }
      .body aside h3 {
        font-size: var(--font-size-small); }
      .body aside ul {
        font-size: var(--font-size-x-small); } }
  @media (min-width: 64em) {
    .body {
      gap: var(--space-x-large);
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); } }
@charset "UTF-8";
.book-cover {
  border-radius: 0.2em 0 0 0.2em;
  position: relative;
  text-decoration: none;
  width: min(100%, 15em); }
  .book-cover img {
    border-radius: 0.15em 0 0 0.15em;
    box-shadow: 0 0 0.6em 0 rgba(var(--rgb-black), 0.2);
    position: relative;
    z-index: 2; }
  .book-cover:before, .book-cover:after {
    content: '';
    position: absolute;
    width: 100%; }
  .book-cover:before {
    background: var(--color-white);
    border: 3px solid var(--color-black);
    box-shadow: 0.2em 0.4em 0.6em 0 rgba(var(--rgb-black), 0.4);
    height: calc(100% - 14px);
    left: 7px;
    top: 7px;
    z-index: 1; }
  .book-cover:after {
    background: linear-gradient(to right, rgba(var(--rgb-white), 0.35) 0, rgba(var(--rgb-grey), 0) 4%, rgba(var(--rgb-white), 0) 8%);
    border-radius: 0.15em;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 3; }
  .book-cover--white:before {
    border-color: var(--color-white); }
  .book-cover--white:after {
    background: linear-gradient(to right, rgba(var(--rgb-black), 0.15) 0, rgba(var(--rgb-grey), 0) 4%, rgba(var(--rgb-black), 0) 8%); }
  @media (min-width: 64em) {
    .book-cover {
      width: min(100%, 13em); } }

.book-headline {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, 90rem); }
  .book-headline section {
    display: flex;
    flex-direction: column;
    gap: 0.7em; }
    .book-headline section header {
      display: flex;
      flex-direction: column;
      gap: 0.7em; }
      .book-headline section header h1,
      .book-headline section header h6 {
        line-height: 1; }
    .book-headline section article ul {
      font-size: var(--font-size-small);
      display: flex;
      flex-wrap: wrap;
      gap: 0.4em 0.8em;
      justify-content: center;
      letter-spacing: -0.02em;
      list-style: none;
      padding: 0; }
      .book-headline section article ul li {
        margin: 0; }
  @media (min-width: 48em) {
    .book-headline {
      flex-direction: row;
      gap: var(--space-large);
      text-align: left; }
      .book-headline section {
        flex: 1;
        gap: 0.8em; }
        .book-headline section header {
          gap: 0.8em; }
        .book-headline section article ul {
          justify-content: flex-start; } }
  @media (min-width: 64em) {
    .book-headline {
      gap: var(--space-x-large);
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); } }

.book-quotes {
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, 76rem); }
  .book-quotes p {
    font-size: 140%;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3; }
    .book-quotes p a {
      color: inherit;
      font-weight: inherit; }
      .book-quotes p a:hover, .book-quotes p a:focus {
        color: var(--color-blue); }
  .book-quotes blockquote {
    display: flex;
    flex-direction: column;
    gap: 0.4em; }
    .book-quotes blockquote q {
      font-size: 140%;
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.3; }
      .book-quotes blockquote q a {
        color: inherit;
        font-weight: inherit; }
        .book-quotes blockquote q a:hover, .book-quotes blockquote q a:focus {
          color: var(--color-blue); }
      .book-quotes blockquote q:before {
        content: '“'; }
      .book-quotes blockquote q:after {
        content: '”'; }
    .book-quotes blockquote cite {
      font-size: var(--font-size-small);
      font-style: italic;
      letter-spacing: -0.02em; }
      .book-quotes blockquote cite a {
        color: inherit;
        font-weight: inherit; }
        .book-quotes blockquote cite a:hover, .book-quotes blockquote cite a:focus {
          color: var(--color-blue); }
      .book-quotes blockquote cite:before {
        content: '–';
        letter-spacing: normal; }
  .book-quotes--small {
    width: min(100%, 72rem); }
    .book-quotes--small blockquote {
      gap: 0.5em;
      text-align: left; }
      .book-quotes--small blockquote q {
        font-size: 120%; }
      .book-quotes--small blockquote cite {
        font-size: 65%; }
  @media (min-width: 64em) {
    .book-quotes {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); } }

.book-illustrations {
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, 86rem); }
  .book-illustrations section {
    display: grid;
    gap: var(--space-small);
    justify-content: center; }
    .book-illustrations section figure {
      border-radius: 0.15em;
      box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.075), 0 10px 40px -20px rgba(var(--rgb-black), 0.25), 0 20px 60px -25px rgba(var(--rgb-black), 0.1), 0 20px 20px -30px rgba(var(--rgb-black), 0.15), 0 40px 30px -40px rgba(var(--rgb-black), 0.25);
      max-width: 24em;
      overflow: hidden; }
  @media (min-width: 48em) {
    .book-illustrations section {
      grid-template-columns: repeat(6, 1fr); }
      .book-illustrations section figure {
        grid-column: span 2; } }
  @media (min-width: 64em) {
    .book-illustrations {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); } }

.book-toc {
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, var(--max-width-large)); }
  .book-toc section {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2em;
    text-align: center; }
    .book-toc section dl {
      display: flex;
      flex-direction: column; }
      .book-toc section dl dt {
        font-size: 85%;
        letter-spacing: -0.02em;
        line-height: 1.2;
        margin-bottom: 0.2em; }
      .book-toc section dl dd {
        font-size: 65%;
        letter-spacing: -0.02em;
        line-height: 1.2;
        margin-top: 0.4em; }
  .book-toc--columns section {
    align-items: initial;
    column-width: 13em;
    column-gap: 1em;
    display: block;
    flex-direction: initial;
    gap: 0;
    margin-top: -2em; }
    .book-toc--columns section dl {
      display: inline-flex;
      margin-top: 2em;
      width: 100%; }
  @media (min-width: 48em) {
    .book-toc--links section {
      text-align: left; }
      .book-toc--links section dl {
        display: block;
        flex-direction: initial;
        width: 100%; }
        .book-toc--links section dl dt,
        .book-toc--links section dl dd {
          font-size: 80%;
          letter-spacing: -0.02em;
          line-height: 1.2;
          padding-bottom: 0.3em;
          padding-top: 0.3em;
          width: 50%; }
        .book-toc--links section dl dt {
          float: left;
          margin-bottom: 0;
          padding-right: 1.2em;
          text-align: right; }
        .book-toc--links section dl dd {
          border-left: 2px solid var(--color-eggshell-dark);
          clear: right;
          float: right;
          margin-top: 0;
          padding-left: 1.2em; } }
  @media (min-width: 64em) {
    .book-toc {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); } }

.book-other {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  padding-left: var(--space-large);
  padding-right: var(--space-large);
  position: relative;
  width: min(100%, 84rem); }
  .book-other section {
    display: grid;
    gap: var(--space-large);
    grid-template-columns: repeat(4, 1fr);
    max-width: 32em; }
    .book-other section a {
      align-items: center;
      display: flex;
      flex-direction: column;
      gap: 0.6em;
      grid-column: span 2; }
      .book-other section a header h6 {
        font-size: 90%;
        letter-spacing: -0.02em;
        line-height: 1.3; }
  @media (min-width: 64em) {
    .book-other {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
      .book-other section {
        grid-template-columns: repeat(8, 1fr);
        max-width: none; } }
.books {
  display: grid;
  gap: var(--space-x-large);
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, 80rem); }
  .books__book {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1.1em;
    text-decoration: none; }
    .books__book header {
      display: flex;
      flex-direction: column;
      font-size: var(--font-size-small);
      gap: 1em;
      letter-spacing: -0.02em; }
      .books__book header h3 {
        font-size: 200%;
        text-decoration: underline;
        text-decoration-thickness: 0.1em; }
        .books__book header h3 br {
          display: none; }
      .books__book header p {
        color: initial;
        font-weight: 400; }
  @media (min-width: 48em) {
    .books {
      grid-template-columns: repeat(4, 1fr); }
      .books__book {
        align-items: flex-start;
        grid-column: span 2;
        text-align: left; }
        .books__book--featured {
          align-items: center;
          flex-direction: row;
          gap: 2.5em;
          grid-column: span 4; }
          .books__book--featured header {
            flex: 1; } }
  @media (min-width: 64em) {
    .books {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
      .books__book header h3 br {
        display: inline; } }
@charset "UTF-8";
.callout {
  display: flex;
  justify-content: center;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, var(--max-width-medium)); }
  .callout__frame {
    align-items: center;
    background: var(--color-eggshell);
    border: 2px dashed var(--color-black);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
    padding: 1.5em;
    text-align: center; }
    .callout__frame blockquote {
      display: flex;
      flex-direction: column;
      gap: var(--space-x-small); }
      .callout__frame blockquote q {
        font-size: var(--font-size-small);
        letter-spacing: -0.02em; }
        .callout__frame blockquote q:before {
          content: '“'; }
        .callout__frame blockquote q:after {
          content: '”'; }
      .callout__frame blockquote cite {
        font-size: var(--font-size-x-small);
        font-style: italic;
        font-weight: 600;
        letter-spacing: -0.02em;
        line-height: 1.2; }
  .callout--underdog-challenge {
    width: auto;
    z-index: 1; }
    .callout--underdog-challenge .callout__frame {
      background: var(--color-white);
      border-radius: 0.8em;
      gap: 0.8em;
      padding: 1.5em; }
      .callout--underdog-challenge .callout__frame br {
        display: none; }
      .callout--underdog-challenge .callout__frame h3 {
        margin-top: -0.275em; }
      .callout--underdog-challenge .callout__frame p {
        margin-bottom: -0.275em; }
  @media (min-width: 48em) {
    .callout--underdog-challenge .callout__frame br {
      display: inline; } }
  @media (min-width: 64em) {
    .callout {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
      .callout__frame {
        padding: var(--space-x-large); }
        .callout__frame blockquote q {
          font-size: var(--font-size-large);
          letter-spacing: -0.03em; }
        .callout__frame blockquote cite {
          font-size: var(--font-size-small); }
      .callout--underdog-challenge .callout__frame {
        padding: 2.1em; }
        .callout--underdog-challenge .callout__frame h3 {
          margin-top: -0.26em; }
        .callout--underdog-challenge .callout__frame p {
          margin-bottom: -0.295em; } }
.carousel__container {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  margin: auto;
  position: relative;
  user-select: none;
  width: min(100%, 81rem); }
.carousel__item {
  display: flex; }
.carousel__testimonial {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  padding: 0 2.8em; }
.carousel__image {
  align-self: center;
  flex: 1 1 0;
  padding: 0 1.2em; }
  .carousel__image img {
    border-radius: 0.8em;
    box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.075), 0 10px 40px -20px rgba(var(--rgb-black), 0.25), 0 20px 60px -25px rgba(var(--rgb-black), 0.1), 0 20px 20px -30px rgba(var(--rgb-black), 0.15), 0 40px 30px -40px rgba(var(--rgb-black), 0.25);
    margin: auto;
    max-width: 8em; }
.carousel__content--left {
  align-self: center;
  flex: 3 1 0;
  text-align: left; }
.carousel__content--center {
  padding-left: 0;
  padding-right: 0;
  text-align: left; }
.carousel__content--left blockquote, .carousel__content--center blockquote {
  font-size: var(--font-size-medium);
  letter-spacing: -0.024em;
  line-height: 1.48em;
  padding-bottom: 0.8em; }
.carousel__content--left cite, .carousel__content--center cite {
  display: inline-block;
  font-size: var(--font-size-x-small);
  letter-spacing: -0.01em; }
.carousel__prev, .carousel__next {
  background-size: contain;
  cursor: pointer !important;
  height: 40px;
  margin-top: -22px;
  padding: 16px;
  position: absolute;
  top: 40%;
  width: 40px; }
.carousel__prev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M14 2L6 10l8 8' stroke='%23888888' stroke-width='1' fill='none' /%3E%3C/svg%3E");
  left: 0; }
.carousel__next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M6 2l8 8-8 8' stroke='%23888888' stroke-width='1' fill='none' /%3E%3C/svg%3E");
  right: 0; }
.carousel__dot {
  background-color: #cccccc;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  height: 10px;
  margin: 0 6px;
  transition: background-color 0.6s ease;
  vertical-align: top;
  width: 10px;
  z-index: 1; }
.carousel__active, .carousel__dot:hover {
  background-color: #888888; }
@media (min-width: 48em) {
  .carousel__testimonial {
    flex-direction: row; }
  .carousel__image img {
    max-width: 12em; }
  .carousel__content--center {
    flex: 1;
    padding-left: var(--space-x-large);
    padding-right: var(--space-x-large);
    text-align: center; } }
.checklist {
  display: flex;
  justify-content: center;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative; }
  .checklist dl {
    background: rgba(var(--rgb-blue), 0.1);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    padding: 1.5em;
    position: relative;
    text-align: left; }
    .checklist dl dt {
      background: linear-gradient(165deg, var(--color-green-dark) 0, var(--color-green) 100%);
      border-radius: 0.2rem;
      color: var(--color-white);
      font-size: var(--font-size-x-small);
      left: 0;
      letter-spacing: 0.01em;
      line-height: 1;
      padding: 0.45em 0.8em 0.5em 0.8em;
      position: absolute;
      text-transform: uppercase;
      top: 0;
      transform: translate(1.9em, -1em) rotate(-3deg);
      white-space: nowrap; }
    .checklist dl dd {
      background-image: url(/assets/new/icon-check-9d7dc87deb3febbb9bc43d0b384d97e8b4faafc56b6cbe0dd37813db41715427.svg);
      background-position: left 0.1em;
      background-repeat: no-repeat;
      background-size: 1.1em 1.1em;
      font-size: var(--font-size-small);
      font-weight: 700;
      line-height: 1.2;
      padding-left: 1.6em; }
      .checklist dl dd a {
        font-weight: inherit; }
  @media (min-width: 64em) {
    .checklist dl {
      padding: 1.8em; }
      .checklist dl dt {
        transform: translate(-1.4em, -0.6em) rotate(-4deg); } }
.classes {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-medium);
  margin-left: var(--space-x-large);
  margin-right: var(--space-x-large);
  position: relative; }
  .classes dl {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-top: 0.5em; }
    .classes dl dt {
      margin-bottom: 0.5em; }
.community {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  margin-inline: auto;
  position: relative;
  width: min(100%, var(--max-width-medium)); }
  .community__header {
    margin: auto;
    max-width: 32em; }
  .community__text {
    margin-bottom: 0.8em; }
    .community__text--intro p {
      font-size: 110%; }
  .community__columns {
    display: flex;
    flex-direction: column;
    gap: 1.2em; }
  .community__column {
    display: flex;
    flex-direction: column;
    text-align: center; }
    .community__column--text-wide h2, .community__column--text-narrow h2 {
      margin-bottom: 0.4em; }
    .community__column--img-narrow {
      margin: auto;
      max-width: 14em; }
  .community__screens {
    align-content: flex-start;
    display: flex;
    flex-direction: row;
    gap: 1.2em;
    margin: auto;
    max-width: var(--max-width-small); }
    .community__screens picture {
      flex: 1; }
  .community__screen {
    border-radius: 0.2em;
    box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.05), 0 1px 0 0 rgba(var(--rgb-black), 0.05), 0 0.2em 1.6em -0.8em rgba(var(--rgb-black), 0.2), 0 0.4em 2.4em -1em rgba(var(--rgb-black), 0.3), 0 0.4em 0.8em -1.2em rgba(var(--rgb-black), 0.4), 0 0.8em 1.2em -1.6em rgba(var(--rgb-black), 0.5), 0 1.2em 1.6em -2em rgba(var(--rgb-black), 0.6);
    overflow: hidden; }
  .community--wide, .community--narrow {
    padding-left: var(--space-medium);
    padding-right: var(--space-medium); }
  .community--narrow h2 {
    margin-bottom: -0.2em; }
  @media (min-width: 48em) {
    .community__text {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
    .community__columns {
      align-items: center;
      flex-direction: row;
      justify-content: space-between; }
      .community__columns--reverse {
        flex-direction: row-reverse; }
    .community__column {
      text-align: left; }
      .community__column--text-wide, .community__column--img-wide {
        flex-basis: 55%; }
      .community__column--text-narrow, .community__column--img-narrow {
        flex-basis: 40%; }
      .community__column--img-narrow {
        margin: initial;
        max-width: none; }
    .community--wide {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
    .community--narrow {
      padding-left: var(--space-xxx-large);
      padding-right: var(--space-xxx-large); }
    .community__banner {
      padding-left: var(--space-medium);
      padding-right: var(--space-medium); } }
.cta {
  display: flex;
  justify-content: center;
  position: relative; }
  .cta--article {
    padding-bottom: var(--space-medium);
    padding-top: var(--space-medium); }
.custom {
  display: flex;
  flex-direction: column;
  position: relative; }
.data-signups {
  opacity: 0; }
  .data-signups--loaded {
    opacity: 1; }
.demo-tour {
  display: flex;
  flex-direction: column;
  gap: 1.4em;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, var(--max-width-large)); }
  .demo-tour__image {
    border-radius: 0.4rem;
    box-shadow: 0 1px 0 0 rgba(var(--rgb-black-dark), 0.05), 0 10px 40px -20px rgba(var(--rgb-black-dark), 0.25), 0 20px 60px -25px rgba(var(--rgb-black-dark), 0.2), 0 20px 20px -30px rgba(var(--rgb-black-dark), 0.15), 0 40px 30px -40px rgba(var(--rgb-black-dark), 0.25), 0 60px 40px -50px rgba(var(--rgb-black-dark), 0.3);
    display: flex;
    overflow: hidden;
    position: relative; }
    .demo-tour__image picture {
      display: block; }
      .demo-tour__image picture img {
        border-radius: 0.4rem;
        overflow: hidden; }
    .demo-tour__image a {
      align-items: center;
      border-radius: 0.4rem;
      display: flex;
      height: 100%;
      justify-content: center;
      left: 0;
      position: absolute;
      overflow: hidden;
      text-decoration: none;
      top: 0;
      width: 100%; }
      .demo-tour__image a:before {
        background: linear-gradient(180deg, rgba(var(--rgb-black-dark), 0.8) 0, rgba(var(--rgb-black-dark), 0.2) 80%);
        border-radius: 0.4rem;
        content: '';
        height: 100%;
        left: 0;
        overflow: hidden;
        pointer-events: none;
        position: absolute;
        top: 0;
        transition: opacity var(--transition-slow);
        width: 100%; }
      .demo-tour__image a span {
        background-color: var(--color-white);
        border-radius: 2.65em;
        box-shadow: 0 20px 30px -20px rgba(var(--rgb-black-dark), 0.3), 0 10px 20px -10px rgba(var(--rgb-black-dark), 0.5);
        color: var(--color-black);
        font-size: var(--font-size-small);
        font-weight: 600;
        letter-spacing: -0.02em;
        line-height: 1.3em;
        padding: 0.65em 1.15em 0.7em 1.15em;
        position: relative;
        transition: background-color var(--transition-slow), transform var(--transition-slow);
        will-change: transform; }
      .demo-tour__image a:focus:before, .demo-tour__image a:hover:before {
        opacity: 0.9; }
      .demo-tour__image a:focus span, .demo-tour__image a:hover span {
        transform: scale(1.03); }
  @media (min-width: 40em) {
    .demo-tour__image a span {
      border-radius: 2.95em;
      padding: 0.8em 1.3em 0.85em 1.3em; } }
  @media (min-width: 64em) {
    .demo-tour {
      padding-left: var(--space-large);
      padding-right: var(--space-large); } }
.demo {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: hidden; }
  .demo__header {
    background: var(--color-eggshell);
    border-bottom: 1px solid rgba(var(--rgb-black), 0.075);
    display: flex;
    justify-content: space-between; }
    .demo__header div {
      align-items: center;
      display: flex;
      flex-direction: column;
      gap: 0.6em;
      margin-inline: auto;
      padding: var(--space-medium);
      width: min(100%, var(--max-width-large)); }
      .demo__header div h1 {
        font-size: var(--font-size-base); }
  .demo__body {
    flex: 1; }
  @media (min-width: 48em) {
    .demo__header div {
      flex-direction: row;
      justify-content: space-between; } }
  @media (min-width: 64em) {
    .demo__header div {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); } }
.download {
  background: var(--color-blue);
  border-radius: 0.2em;
  box-shadow: 0 1px 0 0 rgba(var(--rgb-black), 0.1), 0 0.8em 1.6em -0.8em rgba(var(--rgb-black), 0.2), 0 1.2em 2em -1em rgba(var(--rgb-black), 0.3), 0 1.2em 1.6em -2em rgba(var(--rgb-black), 0.4), 0 1.6em 2em -2em rgba(var(--rgb-black), 0.5), 0 2em 2.4em -2.4em rgba(var(--rgb-black), 0.6);
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  overflow: hidden;
  text-decoration: none;
  transition: background var(--transition);
  width: min(100%, var(--max-width-small)); }
  .download p {
    color: var(--color-white);
    font-size: var(--font-size-small);
    letter-spacing: -0.02em;
    padding-bottom: 0.7em;
    padding-top: 0.6em; }
  .download:hover, .download:focus {
    background: var(--color-blue-dark); }
.educators-headline__spark {
  position: relative; }
  .educators-headline__spark:before, .educators-headline__spark:after {
    content: '';
    height: 100%;
    pointer-events: none;
    position: absolute;
    width: 100%; }
  .educators-headline__spark:before {
    background: url(/assets/educators/spark-2-ede64eecbf0cc1b05f35e8a5b3cd6d4f0a89b9fc3e40c90b3144c64435a5f826.svg) bottom left/100% 0.65em no-repeat;
    left: -51%;
    top: 20%; }
  .educators-headline__spark:after {
    background: url(/assets/educators/spark-3-cb83426520f5b82e30f3dc9e57d5a78c0effddb795a001eb8a7af58d1a5b0a78.svg) top right/100% 0.35em no-repeat;
    left: 51%;
    top: 15%; }
.educators-headline__underline {
  background: url(/assets/educators/underline-cbd3aaf90ad2e38d5108d1472725bbe132b76cdaeac4b39159447b357866dd5a.svg) bottom center/100% 0.6em no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding-bottom: 0.15em; }
@media (min-width: 64em) {
  .educators-headline header p {
    font-size: var(--font-size-large); } }

.educators-chalkboard {
  background: #274C43;
  margin-inline: auto;
  overflow: hidden;
  position: relative;
  width: min(100%, 90rem); }
  .educators-chalkboard:before {
    content: '';
    display: block;
    padding-top: 100%; }
  .educators-chalkboard__image {
    position: absolute;
    transform-origin: top left; }
  @media (min-width: 90rem) {
    .educators-chalkboard {
      border-radius: 1em; } }

.educators-cases {
  gap: 3.5em; }
  .educators-cases__case {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin-inline: auto;
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    position: relative;
    text-align: center;
    width: min(100%, var(--max-width-large)); }
    .educators-cases__case header,
    .educators-cases__case article {
      margin-inline: auto; }
    .educators-cases__case header {
      width: min(100%, 57rem); }
    .educators-cases__case article {
      width: min(100%, 66rem); }
    .educators-cases__case--line-1:before, .educators-cases__case--line-2:before, .educators-cases__case--line-3:before {
      background-position: center center;
      background-repeat: no-repeat;
      background-size: contain;
      content: '';
      height: 1em;
      left: calc(50% - 2em);
      position: absolute;
      top: -2.25em;
      width: 4em; }
    .educators-cases__case--line-1:before {
      background-image: url(/assets/educators/line-1-99ea49e092c94e8113b6043d4ad5120cfc0337c6347d2743ee37bf5830574750.svg); }
    .educators-cases__case--line-2:before {
      background-image: url(/assets/educators/line-2-f4e16aace5c830e9fb83e4de23a538ef199550014beb6c1d826eeb9ab7780cfb.svg); }
    .educators-cases__case--line-3:before {
      background-image: url(/assets/educators/line-3-1eea9f40fc36cfa9f9d1d15e135d9dce26c151adbd8fe8c02f7eedbd8dec0a72.svg); }
  @media (min-width: 64em) {
    .educators-cases__case {
      padding-left: var(--space-large);
      padding-right: var(--space-large); } }

.educators-pricing {
  display: flex;
  flex-direction: column;
  gap: var(--space-medium);
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  width: min(100%, var(--max-width-medium)); }
  .educators-pricing__price {
    background: var(--color-warm-2);
    border: 2px solid var(--color-warm-3);
    border-radius: 1em;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1.2em;
    margin-inline: auto;
    padding: 1.3em 1.5em 1.6em 1.5em;
    width: min(100%, 32rem); }
    .educators-pricing__price header {
      font-size: var(--font-size-small);
      letter-spacing: -0.02em; }
      .educators-pricing__price header p {
        margin-top: 0.3em; }
    .educators-pricing__price article {
      align-items: center;
      display: flex;
      flex-direction: column;
      gap: 1.2em;
      line-height: 1.2;
      margin-bottom: -0.15em;
      margin-top: -0.15em; }
      .educators-pricing__price article dl {
        display: flex;
        flex-direction: column; }
        .educators-pricing__price article dl dt {
          font-size: var(--font-size-small);
          letter-spacing: -0.02em; }
        .educators-pricing__price article dl dd {
          align-items: center;
          display: flex;
          flex-direction: column; }
          .educators-pricing__price article dl dd strong {
            font-size: var(--font-size-x-large);
            letter-spacing: -0.02em;
            position: relative; }
            .educators-pricing__price article dl dd strong sup {
              font-size: var(--font-size-xxx-small);
              letter-spacing: normal;
              position: absolute;
              right: 100%;
              top: 0.3em; }
          .educators-pricing__price article dl dd span {
            font-size: var(--font-size-x-small);
            font-weight: 500;
            letter-spacing: -0.02em; }
            .educators-pricing__price article dl dd span br {
              display: none; }
    .educators-pricing__price footer {
      font-size: var(--font-size-small);
      letter-spacing: -0.02em;
      line-height: 1.3; }
    .educators-pricing__price a.button {
      align-self: center;
      margin-top: 0.15em; }
    .educators-pricing__price--teachers article dl dd strong {
      position: relative; }
      .educators-pricing__price--teachers article dl dd strong:before {
        background: var(--color-red);
        content: '';
        height: 0.08em;
        left: -18%;
        position: absolute;
        top: 53%;
        transform: rotate(-5deg);
        width: 136%; }
  @media (min-width: 64em) {
    .educators-pricing {
      flex-direction: row; }
      .educators-pricing__price {
        align-items: center;
        justify-content: space-between;
        width: auto; }
        .educators-pricing__price header h3 {
          font-size: var(--font-size-x-large);
          line-height: 1.1; }
        .educators-pricing__price article {
          align-items: flex-start;
          flex: 1;
          flex-direction: row;
          gap: 2.5em;
          margin-bottom: -0.25em;
          margin-top: -0.15em; }
          .educators-pricing__price article dl {
            text-align: left; }
            .educators-pricing__price article dl dd {
              align-items: baseline;
              flex-direction: row;
              gap: 0.125em; }
              .educators-pricing__price article dl dd span {
                line-height: 1.2em;
                margin-bottom: -1.2em; }
                .educators-pricing__price article dl dd span br {
                  display: inline; }
        .educators-pricing__price--teachers header h3 {
          font-size: 200%;
          line-height: 1; }
        .educators-pricing__price--teachers article {
          align-items: center;
          font-size: var(--font-size-x-large);
          letter-spacing: -0.02em;
          margin-top: -0.3em; } }
.features {
  display: flex;
  flex-direction: column;
  gap: 1.4em;
  justify-content: center;
  position: relative; }
  .features__cards {
    display: grid;
    gap: var(--space-large) 1.5em;
    margin-inline: auto;
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    width: min(100%, 22em); }
  .features__card {
    display: flex;
    flex-direction: column;
    text-decoration: none; }
    .features__card picture {
      border-radius: 0.2rem;
      box-shadow: 0 0 0 2px var(--color-eggshell-dark);
      overflow: hidden;
      transition: box-shadow var(--transition), transform var(--transition-slow);
      will-change: transform; }
    .features__card dl dt {
      font-size: var(--font-size-small);
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.2;
      margin-top: 0.6em;
      text-decoration: underline;
      text-decoration-thickness: 0.1em; }
    .features__card dl dd {
      color: initial;
      font-size: var(--font-size-x-small);
      font-weight: 400;
      letter-spacing: -0.02em;
      margin-bottom: -0.3em;
      margin-top: 0.6em; }
    .features__card:hover picture, .features__card:focus picture {
      box-shadow: 0 0 0 3px var(--color-purple);
      transform: translateY(-3px); }
    .features__card--video picture {
      position: relative; }
      .features__card--video picture:after {
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        background-color: rgba(var(--rgb-white), 0.9);
        background-image: url(/assets/new/icon-play-3f56c02f4869d19ab7dc589171a387ad37f76bcc381479b8eed1af9859328365.svg);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 0.8em 0.8em;
        border-radius: 100%;
        box-shadow: 0 20px 30px -20px rgba(var(--rgb-black-dark), 0.3), 0 10px 20px -10px rgba(var(--rgb-black-dark), 0.5);
        content: '';
        height: 2em;
        left: calc(50% - 1em);
        position: absolute;
        top: calc(50% - 1em);
        width: 2em; }
  .features__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: var(--space-xx-large);
    position: relative; }
  .features__continue {
    margin: var(--space-large) var(--space-medium) 0 var(--space-medium); }
    .features__continue p {
      font-size: var(--font-size-small);
      font-weight: 700;
      letter-spacing: -0.02em; }
      .features__continue p a {
        font-weight: inherit;
        letter-spacing: -0.02em; }
  .features__control {
    display: none;
    position: fixed;
    top: calc(50% - 0.9em);
    z-index: 103; }
    .features__control a {
      background-color: var(--color-green);
      background-repeat: no-repeat;
      background-size: 0.5em 0.5em;
      display: flex;
      height: 1.8em;
      transition: background var(--transition), transform var(--transition);
      width: 1.4em;
      will-change: transform; }
      .features__control a:hover, .features__control a:focus {
        background-color: var(--color-green-dark); }
    .features__control--prev {
      left: 0; }
      .features__control--prev a {
        background-image: url(/assets/new/icon-prev-a22be544fd2e0c58ae289c0e8d9cdb2df5d2dd12e67be495f50fe59462e94f91.svg);
        background-position: 0.3em center;
        border-radius: 0 0.9em 0.9em 0; }
        .features__control--prev a:active {
          transform: scale(0.99) translateX(-0.05em); }
    .features__control--next {
      right: 0; }
      .features__control--next a {
        background-image: url(/assets/new/icon-next-2f7b1c093542b8076530197af4a7a510f3e3a18826e205fc77bcb0cfa2c1627f.svg);
        background-position: 0.6em center;
        border-radius: 0.9em 0 0 0.9em; }
        .features__control--next a:active {
          transform: scale(0.99) translateX(0.05em); }
  .features__more {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2; }
  @media (min-width: 48em) {
    .features__cards {
      grid-template-columns: repeat(4, 1fr);
      width: min(100%, var(--max-width-large)); }
    .features__card {
      grid-column: span 2; }
      .features__card:nth-last-child(1):nth-child(odd) {
        grid-column: 2 / span 2; } }
  @media (min-width: 64em) {
    .features__cards {
      grid-template-columns: repeat(6, 1fr);
      padding-left: var(--space-large);
      padding-right: var(--space-large); }
    .features__card:nth-last-child(1):nth-child(odd) {
      grid-column: span 2; }
    .features__card:last-child:nth-child(3n-1) {
      grid-column-end: -2; }
    .features__card:last-child:nth-child(3n-2) {
      grid-column-end: 5; }
    .features__card:nth-last-child(2):nth-child(3n+1) {
      grid-column-end: 4; }
    .features__content {
      padding-left: var(--space-medium);
      padding-right: var(--space-medium); }
    .features__continue {
      margin: var(--space-xx-large) var(--space-x-large) 0 var(--space-x-large); }
      .features__continue p {
        font-size: var(--font-size-base); }
    .features__control {
      display: block; } }
.footer {
  display: flex;
  flex-direction: column;
  position: relative; }
  .footer__recognition {
    padding-top: var(--space-xx-large); }
  .footer__newsletter {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-neutral);
    padding: var(--space-large) var(--space-medium) 0 var(--space-medium);
    text-align: center;
    width: 100%; }
    .footer__newsletter header {
      align-items: center;
      display: flex;
      flex-direction: column;
      width: min(100%, 32em); }
      .footer__newsletter header p {
        font-size: var(--font-size-small);
        letter-spacing: -0.02em;
        margin-bottom: -0.3em;
        margin-top: -0.34em; }
  .footer__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-large);
    margin-inline: auto;
    margin-top: -0.45em;
    padding: var(--space-xx-large) var(--space-medium);
    width: min(100%, var(--max-width-large)); }
  .footer__support {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
    text-align: center; }
    .footer__support dl dd {
      font-size: var(--font-size-small);
      letter-spacing: -0.02em;
      margin-top: 0.6em; }
      .footer__support dl dd a {
        letter-spacing: -0.03em; }
  .footer__hey {
    display: flex; }
    .footer__hey a {
      background: rgba(var(--rgb-blurple), 0.05);
      border-radius: 0.2rem;
      box-shadow: 0 0 0 2px rgba(var(--rgb-blurple), 0.1);
      color: var(--color-black);
      font-size: var(--font-size-xx-small);
      letter-spacing: -0.02em;
      line-height: 1.4em;
      padding: 0.7em 1em;
      text-decoration: none;
      transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
      will-change: transform; }
      .footer__hey a span {
        background-image: url(/assets/new/icon-hey-b7d8bcc0468e86b7e71977eff316f7ebdc58f41f2a0e6076a66f69cbeac12b70.svg);
        background-position: left center;
        background-repeat: no-repeat;
        background-size: 1.4em 1.4em;
        color: var(--color-blurple);
        display: inline-block;
        font-weight: 700;
        padding-left: 1.4em; }
      .footer__hey a:hover, .footer__hey a:focus {
        background: rgba(var(--rgb-blurple), 0.1);
        box-shadow: 0 0 0 2px rgba(var(--rgb-blurple), 0.2); }
      .footer__hey a:active {
        transform: scale(0.99) translateY(1px); }
  .footer__options {
    display: grid;
    gap: var(--space-large) var(--space-medium);
    grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr)); }
    .footer__options dl {
      font-size: var(--font-size-small);
      letter-spacing: -0.02em; }
      .footer__options dl dd {
        margin-top: 0.4em; }
        .footer__options dl dd a {
          letter-spacing: -0.03em; }
  .footer__signup {
    bottom: 0;
    height: var(--space-xx-large);
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    width: 100%;
    z-index: 103; }
    .footer__signup div {
      align-items: center;
      display: flex;
      height: 100%;
      justify-content: flex-end;
      margin-inline: auto;
      padding-left: var(--space-medium);
      padding-right: var(--space-medium);
      transform: translateY(100%);
      transition: transform var(--transition-slow);
      width: min(100%, var(--max-width-large)); }
      .footer__signup div a {
        pointer-events: auto; }
    .footer__signup--absolute {
      position: absolute; }
    .footer__signup--peekaboo div {
      transform: translateY(0); }
  @media (min-width: 64em) {
    .footer__newsletter, .footer__content {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
    .footer__content {
      flex-direction: row;
      justify-content: space-between; }
    .footer__support {
      align-items: flex-start;
      flex: 1;
      gap: var(--space-neutral);
      max-width: 17em;
      text-align: left;
      width: auto; }
      .footer__support dl dt {
        font-size: var(--font-size-small);
        letter-spacing: -0.02em; }
      .footer__support dl dd {
        font-size: var(--font-size-x-small);
        letter-spacing: -0.02em; }
    .footer__hey a {
      padding: 0.8em 1.1em; }
    .footer__options {
      display: flex;
      gap: var(--space-large); }
      .footer__options dl {
        font-size: var(--font-size-x-small);
        letter-spacing: -0.02em; }
        .footer__options dl dt {
          line-height: 2em; } }
.header {
  display: flex;
  flex-direction: column;
  position: relative; }
  .header__notification {
    background: var(--color-black-dark);
    color: var(--color-white);
    display: block;
    font-weight: 400;
    justify-content: center;
    padding: var(--space-x-small);
    position: relative;
    text-align: center;
    text-decoration: none; }
    .header__notification p {
      font-size: var(--font-size-x-small);
      letter-spacing: -0.02em; }
      .header__notification p strong {
        display: inline-block;
        text-transform: uppercase; }
    .header__notification:hover, .header__notification:focus {
      color: var(--color-white); }
      .header__notification:hover strong, .header__notification:focus strong {
        text-decoration: underline; }
  .header__container {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2.3em;
    margin-inline: auto;
    padding: var(--space-medium) var(--space-medium) var(--space-large) var(--space-medium);
    position: relative;
    width: min(100%, var(--max-width-large)); }
  .header__logo {
    align-items: center;
    display: flex;
    gap: 0.275em;
    height: 1.485em;
    position: relative;
    text-decoration: none; }
    .header__logo figure {
      display: flex;
      height: 1.485em; }
      .header__logo figure svg {
        height: 100%;
        max-height: 100%;
        overflow: visible;
        width: auto; }
        .header__logo figure svg .card {
          opacity: 0;
          transform: translateX(0.4em) rotate(8deg);
          transition: all var(--transition); }
          .header__logo figure svg .card--back {
            transition-delay: 0.1s; }
    .header__logo strong {
      color: var(--color-black);
      font-weight: 600;
      letter-spacing: -0.025em;
      line-height: 1.485em; }
    .header__logo:hover figure svg .card, .header__logo:focus figure svg .card {
      opacity: 1;
      transform: translateX(0) rotate(0deg); }
      .header__logo:hover figure svg .card--front, .header__logo:focus figure svg .card--front {
        opacity: 0.7; }
  .header__tagline {
    background: linear-gradient(165deg, var(--color-orange) 0, var(--color-sunny) 100%);
    border-radius: 0.2rem;
    color: var(--color-white);
    font-size: var(--font-size-x-small);
    font-weight: 700;
    left: 50%;
    letter-spacing: 0.01em;
    line-height: 1;
    padding: 0.45em 0.8em 0.5em 0.8em;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 2.9em;
    transform: translateX(-50%) rotate(-1.6deg);
    white-space: nowrap; }
    .header__tagline--stars span {
      background-image: url(/assets/new/tagline-2044f59af4b54b41873bffcf29c2abf18a4e552e76ffcc4361783748a1b5b1e8.svg);
      background-position: left center;
      background-repeat: no-repeat;
      background-size: 4.5em 0.9em;
      padding-left: 4.7em; }
  .header__options {
    align-items: center;
    display: flex;
    gap: 0.5em;
    justify-content: center;
    list-style: none;
    padding: 0; }
    .header__options li {
      margin: 0; }
      .header__options li a {
        display: block; }
  .header__back {
    display: flex;
    justify-content: center;
    pointer-events: none; }
    .header__back a {
      pointer-events: auto; }
  .header--jlmdmj .header__container {
    padding-bottom: var(--space-xxx-large);
    padding-top: var(--space-x-large); }
  .header--jlmdmj .header__logo strong {
    color: var(--color-white); }
  .header--jlmdmj .header__tagline {
    background: rgba(var(--rgb-black), 0.7);
    color: var(--color-white);
    left: 50%;
    top: 3.3em;
    transform: translateX(-50%) rotate(-2.3deg); }
  @media (min-width: 33.5em) {
    .header__container {
      align-items: flex-start;
      flex-direction: row;
      gap: 0;
      justify-content: space-between;
      padding-bottom: var(--space-x-large); }
    .header__tagline {
      left: -0.9em;
      top: 3.5em;
      transform: rotate(-1.5deg);
      transform-origin: left bottom; }
    .header--jlmdmj .header__container {
      justify-content: center; }
    .header--jlmdmj .header__tagline {
      left: 50%;
      min-width: auto;
      top: 3.3em;
      transform: translateX(-50%) rotate(-2.3deg);
      transform-origin: initial; } }
  @media (min-width: 64em) {
    .header__container {
      padding: var(--space-large) var(--space-x-large) var(--space-xx-large) var(--space-x-large); }
    .header__tagline {
      left: -1.45em;
      top: 3.3em;
      transform: rotate(-2.3deg); }
    .header__options {
      gap: 0.8em; }
    .header--jlmdmj .header__tagline {
      left: 50%;
      top: 3.3em;
      transform: translateX(-50%) rotate(-2.3deg); } }
.headline {
  display: flex;
  flex-direction: column;
  gap: 1.4em;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  text-align: center;
  width: min(100%, var(--max-width-large)); }
  .headline picture {
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    width: min(100%, 75rem); }
  .headline figure,
  .headline header,
  .headline article {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1.4em;
    margin-inline: auto;
    width: min(100%, var(--max-width-small)); }
  .headline figure {
    margin-bottom: 0.4em; }
    .headline figure img {
      margin-inline: auto;
      width: min(100%, var(--max-width-xx-small)); }
  .headline header h1 {
    margin-bottom: -0.115em;
    margin-top: -0.17em; }
  .headline header h2 {
    margin-bottom: -0.11em;
    margin-top: -0.175em; }
  .headline header h3 {
    margin-bottom: -0.16em;
    margin-top: -0.215em; }
  .headline header h4 {
    margin-bottom: -0.175em;
    margin-top: -0.19em; }
  .headline header h5 {
    margin-bottom: -0.195em;
    margin-top: -0.25em; }
  .headline header h6 {
    font-size: 90%;
    margin-bottom: -0.21em;
    margin-top: -0.235em; }
  .headline header br {
    display: none; }
  .headline header blockquote {
    display: flex;
    flex-direction: column;
    gap: 0.3em; }
    .headline header blockquote q {
      font-size: var(--font-size-x-large);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.2; }
    .headline header blockquote cite {
      font-size: var(--font-size-small);
      font-style: italic;
      font-weight: 600;
      letter-spacing: -0.02em; }
  .headline article br {
    display: none; }
  .headline article p {
    margin-bottom: -0.29em;
    margin-top: -0.35em; }
  .headline article strong a {
    font-weight: inherit; }
  .headline article form {
    align-items: center;
    background: var(--color-white);
    border: 2px solid var(--color-black);
    border-radius: 2.4em;
    display: flex;
    gap: 0.2em;
    padding: 0.2em;
    position: relative;
    text-align: left;
    width: min(100%, 20em); }
    .headline article form input {
      appearance: none;
      border: none;
      color: var(--color-black);
      flex: 1;
      font-size: var(--font-size-small);
      letter-spacing: -0.02em;
      line-height: 2em;
      padding-left: 0.9em;
      vertical-align: middle; }
      .headline article form input::placeholder {
        color: rgba(var(--rgb-black), 0.5); }
    .headline article form button {
      padding: 0.75em 1.3em 0.8em 1.3em; }
  .headline article blockquote {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    gap: 0.8em; }
    .headline article blockquote q span {
      background: linear-gradient(90deg, rgba(var(--rgb-yellow), 0) 0, rgba(var(--rgb-yellow), 0.75) 5%, rgba(var(--rgb-yellow), 0.25) 95%, rgba(var(--rgb-yellow), 0) 100%);
      border-radius: 0.1rem;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone; }
    .headline article blockquote cite {
      font-size: var(--font-size-small);
      font-style: italic;
      letter-spacing: -0.02em; }
      .headline article blockquote cite span {
        font-weight: 400; }
  .headline__meta {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-inline: auto;
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    width: min(100%, var(--max-width-x-small)); }
    .headline__meta div {
      align-items: center;
      display: flex;
      gap: 0.3em;
      width: 100%; }
      .headline__meta div a img {
        border-radius: 100%;
        overflow: hidden;
        width: 1.6em; }
      .headline__meta div ul {
        line-height: 1.3;
        list-style: none;
        padding: 0;
        text-align: left; }
        .headline__meta div ul li {
          display: flex;
          font-size: var(--font-size-xx-small);
          font-weight: 500;
          gap: 0.5em;
          letter-spacing: -0.005em;
          margin: 0; }
          .headline__meta div ul li a {
            color: initial;
            font-weight: 500;
            text-decoration: none;
            transition: none; }
            .headline__meta div ul li a:hover, .headline__meta div ul li a:focus {
              color: var(--color-blue);
              text-decoration: underline;
              text-decoration-thickness: 0.1em; }
          .headline__meta div ul li time {
            color: var(--color-grey-dark);
            display: inline-flex;
            font-weight: 400;
            letter-spacing: -0.01em; }
          .headline__meta div ul li span {
            color: rgba(var(--rgb-black), 0.25); }
    .headline__meta ol {
      display: flex;
      gap: 0.3em;
      list-style: none;
      padding: 0;
      width: 100%; }
      .headline__meta ol li {
        display: flex;
        margin: 0; }
        .headline__meta ol li a {
          align-items: center;
          background: var(--color-eggshell);
          border-radius: 100%;
          color: initial;
          display: flex;
          height: 1.6em;
          justify-content: center;
          text-decoration: none;
          transition: background var(--transition);
          width: 1.6em; }
          .headline__meta ol li a span {
            align-items: center;
            display: flex;
            height: 0.6em;
            justify-content: center;
            width: 0.6em; }
            .headline__meta ol li a span svg {
              height: 100%;
              max-height: 100%;
              overflow: visible;
              width: auto; }
              .headline__meta ol li a span svg path {
                fill: rgba(var(--rgb-black), 0.6);
                transition: fill var(--transition); }
          .headline__meta ol li a:hover, .headline__meta ol li a:focus {
            background: var(--color-eggshell-dark); }
            .headline__meta ol li a:hover span svg path, .headline__meta ol li a:focus span svg path {
              fill: var(--color-black); }
  .headline--align-left {
    text-align: left; }
    .headline--align-left figure,
    .headline--align-left header,
    .headline--align-left article {
      align-items: flex-start;
      width: min(100%, var(--max-width-large)); }
    .headline--align-left figure img {
      margin-inline: 0;
      max-width: var(--max-width-xx-small);
      width: auto; }
  .headline--header-small header {
    font-size: var(--font-size-small);
    letter-spacing: -0.02em; }
    .headline--header-small header h3 {
      margin-top: -0.195em; }
  .headline--header-wide {
    width: 100%; }
    .headline--header-wide header {
      width: min(100%, var(--max-width-large)); }
  .headline--article-narrow article {
    width: min(100%, var(--max-width-xx-small)); }
  .headline--article-small {
    gap: 1em; }
    .headline--article-small article {
      font-size: var(--font-size-small);
      letter-spacing: -0.02em; }
  .headline--article {
    gap: 1em;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
    width: 100%; }
    .headline--article header,
    .headline--article article {
      margin-inline: auto;
      padding-left: var(--space-medium);
      padding-right: var(--space-medium);
      width: min(100%, var(--max-width-x-small)); }
    .headline--article header {
      align-items: flex-start; }
      .headline--article header h1 {
        font-size: var(--font-size-x-large);
        line-height: 1.05; }
    .headline--article article {
      align-items: flex-start; }
  .headline--solid-yellow {
    background: var(--color-yellow);
    margin-inline: 0;
    padding: var(--space-x-large) 0;
    width: 100%; }
    .headline--solid-yellow figure,
    .headline--solid-yellow header,
    .headline--solid-yellow article {
      padding-left: var(--space-medium);
      padding-right: var(--space-medium); }
  .headline--collection header img {
    border-radius: 100%;
    margin-bottom: -0.7em;
    margin-top: -0.1em;
    overflow: hidden;
    width: 2.525em; }
  .headline--collection header h1 {
    font-size: var(--font-size-xx-large);
    line-height: 1; }
  .headline--collection header h3 a {
    color: initial;
    text-decoration: none;
    transition: none; }
    .headline--collection header h3 a:hover, .headline--collection header h3 a:focus {
      color: var(--color-blue);
      text-decoration: underline;
      text-decoration-thickness: 0.1em; }
  .headline--collection article {
    font-size: var(--font-size-small);
    letter-spacing: -0.02em;
    width: min(100%, var(--max-width-x-small)); }
    .headline--collection article a {
      font-weight: 400;
      text-decoration-thickness: from-font; }
  .headline--tools h1 {
    font-size: 195%; }
  .headline--vs figure {
    position: relative; }
    .headline--vs figure img {
      transform: rotate(-1.5deg);
      width: 23.5em; }
    .headline--vs figure figcaption {
      color: var(--color-green);
      font-size: var(--font-size-xx-large);
      font-weight: 700;
      left: 50%;
      letter-spacing: -0.03em;
      line-height: 1.1;
      position: absolute;
      top: 50%;
      text-align: center;
      transform: translate(-50%, -50%) rotate(-7.5deg);
      width: 100%; }
      .headline--vs figure figcaption span {
        display: inline-block; }
  .headline--underdog-challenge header h1 span:after {
    content: '\a';
    white-space: pre; }
  @media (min-width: 30em) {
    .headline__meta {
      align-items: center;
      flex-direction: row;
      gap: initial;
      justify-content: space-between; }
      .headline__meta div,
      .headline__meta ol {
        width: auto; } }
  @media (min-width: 48em) {
    .headline--vs figure figcaption {
      font-size: var(--font-size-xxx-large); }
    .headline--underdog-challenge header h1 span:after {
      content: '';
      white-space: normal; } }
  @media (min-width: 64em) {
    .headline {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
      .headline header br,
      .headline article br {
        display: inline; }
      .headline__meta {
        padding-left: 0;
        padding-right: 0; }
      .headline--solid-yellow figure,
      .headline--solid-yellow header,
      .headline--solid-yellow article {
        padding-left: var(--space-x-large);
        padding-right: var(--space-x-large); }
      .headline--header-large header {
        font-size: var(--font-size-large); }
      .headline--header-x-large header {
        font-size: var(--font-size-x-large); }
      .headline--article header,
      .headline--article article {
        padding-left: 0;
        padding-right: 0; } }
.help {
  display: flex;
  justify-content: center;
  position: relative; }
  .help__cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-large);
    margin-inline: auto;
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    width: min(100%, 22em); }
  .help__card {
    display: flex;
    flex-direction: column;
    text-decoration: none; }
    .help__card h6 {
      margin-bottom: var(--space-x-small);
      text-decoration: underline;
      text-decoration-thickness: 0.1em;
      transition: color var(--transition), transform var(--transition-slow);
      will-change: transform; }
    .help__card figure {
      background: var(--color-white);
      border-radius: 0.2rem;
      box-shadow: 0 0 0 2px var(--color-eggshell-dark);
      overflow: hidden;
      transition: box-shadow var(--transition), transform var(--transition-slow);
      will-change: transform; }
    .help__card:hover h6,
    .help__card:hover figure, .help__card:focus h6,
    .help__card:focus figure {
      transform: translateY(-3px); }
    .help__card:hover figure, .help__card:focus figure {
      box-shadow: 0 0 0 3px var(--color-purple); }
  @media (min-width: 48em) {
    .help__cards {
      flex-direction: row;
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large);
      width: min(100%, var(--max-width-medium)); } }
.integrations {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative; }
  .integrations__category {
    display: flex;
    flex-direction: column;
    gap: var(--space-large);
    margin-inline: auto;
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    width: min(100%, var(--max-width-large)); }
    .integrations__category h3 a {
      color: inherit;
      font-weight: inherit;
      text-decoration: none; }
  .integrations__integrations {
    display: grid;
    gap: var(--space-large); }
    .integrations__integrations div a {
      align-items: flex-start;
      display: flex;
      gap: 0.5em;
      text-align: left;
      text-decoration: none; }
      .integrations__integrations div a figure {
        border-radius: 0.4rem;
        overflow: hidden;
        width: 2.2em; }
      .integrations__integrations div a dl {
        flex: 1; }
        .integrations__integrations div a dl dt {
          font-size: var(--font-size-small);
          letter-spacing: -0.02em;
          margin-bottom: 0.2em;
          text-decoration: underline;
          text-decoration-thickness: 0.1em; }
        .integrations__integrations div a dl dd {
          color: var(--color-black);
          font-size: var(--font-size-x-small);
          font-weight: 400;
          letter-spacing: -0.02em; }
  @media (min-width: 48em) {
    .integrations__integrations {
      grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 64em) {
    .integrations__category {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
    .integrations__integrations {
      grid-template-columns: repeat(3, 1fr); } }
.intro {
  background: var(--color-eggshell);
  display: flex;
  flex-direction: column;
  position: relative; }
  .intro article {
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
    margin-inline: auto;
    padding: 0 var(--space-medium) var(--space-large) var(--space-medium);
    text-align: left;
    width: min(100%, var(--max-width-large)); }
    .intro article p {
      font-size: var(--font-size-large);
      letter-spacing: -0.03em;
      margin-bottom: -0.3em;
      margin-top: -0.35em; }
      .intro article p strong {
        background: var(--color-white);
        border-radius: 0.2rem;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
        letter-spacing: -0.03em;
        margin-left: -0.2em;
        margin-right: -0.2em;
        padding-left: 0.2em;
        padding-right: 0.2em; }
      .intro article p span {
        display: inline-flex; }
  .intro--alt article {
    align-items: center;
    text-align: center; }
    .intro--alt article p strong {
      margin-left: 0;
      margin-right: 0; }
    .intro--alt article p br {
      display: none; }
  @media (min-width: 64em) {
    .intro article {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
      .intro article p {
        font-size: var(--font-size-x-large);
        letter-spacing: -0.03em; }
    .intro--alt article {
      gap: var(--space-large); }
      .intro--alt article p {
        font-size: var(--font-size-xx-large); }
        .intro--alt article p br {
          display: inline; } }
.jlmdmj {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2.8em;
  margin-bottom: 2em;
  position: relative; }
  .jlmdmj__header {
    display: flex;
    flex-direction: column;
    gap: 1.6em;
    margin-inline: auto;
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    position: relative;
    width: min(100%, var(--max-width-large)); }
  .jlmdmj__headline, .jlmdmj__tagline {
    color: var(--color-white);
    font-size: var(--font-size-xx-large);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: -0.115em;
    margin-top: -0.17em;
    text-align: center; }
  .jlmdmj__tagline span {
    display: inline-block; }
  .jlmdmj__body {
    display: flex;
    flex-direction: column;
    gap: 1.4em;
    margin-inline: auto;
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    position: relative;
    width: min(100%, var(--max-width-large)); }
  .jlmdmj__content {
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    gap: 1.4em;
    margin-inline: auto;
    text-align: left;
    width: min(100%, 44rem); }
    .jlmdmj__content h5 {
      letter-spacing: -0.015em; }
      .jlmdmj__content h5 br {
        display: none; }
    .jlmdmj__content p {
      color: #c7d7df;
      font-size: var(--font-size-small);
      letter-spacing: -0.01em;
      line-height: 1.4; }
      .jlmdmj__content p a {
        color: var(--color-white); }
        .jlmdmj__content p a:hover, .jlmdmj__content p a:focus {
          color: inherit; }
      .jlmdmj__content p strong {
        color: var(--color-white); }
    .jlmdmj__content div.webby {
      align-items: center;
      background: rgba(var(--rgb-black), 0.3);
      border: 2px dashed rgba(var(--rgb-white), 0.2);
      border-radius: 0.6rem;
      color: #c7d7df;
      display: flex;
      flex-direction: column;
      font-size: var(--font-size-small);
      gap: 0.6em;
      letter-spacing: -0.01em;
      line-height: 1.4;
      padding: 1.2em;
      text-align: center; }
      .jlmdmj__content div.webby picture {
        width: 4em; }
      .jlmdmj__content div.webby strong {
        color: var(--color-white); }
    .jlmdmj__content a.button {
      margin-top: 0.3em; }
    .jlmdmj__content--center {
      align-items: center;
      text-align: center;
      width: 100%; }
    .jlmdmj__content--wide {
      width: min(100%, 48rem); }
  .jlmdmj__images {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    margin-bottom: 0.05em;
    margin-inline: auto;
    margin-top: 0.4em;
    position: relative;
    width: min(100%, 75rem); }
    .jlmdmj__images section {
      display: flex;
      position: relative; }
      .jlmdmj__images section div {
        cursor: pointer;
        display: flex; }
        .jlmdmj__images section div picture {
          display: none; }
          .jlmdmj__images section div picture img {
            border-radius: 0.4rem;
            overflow: hidden; }
          .jlmdmj__images section div picture.selected {
            display: block; }
    .jlmdmj__images ul {
      display: flex;
      list-style: none;
      padding: 0; }
      .jlmdmj__images ul li {
        align-items: center;
        cursor: pointer;
        display: flex;
        height: 1em;
        justify-content: center;
        margin: 0;
        width: 1em; }
        .jlmdmj__images ul li:after {
          background: var(--color-grey-dark);
          border-radius: 100%;
          content: '';
          height: 0.4em;
          transition: background var(--transition);
          width: 0.4em; }
        .jlmdmj__images ul li:hover:after {
          background: var(--color-grey); }
        .jlmdmj__images ul li.selected:after {
          background: var(--color-white); }
  .jlmdmj__button {
    background-color: var(--color-white);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 0.375em 0.5em;
    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);
    transition: transform var(--transition-slow);
    width: 1.4em;
    will-change: transform;
    z-index: 1; }
    .jlmdmj__button:hover, .jlmdmj__button:focus {
      transform: scale(1.04); }
    .jlmdmj__button:active {
      transform: scale(0.99); }
    .jlmdmj__button--prev {
      background-image: url(/assets/new/icon-prev-black-fe6ecb171bfde90ac8ef9215a346b2f981be5071d9add28630b251b0b182a7f4.svg);
      left: -0.7em; }
    .jlmdmj__button--next {
      background-image: url(/assets/new/icon-next-black-f5004113dbb13701c0578389e50c5ba61ea732c6a188b7a91cd6fca34f90efcd.svg);
      right: -0.7em; }
  .jlmdmj__image {
    margin-bottom: 0.35em;
    margin-inline: auto;
    margin-top: 0.4em;
    width: min(100%, 75rem); }
    .jlmdmj__image picture {
      display: block; }
      .jlmdmj__image picture img {
        border-radius: 0.4rem;
        overflow: hidden; }
  .jlmdmj__grid {
    display: grid;
    gap: var(--space-medium);
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 0.35em;
    margin-top: 0.4em; }
    .jlmdmj__grid picture {
      display: block; }
      .jlmdmj__grid picture img {
        border-radius: 0.4rem;
        overflow: hidden; }
    .jlmdmj__grid video {
      border-radius: 0.4rem;
      display: block;
      overflow: hidden; }
  .jlmdmj__video {
    margin-bottom: 0.35em;
    margin-top: 0.4em; }
  .jlmdmj__marquee {
    --marquee-duration: 9s;
    --marquee-width: 12.9rem;
    align-items: center;
    align-self: center;
    display: flex;
    flex: 1;
    padding-bottom: var(--space-medium);
    padding-top: var(--space-medium);
    pointer-events: none;
    position: relative;
    user-select: none;
    width: min(102%, 190rem);
    z-index: 1; }
    .jlmdmj__marquee div {
      align-items: center;
      background: var(--color-white);
      display: flex;
      height: 1.7rem;
      overflow: hidden;
      position: relative;
      transform: rotate(-2.8deg);
      width: 100%; }
      .jlmdmj__marquee div span {
        animation: marquee_small var(--marquee-duration) linear infinite;
        color: var(--color-black-dark);
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: normal;
        line-height: 1rem;
        position: absolute;
        text-shadow: var(--marquee-width) 0 currentcolor, calc(var(--marquee-width) * 2) 0 currentcolor, calc(var(--marquee-width) * 3) 0 currentcolor, calc(var(--marquee-width) * 4) 0 currentcolor, calc(var(--marquee-width) * 5) 0 currentcolor, calc(var(--marquee-width) * 6) 0 currentcolor, calc(var(--marquee-width) * 7) 0 currentcolor, calc(var(--marquee-width) * 8) 0 currentcolor, calc(var(--marquee-width) * 9) 0 currentcolor, calc(var(--marquee-width) * 10) 0 currentcolor, calc(var(--marquee-width) * 11) 0 currentcolor, calc(var(--marquee-width) * 12) 0 currentcolor;
        white-space: nowrap;
        width: var(--marquee-width); }
    .jlmdmj__marquee--uo {
      position: absolute;
      top: 50%;
      transform: translateY(-50%); }
      .jlmdmj__marquee--uo div {
        background: var(--color-yellow);
        box-shadow: 0 0.3rem 0 0 rgba(var(--rgb-black), 0.1);
        transform: rotate(-5deg); }
  @media (min-width: 48em) {
    .jlmdmj__content div.webby {
      flex-direction: row;
      gap: 0.8em;
      text-align: left; }
      .jlmdmj__content div.webby picture {
        width: 6.5em; } }
  @media (min-width: 64em) {
    .jlmdmj__headline, .jlmdmj__tagline {
      font-size: var(--font-size-xxx-large);
      line-height: 1; }
    .jlmdmj__headline span {
      display: inline-block; }
    .jlmdmj__body {
      padding-left: var(--space-large);
      padding-right: var(--space-large); }
    .jlmdmj__content h5 br {
      display: inline; }
    .jlmdmj__content div.webby {
      margin-left: -1.6em;
      margin-right: -1.6em; }
    .jlmdmj__grid {
      gap: 1.4em; }
    .jlmdmj__marquee {
      --marquee-width: 17rem; }
      .jlmdmj__marquee div {
        height: 2.3rem; }
        .jlmdmj__marquee div span {
          animation: marquee_large var(--marquee-duration) linear infinite;
          font-size: 1.3rem;
          line-height: 1.3rem; } }
@keyframes marquee_small {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }
@keyframes marquee_large {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }
.landing-driver {
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, 42em); }
  .landing-driver__image {
    display: none; }
    .landing-driver__image--border figure img {
      background-color: var(--color-white);
      border-radius: 0.2rem;
      box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.075), 0 10px 40px -20px rgba(var(--rgb-black), 0.25), 0 20px 60px -25px rgba(var(--rgb-black), 0.2), 0 20px 20px -30px rgba(var(--rgb-black), 0.15), 0 40px 30px -40px rgba(var(--rgb-black), 0.25);
      overflow: hidden; }
  .landing-driver__content {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-small);
    gap: 0.5em;
    text-align: left; }
  @media (min-width: 48em) {
    .landing-driver {
      align-items: center;
      flex-direction: row;
      gap: 1.5em; }
      .landing-driver__image {
        display: inline-flex;
        width: 20%; }
      .landing-driver__content {
        flex: 1; } }
  @media (min-width: 64em) {
    .landing-driver {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); } }
.landing-feature {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, 42em); }
  .landing-feature__image {
    order: 1; }
    .landing-feature__image--border figure {
      position: relative; }
      .landing-feature__image--border figure img {
        background-color: var(--color-app);
        border-radius: 0.2rem;
        box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.05), 0 10px 40px -20px rgba(var(--rgb-black), 0.25), 0 20px 60px -25px rgba(var(--rgb-black), 0.2), 0 20px 20px -30px rgba(var(--rgb-black), 0.15), 0 40px 30px -40px rgba(var(--rgb-black), 0.25);
        overflow: hidden; }
  .landing-feature__content {
    font-size: var(--font-size-small);
    letter-spacing: -0.02em;
    order: 2;
    text-align: left; }
    .landing-feature__content > * + * {
      margin-top: var(--flow-space, 1em); }
    .landing-feature__content video {
      background: var(--color-white);
      border-radius: 0.2rem;
      box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.05), 0 10px 40px -20px rgba(var(--rgb-black), 0.25), 0 20px 60px -25px rgba(var(--rgb-black), 0.2), 0 20px 20px -30px rgba(var(--rgb-black), 0.15), 0 40px 30px -40px rgba(var(--rgb-black), 0.25);
      padding: 1em 0.2em; }
  .landing-feature--hero {
    gap: var(--space-medium); }
  @media (min-width: 48em) {
    .landing-feature {
      align-items: center;
      flex-direction: row; }
      .landing-feature__image, .landing-feature__content {
        flex: 1; }
      .landing-feature--right .landing-feature__image {
        order: 2; }
      .landing-feature--right .landing-feature__content {
        order: 1; }
      .landing-feature--hero {
        gap: 1.5em;
        width: min(100%, 93rem); }
        .landing-feature--hero .landing-feature__image {
          flex: 9; }
        .landing-feature--hero .landing-feature__content {
          flex: 4;
          font-size: var(--font-size-base); } }
  @media (min-width: 64em) {
    .landing-feature {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); } }
.landing-grid {
  display: grid;
  gap: var(--space-large);
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, 42em); }
  .landing-grid__item {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-small);
    gap: 0.5em;
    text-align: left; }
  @media (min-width: 48em) {
    .landing-grid {
      grid-template-columns: repeat(4, 1fr); }
      .landing-grid__item {
        grid-column: span 2; } }
  @media (min-width: 64em) {
    .landing-grid {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); } }
.landing-image {
  align-self: center;
  display: flex;
  justify-content: center;
  max-width: 58rem;
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative; }
  .landing-image figure {
    position: relative; }
    .landing-image figure img {
      background-color: var(--color-white);
      border: 1rem solid var(--color-white);
      border-radius: 0.2rem;
      box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.05), 0 0 10px 0 rgba(var(--rgb-black), 0.05);
      overflow: hidden; }
  .landing-image:before {
    background: var(--color-white);
    border-radius: 0.2rem;
    box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.05), 0 -15px 10px -10px rgba(var(--rgb-black), 0.05);
    content: '';
    height: 100%;
    position: absolute;
    top: -0.4em;
    width: calc(100% - 0.8em); }
  .landing-image:after {
    background: linear-gradient(to bottom, rgba(var(--rgb-white), 0) 0%, rgba(var(--rgb-white), 1) 75%);
    bottom: -20px;
    content: '';
    height: 8em;
    left: -2em;
    position: absolute;
    right: -2em; }
  .landing-image--app figure img {
    border-color: var(--color-app); }
  .landing-image--app:before {
    background: var(--color-app); }
  .landing-image--devices, .landing-image--full {
    max-width: none; }
    .landing-image--devices figure, .landing-image--full figure {
      margin-inline: auto;
      width: min(100%, 70rem); }
      .landing-image--devices figure img, .landing-image--full figure img {
        background-color: transparent;
        border: none;
        border-radius: initial;
        box-shadow: none;
        overflow: visible; }
    .landing-image--devices:before, .landing-image--devices:after, .landing-image--full:before, .landing-image--full:after {
      display: none; }
  .landing-image--devices figure {
    width: min(100%, 60rem); }
  @media (min-width: 64em) {
    .landing-image {
      margin-left: var(--space-x-large);
      margin-right: var(--space-x-large); } }
.learn {
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, var(--max-width-medium)); }
  .learn__video {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100%; }
  .learn__continue {
    display: none;
    gap: var(--space-medium);
    justify-content: space-between; }
    .learn__continue a {
      align-items: center;
      display: flex;
      font-weight: 700;
      gap: 0.25em;
      line-height: 1.2;
      padding-bottom: 0.25em;
      text-decoration: none; }
      .learn__continue a span {
        font-weight: inherit;
        text-decoration: underline;
        text-decoration-thickness: 0.1em;
        transition: color var(--transition); }
      .learn__continue a svg {
        height: 0.6em;
        max-height: 0.6em;
        overflow: visible;
        width: auto; }
        .learn__continue a svg path {
          transition: fill var(--transition); }
  .learn__chooser {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-medium);
    justify-content: center;
    width: 100%; }
    .learn__chooser a {
      display: flex;
      flex: 0 0 calc(50% - (var(--space-medium) / 2)); }
      .learn__chooser a picture {
        border-radius: 0.4rem;
        box-shadow: 0 0 0 0 transparent;
        overflow: hidden;
        transition: background var(--transition), box-shadow var(--transition), transform var(--transition-slow);
        will-change: transform; }
      .learn__chooser a:hover picture, .learn__chooser a:focus picture {
        background: var(--color-blue);
        box-shadow: 0 0 0 3px var(--color-blue);
        transform: translateY(-3px); }
      .learn__chooser a.selected picture {
        background: var(--color-blue);
        box-shadow: 0 0 0 3px var(--color-blue); }
      .learn__chooser a.selected:hover picture, .learn__chooser a.selected:focus picture {
        transform: none; }
  @media (min-width: 48em) {
    .learn__continue {
      display: flex; }
    .learn__chooser a {
      flex: 0 0 calc(33.33% - ((var(--space-medium) * 2) / 3)); } }
  @media (min-width: 64em) {
    .learn {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
      .learn__chooser a {
        flex: 0 0 calc(16.66% - ((var(--space-medium) * 5) / 6)); } }
.legal {
  background: var(--color-black-dark);
  display: flex;
  position: relative; }
  .legal dl {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-x-small);
    margin-inline: auto;
    padding: var(--space-x-small) var(--space-medium);
    text-align: center;
    width: min(100%, var(--max-width-large)); }
    .legal dl dt {
      color: var(--color-white);
      font-size: var(--font-size-x-small);
      font-weight: 400;
      letter-spacing: -0.02em;
      line-height: 1.6em; }
      .legal dl dt span {
        display: inline-flex; }
        .legal dl dt span a {
          background-image: url(/assets/new/icon-basecamp-453e0f836ee2bd663f0fb72402f92244bef7fc7bd2f8c0bb87e6913738c6c732.svg);
          background-position: left center;
          background-repeat: no-repeat;
          background-size: 1.6em 1.6em;
          padding-left: 1.8em;
          text-decoration: none; }
      .legal dl dt a {
        color: inherit; }
    .legal dl dd {
      font-size: var(--font-size-x-small);
      height: 1.6em; }
      .legal dl dd a svg {
        fill: var(--color-white);
        height: 100%;
        max-height: 100%;
        overflow: visible;
        width: auto; }
  @media (min-width: 48em) {
    .legal dl {
      flex-direction: row;
      gap: var(--space-medium);
      justify-content: space-between; }
      .legal dl dt {
        line-height: 1.8em; }
        .legal dl dt span a {
          background-size: 1.8em 1.8em;
          padding-left: 2.1em; }
        .legal dl dt br {
          display: none; }
      .legal dl dd {
        height: 1.8em; } }
  @media (min-width: 64em) {
    .legal dl {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); } }
@charset "UTF-8";
.letter {
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, var(--max-width-large)); }
  .letter article {
    background: var(--color-white);
    border-radius: 0.1rem;
    box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.05), 0 1px 0 0 rgba(var(--rgb-black), 0.05), 0 10px 40px -20px rgba(var(--rgb-black), 0.25), 0 20px 60px -25px rgba(var(--rgb-black), 0.2), 0 20px 20px -30px rgba(var(--rgb-black), 0.15), 0 40px 30px -40px rgba(var(--rgb-black), 0.25), 0 60px 40px -50px rgba(var(--rgb-black), 0.3);
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-small);
    line-height: 1.5;
    margin-inline: auto;
    padding: 2.1em;
    text-align: left; }
    .letter article > * + * {
      margin-top: var(--flow-space, 1.3em); }
    .letter article * + h1, .letter article * + h2, .letter article * + h3, .letter article * + h4, .letter article * + h5, .letter article * + h6 {
      --flow-space: 2.3em; }
    .letter article h1,
    .letter article h2,
    .letter article h3,
    .letter article h4,
    .letter article h5,
    .letter article h6 {
      line-height: 1.2; }
      .letter article h1 + *,
      .letter article h2 + *,
      .letter article h3 + *,
      .letter article h4 + *,
      .letter article h5 + *,
      .letter article h6 + * {
        --flow-space: 0.6em; }
  .letter__signature {
    align-items: center;
    display: flex;
    gap: 0.5em;
    padding-top: 4em;
    position: relative; }
    .letter__signature dl {
      line-height: 1.3;
      text-align: left; }
    .letter__signature:before {
      background: url(/assets/new/jason-e5d8195492938b820034bce9e4bc920b652645dd03daee66dd6011172b268f46.png) center center/cover no-repeat;
      border-radius: 100%;
      content: '';
      height: 2.6em;
      width: 2.6em; }
    .letter__signature:after {
      background: url(/assets/new/signature-d9f5eea7bae09abc08270c2e1af63a66eac8effd5eb3590efb70aa3250c222e8.svg) left center/contain no-repeat;
      content: '';
      height: 3em;
      left: -0.5em;
      position: absolute;
      top: 0;
      transform: rotate(-1.5deg);
      width: 100%; }
  .letter--latest article * + h1, .letter--latest article * + h2, .letter--latest article * + h3, .letter--latest article * + h4, .letter--latest article * + h5, .letter--latest article * + h6 {
    --flow-space: 2em; }
  .letter--latest article h1 + *,
  .letter--latest article h2 + *,
  .letter--latest article h3 + *,
  .letter--latest article h4 + *,
  .letter--latest article h5 + *,
  .letter--latest article h6 + * {
    --flow-space: 0.4em; }
  .letter--latest article h2 {
    font-size: 130%; }
    .letter--latest article h2 + * {
      --flow-space: 0.8em; }
  .letter--latest article h4 {
    font-size: 115%; }
  .letter--latest article blockquote {
    border-left: 3px solid var(--color-black);
    margin-top: 1em;
    padding-left: 1em; }
  .letter--latest article ul li {
    --flow-space: 0.8em; }
  .letter--latest article footer {
    --flow-space: 2.5em;
    border-top: 2px solid var(--color-eggshell-dark);
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-small);
    gap: 1.1em;
    letter-spacing: -0.02em;
    line-height: 1.5;
    padding-top: 1.5em; }
    .letter--latest article footer ul {
      display: flex;
      list-style: none;
      padding-left: 0; }
      .letter--latest article footer ul li {
        margin: 0; }
        .letter--latest article footer ul li a {
          display: inline-block; }
        .letter--latest article footer ul li:not(:last-child):after {
          content: '•';
          display: inline-block;
          padding-left: 0.4em;
          padding-right: 0.4em; }
  .letter--latest article .image img {
    border: 1px solid #d9d9d9; }
  .letter--latest article .image figcaption {
    color: var(--color-grey-dark);
    font-size: var(--font-size-x-small);
    letter-spacing: -0.02em;
    text-align: center;
    width: 100%; }
  .letter--latest article .images {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.3em;
    justify-content: center; }
    .letter--latest article .images img {
      border: 1px solid #d9d9d9; }
    .letter--latest article .images figure {
      display: flex;
      flex-direction: column;
      gap: 0.3em; }
      .letter--latest article .images figure figcaption {
        color: var(--color-grey-dark);
        font-size: var(--font-size-x-small);
        letter-spacing: -0.02em;
        text-align: center;
        width: 100%; }
  @media (min-width: 48em) {
    .letter {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
      .letter article {
        padding: 3.4em 3.8em;
        width: min(100%, 40em); }
      .letter--latest article .images {
        flex-wrap: nowrap; } }
.link-cloud {
  display: flex;
  flex-direction: column;
  gap: 1.4em;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, var(--max-width-medium)); }
  .link-cloud header,
  .link-cloud article {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-small);
    letter-spacing: -0.02em;
    line-height: 1.2; }
  .link-cloud header h3 {
    margin-bottom: -0.16em;
    margin-top: -0.215em; }
  .link-cloud article ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    justify-content: center;
    list-style: none;
    padding: 0; }
    .link-cloud article ul li {
      display: flex;
      margin: 0; }
      .link-cloud article ul li a {
        background: var(--color-white);
        border-radius: 0.3rem;
        box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.025), 0 1px 0 0 rgba(var(--rgb-black), 0.025), 0 5px 30px -20px rgba(var(--rgb-black), 0.25), 0 10px 40px -20px rgba(var(--rgb-black), 0.2), 0 10px 20px -20px rgba(var(--rgb-black), 0.3), 0 20px 20px -30px rgba(var(--rgb-black), 0.4), 0 30px 30px -40px rgba(var(--rgb-black), 0.4);
        padding: 0.6em 1em 0.7em 1em;
        text-decoration: none;
        transition: box-shadow var(--transition), color var(--transition), transform var(--transition-slow);
        will-change: transform; }
        .link-cloud article ul li a:hover, .link-cloud article ul li a:focus {
          box-shadow: 0 0 0 3px var(--color-blue), 0 5px 30px -20px rgba(var(--rgb-black), 0.25), 0 10px 40px -20px rgba(var(--rgb-black), 0.2), 0 10px 20px -20px rgba(var(--rgb-black), 0.3), 0 20px 20px -30px rgba(var(--rgb-black), 0.4), 0 30px 30px -40px rgba(var(--rgb-black), 0.4);
          transform: translateY(-2px); }
  @media (min-width: 64em) {
    .link-cloud {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
      .link-cloud article ul {
        gap: 0.8em; }
        .link-cloud article ul li a {
          padding: 0.7em 1.2em 0.8em 1.2em; } }
.link-list {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, 60rem); }
  .link-list section {
    background: linear-gradient(135deg, rgba(var(--rgb-blue), 0.03) 10%, rgba(var(--rgb-blue), 0.15) 100%);
    border-radius: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 1.2em;
    padding: 2em 1.6em; }
  .link-list header,
  .link-list article {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-small);
    letter-spacing: -0.02em; }
  .link-list header h3 {
    margin-bottom: -0.16em;
    margin-top: -0.215em; }
  .link-list article ul {
    line-height: 1.2;
    list-style: none;
    padding: 0;
    text-align: left; }
    .link-list article ul li {
      --flow-space: 1em; }
      .link-list article ul li span,
      .link-list article ul li strong {
        font-weight: 600; }
      .link-list article ul li span {
        font-feature-settings: 'liga', 'ss05', 'tnum';
        letter-spacing: -0.03em; }
  .link-list--wide {
    width: min(100%, var(--max-width-medium)); }
  @media (min-width: 64em) {
    .link-list {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
      .link-list section {
        margin-left: -2.4em;
        margin-right: -2.4em;
        padding: 2em 2.4em 2.2em 2.4em; } }
.location {
  display: none;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, var(--max-width-x-small)); }
  .location ul {
    display: flex;
    font-size: var(--font-size-x-small);
    gap: 0.5em;
    letter-spacing: -0.02em;
    line-height: 1.2;
    list-style: none;
    padding: 0;
    text-align: left; }
    .location ul li {
      color: var(--color-grey-dark);
      display: flex;
      gap: 0.5em;
      margin-top: 0; }
      .location ul li:last-child {
        flex: 1; }
      .location ul li:not(:last-child):after {
        color: rgba(var(--rgb-black), 0.25);
        content: '/';
        display: inline-flex; }
  @media (min-width: 48em) {
    .location {
      display: flex; } }
  @media (min-width: 64em) {
    .location {
      padding-left: 0;
      padding-right: 0; } }
@charset "UTF-8";
.lockup {
  display: flex;
  max-width: 100vw;
  overflow: hidden;
  position: relative; }
  .lockup__rows {
    align-items: center;
    display: flex;
    flex-direction: column; }
  .lockup__row {
    display: flex;
    position: relative; }
    .lockup__row:after, .lockup__row:before {
      background: var(--color-eggshell);
      border-radius: 0.2rem;
      box-shadow: 0 0 0 2px var(--color-eggshell);
      content: '';
      margin: 0.35em;
      width: 100em; }
    .lockup__row:last-child {
      padding-bottom: 1.8em; }
  .lockup__quote {
    background: var(--color-white);
    border-radius: 0.2rem;
    box-shadow: 0 0 0 2px var(--color-eggshell-dark);
    display: flex;
    margin: 0.25em;
    padding: 0.3em 0.6em; }
    .lockup__quote q {
      font-size: var(--font-size-small);
      font-weight: 600;
      letter-spacing: -0.02em;
      white-space: nowrap; }
      .lockup__quote q:before {
        content: '“'; }
      .lockup__quote q:after {
        content: '”'; }
    .lockup__quote--more {
      background: none;
      bottom: 0;
      box-shadow: none;
      justify-content: center;
      left: 0;
      margin: 0;
      padding: 0;
      position: absolute;
      width: 100%; }
      .lockup__quote--more a {
        font-size: var(--font-size-small);
        letter-spacing: -0.02em; }
  @media (min-width: 48em) {
    .lockup__row:last-child {
      padding-bottom: 0; }
    .lockup__quote {
      margin: 0.35em;
      padding: 0.5em 0.8em; }
      .lockup__quote--more {
        align-items: center;
        background: var(--color-eggshell);
        bottom: auto;
        box-shadow: 0 0 0 2px var(--color-eggshell);
        left: auto;
        padding: 0;
        position: relative;
        width: auto; }
        .lockup__quote--more a {
          font-size: var(--font-size-x-small);
          letter-spacing: -0.03em;
          line-height: 1em;
          padding: 1em 1.8em 1.1em 1.8em;
          white-space: nowrap; } }
  @media (min-width: 64em) {
    .lockup__quote q {
      font-size: var(--font-size-base);
      letter-spacing: -0.03em; } }
.love {
  background: url(/assets/uk/love-badges-dc6f2b984e3b0c477ba2d524abad3e07345183402e2d286167043e7bcc60c93e.png) center bottom repeat-x;
  background-size: auto 2.2em;
  display: flex;
  padding-bottom: 3.2em;
  position: relative;
  width: 100%; }
  .love section {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-inline: auto;
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    width: min(100%, var(--max-width-large)); }
    .love section header,
    .love section figure {
      display: flex; }
    .love section header {
      flex-direction: column;
      text-align: center; }
      .love section header h3 {
        margin-bottom: -0.16em;
        margin-top: -0.215em; }
      .love section header br {
        display: none; }
    .love section figure {
      align-items: center;
      gap: 0.5em;
      width: min(100%, 12em); }
  @media (min-width: 64em) {
    .love section {
      flex-direction: row;
      gap: 1.6em;
      justify-content: center;
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
      .love section header {
        text-align: left; }
        .love section header br {
          display: inline; }
      .love section figure {
        width: min(100%, 14em); } }
.main {
  display: flex;
  flex: 1;
  flex-direction: column;
  position: relative;
  text-align: center; }
  .main.center {
    justify-content: center; }
.new-in-basecamp {
  display: flex;
  flex-direction: column;
  gap: 2em;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, var(--max-width-medium)); }
  .new-in-basecamp__follow {
    display: flex;
    font-size: var(--font-size-small);
    justify-content: center;
    letter-spacing: -0.02em;
    line-height: 1.2; }
    .new-in-basecamp__follow a {
      background: rgba(var(--rgb-blue), 0.1);
      border-radius: 0.3em;
      color: var(--color-black);
      font-size: 85%;
      font-weight: 500;
      padding: 0.8em 1.3em;
      text-decoration: none;
      transition: background var(--transition); }
      .new-in-basecamp__follow a:hover, .new-in-basecamp__follow a:focus {
        background: rgba(var(--rgb-blue), 0.15); }
  .new-in-basecamp__entries {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-small);
    gap: 2em;
    letter-spacing: -0.02em;
    text-align: left; }
  .new-in-basecamp__entry {
    display: flex;
    flex-direction: column;
    gap: 1em; }
  .new-in-basecamp__header {
    display: flex;
    flex-direction: column; }
    .new-in-basecamp__header .video {
      margin-bottom: 1em; }
    .new-in-basecamp__header time {
      font-size: 90%;
      margin-bottom: 0.1em; }
      .new-in-basecamp__header time a {
        color: var(--color-black);
        text-decoration: none; }
    .new-in-basecamp__header h3 {
      font-size: 140%; }
  .new-in-basecamp__content .video {
    display: none; }
  .new-in-basecamp__description > * + * {
    margin-top: var(--flow-space, 0.7em); }
  .new-in-basecamp__back {
    --flow-space: 1.8em;
    display: flex;
    justify-content: center;
    font-size: var(--font-size-base); }
  @media (min-width: 48em) {
    .new-in-basecamp__entries {
      gap: 0;
      padding-left: 2.5em;
      padding-right: 2.5em;
      position: relative; }
    .new-in-basecamp__entry {
      align-items: flex-start;
      flex-direction: row;
      gap: 1.8em;
      padding-bottom: 3.6em;
      position: relative; }
      .new-in-basecamp__entry:before {
        background: var(--color-eggshell);
        content: '';
        height: 100%;
        left: calc(-1.25em - 2px);
        position: absolute;
        top: 0;
        width: 4px; }
      .new-in-basecamp__entry:last-child {
        padding-bottom: 0; }
        .new-in-basecamp__entry:last-child:before {
          background: linear-gradient(0deg, rgba(var(--rgb-eggshell), 0) 0, var(--color-eggshell) 75%); }
    .new-in-basecamp__header {
      flex: 1;
      position: sticky;
      top: 1.8em; }
      .new-in-basecamp__header .video {
        display: none; }
      .new-in-basecamp__header time {
        margin-bottom: 0.4em; }
      .new-in-basecamp__header:after {
        background: var(--color-orange);
        border-radius: 100%;
        box-shadow: 0 0 0 5px var(--color-eggshell-dark), 0 0 0 10px var(--color-white);
        content: '';
        height: 0.6em;
        left: calc((-1.25em - 2px) - ((0.6em - 3px) / 2));
        position: absolute;
        top: 0.3625em;
        width: 0.6em; }
    .new-in-basecamp__content {
      display: flex;
      flex: 2;
      flex-direction: column;
      gap: 1.4em; }
      .new-in-basecamp__content .video {
        display: flex; }
    .new-in-basecamp__back {
      justify-content: flex-start; } }
  @media (min-width: 64em) {
    .new-in-basecamp {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); } }
.newsletter-portal {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: var(--space-large);
  align-items: center;
  text-align: left;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, var(--max-width-small));
  margin: 0 auto; }
  .newsletter-portal form input[type=email] {
    background: var(--color-white);
    border: 2px solid var(--color-black);
    border-radius: 0.3rem;
    color: var(--color-black);
    display: flex;
    font-size: var(--font-size-small);
    letter-spacing: -0.02em;
    line-height: 1.3;
    overflow-x: hidden;
    padding: 0.6em 0.85em 0.7em 0.85em;
    text-align: center;
    transition: border var(--transition);
    vertical-align: middle;
    width: 100%; }
    .newsletter-portal form input[type=email]:focus {
      border-color: var(--color-yellow); }
  .newsletter-portal .content {
    font-size: var(--font-size-small);
    width: 100%; }
    .newsletter-portal .content h1 {
      font-size: var(--font-size-xx-large); }
    .newsletter-portal .content p {
      margin-top: var(--flow-space, 1em); }
    .newsletter-portal .content form {
      margin-top: var(--flow-space, 1em); }
  @media (min-width: 64em) {
    .newsletter-portal {
      flex-direction: row; }
      .newsletter-portal .content {
        width: 60%; } }
.newsletter {
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, var(--max-width-medium)); }
  .newsletter section {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    width: 100%; }
    .newsletter section form {
      align-items: center;
      background: var(--color-white);
      border: 2px solid var(--color-black);
      border-radius: 2.4em;
      display: flex;
      gap: 0.2em;
      padding: 0.2em;
      position: relative;
      text-align: left;
      transition: border var(--transition), opacity var(--transition-slow), transform var(--transition-slow);
      width: min(100%, 20em); }
      .newsletter section form input {
        appearance: none;
        border: none;
        color: var(--color-black);
        flex: 1;
        font-size: var(--font-size-small);
        letter-spacing: -0.02em;
        line-height: 2em;
        padding-left: 0.9em;
        vertical-align: middle;
        transition: color var(--transition); }
        .newsletter section form input::placeholder {
          color: rgba(var(--rgb-black), 0.5); }
      .newsletter section form button {
        padding: 0.75em 1.3em 0.8em 1.3em; }
    .newsletter section div {
      align-items: center;
      display: flex;
      height: 100%;
      justify-content: center;
      left: 0;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      top: 0;
      transform: scale(1.25);
      transition: opacity var(--transition-slow), transform var(--transition-slow);
      width: 100%;
      z-index: -1; }
      .newsletter section div p {
        font-size: var(--font-size-small);
        letter-spacing: -0.02em; }
  .newsletter--flush {
    padding-left: 0;
    padding-right: 0;
    width: 100%; }
  .newsletter--success section form {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.75);
    z-index: -1; }
  .newsletter--success section div {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
    z-index: auto; }
  .newsletter--error section form {
    border-color: var(--color-red-light); }
    .newsletter--error section form input {
      color: var(--color-red-light); }
  @media (min-width: 64em) {
    .newsletter {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); } }
.paper {
  background: var(--color-eggshell);
  display: flex;
  flex-direction: column;
  position: relative; }
  .paper:before, .paper:after {
    background-image: url(/assets/new/paper-eggshell-0a35d8eba42baa4e4ac1412a7194cfa4397b1fc661ef4a2638c15bbbd0d857b1.svg);
    background-repeat: no-repeat;
    background-size: 100% 10em;
    content: '';
    height: 0.35em;
    left: 0;
    overflow: hidden;
    position: absolute;
    width: 100%; }
  .paper:before {
    background-position: center top;
    top: calc(-0.35em + 1px); }
  .paper:after {
    background-position: center bottom;
    bottom: calc(-0.35em + 1px); }
  .paper--black {
    background: var(--color-black);
    color: var(--color-white); }
    .paper--black:before, .paper--black:after {
      background-image: url(/assets/new/paper-black-3c8021f751a9a10fc74a31f8557e9641e17dc2dde3d27b59f1d3ea0860b7c110.svg); }
  .paper--none {
    background: none; }
    .paper--none:before, .paper--none:after {
      display: none; }
.pricing-cards {
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium); }
  .pricing-cards__cards {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-medium) + 6px); }
  .pricing-cards__card {
    align-items: flex-start;
    background: var(--color-white);
    box-shadow: 0 0 0 3px var(--color-sunny);
    color: var(--color-black);
    border-radius: 0.5em;
    display: flex;
    flex: 1;
    flex-direction: column;
    font-weight: 400;
    padding: 1.5em;
    position: relative;
    text-align: left; }
    .pricing-cards__card header {
      display: flex;
      flex-direction: column; }
      .pricing-cards__card header h4 {
        font-size: var(--font-size-large);
        letter-spacing: -0.02em;
        line-height: 1.1; }
      .pricing-cards__card header h6 {
        background: var(--color-pink);
        border-radius: 0.2rem;
        color: var(--color-white);
        font-size: var(--font-size-x-small);
        font-weight: 700;
        left: 50%;
        letter-spacing: 0.01em;
        line-height: 1em;
        padding: 0.4em 0.7em 0.55em 0.7em;
        position: absolute;
        text-transform: uppercase;
        top: -2px;
        transform: translate(-50%, -50%);
        white-space: nowrap; }
      .pricing-cards__card header p {
        font-size: var(--font-size-x-small);
        font-weight: 500;
        letter-spacing: -0.02em;
        line-height: 1.2;
        margin-top: 0.3em; }
    .pricing-cards__card article {
      align-items: flex-start;
      display: flex;
      flex-direction: column; }
      .pricing-cards__card article h5 {
        display: flex;
        font-size: var(--font-size-large);
        font-weight: 500;
        gap: 0.3em;
        letter-spacing: -0.03em;
        line-height: 1.1;
        margin-top: 0.6em; }
        .pricing-cards__card article h5 s {
          color: var(--color-black);
          opacity: 0.3;
          position: relative;
          text-decoration: none; }
          .pricing-cards__card article h5 s:after {
            background: var(--color-black);
            content: '';
            height: 0.085em;
            left: 50%;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%) rotate(2.5deg);
            width: 104%; }
      .pricing-cards__card article p {
        font-size: var(--font-size-x-small);
        font-weight: 500;
        letter-spacing: -0.02em;
        line-height: 1.2;
        margin-top: 0.3em; }
      .pricing-cards__card article .button {
        margin-top: 1.6em; }
      .pricing-cards__card article.toggle--annually {
        display: none; }
    .pricing-cards__card footer {
      display: flex;
      flex-direction: column;
      gap: 0.5em;
      margin-top: 0.9em; }
      .pricing-cards__card footer h6 {
        font-size: 90%;
        font-weight: 400;
        letter-spacing: -0.02em;
        line-height: 1.3; }
      .pricing-cards__card footer p {
        font-size: var(--font-size-small); }
    .pricing-cards__card--business {
      background: var(--color-warm-1);
      box-shadow: 0 0 0 3px var(--color-orange); }
    .pricing-cards__card--unlimited {
      background: var(--color-warm-2);
      box-shadow: 0 0 0 3px var(--color-pink); }
  .pricing-cards__checkbox {
    display: none; }
    .pricing-cards__checkbox:checked ~ header .pricing-cards__toggle label div:first-child {
      color: var(--color-black); }
    .pricing-cards__checkbox:checked ~ header .pricing-cards__toggle label div:last-child {
      color: rgba(var(--rgb-black), 0.5); }
    .pricing-cards__checkbox:checked ~ header .pricing-cards__toggle label:before {
      left: 0; }
    .pricing-cards__checkbox:checked ~ header .pricing-cards__toggle label:hover div:last-child {
      color: rgba(var(--rgb-black), 0.7); }
    .pricing-cards__checkbox:checked ~ article.toggle--annually {
      display: flex; }
    .pricing-cards__checkbox:checked ~ article.toggle--monthly {
      display: none; }
  .pricing-cards__toggle {
    background: rgba(var(--rgb-black), 0.05);
    border-radius: 0.15em;
    box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.15);
    height: 1.2em;
    margin-top: 0.9em;
    overflow: hidden;
    position: relative;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    width: 8.45em; }
    .pricing-cards__toggle label {
      align-items: center;
      cursor: pointer;
      display: flex;
      height: 100%;
      justify-content: center;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%; }
      .pricing-cards__toggle label div {
        color: var(--color-black);
        flex: 1;
        font-size: 60%;
        letter-spacing: -0.02em;
        line-height: 1;
        position: relative;
        transition: color var(--transition);
        z-index: 1; }
        .pricing-cards__toggle label div:first-child {
          color: rgba(var(--rgb-black), 0.5); }
      .pricing-cards__toggle label:before {
        background: var(--color-white);
        border-radius: 0.15em;
        box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.06), 0 0 3px 1px rgba(var(--rgb-black), 0.02), 0 0 6px 2px rgba(var(--rgb-black), 0.04), 0 0 9px 3px rgba(var(--rgb-black), 0.06);
        content: '';
        height: 100%;
        left: 50%;
        position: absolute;
        top: 0;
        transition: left var(--transition);
        width: 50%; }
      .pricing-cards__toggle label:hover div:first-child {
        color: rgba(var(--rgb-black), 0.7); }
  @media (min-width: 64em) {
    .pricing-cards {
      padding-left: var(--space-large);
      padding-right: var(--space-large);
      width: min(100%, 86rem); }
      .pricing-cards__cards {
        flex-direction: row; } }
.pricing-compare {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  text-align: center;
  width: min(100%, 48em); }
  .pricing-compare__basecamp, .pricing-compare__competition {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    position: relative; }
  .pricing-compare__basecamp .pricing-compare__app {
    align-items: flex-start;
    padding: 1.5em; }
    .pricing-compare__basecamp .pricing-compare__app figure {
      max-width: 4.5rem; }
  .pricing-compare__basecamp .pricing-compare__app--equals:after {
    color: var(--color-black); }
  .pricing-compare__vs {
    align-items: center;
    background: var(--color-black);
    border-radius: 100%;
    color: var(--color-white);
    display: flex;
    font-size: var(--font-size-large);
    font-weight: 700;
    height: 2.3em;
    justify-content: center;
    line-height: 1;
    padding-bottom: 0.25em;
    width: 2.3em; }
  .pricing-compare__app {
    align-items: center;
    background: var(--color-eggshell);
    border-radius: 0.4rem;
    display: flex;
    gap: 0.6em;
    padding: 1em;
    position: relative;
    text-align: left; }
    .pricing-compare__app figure {
      align-items: center;
      display: flex;
      height: 3em;
      justify-content: center;
      max-height: 3.8rem;
      max-width: 3.8rem;
      position: relative;
      width: 3em; }
    .pricing-compare__app dl {
      font-size: 80%;
      line-height: 1.3;
      position: relative;
      z-index: 2; }
      .pricing-compare__app dl dt {
        align-items: flex-end;
        display: flex; }
        .pricing-compare__app dl dt span {
          background: var(--color-orange);
          border-radius: 0.15rem;
          color: var(--color-white);
          font-size: var(--font-size-x-small);
          font-weight: 600;
          letter-spacing: normal;
          line-height: 1;
          margin-left: 0.5em;
          padding: 0.35em 0.5em 0.35em 0.55em;
          text-transform: uppercase; }
      .pricing-compare__app dl dd ul {
        font-size: 90%;
        font-weight: 700;
        list-style: none;
        padding-left: 0;
        margin-top: 1em; }
        .pricing-compare__app dl dd ul li {
          --flow-space: 0.1em;
          background: url(/assets/new/icon-check-green-a5e036384d59a9d1760c72b213f3105f7ba2af7d0dfac87009a18295a2006a0f.svg) left center no-repeat;
          background-size: 0.9em 0.9em;
          padding-left: 1.25em; }
    .pricing-compare__app--plus:before, .pricing-compare__app--equals:after {
      align-items: center;
      background: var(--color-white);
      border-radius: 100%;
      bottom: -0.225em;
      color: var(--color-orange);
      display: flex;
      font-size: var(--font-size-large);
      font-weight: 700;
      height: 1.2em;
      justify-content: center;
      left: 50%;
      line-height: 1;
      padding-bottom: 0.1em;
      position: absolute;
      transform: translate(-50%, 50%);
      width: 1.2em;
      z-index: 1; }
    .pricing-compare__app--plus:before {
      content: '+'; }
    .pricing-compare__app--equals:after {
      content: '='; }
  .pricing-compare__total {
    position: relative;
    z-index: 1; }
    .pricing-compare__total dl {
      align-items: center;
      display: flex;
      flex-direction: column;
      font-size: 90%; }
      .pricing-compare__total dl dt {
        background: var(--color-eggshell);
        border-radius: 0.2rem;
        margin-top: 0.6em;
        padding-left: 0.3em;
        padding-right: 0.3em; }
      .pricing-compare__total dl dd {
        font-size: 80%;
        margin-top: 0.1em; }
  @media (min-width: 64em) {
    .pricing-compare {
      align-items: initial;
      flex-direction: row;
      gap: 1.8em;
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
      .pricing-compare__basecamp, .pricing-compare__competition {
        flex: 1; }
      .pricing-compare__vs {
        left: calc(50% - 1.15em);
        position: absolute;
        top: calc(50% - 2.55em);
        z-index: 1; } }
.pricing-cta {
  background: var(--color-eggshell);
  border-radius: 1.7em 1.7em 1em 1em;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
  will-change: transform; }
  .pricing-cta__label {
    align-items: center;
    background-color: var(--color-green);
    border-radius: 1.7em;
    color: var(--color-white);
    display: flex;
    font-size: var(--font-size-base);
    justify-content: center;
    transition: background var(--transition); }
    .pricing-cta__label dl {
      display: flex;
      flex-direction: column; }
      .pricing-cta__label dl dt {
        font-size: var(--font-size-small);
        font-weight: 600;
        letter-spacing: -0.02em;
        line-height: 1.1em;
        padding: 0.9em 2.4em 0 2.4em; }
      .pricing-cta__label dl dd {
        font-size: var(--font-size-x-small);
        font-weight: 400;
        letter-spacing: -0.02em;
        line-height: 1.1em;
        padding: 0.35em 2.4em 1.35em 2.4em; }
  .pricing-cta__note {
    color: var(--color-black);
    font-size: var(--font-size-x-small);
    font-weight: 600;
    letter-spacing: -0.02em;
    padding: 1.1em 1.8em; }
    .pricing-cta__note span {
      color: var(--color-pink); }
    .pricing-cta__note br {
      display: none; }
  .pricing-cta__sticker {
    background: linear-gradient(120deg, var(--color-pink) 0, var(--color-pink-dark) 100%);
    border-radius: 0.2rem;
    bottom: 0;
    color: var(--color-white);
    font-size: var(--font-size-x-small);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    padding: 0.45em 0.8em 0.5em 0.8em;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    transform: translate(1.1em, 1.1em) rotate(-4deg);
    transition: transform var(--transition);
    white-space: nowrap;
    will-change: transform; }
  .pricing-cta:hover, .pricing-cta:focus {
    background: var(--color-eggshell-dark); }
    .pricing-cta:hover .pricing-cta__label, .pricing-cta:focus .pricing-cta__label {
      background: var(--color-green-dark); }
    .pricing-cta:hover .pricing-cta__sticker, .pricing-cta:focus .pricing-cta__sticker {
      transform: translate(1.1em, 1.1em) rotate(-5deg) scale(1.04); }
  .pricing-cta:active {
    transform: scale(0.99) translateY(1px); }
  @media (min-width: 32em) {
    .pricing-cta__note br {
      display: inline; } }
  @media (min-width: 64em) {
    .pricing-cta__label dl dt {
      font-size: var(--font-size-base);
      padding-top: 0.7em; }
    .pricing-cta__label dl dd {
      padding-top: 0.3em; } }
.pricing-grid {
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  width: min(100%, var(--max-width-medium)); }
  .pricing-grid ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-medium);
    justify-content: center;
    list-style: none;
    padding: 0;
    text-align: center; }
    .pricing-grid ul li {
      background-color: var(--color-eggshell);
      border-radius: 0.4rem;
      font-size: var(--font-size-small);
      font-weight: 700;
      margin: 0;
      padding: 0.95em 1.25em;
      position: relative;
      width: 16em; }
      .pricing-grid ul li a {
        font-weight: inherit; }
      .pricing-grid ul li:before {
        background: url(/assets/new/icon-check-9d7dc87deb3febbb9bc43d0b384d97e8b4faafc56b6cbe0dd37813db41715427.svg) center center var(--color-yellow) no-repeat;
        background-size: 0.7em 0.7em;
        border-radius: 100%;
        content: '';
        height: 1.5em;
        left: calc(50% - 0.75em);
        position: absolute;
        top: -0.75em;
        width: 1.5em; }
  @media (min-width: 64em) {
    .pricing-grid {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); } }
.pricing-markup {
  background-color: var(--color-eggshell);
  display: flex;
  flex-direction: column;
  position: relative; }
  .pricing-markup section {
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    position: relative;
    width: min(100%, var(--max-width-large)); }
  .pricing-markup__body {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 3em;
    position: relative; }
  .pricing-markup__header, .pricing-markup__content {
    display: flex;
    flex-direction: column;
    text-align: left; }
  .pricing-markup__content {
    gap: 0.8em;
    max-width: 26em; }
  .pricing-markup__img {
    flex: 1;
    max-width: 24em; }
  .pricing-markup__header h2 {
    font-size: 160%;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2; }
  .pricing-markup__header br {
    display: none; }
  .pricing-markup__controls {
    align-self: center;
    display: flex;
    justify-content: center;
    margin-top: 1.8em;
    position: relative; }
  .pricing-markup__toggle {
    background: var(--color-eggshell-dark);
    border-radius: 0.35em;
    box-shadow: inset 0 0 0 1px rgba(var(--rgb-black), 0.04), inset 0 0.25em 0.5em -0.25em rgba(var(--rgb-black), 0.08);
    display: flex;
    gap: 0.25em;
    justify-content: center;
    overflow: hidden;
    padding: 0.25em; }
    .pricing-markup__toggle button {
      border-radius: 0.35em;
      color: rgba(var(--rgb-black), 0.6);
      cursor: pointer;
      font-size: 62.5%;
      font-weight: 500;
      line-height: 1em;
      letter-spacing: -0.02em;
      padding: 0.7em 1em;
      transition: background var(--transition), box-shadow var(--transition), color var(--transition);
      white-space: nowrap; }
      .pricing-markup__toggle button:hover, .pricing-markup__toggle button:focus {
        background: rgba(var(--rgb-white), 0.45);
        color: rgba(var(--rgb-black), 0.8); }
      .pricing-markup__toggle button.selected {
        background: var(--color-white);
        box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.05), 0 1px 0 0 rgba(var(--rgb-black), 0.05), 0 0.1em 0.6em -0.5em rgba(var(--rgb-black), 0.05), 0 0.2em 1.2em -0.8em rgba(var(--rgb-black), 0.1), 0 0.3em 0.7em -0.6em rgba(var(--rgb-black), 0.2), 0 0.4em 0.8em -0.7em rgba(var(--rgb-black), 0.3);
        color: var(--color-black); }
    .pricing-markup__toggle--notes {
      background: none;
      box-shadow: none;
      display: none;
      left: 100%;
      position: absolute;
      top: 0; }
      .pricing-markup__toggle--notes button {
        color: var(--color-blue);
        font-family: 'Plot Holes', Serif;
        font-size: 55%;
        font-weight: 700;
        letter-spacing: -0.015em;
        text-transform: uppercase; }
        .pricing-markup__toggle--notes button:hover, .pricing-markup__toggle--notes button:focus {
          background: none;
          color: var(--color-black); }
  .pricing-markup__projects {
    display: flex;
    flex-direction: column;
    margin-top: 0.8em;
    position: relative;
    user-select: none; }
  .pricing-markup__project {
    display: none;
    flex-direction: column;
    position: relative; }
    .pricing-markup__project picture img {
      border-radius: 0.3em;
      box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.05);
      margin-bottom: 1px;
      overflow: hidden; }
    .pricing-markup__project:after {
      background: linear-gradient(180deg, rgba(var(--rgb-eggshell), 0) 0, rgba(var(--rgb-eggshell), 1) 75%);
      bottom: 0;
      content: '';
      height: 7em;
      left: calc(50% - 50vw);
      position: absolute;
      width: 100vw; }
    .pricing-markup__project.selected {
      display: flex; }
  .pricing-markup__notes {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transition: opacity var(--transition);
    width: 100%; }
    .pricing-markup__notes--hide {
      opacity: 0; }
  .pricing-markup__note {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%; }
  .pricing-markup__label, .pricing-markup__arrow {
    position: absolute; }
  @media (min-width: 64em) {
    .pricing-markup section {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
    .pricing-markup__body {
      gap: 1em; }
    .pricing-markup__header h2 {
      font-size: 220%; }
    .pricing-markup__header br {
      display: inline; }
    .pricing-markup__controls {
      margin-left: 4em;
      margin-right: 4em;
      margin-top: 3em; }
    .pricing-markup__projects {
      margin-left: 4em;
      margin-right: 4em;
      margin-top: 1em; }
    .pricing-markup__toggle--display {
      display: flex; } }
  @media (max-width: 48em) {
    .pricing-markup__body {
      flex-direction: column;
      gap: 2em; }
    .pricing-markup__header, .pricing-markup__content {
      text-align: center; }
    .pricing-markup__content {
      gap: 1em;
      max-width: 100%; }
    .pricing-markup__img {
      width: 80%; }
    .pricing-markup__controls {
      margin-left: auto;
      width: 100%; }
    .pricing-markup__toggle {
      display: block;
      overflow: scroll;
      padding: 0.12em 0.25em 0.25em 0.25em;
      scroll-padding-left: 0.25em;
      scroll-snap-type: x mandatory;
      white-space: nowrap; }
      .pricing-markup__toggle::-webkit-scrollbar {
        display: none; }
      .pricing-markup__toggle--projects button {
        scroll-snap-align: start; } }
.pricing-summary {
  display: flex;
  justify-content: center;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  text-align: center;
  width: min(100%, 48em); }
  .pricing-summary article {
    background: linear-gradient(135deg, rgba(var(--rgb-blue), 0.06) 10%, rgba(var(--rgb-blue), 0.12) 100%);
    border-radius: 0.4rem;
    display: flex;
    padding: 1em 1.3em; }
    .pricing-summary article p {
      font-size: 90%; }
  @media (min-width: 48em) {
    .pricing-summary article {
      padding: 1.25em 2.2em 1.3em 2.2em; } }
  @media (min-width: 64em) {
    .pricing-summary {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); } }
.pricing-toggle {
  display: flex;
  flex-direction: row; }
  .pricing-toggle__content {
    display: none; }
  .pricing-toggle__show {
    display: inline-block; }
  .pricing-toggle__button {
    text-align: left;
    margin: 0 0.6em 0.6em 0;
    cursor: pointer;
    color: #c5b6a6;
    font-size: var(--font-size-xx-small);
    font-weight: 500;
    letter-spacing: 0em;
    line-height: 1.08em;
    border-bottom: 2px solid transparent; }
    .pricing-toggle__button:hover {
      color: var(--color-black); }
  .pricing-toggle__button.active {
    border-bottom: 2px solid var(--color-black);
    color: var(--color-black); }

.pricing-tab-wrapper,
.pricing-disclaimer {
  display: flex;
  justify-content: center;
  position: relative;
  width: min(100%, 48em);
  margin: auto;
  padding-left: var(--space-x-large);
  padding-right: var(--space-x-large); }
  .pricing-tab-wrapper p,
  .pricing-disclaimer p {
    font-size: var(--font-size-x-small);
    color: var(--color-grey);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.3; }
  .pricing-tab-wrapper--pricing-unit,
  .pricing-disclaimer--pricing-unit {
    margin: auto;
    padding-bottom: var(--space-x-small); }

.pricing-disclaimer {
  padding-top: 0.8em; }

.pricing-tab {
  width: fit-content;
  background: var(--color-eggshell);
  border-radius: 2.55em;
  padding: 0.5em 1em; }

@media (min-width: 64em) {
  .pricing-tab-wrapper {
    justify-content: flex-start; }
    .pricing-tab-wrapper--pricing-unit {
      width: min(100%, 48em);
      margin: auto;
      padding-left: 3.4em;
      padding-bottom: 0; } }
@charset "UTF-8";
.pricing-unit {
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  width: min(100%, 36rem); }
  .pricing-unit__plans {
    display: flex;
    flex-direction: column;
    gap: calc(1em + 6px); }
  .pricing-unit__plan {
    background: var(--color-warm-1);
    color: var(--color-black);
    border-radius: 0.5em;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left; }
    .pricing-unit__plan .plan-content {
      border-radius: 0.5em 0.5em 0 0;
      display: flex;
      flex-direction: column;
      padding: 1.3em 1.5em 1.5em 1.5em; }
      .pricing-unit__plan .plan-content h2 {
        align-items: flex-end;
        display: flex;
        font-size: var(--font-size-base);
        font-weight: 600;
        letter-spacing: -0.025em;
        line-height: 1.4;
        margin-bottom: 0.6em; }
        .pricing-unit__plan .plan-content h2 span {
          border-radius: 0.2rem;
          font-size: var(--font-size-x-small);
          font-weight: 600;
          letter-spacing: normal;
          line-height: 1;
          margin-left: 0.55em;
          padding: 0.4em 0.6em 0.4em 0.65em;
          text-transform: uppercase; }
      .pricing-unit__plan .plan-content p {
        font-weight: 400;
        line-height: 1.2;
        margin-bottom: 0.8em; }
        .pricing-unit__plan .plan-content p br {
          display: none; }
      .pricing-unit__plan .plan-content ul {
        list-style: none;
        padding: 0; }
        .pricing-unit__plan .plan-content ul li {
          --flow-space: 0.5em;
          font-size: var(--font-size-x-small);
          font-weight: 500;
          letter-spacing: -0.02em;
          line-height: 1.2em; }
          .pricing-unit__plan .plan-content ul li:before {
            color: rgba(var(--rgb-black), 0.15);
            content: '•';
            display: inline-flex;
            font-weight: 800;
            margin-right: 0.4em; }
          .pricing-unit__plan .plan-content ul li.unlimited-only:before {
            color: var(--color-orange); }
    .pricing-unit__plan .plan-price {
      background: var(--color-warm-2);
      border-top: 2px solid rgba(var(--rgb-warm-3), 0.8);
      border-radius: 0 0 0.5em 0.5em;
      display: flex;
      flex-direction: column;
      padding: 1.2em 1.5em 1.5em 1.5em; }
      .pricing-unit__plan .plan-price h3 {
        font-size: var(--font-size-small);
        font-weight: 500;
        line-height: 1.2;
        margin-bottom: 0.4em; }
        .pricing-unit__plan .plan-price h3 span {
          display: inline-block; }
      .pricing-unit__plan .plan-price p {
        font-size: var(--font-size-x-small);
        font-weight: 400;
        letter-spacing: -0.02em;
        margin-bottom: 1em; }
        .pricing-unit__plan .plan-price p br {
          display: none; }
      .pricing-unit__plan .plan-price a.button {
        align-self: flex-start; }
    .pricing-unit__plan .plan-sticker {
      background: linear-gradient(165deg, var(--color-pink-dark) 0, var(--color-pink) 100%);
      border-radius: 0.2rem;
      color: var(--color-white);
      font-size: var(--font-size-x-small);
      font-weight: 700;
      letter-spacing: normal;
      line-height: 1;
      padding: 0.45em 0.8em 0.5em 0.8em;
      position: absolute;
      right: 0;
      text-align: center;
      text-transform: uppercase;
      top: 0;
      transform: rotate(-3.5deg) translate(10%, -52%); }
    .pricing-unit__plan--standard {
      background: var(--color-white);
      box-shadow: 0 0 0 3px var(--color-eggshell-dark);
      order: 1; }
      .pricing-unit__plan--standard .plan-price {
        background: rgba(var(--rgb-eggshell), 0.5);
        border-top: 2px solid rgba(var(--rgb-eggshell-dark), 0.5); }
      .pricing-unit__plan--standard h2 span {
        background: var(--color-yellow);
        color: var(--color-black); }
    .pricing-unit__plan--unlimited {
      box-shadow: 0 0 0 3px var(--color-pink); }
      .pricing-unit__plan--unlimited h2 span {
        background: var(--color-orange);
        color: var(--color-white); }
  @media (min-width: 64em) {
    .pricing-unit {
      width: min(100%, var(--max-width-medium)); }
      .pricing-unit__plans {
        align-items: center;
        flex-direction: row;
        gap: 0;
        justify-content: center; }
      .pricing-unit__plan .plan-content p br,
      .pricing-unit__plan .plan-price p br {
        display: inline; }
      .pricing-unit__plan .plan-content ul {
        display: grid;
        gap: 0.3em; }
        .pricing-unit__plan .plan-content ul li {
          --flow-space: 0; }
      .pricing-unit__plan .plan-sticker {
        transform: rotate(-3.5deg) translate(11%, -44%); }
      .pricing-unit__plan--standard {
        border-radius: 0.5em 0 0 0.5em;
        order: 0;
        width: 15.5em; }
        .pricing-unit__plan--standard .plan-content {
          border-radius: 0.5em 0 0 0;
          margin-bottom: 0.5em;
          margin-top: 0.5em; }
          .pricing-unit__plan--standard .plan-content h2 span {
            display: none; }
        .pricing-unit__plan--standard .plan-price {
          border-radius: 0 0 0 0.5em; }
      .pricing-unit__plan--unlimited .plan-content {
        padding-top: 2.1em; }
        .pricing-unit__plan--unlimited .plan-content__list ul {
          grid-template-columns: repeat(4, 1fr); }
          .pricing-unit__plan--unlimited .plan-content__list ul li {
            grid-column: span 2; }
            .pricing-unit__plan--unlimited .plan-content__list ul li.admin-pro-pack {
              grid-column: span 4; }
      .pricing-unit__plan--unlimited .plan-price {
        padding-bottom: 2.3em; }
      .pricing-unit__plan--compact .plan-content {
        padding-top: 1.3em; }
      .pricing-unit__plan--compact .plan-price {
        padding-bottom: 1.5em; }
      .pricing-unit__note {
        margin-left: 15.5em; }
        .pricing-unit__note p br {
          display: inline; } }
  @media (min-width: 90em) {
    .pricing-unit__plan .plan-content h2 span {
      padding: 0.35em 0.6em 0.425em 0.65em; } }
@charset "UTF-8";
.quotes {
  display: flex;
  flex-direction: column;
  position: relative; }
  .quotes__container {
    column-width: 10.5em;
    column-gap: var(--space-large);
    margin-top: calc(-1 * var(--space-large));
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    text-align: left; }
  .quotes blockquote {
    display: inline-flex;
    flex-direction: column;
    margin-top: var(--space-large);
    width: 100%; }
    .quotes blockquote q {
      font-size: var(--font-size-x-small);
      letter-spacing: -0.02em; }
      .quotes blockquote q:before {
        content: '“'; }
      .quotes blockquote q:after {
        content: '”'; }
    .quotes blockquote cite {
      font-size: var(--font-size-x-small);
      font-style: italic;
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.2;
      margin-top: var(--space-x-small); }
  .quotes--contain .quotes__container {
    margin-inline: auto;
    width: min(100%, var(--max-width-large)); }
  @media (min-width: 64em) {
    .quotes__container {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); } }
.recognition {
  display: grid;
  gap: 0.8em;
  grid-template-columns: repeat(4, 1fr);
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  width: min(100%, 44em); }
  .recognition__badge, .recognition__badges {
    align-items: center;
    display: flex; }
  .recognition__badge {
    grid-column: span 2; }
    .recognition__badge picture {
      max-width: 7.5em; }
    .recognition__badge--app-store {
      justify-content: end; }
    .recognition__badge--google-play {
      justify-content: start; }
  .recognition__badges {
    align-items: center;
    gap: 0.8em;
    grid-column: span 4;
    justify-content: center; }
    .recognition__badges picture {
      max-width: 3em; }
      .recognition__badges picture:nth-child(3) {
        max-width: 4em; }
  @media (min-width: 48em) {
    .recognition {
      display: flex;
      grid-template-columns: auto; }
      .recognition__badge picture {
        max-width: none; }
      .recognition__badge--app-store {
        margin-right: 0.15em;
        order: 0; }
      .recognition__badge--google-play {
        margin-left: 0.15em;
        order: 2; }
      .recognition__badges {
        grid-column: auto; }
        .recognition__badges picture {
          max-width: none; }
          .recognition__badges picture:nth-child(3) {
            max-width: none; } }
  @media (min-width: 64em) {
    .recognition {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); } }
  .recognition--inline {
    padding-left: 0;
    padding-right: 0; }
.rights {
  display: flex;
  font-family: 'Tiempos', Serif;
  position: relative; }
  .rights ol {
    counter-reset: section;
    display: flex;
    flex-direction: column;
    gap: var(--space-large);
    list-style: none;
    margin-inline: auto;
    padding: 0 var(--space-medium);
    width: min(100%, 35em); }
    .rights ol li {
      align-items: center;
      display: flex;
      flex-direction: column;
      position: relative;
      margin: 0; }
      .rights ol li h2 {
        font-size: var(--font-size-large);
        font-weight: normal;
        letter-spacing: 0.1em;
        margin-bottom: 0.5em;
        margin-top: 1em;
        text-transform: uppercase; }
      .rights ol li h3 {
        background: url(/assets/new/leaf-4734e78bad649f875f16dee59e3d2ac42edecf9a99e6a26e20855c5fe6a329cd.svg) center top/1em no-repeat;
        font-size: 75%;
        font-weight: normal;
        letter-spacing: 0.1em;
        margin-bottom: 0.75em;
        margin-top: 1em;
        padding-top: 2em;
        text-transform: uppercase; }
      .rights ol li p {
        line-height: 1.5; }
      .rights ol li small {
        font-size: 75%;
        max-width: 26em; }
        .rights ol li small + * {
          margin-top: 1em; }
      .rights ol li a {
        color: var(--color-black);
        font-weight: normal;
        text-decoration-thickness: from-font; }
        .rights ol li a:hover, .rights ol li a:focus {
          color: var(--color-blue); }
      .rights ol li:before {
        background-color: var(--color-eggshell);
        color: var(--color-brass);
        content: "Article " counter(section,upper-roman);
        counter-increment: section;
        font-size: var(--font-size-xx-large);
        line-height: 1em;
        list-style-type: decimal-leading-zero;
        padding-left: 0.25em;
        padding-right: 0.25em;
        position: relative;
        z-index: 1; }
      .rights ol li:after {
        background-color: var(--color-brass);
        content: '';
        font-size: var(--font-size-xx-large);
        height: 2px;
        position: absolute;
        top: calc(0.5em - 1px);
        width: 100%; }
  @media (min-width: 64em) {
    .rights ol {
      padding: 0 var(--space-x-large);
      width: min(100%, 38em); } }
.screenshot {
  display: flex;
  justify-content: center;
  position: relative; }
  .screenshot picture {
    align-items: center;
    display: flex;
    flex-direction: column;
    max-width: var(--max-width-medium);
    margin-left: var(--space-medium);
    margin-right: var(--space-medium);
    position: relative; }
    .screenshot picture img {
      border-radius: 0.2em;
      box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.075), 0 1px 0 0 rgba(var(--rgb-black), 0.025), 0 10px 40px -20px rgba(var(--rgb-black), 0.25), 0 20px 60px -25px rgba(var(--rgb-black), 0.2), 0 20px 20px -30px rgba(var(--rgb-black), 0.15), 0 40px 30px -40px rgba(var(--rgb-black), 0.25), 0 60px 40px -50px rgba(var(--rgb-black), 0.3);
      overflow: hidden; }
    .screenshot picture figcaption {
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      background: var(--color-yellow-light);
      border: 1px dashed var(--color-black);
      border-radius: 0.2em;
      box-shadow: 0 10px 30px -20px rgba(var(--rgb-black), 0.2), 0 15px 30px -20px rgba(var(--rgb-black), 0.2), 0 15px 20px -30px rgba(var(--rgb-black), 0.1), 0 25px 20px -30px rgba(var(--rgb-black), 0.2), 0 35px 30px -40px rgba(var(--rgb-black), 0.3);
      display: flex;
      flex-direction: column;
      gap: 0.6em;
      margin-top: 0.8em;
      max-width: 28em;
      padding: 0.6em 0.8em;
      position: relative;
      z-index: 1; }
      .screenshot picture figcaption p {
        font-size: 70%;
        letter-spacing: -0.02em;
        text-align: left; }
      .screenshot picture figcaption.dot:after {
        background: var(--color-black);
        border-radius: 100%;
        content: '';
        height: 0.8em;
        left: -0.4em;
        position: absolute;
        top: -0.4em;
        width: 0.8em; }
      .screenshot picture figcaption.dot--blue:after {
        background: var(--color-blue); }
      .screenshot picture figcaption.dot--green:after {
        background: var(--color-green); }
      .screenshot picture figcaption.dot--orange:after {
        background: var(--color-orange); }
      .screenshot picture figcaption.dot--pink:after {
        background: var(--color-pink); }
      .screenshot picture figcaption.dot--purple:after {
        background: var(--color-purple); }
      .screenshot picture figcaption.dot--red:after {
        background: var(--color-red); }
      .screenshot picture figcaption.dot--teal:after {
        background: var(--color-teal); }
      .screenshot picture figcaption.dot--yellow:after {
        background: var(--color-yellow); }
  .screenshot--has-captions picture img {
    margin-bottom: 0.8em; }
  .screenshot--has-headline {
    margin-top: 1.4em; }
  .screenshot--soon picture {
    position: relative; }
    .screenshot--soon picture img {
      opacity: 0.5; }
    .screenshot--soon picture:after {
      background-image: url(/assets/new/soon-9bbb40e4d3b0bafcedb6fd8ff536387c16fbd4d16a0303bcfce9d93b32446761.svg);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 25vw 25vw;
      content: '';
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      transform: rotate(-6deg);
      width: 100%; }
  @media (min-width: 64em) {
    .screenshot picture {
      margin-left: var(--space-xxx-large);
      margin-right: var(--space-xxx-large); }
      .screenshot picture figcaption {
        background: var(--color-white);
        border: 2px dashed var(--color-black);
        box-shadow: 0 10px 40px -20px rgba(var(--rgb-black), 0.2), 0 20px 60px -25px rgba(var(--rgb-black), 0.2), 0 20px 20px -30px rgba(var(--rgb-black), 0.1), 0 40px 30px -40px rgba(var(--rgb-black), 0.2), 0 60px 40px -50px rgba(var(--rgb-black), 0.3);
        gap: 0.8em;
        left: calc(-1 * var(--space-xx-large));
        margin: 0;
        max-width: none;
        padding: 0.8em 1em;
        position: absolute;
        top: var(--space-large);
        width: 11.5em; }
        .screenshot picture figcaption p {
          font-size: var(--font-size-x-small); }
        .screenshot picture figcaption.dot:after {
          height: 1em;
          left: -0.5em;
          top: -0.5em;
          width: 1em; }
        .screenshot picture figcaption.align-bottom {
          bottom: var(--space-large);
          top: auto; }
        .screenshot picture figcaption.align-center {
          top: 50%;
          transform: translateY(-50%); }
        .screenshot picture figcaption.justify-right {
          left: auto;
          right: calc(-1 * var(--space-xx-large)); }
          .screenshot picture figcaption.justify-right.dot:after {
            left: auto;
            right: -0.5em; }
    .screenshot--has-captions picture img {
      margin-bottom: 0; } }
.sheet {
  display: flex;
  position: relative; }
  .sheet__content {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-small);
    line-height: 1.5;
    margin-inline: auto;
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    text-align: left;
    width: min(100%, var(--max-width-small)); }
    .sheet__content h1 + *,
    .sheet__content h2 + * {
      --flow-space: 0.7em; }
    .sheet__content h3 + *,
    .sheet__content h4 + *,
    .sheet__content h5 + *,
    .sheet__content h6 + * {
      --flow-space: 0.6em; }
    .sheet__content table {
      --flow-space: 0;
      margin-bottom: 0.5em;
      margin-top: 2em; }
    .sheet__content b,
    .sheet__content strong {
      font-weight: 600; }
    .sheet__content > * + * {
      margin-top: var(--flow-space, 1em); }
  @media (min-width: 48em) {
    .sheet__content {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); } }
.signup-form {
  display: flex;
  justify-content: center;
  margin-inline: auto;
  position: relative;
  width: min(100%, var(--max-width-large)); }
  .signup-form iframe {
    height: 410px;
    overflow: hidden;
    width: min(100%, 480px); }
  .signup-form--include {
    padding-top: 33px; }
.support {
  display: flex;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative; }
  .support__form {
    background: var(--color-eggshell);
    border: 2px dashed var(--color-black);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.8em;
    margin-inline: auto;
    padding: 1.5em;
    text-align: left;
    width: min(100%, var(--max-width-small)); }
    .support__form fieldset {
      display: flex;
      flex-direction: column;
      margin-top: -0.35em; }
      .support__form fieldset label {
        align-items: center;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 0.2em; }
        .support__form fieldset label span {
          background: var(--color-yellow);
          border-radius: 1.9em;
          display: inline-flex;
          font-size: var(--font-size-xxx-small);
          letter-spacing: -0.02em;
          line-height: 1em;
          margin-left: 0.2em;
          margin-top: 0.4em;
          padding: 0.4em 0.8em 0.45em 0.8em;
          text-transform: uppercase;
          vertical-align: top; }
      .support__form fieldset p {
        color: var(--color-grey-dark);
        font-size: var(--font-size-x-small);
        letter-spacing: -0.02em;
        margin-bottom: 0.9em; }
      .support__form fieldset select {
        appearance: none;
        background: var(--color-white) url(/assets/new/icon-select-e46a9bb41bf25577aa7ec72b7149ce953ac1cda360db37b390b3ac7e04e3b9c5.svg) no-repeat right 0.7em center;
        background-size: 0.5em;
        border: 2px solid var(--color-black);
        border-radius: 0.4rem;
        color: var(--color-black);
        font-size: var(--font-size-small);
        letter-spacing: -0.02em;
        line-height: 1.3em;
        padding: 0.6em 0.75em 0.7em 0.75em;
        transition: border var(--transition); }
      .support__form fieldset input[type=file] {
        display: flex;
        font-size: var(--font-size-x-small);
        letter-spacing: -0.02em; }
      .support__form fieldset input[type=email],
      .support__form fieldset input[type=text],
      .support__form fieldset textarea {
        appearance: none;
        background: var(--color-white);
        border: 2px solid var(--color-black);
        border-radius: 0.4rem;
        color: var(--color-black);
        font-size: var(--font-size-small);
        letter-spacing: -0.02em;
        line-height: 1.3;
        padding: 0.6em 0.75em 0.7em 0.75em;
        transition: border var(--transition);
        vertical-align: middle; }
        .support__form fieldset input[type=email]:focus,
        .support__form fieldset input[type=text]:focus,
        .support__form fieldset textarea:focus {
          border-color: var(--color-yellow); }
      .support__form fieldset.error select {
        border-color: var(--color-red); }
      .support__form fieldset.error input[type=email],
      .support__form fieldset.error input[type=text],
      .support__form fieldset.error textarea {
        border-color: var(--color-red); }
      .support__form fieldset.error span.error {
        color: var(--color-red);
        font-size: var(--font-size-x-small);
        font-weight: 600;
        letter-spacing: -0.02em;
        margin-top: 0.6em; }
    .support__form button {
      align-self: flex-start; }
  @media (min-width: 64em) {
    .support {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
      .support__form {
        padding: var(--space-x-large); } }
@charset "UTF-8";
.text {
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, 60rem); }
  .text article {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-small);
    line-height: 1.5;
    margin-inline: auto;
    text-align: left; }
    .text article > * + * {
      margin-top: var(--flow-space, 1.3em); }
    .text article * + h1, .text article * + h2, .text article * + h3, .text article * + h4, .text article * + h5, .text article * + h6 {
      --flow-space: 2.3em; }
    .text article h1,
    .text article h2,
    .text article h3,
    .text article h4,
    .text article h5,
    .text article h6 {
      line-height: 1.2; }
      .text article h1 + *,
      .text article h2 + *,
      .text article h3 + *,
      .text article h4 + *,
      .text article h5 + *,
      .text article h6 + * {
        --flow-space: 0.6em; }
    .text article blockquote {
      display: flex;
      flex-direction: column;
      gap: 0.3em; }
      .text article blockquote h3 br {
        display: none; }
      .text article blockquote q {
        font-style: italic; }
        .text article blockquote q:before {
          content: '“'; }
        .text article blockquote q:after {
          content: '”'; }
      .text article blockquote cite {
        font-size: var(--font-size-small);
        font-style: italic;
        font-weight: 600;
        letter-spacing: -0.02em; }
        .text article blockquote cite span {
          display: inline-block; }
        .text article blockquote cite:before {
          content: '–';
          letter-spacing: normal; }
      .text article blockquote.blockquote-framed {
        background: linear-gradient(135deg, rgba(var(--rgb-blue), 0.06) 10%, rgba(var(--rgb-blue), 0.12) 100%);
        border-radius: 0.4em;
        gap: 0.6em;
        padding: 1.5em 1.7em; }
        .text article blockquote.blockquote-framed q {
          font-size: 90%;
          letter-spacing: -0.02em;
          line-height: 1.4; }
        .text article blockquote.blockquote-framed cite {
          font-size: var(--font-size-medium);
          font-style: normal;
          line-height: 1.2; }
          .text article blockquote.blockquote-framed cite:before {
            display: none; }
    .text article hr {
      display: flex;
      flex-direction: column;
      height: auto;
      margin-bottom: 1.2em;
      margin-top: 1.2em;
      text-align: center; }
      .text article hr:before {
        background: none;
        color: rgba(var(--rgb-black), 0.15);
        content: '•••';
        font-size: var(--font-size-x-large);
        font-weight: 500;
        height: auto;
        letter-spacing: 0.2em;
        line-height: 1;
        padding-bottom: 0.15em;
        width: auto; }
    .text article ol,
    .text article ul {
      line-height: 1.4; }
  .text footer {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center; }
  @media (min-width: 64em) {
    .text {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
      .text article blockquote h3 br {
        display: inline; }
      .text article blockquote.blockquote-framed {
        margin-left: -2.1em;
        margin-right: -2.1em;
        padding: 1.9em 2.1em; } }
.tools {
  align-self: center;
  display: flex;
  justify-content: center;
  margin-inline: auto;
  overflow: hidden;
  position: relative;
  width: min(100%, 41em); }
  .tools__box {
    align-items: flex-start;
    background-color: var(--color-white);
    border-radius: 0.2rem 0.2rem 0 0;
    box-shadow: 0 0 0 1px rgba(var(--rgb-black-dark), 0.05), 0 0.5em 1em -0.5em rgba(var(--rgb-black-dark), 0.15), 0 1em 2em -0.5em rgba(var(--rgb-black-dark), 0.1);
    display: grid;
    gap: 0.6em;
    grid-auto-rows: 1fr;
    margin: 1em 1em 0 1em;
    padding: 1.3em 0.5em 4px 0.5em;
    position: relative; }
    .tools__box:before {
      background: var(--color-white);
      border-radius: 0.2rem 0.2rem 0 0;
      box-shadow: 0 0 0 1px rgba(var(--rgb-black-dark), 0.05), 0 0.5em 1em -0.5em rgba(var(--rgb-black-dark), 0.2), 0 1em 2em -0.5em rgba(var(--rgb-black-dark), 0.15);
      content: '';
      height: 100%;
      left: -0.4em;
      position: absolute;
      right: -0.4em;
      top: 0.4em;
      z-index: 1; }
    .tools__box:after {
      background: linear-gradient(to bottom, rgba(var(--rgb-white), 0) 0%, rgba(var(--rgb-white), 1) 90%);
      bottom: 0;
      content: '';
      height: 50%;
      left: -3em;
      position: absolute;
      right: -3em;
      z-index: 2; }
  .tools__tool {
    background: var(--color-white);
    border: 1px solid rgba(var(--rgb-black-dark), 0.1);
    border-radius: 0.35rem;
    box-shadow: 0 1px 0 0 rgba(var(--rgb-black-dark), 0.02), 0 2px 2px 0 rgba(var(--rgb-black-dark), 0.02);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 3; }
    .tools__tool dl {
      display: flex;
      flex: 1;
      flex-direction: column; }
      .tools__tool dl dt {
        border-bottom: 1px solid rgba(var(--rgb-black-dark), 0.1);
        font-size: var(--font-size-x-small);
        font-weight: 600;
        letter-spacing: -0.01em;
        padding-bottom: 0.6em;
        padding-top: 0.6em; }
      .tools__tool dl dd {
        align-items: center;
        background-position: left center;
        background-repeat: no-repeat;
        background-size: 3.2em 3.2em;
        display: flex;
        flex: 1;
        font-size: var(--font-size-x-small);
        letter-spacing: -0.01em;
        line-height: 1.3;
        margin: 1.2em;
        min-height: 3.2em;
        padding-left: 4em;
        text-align: left; }
        .tools__tool dl dd br {
          display: none; }
    .tools__tool--message-board dd {
      background-image: url(/assets/home/tools-message-board-c76efa1ec0e535612a986aaa89d4d36fce31633e837ffc5923f49eaba5f34e17.svg); }
    .tools__tool--to-dos dd {
      background-image: url(/assets/home/tools-to-dos-547a880ed357eae8fe7a467b8422adfff83cd87c147a8662850d9d041747febf.svg); }
    .tools__tool--docs-and-files dd {
      background-image: url(/assets/home/tools-docs-and-files-321aa57a9ccbab899f295fa7480d834a867a190c5a65207602649f3f5b180603.svg); }
    .tools__tool--chat dd {
      background-image: url(/assets/home/tools-chat-1dd17f268b8e378b5a518d027e59c3510f9243291ac6c67e1535cd7d7f280cc5.svg); }
    .tools__tool--schedule dd {
      background-image: url(/assets/home/tools-schedule-22063263373bbaf2dd44c75d182006ffe8191a06004a7e257b39af48e6fc6b46.svg); }
    .tools__tool--card-table dd {
      background-image: url(/assets/home/tools-card-table-b9bc2246c22f10abf0619d8d024217614865d87e748a332cde914f51bd534bfa.svg); }
  @media (min-width: 36em) {
    .tools__box {
      grid-template-columns: repeat(4, 1fr);
      margin-left: 3em;
      margin-right: 3em; }
    .tools__tool {
      grid-column: span 2; }
      .tools__tool dl {
        gap: 0.7em; }
        .tools__tool dl dd {
          align-items: flex-start;
          background-position: center 0;
          background-size: 3.5em 3.5em;
          justify-content: center;
          margin: 0;
          min-height: none;
          padding: 4em 1.4em 1.2em 1.4em;
          text-align: center; }
          .tools__tool dl dd br {
            display: inline; } }
  @media (min-width: 52em) {
    .tools__box {
      grid-template-columns: repeat(6, 1fr);
      width: 100%; }
    .tools__tool dl {
      gap: 1em; }
      .tools__tool dl dd {
        background-size: 4.8em 4.8em;
        padding: 5.5em 1.4em 1.7em 1.4em; } }

.tools-lockup {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  position: relative; }
  @media (min-width: 64em) {
    .tools-lockup {
      align-items: center;
      flex-direction: row;
      gap: 0;
      margin-inline: auto;
      width: min(100%, var(--max-width-large)); }
      .tools-lockup .headline {
        margin-left: -0.7em;
        margin-right: 2em;
        order: 1;
        padding-left: 0;
        padding-right: 0;
        text-align: left;
        width: 20.5em;
        z-index: 3; }
        .tools-lockup .headline header,
        .tools-lockup .headline article {
          align-items: flex-start;
          width: 100%; }
        .tools-lockup .headline article {
          font-size: var(--font-size-small);
          letter-spacing: -0.02em; }
          .tools-lockup .headline article br {
            display: none; }
      .tools-lockup .tools {
        flex: 1;
        margin-left: -0.6em;
        margin-top: -1em; }
        .tools-lockup .tools__box {
          gap: 0.5em;
          padding: 1.2em 0.4em 4px 0.4em; }
        .tools-lockup .tools__tool {
          font-size: 80%; }
          .tools-lockup .tools__tool dl dd br {
            display: none; } }
.tracking {
  background: linear-gradient(0deg, rgba(var(--rgb-black-dark), 0.3) 0, rgba(var(--rgb-black-dark), 0) 100%);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  padding: var(--space-large);
  pointer-events: none;
  position: fixed;
  text-align: center;
  width: 100%;
  z-index: 104; }
  .tracking__container {
    align-items: center;
    background: var(--color-purple);
    border-radius: 0.4rem;
    box-shadow: 0 10px 30px -10px rgba(var(--rgb-black-dark), 0.25), 0 20px 60px -20px rgba(var(--rgb-black-dark), 0.3), 0 40px 40px -40px rgba(var(--rgb-black-dark), 0.35), 0 80px 60px -60px rgba(var(--rgb-black-dark), 0.4);
    display: flex;
    flex-direction: column;
    padding: 1.5em;
    pointer-events: auto;
    position: relative;
    max-width: 19em; }
    .tracking__container p {
      position: relative; }
  .tracking__icon {
    background: var(--color-purple);
    border-radius: 100%;
    padding: 0.4em;
    position: absolute;
    top: -1em; }
    .tracking__icon svg {
      height: 1.6em;
      width: 1.6em; }
  .tracking__buttons {
    display: flex;
    gap: var(--space-x-small);
    margin-top: var(--space-small); }
    .tracking__buttons button.deny {
      color: var(--color-white); }
  .tracking p {
    color: var(--color-white);
    font-size: var(--font-size-small);
    letter-spacing: -0.02em; }
  .tracking--hidden {
    display: none !important; }
  @media (min-width: 64em) {
    .tracking {
      padding: var(--space-medium); }
      .tracking__container {
        max-width: 15em; }
      .tracking p {
        font-size: var(--font-size-x-small); } }
.typeform {
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, var(--max-width-small)); }
  .typeform__embed {
    border-radius: 0.2em;
    box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.05), 0 1px 0 0 rgba(var(--rgb-black), 0.1), 0 0.8em 1.6em -0.8em rgba(var(--rgb-black), 0.2), 0 1.2em 2em -1em rgba(var(--rgb-black), 0.3), 0 1.2em 1.6em -2em rgba(var(--rgb-black), 0.4), 0 1.6em 2em -2em rgba(var(--rgb-black), 0.5), 0 2em 2.4em -2.4em rgba(var(--rgb-black), 0.6);
    display: block;
    overflow: hidden;
    position: relative; }
  @media (min-width: 64em) {
    .typeform {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); } }
.uo-illustration {
  align-items: center;
  display: none;
  flex-direction: column;
  max-width: 26em;
  position: relative;
  transform: translateX(-3vw);
  user-select: none;
  -webkit-user-select: none; }
  .uo-illustration button {
    align-items: center;
    border-radius: 100%;
    color: var(--color-blue);
    cursor: pointer;
    display: flex;
    height: 17%;
    justify-content: center;
    left: 20%;
    position: absolute;
    top: 59.5%;
    transition: color var(--transition-slow);
    width: 7.4%; }
    .uo-illustration button svg {
      height: 72%;
      transition: transform var(--transition-slow);
      width: 72%;
      will-change: transform; }
    .uo-illustration button:hover {
      color: var(--color-black); }
      .uo-illustration button:hover svg {
        transform: rotate(180deg) scale(1.2); }
    .uo-illustration button:active svg {
      transform: rotate(240deg) scale(1.05); }
  .uo-illustration__bubbles {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%; }
    .uo-illustration__bubbles img {
      opacity: 0;
      position: absolute; }
    .uo-illustration__bubbles--l img.selected, .uo-illustration__bubbles--r img.selected {
      opacity: 1; }
  .uo-illustration__characters {
    display: flex;
    position: relative; }
  .uo-illustration--display {
    display: flex; }
  .uo-illustration--transition .uo-illustration__bubbles img {
    transform: scale(0.95);
    transform-origin: left center;
    transition: opacity var(--transition-x-slow), transform var(--transition-x-slow);
    will-change: transform; }
  .uo-illustration--transition .uo-illustration__bubbles.uo-illustration__bubbles--l img.selected, .uo-illustration--transition .uo-illustration__bubbles.uo-illustration__bubbles--r img.selected {
    transform: scale(1); }
  .uo-illustration--transition .uo-illustration__bubbles.uo-illustration__bubbles--r img {
    transform-origin: right center;
    transition-delay: 0.1s; }
  @media (min-width: 64em) {
    .uo-illustration {
      transform: translateX(-2.5em); } }
.uo-intro {
  display: flex;
  flex-direction: column;
  position: relative; }
  .uo-intro section {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1.4em;
    margin-inline: auto;
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    text-align: center;
    width: min(100%, var(--max-width-large)); }
    .uo-intro section h1 {
      font-size: 200%;
      letter-spacing: -0.03em;
      line-height: 1.1;
      margin-bottom: -0.16em; }
    .uo-intro section .uo-illustration {
      order: 1; }
    .uo-intro section h2 {
      font-size: 100%;
      font-weight: 400;
      letter-spacing: -0.02em;
      line-height: 1.4;
      margin-bottom: -0.35em;
      margin-top: -0.75em;
      max-width: 24em;
      order: 2; }
    .uo-intro section .button {
      order: 3; }
  @media (min-width: 64em) {
    .uo-intro section {
      gap: 1.6em;
      padding-left: var(--space-large);
      padding-right: var(--space-large); }
      .uo-intro section h1 {
        font-size: 230%; }
      .uo-intro section h2 {
        font-size: 135%;
        letter-spacing: -0.03em;
        line-height: 1.3;
        margin-bottom: -0.25em;
        margin-top: -0.7em;
        max-width: 33em; } }
.uo-markup {
  background-color: var(--color-eggshell);
  display: flex;
  flex-direction: column;
  position: relative; }
  .uo-markup section {
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    position: relative;
    width: min(100%, var(--max-width-large)); }
  .uo-markup__body {
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    position: relative; }
  .uo-markup__header, .uo-markup__content {
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    text-align: left; }
  .uo-markup__header h3 {
    font-size: 160%;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2; }
  .uo-markup__header br {
    display: none; }
  .uo-markup__controls {
    align-self: center;
    display: flex;
    justify-content: center;
    margin-top: 1.8em;
    position: relative; }
  .uo-markup__toggle {
    background: var(--color-eggshell-dark);
    border-radius: 0.35em;
    box-shadow: inset 0 0 0 1px rgba(var(--rgb-black), 0.04), inset 0 0.25em 0.5em -0.25em rgba(var(--rgb-black), 0.08);
    display: flex;
    gap: 0.25em;
    justify-content: center;
    overflow: hidden;
    padding: 0.25em; }
    .uo-markup__toggle button {
      border-radius: 0.35em;
      color: var(--color-black);
      cursor: pointer;
      font-size: 62.5%;
      font-weight: 500;
      line-height: 1em;
      letter-spacing: -0.02em;
      padding: 0.7em 1em;
      transition: background var(--transition), box-shadow var(--transition);
      white-space: nowrap; }
      .uo-markup__toggle button:hover, .uo-markup__toggle button:focus {
        background: rgba(var(--rgb-white), 0.45); }
      .uo-markup__toggle button.selected {
        background: var(--color-white);
        box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.05), 0 1px 0 0 rgba(var(--rgb-black), 0.05), 0 0.1em 0.6em -0.5em rgba(var(--rgb-black), 0.05), 0 0.2em 1.2em -0.8em rgba(var(--rgb-black), 0.1), 0 0.3em 0.7em -0.6em rgba(var(--rgb-black), 0.2), 0 0.4em 0.8em -0.7em rgba(var(--rgb-black), 0.3); }
    .uo-markup__toggle--notes {
      background: none;
      box-shadow: none;
      display: none;
      left: 100%;
      position: absolute;
      top: 0; }
      .uo-markup__toggle--notes button {
        color: var(--color-blue);
        font-family: 'Plot Holes', Serif;
        font-size: 55%;
        font-weight: 700;
        letter-spacing: -0.015em;
        text-transform: uppercase; }
        .uo-markup__toggle--notes button:hover, .uo-markup__toggle--notes button:focus {
          background: none;
          color: var(--color-black); }
  .uo-markup__projects {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    margin-top: 0.8em;
    position: relative;
    user-select: none; }
  .uo-markup__project {
    display: none;
    flex-direction: column;
    position: relative; }
    .uo-markup__project picture img {
      border-radius: 0.2em;
      box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.05), 0 1px 0 0 rgba(var(--rgb-black), 0.05), 0 0.2em 1.6em -0.8em rgba(var(--rgb-black), 0.2), 0 0.4em 2.4em -1em rgba(var(--rgb-black), 0.3), 0 0.4em 0.8em -1.2em rgba(var(--rgb-black), 0.4), 0 0.8em 1.2em -1.6em rgba(var(--rgb-black), 0.5), 0 1.2em 1.6em -2em rgba(var(--rgb-black), 0.6);
      overflow: hidden; }
    .uo-markup__project:after {
      background: linear-gradient(180deg, rgba(var(--rgb-eggshell), 0) 0, rgba(var(--rgb-eggshell), 1) 75%);
      bottom: 0;
      content: '';
      height: 7em;
      left: calc(50% - 50vw);
      position: absolute;
      width: 100vw; }
    .uo-markup__project.selected {
      display: flex; }
  .uo-markup__notes {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transition: opacity var(--transition);
    width: 100%; }
    .uo-markup__notes--hide {
      opacity: 0; }
  .uo-markup__note {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%; }
  .uo-markup__label, .uo-markup__arrow {
    position: absolute; }
  @media (min-width: 64em) {
    .uo-markup section {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
    .uo-markup__body {
      gap: 1em; }
    .uo-markup__header, .uo-markup__content {
      gap: 1em;
      max-width: 34.5em; }
    .uo-markup__header h3 {
      font-size: 220%; }
    .uo-markup__header br {
      display: inline; }
    .uo-markup__controls, .uo-markup__projects {
      margin-left: 4em;
      margin-right: 4em; }
    .uo-markup__toggle--display {
      display: flex; } }
.uo-modal {
  align-items: center;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  visibility: hidden;
  z-index: -1; }
  .uo-modal__background {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(var(--rgb-white), 0.95);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0; }
  .uo-modal__container {
    margin: auto;
    max-height: 100%;
    overflow: scroll; }
  .uo-modal__content {
    align-items: center;
    display: none;
    flex-direction: column;
    gap: 1.6em;
    justify-content: center;
    margin-inline: auto;
    padding-bottom: 3em;
    padding-top: 3em;
    position: relative; }
    .uo-modal__content header,
    .uo-modal__content article {
      display: flex;
      flex-direction: column;
      gap: 0.8em;
      padding-left: 1em;
      padding-right: 1em;
      width: min(100%, var(--max-width-small)); }
    .uo-modal__content header {
      align-items: center; }
      .uo-modal__content header p {
        font-size: 140%;
        font-weight: 700;
        letter-spacing: -0.03em;
        line-height: 1.2; }
        .uo-modal__content header p a {
          font-weight: inherit; }
    .uo-modal__content article {
      text-align: left; }
      .uo-modal__content article p {
        font-size: 80%;
        letter-spacing: -0.02em; }
    .uo-modal__content--open {
      display: flex; }
  .uo-modal__close {
    align-items: center;
    background: var(--color-black);
    border: 1px solid var(--color-black);
    border-radius: 100%;
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    height: 1.5em;
    justify-content: center;
    position: fixed;
    right: 0.5em;
    top: 0.5em;
    transition: background var(--transition), border var(--transition);
    width: 1.5em;
    z-index: 1; }
    .uo-modal__close span {
      display: none; }
    .uo-modal__close svg {
      display: flex;
      height: 0.45em;
      width: 0.45em; }
    .uo-modal__close:hover, .uo-modal__close:focus {
      background: var(--color-grey);
      border: var(--color-grey); }
  .uo-modal--video .uo-modal__background {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(var(--rgb-black), 0.95); }
  .uo-modal--video .uo-modal__container {
    overflow: initial; }
  .uo-modal--video .uo-modal__content {
    padding: 1em; }
  .uo-modal--video .uo-modal__close {
    background: var(--color-white);
    border: 1px solid var(--color-white);
    color: var(--color-black); }
    .uo-modal--video .uo-modal__close:hover, .uo-modal--video .uo-modal__close:focus {
      background: var(--color-grey);
      border: var(--color-grey); }
  @media (min-width: 64em) {
    .uo-modal__content {
      padding-left: 1em;
      padding-right: 1em; }
      .uo-modal__content header,
      .uo-modal__content article {
        gap: 1em;
        padding-left: var(--space-xxx-large);
        padding-right: var(--space-xxx-large);
        width: min(100%, 80rem); }
      .uo-modal__content header p {
        font-size: 160%;
        letter-spacing: -0.03em; }
    .uo-modal__close {
      right: 0.75em;
      top: 0.75em; }
    .uo-modal--video .uo-modal__content {
      padding-left: 4em;
      padding-right: 4em; } }

html.uo-modal-active {
  overflow: hidden; }
  html.uo-modal-active .uo-modal {
    visibility: visible;
    z-index: 1000; }
.uo-pill {
  background-color: var(--color-eggshell);
  border: 1px solid rgba(var(--rgb-black), 0.1);
  border-radius: 2.2em;
  color: var(--color-black);
  display: inline-flex;
  font-size: 70%;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.6em;
  padding: 0.3em 0.9em;
  text-decoration: none;
  transition: background-color var(--transition-slow); }
  .uo-pill--tool {
    align-items: center;
    gap: 0.3em;
    padding-left: 0.3em; }
    .uo-pill--tool:before {
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 1.6em 1.6em;
      border: 1px solid transparent;
      border-radius: 100%;
      content: '';
      display: inline-flex;
      height: 1.6em;
      width: 1.6em; }
  .uo-pill--chat:before {
    background-color: var(--color-tool-chat);
    background-image: url(/assets/tools/chat-1dd17f268b8e378b5a518d027e59c3510f9243291ac6c67e1535cd7d7f280cc5.svg);
    border-color: var(--color-tool-chat); }
  .uo-pill--card-table:before {
    background-color: var(--color-tool-card-table);
    background-image: url(/assets/tools/card-table-b9bc2246c22f10abf0619d8d024217614865d87e748a332cde914f51bd534bfa.svg);
    border-color: var(--color-tool-card-table); }
  .uo-pill--docs-and-files:before {
    background-color: var(--color-tool-docs-and-files);
    background-image: url(/assets/tools/docs-and-files-321aa57a9ccbab899f295fa7480d834a867a190c5a65207602649f3f5b180603.svg);
    border-color: var(--color-tool-docs-and-files); }
  .uo-pill--message-board:before {
    background-color: var(--color-tool-message-board);
    background-image: url(/assets/tools/message-board-c76efa1ec0e535612a986aaa89d4d36fce31633e837ffc5923f49eaba5f34e17.svg);
    border-color: var(--color-tool-message-board); }
  .uo-pill--mission-control:before {
    background-color: var(--color-tool-mission-control);
    background-image: url(/assets/tools/mission-control-fd26ac7fb78d03352525211f5a4f3c8c5f7fb1355308397d48cc4edad208998b.svg);
    border-color: var(--color-tool-mission-control); }
  .uo-pill--schedule:before {
    background-color: var(--color-tool-schedule);
    background-image: url(/assets/tools/schedule-22063263373bbaf2dd44c75d182006ffe8191a06004a7e257b39af48e6fc6b46.svg);
    border-color: var(--color-tool-schedule); }
  .uo-pill--to-dos:before {
    background-color: var(--color-tool-to-dos);
    background-image: url(/assets/tools/to-dos-547a880ed357eae8fe7a467b8422adfff83cd87c147a8662850d9d041747febf.svg);
    border-color: var(--color-tool-to-dos); }

a.uo-pill:hover, a.uo-pill:focus {
  background-color: var(--color-eggshell-dark); }
.uo-quotes {
  background: linear-gradient(0deg, var(--color-white) 0, var(--color-eggshell-dark) 100%);
  display: flex;
  flex-direction: column;
  position: relative; }
  .uo-quotes section {
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    position: relative;
    width: min(100%, var(--max-width-large)); }
  .uo-quotes__body {
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    position: relative; }
  .uo-quotes__header, .uo-quotes__content {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    text-align: left; }
  .uo-quotes__header h3 {
    font-size: 160%;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2; }
  .uo-quotes__header br {
    display: none; }
  .uo-quotes__slider {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-top: 1.5em;
    position: relative; }
  .uo-quotes__quotes {
    display: flex;
    flex-wrap: nowrap;
    transition: transform var(--transition-x-slow);
    will-change: transform; }
    .uo-quotes__quotes blockquote {
      background: var(--color-white);
      border-radius: 0.2em;
      box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.05), 0 1px 0 0 rgba(var(--rgb-black), 0.05), 0 0.2em 1.6em -0.8em rgba(var(--rgb-black), 0.2), 0 0.4em 2.4em -1em rgba(var(--rgb-black), 0.3), 0 0.4em 0.8em -1.2em rgba(var(--rgb-black), 0.4), 0 0.8em 1.2em -1.6em rgba(var(--rgb-black), 0.5), 0 1.2em 1.6em -2em rgba(var(--rgb-black), 0.6);
      display: flex;
      flex-direction: column;
      gap: 1em;
      min-width: calc(100vw - 2em);
      overflow: hidden;
      padding: 1.35em 1.7em 1.55em 1.7em;
      text-align: left;
      width: 100%; }
      .uo-quotes__quotes blockquote q {
        flex: 1; }
        .uo-quotes__quotes blockquote q .text-highlight {
          font-weight: 700; }
      .uo-quotes__quotes blockquote cite p {
        font-size: 75%;
        font-style: italic;
        font-weight: 600;
        letter-spacing: -0.025em;
        line-height: 1.2; }
      .uo-quotes__quotes blockquote:not(:last-child) {
        margin-right: 1em; }
    .uo-quotes__quotes.resize {
      transition: none; }
  .uo-quotes__controls {
    align-self: center;
    background: var(--color-white);
    border-radius: 1.5em;
    box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.05), 0 1px 0 0 rgba(var(--rgb-black), 0.05), 0 0.1em 0.6em -0.5em rgba(var(--rgb-black), 0.05), 0 0.2em 1.2em -0.8em rgba(var(--rgb-black), 0.1), 0 0.3em 0.7em -0.6em rgba(var(--rgb-black), 0.2), 0 0.4em 0.8em -0.7em rgba(var(--rgb-black), 0.3), 0 0.5em 0.9em -0.8em rgba(var(--rgb-black), 0.4);
    display: flex;
    gap: 0.2em;
    padding: 0.2em;
    position: relative; }
  .uo-quotes__control {
    align-items: center;
    border-radius: 100%;
    color: var(--color-black);
    cursor: pointer;
    display: flex;
    height: 1.7em;
    justify-content: center;
    transition: background var(--transition-slow), color var(--transition-slow);
    width: 1.7em; }
    .uo-quotes__control span {
      display: none; }
    .uo-quotes__control svg {
      height: 0.8em;
      transition: transform var(--transition-slow);
      width: 0.8em;
      will-change: transform; }
    .uo-quotes__control:disabled {
      color: rgba(var(--rgb-black), 0.2);
      pointer-events: none; }
  .uo-quotes__hotspot {
    display: none; }
    .uo-quotes__hotspot span {
      display: none; }
  @media (min-width: 64em) {
    .uo-quotes section {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
    .uo-quotes__body {
      gap: 1em; }
      .uo-quotes__body--full .uo-quotes__header,
      .uo-quotes__body--full .uo-quotes__content {
        max-width: none; }
    .uo-quotes__header, .uo-quotes__content {
      gap: 1em;
      max-width: 34.5em; }
    .uo-quotes__header h3 {
      font-size: 220%; }
    .uo-quotes__header br {
      display: inline; }
    .uo-quotes__slider {
      gap: normal;
      margin-top: 1.9em; }
    .uo-quotes__quotes blockquote {
      gap: 1.3em;
      min-width: calc(50vw - 3.4em);
      padding: 1.6em 1.9em 1.75em 1.9em; }
      .uo-quotes__quotes blockquote:not(:last-child) {
        margin-right: 0.8em; }
    .uo-quotes__controls {
      bottom: calc(100% + 2.2em);
      position: absolute;
      right: 0; }
    .uo-quotes__control:hover, .uo-quotes__control:focus {
      background: rgba(var(--rgb-black), 0.05); }
    .uo-quotes__control:disabled:hover, .uo-quotes__control:disabled:focus {
      background: none; }
    .uo-quotes__control--prev:active svg {
      transform: translateX(-0.1em); }
    .uo-quotes__control--next:active svg {
      transform: translateX(0.1em); }
    .uo-quotes__hotspot {
      cursor: pointer;
      display: block;
      height: 100%;
      position: absolute;
      top: 0;
      width: calc((100vw - 100%) / 2); }
      .uo-quotes__hotspot:disabled {
        display: none; }
      .uo-quotes__hotspot--next {
        left: 100%; }
      .uo-quotes__hotspot--prev {
        right: 100%; } }
  @media (min-width: 100rem) {
    .uo-quotes__quotes blockquote {
      min-width: calc(50rem - 3.5em); } }
.uo-shape--light, .uo-shape--light-bottom, .uo-shape--light-top, .uo-shape--dark, .uo-shape--dark-bottom, .uo-shape--dark-top {
  background-repeat: no-repeat;
  background-size: cover; }
.uo-shape--light, .uo-shape--dark {
  background-position: center center; }
.uo-shape--light-bottom, .uo-shape--dark-bottom {
  background-position: bottom center; }
.uo-shape--light-top, .uo-shape--dark-top {
  background-position: top center; }
.uo-shape--light {
  background-image: url(/assets/uo/shape/light-0dfebb03a499dc13519c8a3355129d732b3c4cf961e732692f793207e8dd1720.svg); }
.uo-shape--light-bottom {
  background-image: url(/assets/uo/shape/light-bottom-5c4aff4c73698c2afcfb087463a61460a08d4039cd0556c1b85691766b844f48.svg); }
.uo-shape--light-top {
  background-image: url(/assets/uo/shape/light-top-f276f43b67840030417f00717631a9c20c478a5c0a803e6c7847d4a31da5ee47.svg); }
.uo-shape--dark {
  background-image: url(/assets/uo/shape/dark-efb46475a04fb795492682c0bfb7d8aacf481bbf452f323189a3f99261b11579.svg); }
.uo-shape--dark-bottom {
  background-image: url(/assets/uo/shape/dark-bottom-ee4250859e91456fe213e2e2cc7f741b9ff312b4c9888e3de6374f2bb4909a57.svg); }
.uo-shape--dark-top {
  background-image: url(/assets/uo/shape/dark-top-b55ab828a22a828bb28c7f8604f579187343d0fa9c46fb84c516e652737d8b5f.svg); }
.uo-space--transition-bottom, .uo-space--padding-bottom {
  padding-bottom: 6em !important; }
.uo-space--transition-top, .uo-space--padding-top {
  padding-top: 6em !important; }
@media (min-width: 64em) {
  .uo-space--transition-bottom {
    padding-bottom: 9em !important; }
  .uo-space--transition-top {
    padding-top: 9em !important; } }
.uo-text {
  background-color: var(--color-eggshell);
  display: flex;
  flex-direction: column;
  position: relative; }
  .uo-text section {
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    width: min(100%, var(--max-width-large)); }
  .uo-text__illustration {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-bottom: 2em;
    margin-inline: auto;
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    width: min(100%, 70rem); }
    .uo-text__illustration figure {
      display: flex; }
  .uo-text__aside {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 2.5em; }
    .uo-text__aside button {
      cursor: pointer;
      display: flex;
      margin-left: var(--space-medium);
      margin-right: var(--space-medium);
      position: relative;
      width: min(100%, 19em); }
      .uo-text__aside button div {
        background: var(--color-white);
        border-radius: 0.2em;
        box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.05), 0 1px 0 0 rgba(var(--rgb-black), 0.05), 0 0.2em 1.6em -0.8em rgba(var(--rgb-black), 0.2), 0 0.4em 2.4em -1em rgba(var(--rgb-black), 0.3), 0 0.4em 0.8em -1.2em rgba(var(--rgb-black), 0.4), 0 0.8em 1.2em -1.6em rgba(var(--rgb-black), 0.5), 0 1.2em 1.6em -2em rgba(var(--rgb-black), 0.6);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transform: rotate(1.5deg);
        will-change: transform; }
        .uo-text__aside button div figure {
          position: relative; }
          .uo-text__aside button div figure:after {
            background: url(/assets/new/icon-play-3f56c02f4869d19ab7dc589171a387ad37f76bcc381479b8eed1af9859328365.svg) 54% center no-repeat var(--color-white);
            background-size: 30% 30%;
            border-radius: 100%;
            box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.05), 0 1px 0 0 rgba(var(--rgb-black), 0.05), 0 0 1.6em -0.6em rgba(var(--rgb-black), 0.3), 0 0.3em 0.8em -0.6em rgba(var(--rgb-black), 0.1), 0 0.4em 1.1em -0.9em rgba(var(--rgb-black), 0.2), 0 0.5em 0.9em -0.7em rgba(var(--rgb-black), 0.3), 0 0.6em 1em -0.8em rgba(var(--rgb-black), 0.4), 0 0.7em 1.1em -0.9em rgba(var(--rgb-black), 0.5);
            color: var(--color-black);
            content: '';
            height: 2.3em;
            left: calc(50% - 1.15em);
            position: absolute;
            top: calc(50% - 1.15em);
            transition: transform var(--transition-slow);
            width: 2.3em;
            will-change: transform; }
        .uo-text__aside button div p {
          font-size: 80%;
          letter-spacing: -0.02em;
          padding: 1.4em 1.7em 1.5em 1.7em;
          text-align: left; }
      .uo-text__aside button:before {
        background: var(--color-app);
        border-radius: 0.2em;
        box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.05), 0 1px 0 0 rgba(var(--rgb-black), 0.05), 0 0.2em 1.6em -0.8em rgba(var(--rgb-black), 0.2), 0 0.4em 2.4em -1em rgba(var(--rgb-black), 0.3), 0 0.4em 0.8em -1.2em rgba(var(--rgb-black), 0.4), 0 0.8em 1.2em -1.6em rgba(var(--rgb-black), 0.5), 0 1.2em 1.6em -2em rgba(var(--rgb-black), 0.6);
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        transform: rotate(5.5deg);
        width: 100%;
        will-change: transform; }
      .uo-text__aside button.rotate-alt div {
        transform: rotate(-1.5deg); }
      .uo-text__aside button.rotate-alt:before {
        transform: rotate(-5.5deg); }
  .uo-text__body {
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    text-align: left; }
    .uo-text__body header,
    .uo-text__body article {
      display: flex;
      flex-direction: column;
      gap: 0.8em; }
    .uo-text__body header h3 {
      font-size: 160%;
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.2; }
    .uo-text__body header br {
      display: none; }
    .uo-text__body article ul {
      padding-left: 1em; }
      .uo-text__body article ul li {
        line-height: 1.2; }
      .uo-text__body article ul.checks {
        list-style: none;
        padding-left: 0; }
        .uo-text__body article ul.checks li {
          --flow-space: 0.4em;
          background-image: url(/assets/new/icon-checks-a76b3455352a88a24f370e56b8221fc3dfb29321a872fb19d98b8560891b45d1.svg);
          background-position: left 0.2em;
          background-repeat: no-repeat;
          background-size: 0.8em 0.8em;
          padding-left: 1.25em; }
    .uo-text__body article blockquote {
      display: flex;
      flex-direction: column;
      gap: 0.6em; }
      .uo-text__body article blockquote cite {
        font-size: 80%;
        font-style: italic;
        font-weight: 600;
        letter-spacing: -0.02em; }
  @media (min-width: 64em) {
    .uo-text section {
      flex-direction: row;
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
    .uo-text__illustration {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
    .uo-text__aside {
      margin-left: 2em;
      margin-top: 0;
      width: min(100%, 15em); }
      .uo-text__aside button {
        margin-left: 0;
        margin-right: 0;
        width: auto; }
        .uo-text__aside button div {
          transform: rotate(3deg);
          transition: transform var(--transition-slow); }
        .uo-text__aside button:before {
          left: -0.1em;
          top: 0.1em;
          transform: rotate(8deg);
          transition: transform var(--transition-slow); }
        .uo-text__aside button:hover div, .uo-text__aside button:focus div {
          transform: rotate(1.5deg) scale(1.1); }
          .uo-text__aside button:hover div figure:after, .uo-text__aside button:focus div figure:after {
            transform: scale(1.1); }
        .uo-text__aside button:hover:before, .uo-text__aside button:focus:before {
          transform: rotate(5.5deg) scale(1.08); }
        .uo-text__aside button.rotate-alt div {
          transform: rotate(-3deg); }
        .uo-text__aside button.rotate-alt:before {
          left: -0.05em;
          top: 0.05em;
          transform: rotate(-8deg); }
        .uo-text__aside button.rotate-alt:hover div, .uo-text__aside button.rotate-alt:focus div {
          transform: rotate(-1.5deg) scale(1.1); }
        .uo-text__aside button.rotate-alt:hover:before, .uo-text__aside button.rotate-alt:focus:before {
          transform: rotate(-6deg) scale(1.08); }
    .uo-text__body {
      gap: 1em;
      width: min(100%, 34.5em); }
      .uo-text__body header,
      .uo-text__body article {
        gap: 1em; }
      .uo-text__body header h3 {
        font-size: 220%; }
      .uo-text__body header br {
        display: inline; }
    .uo-text--has-aside .uo-text__body {
      width: calc(100% - 17em); } }
.uo-transition {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 100; }
  .uo-transition section {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: -3em -2em; }
  .uo-transition__image {
    cursor: pointer;
    display: flex;
    margin-left: -1.2em;
    margin-right: -1.2em;
    will-change: transform; }
    .uo-transition__image figure {
      display: flex;
      justify-content: center;
      position: relative;
      will-change: transform; }
      .uo-transition__image figure picture {
        border-radius: 0.2em;
        box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.05), 0 1px 0 0 rgba(var(--rgb-black), 0.05), 0 0.2em 1.6em -0.8em rgba(var(--rgb-black), 0.2), 0 0.4em 2.4em -1em rgba(var(--rgb-black), 0.3), 0 0.4em 0.8em -1.2em rgba(var(--rgb-black), 0.4), 0 0.8em 1.2em -1.6em rgba(var(--rgb-black), 0.5), 0 1.2em 1.6em -2em rgba(var(--rgb-black), 0.6);
        overflow: hidden; }
      .uo-transition__image figure div {
        align-items: center;
        border-radius: 0.2em;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%; }
        .uo-transition__image figure div p {
          color: var(--color-white);
          display: none;
          font-size: 65%;
          letter-spacing: -0.02em;
          margin: 0 7.25em 1em 7.25em;
          text-shadow: 0 5px 30px rgba(var(--rgb-black), 0.6); }
        .uo-transition__image figure div figcaption, .uo-transition__image figure div:after {
          background-color: var(--color-white);
          background-repeat: no-repeat;
          bottom: 0;
          box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.05), 0 1px 0 0 rgba(var(--rgb-black), 0.05), 0 0 1.8em -0.6em rgba(var(--rgb-black), 0.3), 0 0.25em 0.9em -0.6em rgba(var(--rgb-black), 0.05), 0 0.35em 1.2em -0.9em rgba(var(--rgb-black), 0.15), 0 0.45em 1em -0.7em rgba(var(--rgb-black), 0.25), 0 0.55em 1.1em -0.8em rgba(var(--rgb-black), 0.35), 0 0.65em 1.2em -0.9em rgba(var(--rgb-black), 0.45);
          font-size: 70%;
          height: 3em;
          position: absolute;
          transform: translateY(50%);
          will-change: transform; }
        .uo-transition__image figure div figcaption {
          align-items: center;
          background-image: url(/assets/new/icon-play-3f56c02f4869d19ab7dc589171a387ad37f76bcc381479b8eed1af9859328365.svg);
          background-position: 1.2em center;
          background-size: 0.75em 0.75em;
          border-radius: 1.5em;
          color: var(--color-black);
          display: none;
          font-weight: 600;
          letter-spacing: -0.02em;
          line-height: 1;
          padding-left: 2.25em;
          padding-right: 1.2em; }
        .uo-transition__image figure div:after {
          background-image: url(/assets/new/icon-plus-bab65e7f23e58dba822ded0d7eab14b1165b81b8707253e42f4aba48f3126897.svg);
          background-position: center center;
          background-size: 1em 1em;
          border-radius: 100%;
          content: '';
          width: 3em; }
    .uo-transition__image--video figure picture {
      box-shadow: 0 1px 0 0 rgba(var(--rgb-black), 0.05), 0 0.2em 1.6em -0.8em rgba(var(--rgb-black), 0.2), 0 0.4em 2.4em -1em rgba(var(--rgb-black), 0.3), 0 0.4em 0.8em -1.2em rgba(var(--rgb-black), 0.4), 0 0.8em 1.2em -1.6em rgba(var(--rgb-black), 0.5), 0 1.2em 1.6em -2em rgba(var(--rgb-black), 0.6); }
    .uo-transition__image--video figure div p {
      font-size: 85%;
      margin-left: 5em;
      margin-right: 5em; }
    .uo-transition__image--video figure div:after {
      background-image: url(/assets/new/icon-play-3f56c02f4869d19ab7dc589171a387ad37f76bcc381479b8eed1af9859328365.svg);
      background-position: 1.1em center; }
    .uo-transition__image--01 {
      transform: translateY(-0.3em); }
      .uo-transition__image--01 figure {
        transform: rotate(2.2deg); }
    .uo-transition__image--02 {
      transform: translateY(0.3em); }
      .uo-transition__image--02 figure {
        transform: rotate(-3.8deg); }
    .uo-transition__image--03 {
      transform: translateY(-0.3em); }
      .uo-transition__image--03 figure {
        transform: rotate(3.8deg); }
    .uo-transition__image--04 {
      transform: translateY(0.3em); }
      .uo-transition__image--04 figure {
        transform: rotate(-2.2deg); }
  @media (min-width: 64em) {
    .uo-transition section {
      margin-left: -1em;
      margin-right: -1em; }
    .uo-transition__image {
      transition: transform var(--transition-slow); }
      .uo-transition__image figure {
        transition: transform var(--transition-slow); }
        .uo-transition__image figure div {
          background: linear-gradient(180deg, rgba(var(--rgb-black-dark), 0.8) 0, rgba(var(--rgb-black-dark), 0.2) 100%), rgba(var(--rgb-black-dark), 0.3);
          opacity: 0;
          overflow: hidden;
          transition: opacity var(--transition-slow); }
          .uo-transition__image figure div p {
            display: initial;
            max-width: 26.5em; }
          .uo-transition__image figure div figcaption, .uo-transition__image figure div:after {
            bottom: 2.5em;
            font-size: 50%;
            transform: translateY(4em);
            transition: transform var(--transition-slow); }
          .uo-transition__image figure div figcaption {
            display: inline-flex; }
      .uo-transition__image:hover, .uo-transition__image:focus {
        transform: translateY(0);
        z-index: 100; }
        .uo-transition__image:hover figure, .uo-transition__image:focus figure {
          transform: rotate(0) scale(1.2); }
          .uo-transition__image:hover figure div, .uo-transition__image:focus figure div {
            opacity: 1; }
            .uo-transition__image:hover figure div figcaption, .uo-transition__image:hover figure div:after, .uo-transition__image:focus figure div figcaption, .uo-transition__image:focus figure div:after {
              transform: translateY(0); }
      .uo-transition__image--small figure div p {
        font-size: 50%;
        margin-left: 7em;
        margin-right: 7em;
        max-width: 24.5em; }
      .uo-transition__image--video figure div figcaption {
        box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.05), 0 0.25em 0.9em -0.6em rgba(var(--rgb-black), 0.05), 0 0.35em 1.2em -0.9em rgba(var(--rgb-black), 0.1), 0 0.45em 1em -0.7em rgba(var(--rgb-black), 0.15), 0 0.55em 1.1em -0.8em rgba(var(--rgb-black), 0.2), 0 0.65em 1.2em -0.9em rgba(var(--rgb-black), 0.25); }
      .uo-transition__image--video figure div:after {
        display: none; }
      .uo-transition__image--overview figure div {
        background: linear-gradient(180deg, rgba(var(--rgb-black-dark), 0.2) 0, rgba(var(--rgb-black-dark), 0) 35%); }
      .uo-transition__image--01, .uo-transition__image--03 {
        transform: translateY(-0.5em); }
      .uo-transition__image--02, .uo-transition__image--04 {
        transform: translateY(0.5em); } }
.video-chooser {
  display: grid;
  gap: var(--space-medium);
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--space-medium); }
  .video-chooser button {
    align-items: center;
    border-radius: 0.2em;
    cursor: pointer;
    display: flex;
    flex: 1;
    flex-direction: column;
    grid-column: span 2;
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition-slow);
    will-change: transform; }
    .video-chooser button picture {
      display: block;
      position: relative;
      width: 100%; }
      .video-chooser button picture img {
        border-radius: 0.2em 0.2em 0 0;
        opacity: 0.9;
        overflow: hidden;
        transition: opacity var(--transition-slow); }
      .video-chooser button picture:before {
        background: linear-gradient(180deg, rgba(var(--rgb-black-dark), 0.6) 0, rgba(var(--rgb-black-dark), 0.15) 80%);
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        transition: opacity var(--transition-slow);
        width: 100%;
        z-index: 1; }
    .video-chooser button p {
      align-items: center;
      background: rgba(var(--rgb-black), 0.6);
      border-radius: 0 0 0.2em 0.2em;
      color: var(--color-grey);
      display: flex;
      flex: 1;
      font-size: var(--font-size-x-small);
      font-weight: 600;
      justify-content: center;
      letter-spacing: -0.01em;
      line-height: 1.3;
      padding: 0.6em 0.8em 0.7em 0.8em;
      text-align: center;
      transition: background var(--transition-slow), color var(--transition-slow);
      width: 100%; }
    .video-chooser button:active {
      transform: scale(0.99) translateY(1px); }
    .video-chooser button:focus picture img, .video-chooser button:hover picture img {
      opacity: 1; }
    .video-chooser button:focus picture:before, .video-chooser button:hover picture:before {
      opacity: 0.6; }
    .video-chooser button:focus p, .video-chooser button:hover p {
      background: rgba(var(--rgb-black), 0.8);
      color: var(--color-white); }
    .video-chooser button.selected picture img {
      opacity: 1; }
    .video-chooser button.selected picture:before {
      opacity: 0; }
    .video-chooser button.selected p {
      background: var(--color-white);
      color: var(--color-black); }
    .video-chooser button.selected:active {
      transform: none; }
  .video-chooser--light button picture img {
    border-radius: 0.2em;
    opacity: 1; }
  .video-chooser--light button picture:before {
    background: linear-gradient(180deg, rgba(var(--rgb-black-dark), 0.5) 0, rgba(var(--rgb-black-dark), 0.25) 100%); }
  .video-chooser--light button p {
    display: none; }
  .video-chooser--light button:focus picture:before, .video-chooser--light button:hover picture:before {
    opacity: 0.3; }
  .video-chooser--light button.selected {
    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-blue); }
  @media (min-width: 48em) {
    .video-chooser {
      display: flex;
      grid-template-columns: auto;
      justify-content: center; }
      .video-chooser button {
        grid-column: auto;
        max-width: calc(25% - 0.75em); } }
  @media (min-width: 64em) {
    .video-chooser {
      gap: 1.4em;
      margin-top: 1.4em; }
      .video-chooser button {
        max-width: calc(25% - 1.05em); } }
.video-container {
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, 80rem); }
  @media (min-width: 64em) {
    .video-container {
      padding-left: var(--space-large);
      padding-right: var(--space-large); } }
.video-modal {
  align-items: center;
  bottom: 0;
  display: flex;
  flex-wrap: nowrap;
  left: 0;
  overflow: auto;
  position: fixed;
  right: 0;
  top: 0;
  visibility: hidden;
  white-space: nowrap;
  z-index: -1; }
  .video-modal__background {
    background: rgba(var(--rgb-black-dark), 0.8);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0; }
  .video-modal__content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
    margin: auto;
    padding: var(--space-medium);
    width: min(100%, 75rem); }
  .video-modal__video {
    display: flex;
    position: relative;
    width: 100%; }
    .video-modal__video video {
      background: var(--color-black-dark); }
  .video-modal__close {
    background-color: var(--color-white);
    background-image: url(/assets/new/icon-close-27144a89e11f688de6968af31717cd9ace9449ba48e0c9c3a09069bfd729abef.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 0.5em 0.5em;
    border-radius: 100%;
    cursor: pointer;
    display: flex;
    height: 1.2em;
    position: absolute;
    right: -0.6em;
    top: -0.6em;
    transition: transform var(--transition-slow);
    will-change: transform;
    width: 1.2em;
    z-index: 1; }
    .video-modal__close:hover, .video-modal__close:focus {
      transform: scale(1.06); }
  @media (min-width: 64em) {
    .video-modal__content {
      padding: var(--space-large); } }

html.video-modal-active {
  overflow: hidden; }
  html.video-modal-active .video-modal {
    visibility: visible;
    z-index: 1001; }
.video {
  display: flex;
  flex-direction: column;
  gap: 1.4em;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, var(--max-width-large)); }
  .video__embed {
    border-radius: 0.2em;
    box-shadow: 0 1px 0 0 rgba(var(--rgb-black), 0.1), 0 0.8em 1.6em -0.8em rgba(var(--rgb-black), 0.2), 0 1.2em 2em -1em rgba(var(--rgb-black), 0.3), 0 1.2em 1.6em -2em rgba(var(--rgb-black), 0.4), 0 1.6em 2em -2em rgba(var(--rgb-black), 0.5), 0 2em 2.4em -2.4em rgba(var(--rgb-black), 0.6);
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative; }
    .video__embed video {
      border-radius: 0.2em;
      display: block;
      overflow: hidden;
      position: relative; }
    .video__embed button {
      border-radius: 0.2em;
      cursor: pointer;
      height: 100%;
      left: 0;
      position: absolute;
      overflow: hidden;
      top: 0;
      width: 100%;
      z-index: 1; }
      .video__embed button:before {
        background: linear-gradient(180deg, rgba(var(--rgb-black-dark), 0.8) 0, rgba(var(--rgb-black-dark), 0.2) 80%);
        border-radius: 0.2em;
        content: '';
        height: 100%;
        left: 0;
        overflow: hidden;
        pointer-events: none;
        position: absolute;
        top: 0;
        transition: opacity var(--transition-slow);
        width: 100%; }
      .video__embed button span {
        align-items: center;
        background: url(/assets/new/icon-play-3f56c02f4869d19ab7dc589171a387ad37f76bcc381479b8eed1af9859328365.svg) 1.3em center no-repeat var(--color-white);
        background-size: 0.8em 0.8em;
        border-radius: 1.55em;
        box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.05), 0 1px 0 0 rgba(var(--rgb-black), 0.05), 0 0 1.8em -0.6em rgba(var(--rgb-black), 0.3), 0 0.25em 0.9em -0.6em rgba(var(--rgb-black), 0.05), 0 0.35em 1.2em -0.9em rgba(var(--rgb-black), 0.15), 0 0.45em 1em -0.7em rgba(var(--rgb-black), 0.25), 0 0.55em 1.1em -0.8em rgba(var(--rgb-black), 0.35), 0 0.65em 1.2em -0.9em rgba(var(--rgb-black), 0.45);
        color: var(--color-black);
        display: inline-flex;
        font-size: 70%;
        font-weight: 600;
        height: 3.1em;
        letter-spacing: -0.025em;
        line-height: 1;
        padding-left: 2.4em;
        padding-right: 1.25em;
        position: relative;
        transition: background-color var(--transition-slow), transform var(--transition-slow);
        will-change: transform; }
      .video__embed button:focus:before, .video__embed button:hover:before {
        opacity: 0.9; }
      .video__embed button:focus span, .video__embed button:hover span {
        transform: scale(1.03); }
    .video__embed--playing button {
      display: none; }
  .video__more {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2; }
  .video--no-shadow .video__embed button:before {
    display: none; }
  .video--no-label .video__embed button span {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    background-color: rgba(var(--rgb-white), 0.95);
    background-position: 1.05em center;
    border-radius: 100%;
    font-size: var(--font-size-base);
    height: 2.8em;
    padding: 0;
    width: 2.8em; }
  .video--no-label .video__embed button:focus span, .video--no-label .video__embed button:hover span {
    background-color: var(--color-white); }
  .video--full {
    margin-inline: auto;
    padding-left: 0;
    padding-right: 0;
    width: 100%; }
  .video--inline {
    margin-inline: auto;
    padding-left: 0;
    padding-right: 0;
    width: 100%; }
  .video--js .video__embed {
    display: none; }
    .video--js .video__embed.selected {
      display: flex; }
  @media (min-width: 64em) {
    .video {
      padding-left: var(--space-large);
      padding-right: var(--space-large); }
      .video--slim {
        width: min(100%, 80rem); }
      .video--full {
        padding-left: 0;
        padding-right: 0; }
      .video--inline {
        margin-left: -2.1em;
        margin-right: -2.1em;
        padding-left: 0;
        padding-right: 0;
        width: auto; } }
.vs-checks {
  display: flex;
  justify-content: center;
  margin-inline: auto;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;
  width: min(100%, 40em); }
  .vs-checks ul {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-small);
    gap: 0.4em;
    list-style: none;
    padding: 0;
    text-align: left; }
    .vs-checks ul li {
      background-image: url(/assets/vs/x-afbe7c60a7e8af878d6776de15a4ee848b57de7153ed2176c666a90fa7c61c00.svg);
      background-position: left 0.2em;
      background-repeat: no-repeat;
      background-size: 0.8em 1.2em;
      line-height: 1.4em;
      margin: 0;
      padding-left: 1.2em; }
  @media (min-width: 48em) {
    .vs-checks ul {
      display: grid;
      flex-direction: initial;
      gap: 1.4em 3em;
      grid-template-columns: repeat(2, 1fr); }
      .vs-checks ul li {
        background-position: left 0.15em;
        background-size: 1em 1.5em;
        grid-column: span 1;
        padding-left: 1.5em; } }
  @media (min-width: 64em) {
    .vs-checks {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); } }
@charset "UTF-8";
.vs-quotes {
  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%, 78rem); }
  .vs-quotes blockquote {
    background: var(--color-eggshell);
    border: 2px dashed var(--color-black);
    border-radius: 1rem;
    display: flex;
    flex: 1;
    flex-direction: column;
    font-size: var(--font-size-small);
    gap: var(--space-x-small);
    justify-content: center;
    padding: 1.5em;
    text-align: center; }
    .vs-quotes blockquote q {
      display: inline-block; }
      .vs-quotes blockquote q:before, .vs-quotes blockquote q:after {
        display: inline-block; }
      .vs-quotes blockquote q:before {
        content: '“'; }
      .vs-quotes blockquote q:after {
        content: '”'; }
    .vs-quotes blockquote cite {
      font-style: italic;
      font-weight: 600;
      line-height: 1.2; }
      .vs-quotes blockquote cite:before {
        content: '–';
        letter-spacing: normal; }
  @media (min-width: 48em) {
    .vs-quotes {
      flex-direction: row; }
      .vs-quotes blockquote {
        padding: var(--space-large); } }
  @media (min-width: 64em) {
    .vs-quotes {
      gap: 1.5em;
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); } }
.yes {
  display: flex;
  flex-direction: column;
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative; }
  .yes dl {
    background-color: var(--color-white);
    border-radius: 0.1rem;
    box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.05), 0 1px 0 0 rgba(var(--rgb-black), 0.05), 0 10px 40px -20px rgba(var(--rgb-black), 0.25), 0 20px 60px -25px rgba(var(--rgb-black), 0.2), 0 15px 20px -30px rgba(var(--rgb-black), 0.15), 0 30px 30px -40px rgba(var(--rgb-black), 0.25), 0 50px 40px -50px rgba(var(--rgb-black), 0.3);
    margin-inline: auto;
    padding: 1.1em 1.4em 1.3em 1.4em;
    position: relative;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    width: min(100%, 33em); }
    .yes dl dt {
      font-size: var(--font-size-large);
      margin-bottom: 0.2em; }
    .yes dl dd {
      font-size: var(--font-size-small);
      letter-spacing: -0.02em;
      line-height: 1.3; }
    .yes dl:before {
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      background: rgba(var(--rgb-white), 0.3);
      box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.025), 0 0 5px 0 rgba(var(--rgb-black), 0.1);
      content: '';
      height: 1.6em;
      left: calc(50% - 3.4em);
      position: absolute;
      top: -0.8em;
      transform: rotate(-3.5deg);
      width: 6.8em; }
    .yes dl:nth-child(1) {
      transform: rotate(-1deg); }
    .yes dl:nth-child(2) {
      transform: rotate(1deg) translateX(0.5em); }
      .yes dl:nth-child(2):before {
        transform: rotate(2.5deg); }
    .yes dl:nth-child(3) {
      transform: rotate(-1deg); }
      .yes dl:nth-child(3):before {
        transform: rotate(-2deg); }
  @media (min-width: 64em) {
    .yes {
      padding-left: var(--space-x-large);
      padding-right: var(--space-x-large); }
      .yes dl {
        padding: 2.5em var(--space-x-large) 2.7em var(--space-x-large);
        gap: 0.2em;
        width: min(100%, 42em); }
        .yes dl dt {
          font-size: var(--font-size-x-large);
          letter-spacing: -0.03em; }
        .yes dl dd {
          font-size: var(--font-size-base); } }
.items-center {
  align-items: center; }
.block {
  background: var(--color-eggshell);
  border-radius: 1rem;
  padding: var(--space-x-large); }
  .block--dashed {
    border: 2px dashed var(--color-black); }
.button {
  background-color: var(--color-green);
  border-radius: 2.55em;
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  font-size: var(--font-size-small);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3em;
  padding: 0.6em 1.2em 0.65em 1.2em;
  pointer-events: auto;
  text-decoration: none;
  transition: background-color var(--transition), box-shadow var(--transition), color var(--transition), transform var(--transition);
  white-space: nowrap; }
  .button span,
  .button strong {
    display: inline; }
  .button:hover, .button:focus {
    background-color: var(--color-green-dark);
    color: var(--color-white); }
  .button:active {
    transform: scale(0.99) translateY(1px); }
  .button--glass {
    background-color: rgba(var(--rgb-black), 0.1);
    color: var(--color-black); }
    .button--glass:hover, .button--glass:focus {
      background-color: rgba(var(--rgb-black), 0.15);
      color: var(--color-black); }
  .button--purple {
    background-color: var(--color-purple); }
    .button--purple:hover, .button--purple:focus {
      background-color: var(--color-purple-dark); }
  .button--white {
    background-color: var(--color-white);
    color: var(--color-black); }
    .button--white:hover, .button--white:focus {
      background-color: var(--color-yellow);
      color: var(--color-black); }
    .button--white.button--back {
      background-image: url(/assets/new/icon-back-black-3ee3e2cfec8606714df7aaa0b6b67cc23580f93795cbd32d83636050484a1a70.svg); }
  .button--black {
    background-color: var(--color-black); }
    .button--black:hover, .button--black:focus {
      background-color: var(--color-black-light); }
  .button--jlmdmj {
    background-color: transparent; }
    .button--jlmdmj:hover, .button--jlmdmj:focus {
      background-color: rgba(var(--rgb-black), 0.7); }
  .button--outline {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px var(--color-black);
    color: var(--color-black); }
    .button--outline:hover, .button--outline:focus {
      background-color: var(--color-green);
      box-shadow: none;
      color: var(--color-white); }
  .button--outline-white {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px var(--color-white);
    color: var(--color-white); }
    .button--outline-white:hover, .button--outline-white:focus {
      background-color: var(--color-white);
      box-shadow: none;
      color: var(--color-black); }
  .button--small {
    font-size: var(--font-size-x-small);
    letter-spacing: -0.02em; }
  .button--medium {
    font-size: 71%;
    letter-spacing: -0.02em; }
  .button--text {
    background-color: transparent;
    color: var(--color-blue);
    letter-spacing: -0.03em;
    padding-left: 0;
    padding-right: 0;
    text-decoration: underline; }
    .button--text:hover, .button--text:focus {
      background-color: transparent;
      color: var(--color-black); }
    .button--text:active {
      transform: none; }
  .button--back {
    background-image: url(/assets/new/icon-back-a22be544fd2e0c58ae289c0e8d9cdb2df5d2dd12e67be495f50fe59462e94f91.svg);
    background-position: 1.1em center;
    background-repeat: no-repeat;
    background-size: 0.75em 0.75em;
    padding-left: 2.1em; }
  .button--signup {
    background-image: url(/assets/new/icon-signup-7c5a5edd3c19eaa76e26201e4f2f86b63b235abb5ce40c9e0c087caeec0d3b93.svg);
    background-position: 0.95em center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    border-radius: 3.1em;
    padding: 0.85em 1.3em 0.95em 2.9em; }
  .button--glow {
    --pointer-x-px: calc(var(--pointer-x) * 1px);
    --pointer-y-px: calc(var(--pointer-y) * 1px);
    overflow: hidden;
    position: relative; }
    .button--glow:after {
      background: radial-gradient(7em circle at var(--pointer-x-px) var(--pointer-y-px), rgba(var(--rgb-white), 0.1), rgba(var(--rgb-white), 0));
      border-radius: inherit;
      content: '';
      height: 100%;
      inset: 0;
      left: 0;
      opacity: 0;
      position: absolute;
      top: 0;
      transition: opacity var(--transition);
      width: 100%;
      z-index: 1; }
    .button--glow:hover:after, .button--glow:focus:after {
      opacity: 1; }
  .button--stacked {
    border-radius: 1.7em;
    font-size: var(--font-size-base);
    padding: 0;
    text-align: center; }
    .button--stacked dl {
      display: flex;
      flex-direction: column;
      padding-left: 1.6em;
      padding-right: 1.6em; }
      .button--stacked dl dt {
        font-size: var(--font-size-small);
        font-weight: 600;
        letter-spacing: -0.02em;
        line-height: 1.1em;
        padding-top: 0.9em; }
      .button--stacked dl dd {
        font-size: var(--font-size-x-small);
        font-weight: 400;
        letter-spacing: -0.015em;
        line-height: 1.1em;
        padding-bottom: 1.35em;
        padding-top: 0.35em; }
  .button--square {
    border-radius: 0; }
  @media (min-width: 64em) {
    .button {
      font-size: var(--font-size-base); }
      .button--stacked dl dt {
        font-size: var(--font-size-base);
        padding-top: 0.7em; }
      .button--stacked dl dd {
        font-size: var(--font-size-x-small);
        padding-top: 0.3em; }
      .button--small {
        font-size: var(--font-size-x-small);
        letter-spacing: -0.02em; }
      .button--medium {
        font-size: var(--font-size-small);
        letter-spacing: -0.02em; } }
.color-blue {
  color: var(--color-blue); }

.color-pink {
  color: var(--color-pink); }

.color-sunny {
  color: var(--color-sunny); }

.color-orange {
  color: var(--color-orange); }

.color-green {
  color: var(--color-green); }

.color-grey {
  color: var(--color-grey); }

.color-grey-dark {
  color: var(--color-grey-dark); }

.color-purple {
  color: var(--color-purple); }

.color-red {
  color: var(--color-red); }

.color-teal {
  color: var(--color-teal); }

.color-yellow {
  color: var(--color-yellow); }
.flex {
  display: flex; }

.inline-block {
  display: inline-block; }

.hidden {
  display: none; }

@media (min-width: 768px) {
  .md\:inline-block {
    display: inline-block; }
  .md\:hidden {
    display: none; } }
.grid {
  display: grid; }

.grid-flow-col {
  grid-auto-flow: column; }

.grid-rows-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr)); }

.grid-rows-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)); }

.grid-rows-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)); }

.grid-rows-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)); }

.gap-small {
  grid-gap: var(--space-small); }
.gap-medium {
  grid-gap: var(--space-medium); }
.gap-large {
  grid-gap: var(--space-large); }

@media (min-width: 768px) {
  .md\:grid {
    display: grid; } }
.image {
  padding-bottom: 0.9em;
  padding-top: 0.9em; }
  .image img {
    border-radius: 0.2rem;
    overflow: hidden; }
  .image--shadow img {
    box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.075), 0 10px 40px -20px rgba(var(--rgb-black), 0.25), 0 20px 60px -25px rgba(var(--rgb-black), 0.1), 0 20px 20px -30px rgba(var(--rgb-black), 0.15), 0 40px 30px -40px rgba(var(--rgb-black), 0.25); }
  .image--border img {
    border: 1px solid rgba(var(--rgb-black), 0.1); }
.list-style-none {
  list-style: none; }

.list-style-disc {
  list-style: disc; }

.list-style-circle {
  list-style: circle; }

.list-style-decimal {
  list-style: decimal; }

.list-style-lower-alpha {
  list-style: lower-alpha; }
.w-full {
  width: 100%; }
.w-1\/4 {
  width: 25%; }
.w-1\/2 {
  width: 50%; }
.w-3\/4 {
  width: 75%; }

.max-w-small {
  max-width: var(--max-width-small); }
.max-w-medium {
  max-width: var(--max-width-medium); }
.max-w-large {
  max-width: var(--max-width-large); }
.space--none {
  margin: 0 !important; }

.space--neutral {
  margin: var(--space-neutral) !important; }

.space--xxx-small {
  margin: var(--space-xxx-small) !important; }

.space--xx-small {
  margin: var(--space-xx-small) !important; }

.space--x-small {
  margin: var(--space-x-small) !important; }

.space--small {
  margin: var(--space-small) !important; }

.space--medium {
  margin: var(--space-medium) !important; }

.space--large {
  margin: var(--space-large) !important; }

.space--x-large {
  margin: var(--space-x-large) !important; }

.space--xx-large {
  margin: var(--space-xx-large) !important; }

.space--xxx-large {
  margin: var(--space-xxx-large) !important; }

.space-top--none {
  margin-top: 0 !important; }

.space-top--neutral {
  margin-top: var(--space-neutral) !important; }

.space-top--xxx-small {
  margin-top: var(--space-xxx-small) !important; }

.space-top--xx-small {
  margin-top: var(--space-xx-small) !important; }

.space-top--x-small {
  margin-top: var(--space-x-small) !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--large.space-top--hr, .space-top--large.space-top--hr-center {
    padding-top: calc(var(--space-large) + 5px) !important; }

.space-top--x-large {
  margin-top: var(--space-x-large) !important; }
  .space-top--x-large.space-top--hr, .space-top--x-large.space-top--hr-center {
    padding-top: calc(var(--space-x-large) + 5px) !important; }

.space-top--xx-large {
  margin-top: var(--space-xx-large) !important; }
  .space-top--xx-large.space-top--hr, .space-top--xx-large.space-top--hr-center {
    padding-top: calc(var(--space-xx-large) + 5px) !important; }

.space-top--xxx-large {
  margin-top: var(--space-xxx-large) !important; }

.space-top--negative-large {
  margin-top: calc(-1 * var(--space-large)) !important; }

.space-top--negative-x-large {
  margin-top: calc(-1 * var(--space-x-large)) !important; }

.space-top--negative-xx-large {
  margin-top: calc(-1 * var(--space-xx-large)) !important; }

.space-top--negative-xxx-large {
  margin-top: calc(-1 * var(--space-xxx-large)) !important; }

.space-top--hr,
.space-top--hr-center {
  position: relative; }
  .space-top--hr:before,
  .space-top--hr-center:before {
    background: linear-gradient(150deg, var(--color-orange) 0, var(--color-sunny) 100%);
    border-radius: 5px;
    content: '';
    height: 5px;
    position: absolute;
    top: 0;
    width: 7em; }

.space-top--hr-center:before {
  left: calc(50% - 3.5em); }

.space-bottom--none {
  margin-bottom: 0 !important; }

.space-bottom--neutral {
  margin-bottom: var(--space-neutral) !important; }

.space-bottom--xxx-small {
  margin-bottom: var(--space-xxx-small) !important; }

.space-bottom--xx-small {
  margin-bottom: var(--space-xx-small) !important; }

.space-bottom--x-small {
  margin-bottom: var(--space-x-small) !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--x-large-border {
  border-bottom: 2px dashed var(--color-black);
  margin-bottom: var(--space-x-large) !important;
  padding-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; }

.space-bottom--negative-large {
  margin-bottom: calc(-1 * var(--space-large)) !important; }

.space-bottom--negative-x-large {
  margin-bottom: calc(-1 * var(--space-x-large)) !important; }

.space-bottom--negative-xx-large {
  margin-bottom: calc(-1 * var(--space-xx-large)) !important; }

.space-bottom--negative-xxx-large {
  margin-bottom: calc(-1 * var(--space-xxx-large)) !important; }
.fill {
  color: var(--color-white);
  display: inline-block;
  font-size: 90%;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1em;
  padding: 0.05em 0.175em; }
  .fill--color-green {
    background: linear-gradient(135deg, var(--color-green) 0, var(--color-green-dark) 100%); }
  .fill--color-pink {
    background: linear-gradient(135deg, var(--color-pink) 0, var(--color-pink-dark) 100%); }
  .fill--color-orange {
    background: linear-gradient(135deg, var(--color-orange) 0, var(--color-orange-dark) 100%); }
  .fill--color-teal {
    background: linear-gradient(135deg, var(--color-teal) 0, var(--color-teal-dark) 100%); }
  .fill--color-purple {
    background: linear-gradient(135deg, var(--color-purple) 0, var(--color-purple-dark) 100%); }
  .fill--color-blue {
    background: linear-gradient(135deg, var(--color-blue) 0, var(--color-blue-dark) 100%); }
  .fill--color-yellow {
    background: linear-gradient(135deg, var(--color-sunny) 0, var(--color-yellow) 100%); }
  .fill--rotate-minus-1 {
    transform: rotate(-0.7deg); }
  .fill--rotate-minus-2 {
    transform: rotate(-1.4deg); }
  .fill--rotate-minus-3 {
    transform: rotate(-2.1deg); }
  .fill--rotate-plus-1 {
    transform: rotate(0.7deg); }
  .fill--rotate-plus-2 {
    transform: rotate(1.4deg); }
  .fill--rotate-plus-3 {
    transform: rotate(2.1deg); }

.font-size-xxx-small {
  font-size: var(--font-size-xxx-small); }

.font-size-xx-small {
  font-size: var(--font-size-xx-small); }

.font-size-x-small {
  font-size: var(--font-size-x-small); }

.font-size-small {
  font-size: var(--font-size-small); }

.font-size-medium {
  font-size: var(--font-size-medium); }

.font-size-large {
  font-size: var(--font-size-large); }

.font-size-x-large {
  font-size: var(--font-size-x-large); }

.font-size-xx-large {
  font-size: var(--font-size-xx-large); }

.font-size-xxx-large {
  font-size: var(--font-size-xxx-large); }

.font-normal {
  font-weight: normal; }

.text-left {
  text-align: left; }

.text-center {
  text-align: center; }

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

.whitespace-nowrap {
  white-space: nowrap; }

.display-inline-block {
  display: inline-block; }

.italic {
  font-style: italic; }

.line-through {
  text-decoration: line-through; }

.text-highlight {
  background: linear-gradient(90deg, rgba(var(--rgb-yellow), 0) 0, rgba(var(--rgb-yellow), 0.75) 5%, rgba(var(--rgb-yellow), 0.25) 95%, rgba(var(--rgb-yellow), 0) 100%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  display: inline; }
  .text-highlight--dark {
    background: linear-gradient(90deg, rgba(var(--rgb-purple), 0) 0, rgba(var(--rgb-purple), 0.75) 5%, rgba(var(--rgb-purple), 0.25) 95%, rgba(var(--rgb-purple), 0) 100%); }

.text-new:before,
.text-soon:before {
  border-radius: 0.2rem;
  color: var(--color-white);
  display: inline-block;
  font-size: var(--font-size-xxx-small);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1em;
  margin: 0.2em 0.6em 0 -0.7em;
  padding-bottom: 0.4em;
  padding-top: 0.35em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-7deg);
  vertical-align: top; }
@media (min-width: 64em) {
  .text-new:before,
  .text-soon:before {
    margin-right: 0.6em; } }

.text-new:before {
  background: linear-gradient(135deg, var(--color-green) 0, var(--color-green-dark) 100%);
  content: 'New';
  width: 3.8em; }
@media (min-width: 64em) {
  .text-new:before {
    margin-left: -3.8em; } }

.text-soon:before {
  background: linear-gradient(135deg, var(--color-purple) 0, var(--color-purple-dark) 100%);
  content: 'Soon';
  width: 4.5em; }
@media (min-width: 64em) {
  .text-soon:before {
    margin-left: -4.5em; } }