:root {
  --header-height: 64px;
  --dora-black: rgb(34, 30, 39);
  --dora-warm-white: rgb(240, 238, 234);
  --dora-sky-blue: rgb(73, 160, 236);
  --dora-vermillion: rgb(245, 90, 36);
  --dora-spotlight-yellow: rgb(240, 225, 90);
  --dora-mauve: rgb(184, 175, 254);
  --dora-deep-plum: rgb(114, 2, 92);
  --dora-prussian-blue: rgb(11, 57, 84);
  --dora-primary-dark: var(--dora-black);
  --dora-primary-light: var(--dora-warm-white);
  --dora-highlight: var(--dora-spotlight-yellow);
  --dora-secondary-a: var(--dora-vermillion);
  --dora-secondary-b: var(--dora-sky-blue);
  --dora-secondary-c: var(--dora-mauve);
  --dora-tertiary-a: var(--dora-deep-plum);
  --dora-tertiary-b: var(--dora-prussian-blue);
  --background: white;
  --grey-10: color-mix(in srgb, var(--dora-black), white 90%);
  --grey-15: color-mix(in srgb, var(--dora-black), white 85%);
  --grey-20: color-mix(in srgb, var(--dora-black), white 80%);
  --grey-30: color-mix(in srgb, var(--dora-black), white 70%);
  --grey-40: color-mix(in srgb, var(--dora-black), white 60%);
  --grey-50: color-mix(in srgb, var(--dora-black), white 50%);
  --grey-60: color-mix(in srgb, var(--dora-black), white 40%);
  --grey-70: color-mix(in srgb, var(--dora-black), white 30%);
  --grey-80: color-mix(in srgb, var(--dora-black), white 20%);
  --grey-90: color-mix(in srgb, var(--dora-black), white 10%); }

.homepage-hero {
  background-color: var(--dora-highlight);
  position: relative; }
  .homepage-hero .hero-content {
    margin: auto;
    margin-bottom: 24px;
    width: 1440px;
    max-width: 100vw; }
    .homepage-hero .hero-content div.dora {
      width: 100%;
      aspect-ratio: 1440 / 610;
      position: relative; }
      .homepage-hero .hero-content div.dora div.letters {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: contain; }
        .homepage-hero .hero-content div.dora div.letters.d_ra {
          background-image: url(/img/homepage/d_ra.svg); }
        .homepage-hero .hero-content div.dora div.letters.o {
          background-image: url(/img/homepage/o.gif); }
  .homepage-hero div.hero-link {
    text-align: right;
    margin-right: 24px; }
    @media (max-width: 800px) {
      .homepage-hero div.hero-link {
        display: none; } }
.homepage-lede {
  box-sizing: border-box;
  background-color: var(--dora-primary-light); }
  .homepage-lede .lede-content-container {
    max-width: 1440px;
    margin: calc(min(48px, 8vw)) auto; }
    .homepage-lede .lede-content-container .lede-content {
      margin: 12px 36px;
      max-width: 100%;
      width: fit-content;
      display: flex;
      flex-direction: row;
      align-items: center; }
      @media (max-width: 800px) {
        .homepage-lede .lede-content-container .lede-content {
          flex-direction: column; } }
      .homepage-lede .lede-content-container .lede-content h1,
      .homepage-lede .lede-content-container .lede-content p {
        flex: 1 0 50%;
        text-wrap: balance; }
      .homepage-lede .lede-content-container .lede-content h1 {
        font-size: calc(min(72px, 7vw));
        font-weight: 600;
        padding-right: 12px; }
      .homepage-lede .lede-content-container .lede-content p {
        font-family: "Google Sans Flex", "Roboto", Arial, Helvetica, sans-serif;
        font-size: calc(clamp(16px, 2.5vw, 20px));
        font-weight: 500; }

.homepage-feature-container {
  background-color: var(--dora-primary-dark); }
  .homepage-feature-container .homepage-feature {
    margin: auto;
    max-width: 1440px;
    box-sizing: border-box;
    color: var(--dora-primary-light);
    padding: 48px;
    display: flex;
    align-items: center; }
    .homepage-feature-container .homepage-feature .content {
      flex-basis: 50%; }
      .homepage-feature-container .homepage-feature .content h3 {
        font-size: 12px;
        text-transform: uppercase;
        font-weight: 500;
        letter-spacing: 1px; }
        @media (max-width: 480px) {
          .homepage-feature-container .homepage-feature .content h3 {
            font-size: 11px; } }
      .homepage-feature-container .homepage-feature .content p {
        font-family: "Google Sans Flex", "Roboto", Arial, Helvetica, sans-serif;
        font-size: 16px;
        line-height: 1.35;
        font-weight: 400; }
      .homepage-feature-container .homepage-feature .content button {
        margin-top: 20px; }
        .homepage-feature-container .homepage-feature .content button:hover {
          background-color: var(--dora-primary-light);
          color: var(--dora-primary-dark); }
    .homepage-feature-container .homepage-feature .image {
      flex-basis: 50%; }
      .homepage-feature-container .homepage-feature .image img {
        width: 340px;
        max-width: 40vw; }
        .homepage-feature-container .homepage-feature .image img.stroke {
          border: 0.5px solid var(--dora-primary-light); }
    .homepage-feature-container .homepage-feature.image-align-right {
      flex-direction: row; }
      .homepage-feature-container .homepage-feature.image-align-right .image {
        text-align: right; }
    .homepage-feature-container .homepage-feature.image-align-left {
      flex-direction: row-reverse; }
      .homepage-feature-container .homepage-feature.image-align-left .image {
        text-align: left; }
        .homepage-feature-container .homepage-feature.image-align-left .image div.hero-link {
          text-align: right;
          margin-right: 24px; }
    @media (max-width: 800px) {
      .homepage-feature-container .homepage-feature {
        flex-direction: column-reverse; }
        .homepage-feature-container .homepage-feature.image-align-right, .homepage-feature-container .homepage-feature.image-align-left {
          flex-direction: column-reverse; }
        .homepage-feature-container .homepage-feature .image {
          text-align: center;
          margin-bottom: 24px; } }
.homepage-snipes-wrapper {
  background-color: var(--dora-primary-light); }
  .homepage-snipes-wrapper .homepage-snipes-container {
    width: 1440px;
    box-sizing: border-box;
    max-width: 100%;
    margin: auto;
    padding: 48px; }
    .homepage-snipes-wrapper .homepage-snipes-container .homepage-snipes {
      display: grid;
      gap: 24px;
      grid-template-columns: 1fr 1fr 1fr 1fr; }
      @media (max-width: 960px) {
        .homepage-snipes-wrapper .homepage-snipes-container .homepage-snipes {
          grid-template-columns: 1fr 1fr; } }
      @media (max-width: 800px) {
        .homepage-snipes-wrapper .homepage-snipes-container .homepage-snipes {
          grid-template-columns: 1fr; } }
      .homepage-snipes-wrapper .homepage-snipes-container .homepage-snipes .homepage-snipe {
        background-color: var(--grey-50); }
        .homepage-snipes-wrapper .homepage-snipes-container .homepage-snipes .homepage-snipe:nth-child(1) {
          background-color: var(--dora-secondary-a); }
          .homepage-snipes-wrapper .homepage-snipes-container .homepage-snipes .homepage-snipe:nth-child(1) h3 {
            color: var(--dora-secondary-a); }
        .homepage-snipes-wrapper .homepage-snipes-container .homepage-snipes .homepage-snipe:nth-child(2) {
          background-color: var(--dora-secondary-b); }
          .homepage-snipes-wrapper .homepage-snipes-container .homepage-snipes .homepage-snipe:nth-child(2) h3 {
            color: var(--dora-secondary-b); }
        .homepage-snipes-wrapper .homepage-snipes-container .homepage-snipes .homepage-snipe:nth-child(3) {
          background-color: var(--dora-secondary-c); }
          .homepage-snipes-wrapper .homepage-snipes-container .homepage-snipes .homepage-snipe:nth-child(3) h3 {
            color: var(--dora-secondary-c); }
        .homepage-snipes-wrapper .homepage-snipes-container .homepage-snipes .homepage-snipe:nth-child(4) {
          background-color: var(--dora-highlight); }
          .homepage-snipes-wrapper .homepage-snipes-container .homepage-snipes .homepage-snipe:nth-child(4) h3 {
            color: var(--dora-highlight); }
        .homepage-snipes-wrapper .homepage-snipes-container .homepage-snipes .homepage-snipe a {
          text-decoration: none;
          color: var(--dora-primary-dark); }
        .homepage-snipes-wrapper .homepage-snipes-container .homepage-snipes .homepage-snipe .image {
          border-bottom: 3px solid var(--dora-primary-dark); }
          .homepage-snipes-wrapper .homepage-snipes-container .homepage-snipes .homepage-snipe .image img {
            width: 320px;
            display: block;
            margin: auto;
            max-width: 100%; }
        .homepage-snipes-wrapper .homepage-snipes-container .homepage-snipes .homepage-snipe h3 {
          line-height: 18px;
          font-size: 14px;
          margin: 0 0 0 auto;
          width: fit-content;
          padding: 4px 12px;
          color: var(--dora-primary-light);
          background-color: var(--dora-primary-dark); }
        .homepage-snipes-wrapper .homepage-snipes-container .homepage-snipes .homepage-snipe .text {
          padding: 18px 24px; }
          .homepage-snipes-wrapper .homepage-snipes-container .homepage-snipes .homepage-snipe .text h2 {
            font-size: 24px;
            font-weight: 500;
            margin: 0;
            margin-bottom: 12px; }
          .homepage-snipes-wrapper .homepage-snipes-container .homepage-snipes .homepage-snipe .text p {
            font-family: "Google Sans Flex", "Roboto", Arial, Helvetica, sans-serif;
            font-size: 16px;
            line-height: 1.35;
            font-weight: 400; }

section.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em;
  place-items: stretch; }
  section.features article {
    padding: 0;
    border: 1px solid var(--grey-15);
    border-radius: 8px; }
    section.features article h2 {
      background-color: #f8f9fa;
      margin: 0;
      padding: 1rem 1rem 0.5rem 1rem;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px; }
      section.features article h2 a {
        color: #202124;
        text-decoration: none; }
    section.features article div.content {
      display: flex;
      flex-direction: row; }
      section.features article div.content .text {
        padding: 1rem; }
      section.features article div.content .image {
        text-align: center; }
        section.features article div.content .image img {
          margin: 1rem; }
          section.features article div.content .image img.stroke {
            border: 1px solid var(--grey-15); }
      section.features article div.content.image-left {
        flex-direction: row-reverse; }
        @media (max-width: 800px) {
          section.features article div.content.image-left {
            flex-direction: column-reverse; } }
      @media (max-width: 800px) {
        section.features article div.content {
          flex-direction: column-reverse; } }
    section.features article.cols_1 img.feature {
      width: 10rem; }
      @media (max-width: 960px) {
        section.features article.cols_1 img.feature {
          width: 8rem; } }
    @media (max-width: 800px) {
      section.features article.cols_1 {
        grid-column: span 2; } }
    section.features article.cols_2 {
      grid-column: span 2; }
      section.features article.cols_2 img.feature {
        width: 16rem; }
        @media (max-width: 960px) {
          section.features article.cols_2 img.feature {
            width: 12rem; } }