@layer reset, fonts, base, layout, components;

@layer reset {
  /* Box sizing rules */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Prevent font size inflation */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  /* Remove default margin in favour of better control in authored CSS */
  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
  ul[role="list"],
  ol[role="list"] {
    list-style: none;
  }

  /* Set core body defaults */
  body {
    min-height: 100vh;
    line-height: 1.5;
  }

  /* Set shorter line heights on headings and interactive elements */
  h1,
  h2,
  h3,
  h4,
  button,
  input,
  label {
    line-height: 1.1;
  }

  /* Make images easier to work with */
  img,
  picture {
    max-width: 100%;
    display: block;
  }

  /* Inherit fonts for inputs and buttons */
  label,
  input,
  button,
  textarea,
  select {
    font-family: inherit;
    font-size: inherit;
  }

  /* Make sure textareas without a rows attribute are not tiny */
  textarea:not([rows]) {
    min-height: 10em;
  }

  /* Anything that has been anchored to should have extra scroll margin */
  :target {
    scroll-margin-block: 5ex;
  }
}

@layer fonts {
  /* https://fonts.google.com/specimen/Bebas+Neue */

  /* latin-ext */
  @font-face {
    font-family: "Bebas Neue";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/bebasneue/v16/JTUSjIg69CK48gW7PXoo9Wdhyzbi.woff2)
      format("woff2");
    unicode-range:
      U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
      U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
      U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: "Bebas Neue";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/bebasneue/v16/JTUSjIg69CK48gW7PXoo9Wlhyw.woff2)
      format("woff2");
    unicode-range:
      U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
      U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
      U+2212, U+2215, U+FEFF, U+FFFD;
  }

  /* https://fonts.google.com/specimen/Arimo */

  /* latin-ext */
  @font-face {
    font-family: "Arimo";
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url(../fonts/arimo/v36/P5sCzZCDf9_T_10c9C1kiK-u.woff2) format("woff2");
    unicode-range:
      U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
      U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
      U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: "Arimo";
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url(../fonts/arimo/v36/P5sCzZCDf9_T_10c9CNkiA.woff2) format("woff2");
    unicode-range:
      U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
      U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
      U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: "Arimo";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(../fonts/arimo/v36/P5sMzZCDf9_T_10XxCF8jA.woff2) format("woff2");
    unicode-range:
      U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
      U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
      U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: "Arimo";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(../fonts/arimo/v36/P5sMzZCDf9_T_10ZxCE.woff2) format("woff2");
    unicode-range:
      U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
      U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
      U+2212, U+2215, U+FEFF, U+FFFD;
  }
}

@layer base {
  :root {
    --fnt-heading: "Arimo", sans-serif;
    --fnt-body: "Arimo", sans-serif;
    --fnt-accent: "Bebas Neue", sans-serif;

    --clr-white: #ffffff;
    --clr-dark: #535353;

    --clr-brand: #1d4b97;
    --clr-accent: #ff5f00;

    --clr-border-light: #e2edf7;
    --clr-border-mid: #cddff0;

    --rad-5: 0.3125rem;
    --rad-10: 0.625rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  body {
    background-color: var(--clr-white);
    font-family: var(--fnt-body);
    font-size: 1.0625rem;
    color: var(--clr-dark);
  }

  h1,
  h2,
  h3 {
    font-family: var(--fnt-heading);
    font-style: normal;
    font-weight: 400;
  }

  h1 {
    text-transform: uppercase;
    margin: 0;
  }
}

@layer layout {
  .wrapper {
    /* 1170px - 16px */
    --wrapper-max-width: 73.125rem;
    --wrapper-padding: 1rem;

    /* 640px - 20px */
    @media (min-width: 40rem) {
      --wrapper-padding: 1.25rem;
    }

    /* 1280px - 56px */
    @media (min-width: 80rem) {
      --wrapper-padding: 3.5rem;
    }

    width: min(var(--wrapper-max-width), 100% - var(--wrapper-padding) * 2);
    margin-inline: auto;
  }
}

@layer components {
  .hero {
    width: 100%;
    justify-content: flex-end;
    text-align: center;
    padding-block: 2.375rem;

    background-color: #06060b;
    color: #ffffff;
    background-image: url("../image/state-truck-insurance/california/hero-640px.webp");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;

    @media (min-width: 64rem) {
      padding-block: 3.875rem;
      background-size: cover;
      background-image: url("../image/state-truck-insurance/california/hero-1280px.webp");
    }

    @media (min-width: 90rem) {
      background-image: url("../image/state-truck-insurance/california/hero-1920px.webp");
    }
  }

  .hero,
  .hero__header,
  .hero__footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    @media (min-width: 64rem) {
      gap: 2rem;
      display: block;
      text-align: left;
    }
  }

  .hero__header {
    width: 100%;
    margin-inline: auto;
    margin-block: calc(100vw - 52vw) 2rem;

    @media (min-width: 64rem) {
      margin-block: 0 3.75rem;
    }
  }

  .hero__footer {
    @media (min-width: 64rem) {
      flex-direction: row;
    }
  }

  .page-title {
    font-size: 2.25rem;
    line-height: 2.25rem;
    font-weight: 700;
    margin-inline: auto;

    @media (min-width: 40rem) {
      font-size: 2.8125rem;
      line-height: 2.9375rem;
      margin-inline: auto;
      max-width: 24ch;
    }

    @media (min-width: 64rem) {
      font-size: 4rem;
      line-height: 4rem;
      margin-inline: 0;
      max-width: 14ch;
    }
  }

  .page-subtitle {
    display: block;
    font-size: 1.875rem;
    line-height: 2.5rem;
    font-weight: 700;
    max-width: 20ch;
    margin-inline: auto;
    margin-top: 0.75rem;
    text-transform: capitalize;

    @media (min-width: 64rem) {
      font-size: 2.5rem;
      line-height: 3.125rem;
      margin-top: 2rem;
      margin-inline: 0;
    }
  }

  .hero__footer {
    display: flex;
    justify-content: space-between;
    gap: 0;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='2' viewBox='0 0 100%25 1' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cline x1='0' y1='0.5' x2='100%25' y2='0.5' stroke='%23E3E3E3' stroke-width='2' stroke-dasharray='2 2'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100% auto;

    @media (min-width: 64rem) {
      padding-top: 3rem;
    }
  }

  .hero__footer p {
    margin-block: 1.75rem 2rem;
    margin-inline: auto;
    max-width: 60ch;

    @media (min-width: 64rem) {
      margin: 0;
    }
  }

  .page-section {
    position: relative;
    padding-block: 3.5rem 4.5rem;
    box-shadow: 0px 1px 6px 3px rgba(0, 0, 0, 0.06);
    z-index: 2;
  }

  .page-section--alt-color {
    position: relative;
    background-color: #ecf4fa;
    box-shadow: none;
    z-index: 1;
  }

  .page-section--gradient {
    color: var(--clr-white);
    background: linear-gradient(360deg, #164ba0 0%, #0b1d3b 100%);
  }

  .page-section--gradient .page-section__title {
    color: var(--clr-white);
  }

  .page-section--white {
    background-color: transparent;
    box-shadow: none;
  }

  .page-section__header,
  .page-section__footer {
    text-align: center;
  }

  .page-section__header {
    margin-bottom: 2rem;
  }

  .page-section__footer {
    margin-top: 2.5rem;
  }

  .page-section__title {
    color: var(--clr-brand);
    font-size: 1.875rem;
    line-height: 1.2;
    margin-bottom: 2.25rem;
    text-wrap: balance;

    @media (min-width: 40rem) {
      font-size: 2.25rem;
      line-height: 3.125rem;
    }

    @media (min-width: 64rem) {
      line-height: 3.125rem;
      font-size: 2.5rem;
    }
  }

  .insurance {
    display: grid;
    align-items: stretch;
    grid-auto-rows: 1fr;
    gap: 1.875rem;
    margin: 0;
    padding: 0;
    list-style: none;

    @media (min-width: 64rem) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .insurance-card {
    position: relative;
    display: grid;
    grid-template-columns: 3fr auto;
    gap: 1rem;
    min-height: 240px;
    height: 100%;
    border: 1px solid var(--clr-border-light);
    border-radius: var(--rad-10);
    padding: 1.875rem 1.875rem 1.875rem 2.8125rem;

    background: linear-gradient(270deg, #ecf4fa 0%, #ffffff 100%);

    @media (min-width: 40rem) {
      padding: 1.875rem 1rem 1.875rem 2.8125rem;
    }
  }

  .insurance-card__main {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ4IiBoZWlnaHQ9IjE5IiB2aWV3Qm94PSIwIDAgMTQ4IDE5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMTE0Ljk5NiA5LjU0MTQ2QzExNC45OTYgMTEuNjU5NCAxMTYuNzExIDEzLjM3NjQgMTE4LjgyNiAxMy4zNzY0QzEyMC45NCAxMy4zNzY0IDEyMi42NTUgMTEuNjU5NCAxMjIuNjU1IDkuNTQxNDZDMTIyLjY1NSA3LjQyMzUgMTIwLjk0IDUuNzA2NTUgMTE4LjgyNiA1LjcwNjU1QzExNi43MTEgNS43MDY1NSAxMTQuOTk2IDcuNDIzNSAxMTQuOTk2IDkuNTQxNDZaIiBmaWxsPSIjRTJFREY3Ii8+CjxwYXRoIGQ9Ik0xMDMuODUgOS41NDE0NkMxMDMuODUgMTEuNjU5NCAxMDUuNTY1IDEzLjM3NjQgMTA3LjY4IDEzLjM3NjRDMTA5Ljc5NCAxMy4zNzY0IDExMS41MDkgMTEuNjU5NCAxMTEuNTA5IDkuNTQxNDZDMTExLjUwOSA3LjQyMzUgMTA5Ljc5NCA1LjcwNjU1IDEwNy42OCA1LjcwNjU1QzEwNS41NjUgNS43MDY1NSAxMDMuODUgNy40MjM1IDEwMy44NSA5LjU0MTQ2WiIgZmlsbD0iI0UyRURGNyIvPgo8cGF0aCBkPSJNOTIuNzA1NSA5LjU0MTQ2QzkyLjcwNTUgMTEuNjU5NCA5NC40MTk4IDEzLjM3NjQgOTYuNTM0NiAxMy4zNzY0Qzk4LjY0OTQgMTMuMzc2NCAxMDAuMzY0IDExLjY1OTQgMTAwLjM2NCA5LjU0MTQ2QzEwMC4zNjQgNy40MjM1IDk4LjY0OTQgNS43MDY1NSA5Ni41MzQ2IDUuNzA2NTVDOTQuNDE5OCA1LjcwNjU1IDkyLjcwNTUgNy40MjM1IDkyLjcwNTUgOS41NDE0NloiIGZpbGw9IiNFMkVERjciLz4KPHBhdGggZD0iTTgxLjU1OTUgOS41NDE0NUM4MS41NTk1IDExLjY1OTQgODMuMjczOSAxMy4zNzY0IDg1LjM4ODcgMTMuMzc2NEM4Ny41MDM1IDEzLjM3NjQgODkuMjE3OCAxMS42NTk0IDg5LjIxNzggOS41NDE0NUM4OS4yMTc4IDcuNDIzNDkgODcuNTAzNSA1LjcwNjU1IDg1LjM4ODcgNS43MDY1NUM4My4yNzM5IDUuNzA2NTUgODEuNTU5NSA3LjQyMzQ5IDgxLjU1OTUgOS41NDE0NVoiIGZpbGw9IiNFMkVERjciLz4KPHBhdGggZD0iTTcwLjQxNDkgOS41NDE0NUM3MC40MTQ5IDExLjY1OTQgNzIuMTI5MyAxMy4zNzY0IDc0LjI0NDEgMTMuMzc2NEM3Ni4zNTg5IDEzLjM3NjQgNzguMDczMiAxMS42NTk0IDc4LjA3MzIgOS41NDE0NUM3OC4wNzMyIDcuNDIzNDkgNzYuMzU4OSA1LjcwNjU1IDc0LjI0NDEgNS43MDY1NUM3Mi4xMjkzIDUuNzA2NTUgNzAuNDE0OSA3LjQyMzQ5IDcwLjQxNDkgOS41NDE0NVoiIGZpbGw9IiNFMkVERjciLz4KPHBhdGggZD0iTTU5LjI2ODUgOS41NDE0NUM1OS4yNjg1IDExLjY1OTQgNjAuOTgyOSAxMy4zNzY0IDYzLjA5NzcgMTMuMzc2NEM2NS4yMTI1IDEzLjM3NjQgNjYuOTI2OSAxMS42NTk0IDY2LjkyNjkgOS41NDE0NUM2Ni45MjY5IDcuNDIzNDkgNjUuMjEyNSA1LjcwNjU1IDYzLjA5NzcgNS43MDY1NUM2MC45ODI5IDUuNzA2NTUgNTkuMjY4NSA3LjQyMzQ5IDU5LjI2ODUgOS41NDE0NVoiIGZpbGw9IiNFMkVERjciLz4KPHBhdGggZD0iTTE0Mi4yOTkgOS4zNDQ4NkMxNDIuMjk5IDEwLjcxMjIgMTQzLjQwNiAxMS44MjA3IDE0NC43NzEgMTEuODIwN0MxNDYuMTM3IDExLjgyMDcgMTQ3LjI0NCAxMC43MTIyIDE0Ny4yNDQgOS4zNDQ4NkMxNDcuMjQ0IDcuOTc3NTIgMTQ2LjEzNyA2Ljg2OTA3IDE0NC43NzEgNi44NjkwN0MxNDMuNDA2IDYuODY5MDcgMTQyLjI5OSA3Ljk3NzUyIDE0Mi4yOTkgOS4zNDQ4NloiIGZpbGw9IiNFMkVERjciLz4KPHBhdGggZD0iTTQ4LjEyMzEgOS41NDE0NUM0OC4xMjMxIDExLjY1OTQgNDkuODM3NCAxMy4zNzY0IDUxLjk1MjIgMTMuMzc2NEM1NC4wNjcgMTMuMzc2NCA1NS43ODE0IDExLjY1OTQgNTUuNzgxNCA5LjU0MTQ1QzU1Ljc4MTQgNy40MjM0OSA1NC4wNjcgNS43MDY1NSA1MS45NTIyIDUuNzA2NTVDNDkuODM3NCA1LjcwNjU1IDQ4LjEyMzEgNy40MjM0OSA0OC4xMjMxIDkuNTQxNDVaIiBmaWxsPSIjRTJFREY3Ii8+CjxwYXRoIGQ9Ik0xMjYuMTQxIDkuNTQxNUMxMjYuMTQxIDEwLjgwMDIgMTI3LjE2IDExLjgyMDYgMTI4LjQxNyAxMS44MjA2QzEyOS42NzQgMTEuODIwNiAxMzAuNjkzIDEwLjgwMDIgMTMwLjY5MyA5LjU0MTVDMTMwLjY5MyA4LjI4Mjc4IDEyOS42NzQgNy4yNjIzOCAxMjguNDE3IDcuMjYyMzhDMTI3LjE2IDcuMjYyMzggMTI2LjE0MSA4LjI4Mjc4IDEyNi4xNDEgOS41NDE1WiIgZmlsbD0iI0UyRURGNyIvPgo8cGF0aCBkPSJNMTM0LjE4IDkuNTAwNTlDMTM0LjE4IDEwLjc4MTkgMTM1LjIxNyAxMS44MjA2IDEzNi40OTYgMTEuODIwNkMxMzcuNzc1IDExLjgyMDYgMTM4LjgxMyAxMC43ODE5IDEzOC44MTMgOS41MDA1OUMxMzguODEzIDguMjE5MjcgMTM3Ljc3NSA3LjE4MDU1IDEzNi40OTYgNy4xODA1NUMxMzUuMjE3IDcuMTgwNTUgMTM0LjE4IDguMjE5MjcgMTM0LjE4IDkuNTAwNTlaIiBmaWxsPSIjRTJFREY3Ii8+CjxwYXRoIGQ9Ik0xOC4zMzExIDkuMTc5MjhDMTguMzMxMSAxNC4yNDg5IDE0LjIyNzUgMTguMzU4NiA5LjE2NTUzIDE4LjM1ODZDNC4xMDM1NSAxOC4zNTg2IDAgMTQuMjQ4OSAwIDkuMTc5MjhDMCA0LjEwOTcgNC4xMDM1NSAwIDkuMTY1NTMgMEMxNC4yMjc1IDAgMTguMzMxMSA0LjEwOTcgMTguMzMxMSA5LjE3OTI4WiIgZmlsbD0iI0UyRURGNyIvPgo8L3N2Zz4K");
    background-repeat: no-repeat;
    background-position: left bottom;
    padding-bottom: 2rem;
  }

  .insurance-card__title {
    color: var(--clr-brand);
    font-size: 1.5rem;
    font-weight: 700;
    max-width: 22ch;
    margin-bottom: 1rem;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 1.875rem;
      display: inline-block;
      width: 23px;
      height: 21px;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 21' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.1873 9.81234L0 0V20.7882L22.1873 9.81234Z' fill='%23E6EFF8' /%3E%3C/svg%3E");
    }
  }

  .insurance-initials {
    display: block;
    font-family: var(--fnt-accent);
    font-size: 4.75rem;
    line-height: 1;
    color: #e2edf7;
    text-align: right;
    margin-top: -0.5rem; /* remove top extra space */

    @media (min-width: 40rem) {
      font-size: 7.375rem;
      margin-top: -0.6125rem; /* remove top extra space */
    }
  }

  .overview-table {
    width: 100%;
    max-width: 100%;
    background-color: var(--clr-white);
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid var(--clr-border-mid) !important;
    border-radius: var(--rad-10);
    overflow: hidden !important;
    text-align: left;
  }

  .overview-table thead tr {
    background: linear-gradient(90deg, #164ba0 0%, #0c1e3c 100%);
  }

  .overview-table th {
    color: var(--clr-white);
    font-size: 1rem;
    font-weight: 700 !important;
    vertical-align: top;
    padding: 1.2125rem 1.25rem;

    @media (min-width: 40rem) {
      font-size: 1.5rem;
    }

    @media (min-width: 64rem) {
      padding: 1.25rem 2rem;
    }
  }

  .overview-table td {
    vertical-align: top;
    padding: 1.5rem 1.25rem;
    border-bottom: 1px solid var(--clr-border-mid) !important;

    @media (min-width: 64rem) {
      padding: 1.25rem 2rem;
    }
  }

  .overview-table td.feature-name {
    font-weight: 700 !important;
    width: 30%;
  }

  .overview-table tr:last-child td {
    border-bottom: none !important;
  }

  .state-card {
    position: relative;
    display: grid;
    border-radius: var(--rad-5);
    background: linear-gradient(90deg, #164b9f 0%, #0a2e68 31.81%);
    /*background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%230081ECFF' stroke-width='3' stroke-dasharray='2%2c 2' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");*/
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='0.75' y='0.75' width='calc(100%25 - 1.5px)' height='calc(100%25 - 1.5px)' rx='5' ry='5' fill='none' stroke='%230081ECFF' stroke-width='1.5' stroke-dasharray='0%2c 3' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");

    @media (min-width: 64rem) {
      grid-template-columns: 1fr 2fr;
      gap: 1.5rem;
    }
  }

  .state-card__header {
    display: grid;
    grid-template-columns: 5fr 1fr;
    gap: 1rem;
    padding: 2rem 2rem 0 3rem;
    background-image: url("../image/state-truck-insurance/california/california.svg");
    background-repeat: no-repeat;
    background-position: right 10% top;
    background-size: contain;

    @media (min-width: 64rem) {
      background-position: right top;
      padding: 2rem 0 0 3rem;
    }
  }

  .state-card__title {
    font-size: 2rem;
    line-height: 2.25rem;
    text-transform: uppercase;
    max-width: 12ch;

    @media (min-width: 40rem) {
      font-size: 2.625rem;
      line-height: 2.5rem;
    }

    @media (min-width: 64rem) {
      font-size: 2.25rem;
      line-height: 2.5rem;
    }

    &::after {
      content: "";
      display: block;
      padding: 3rem 0 0 0;
      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ2IiBoZWlnaHQ9IjExIiB2aWV3Qm94PSIwIDAgMTQ2IDExIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMTQyLjUyMSA1LjUwODQ0QzE0Mi41MjEgNi4yNDE0MyAxNDMuMTAyIDYuODM1NjQgMTQzLjgxOCA2LjgzNTY0QzE0NC41MzUgNi44MzU2NCAxNDUuMTE1IDYuMjQxNDMgMTQ1LjExNSA1LjUwODQ1QzE0NS4xMTUgNC43NzU0NiAxNDQuNTM1IDQuMTgxMjUgMTQzLjgxOCA0LjE4MTI1QzE0My4xMDIgNC4xODEyNSAxNDIuNTIxIDQuNzc1NDYgMTQyLjUyMSA1LjUwODQ0WiIgZmlsbD0iIzI4NjNDNSIvPgo8cGF0aCBkPSJNNjUuNTQyIDUuNTU2MjdDNjUuNTQyIDYuNzg5NjIgNjYuNTE5MSA3Ljc4OTQ0IDY3LjcyNDQgNy43ODk0NEM2OC45Mjk4IDcuNzg5NDQgNjkuOTA2OSA2Ljc4OTYyIDY5LjkwNjkgNS41NTYyN0M2OS45MDY5IDQuMzIyOTIgNjguOTI5OCAzLjMyMzA5IDY3LjcyNDQgMy4zMjMwOUM2Ni41MTkxIDMuMzIzMDkgNjUuNTQyIDQuMzIyOTIgNjUuNTQyIDUuNTU2MjdaIiBmaWxsPSIjMjg2M0M1Ii8+CjxwYXRoIGQ9Ik01OS4xODk0IDUuNTU2MjdDNTkuMTg5NCA2Ljc4OTYyIDYwLjE2NjUgNy43ODk0NCA2MS4zNzE4IDcuNzg5NDRDNjIuNTc3MSA3Ljc4OTQ0IDYzLjU1NDMgNi43ODk2MiA2My41NTQzIDUuNTU2MjdDNjMuNTU0MyA0LjMyMjkyIDYyLjU3NzEgMy4zMjMwOSA2MS4zNzE4IDMuMzIzMDlDNjAuMTY2NSAzLjMyMzA5IDU5LjE4OTQgNC4zMjI5MiA1OS4xODk0IDUuNTU2MjdaIiBmaWxsPSIjMjg2M0M1Ii8+CjxwYXRoIGQ9Ik01Mi44MzczIDUuNTU2MjdDNTIuODM3MyA2Ljc4OTYyIDUzLjgxNDQgNy43ODk0NCA1NS4wMTk3IDcuNzg5NDRDNTYuMjI1MSA3Ljc4OTQ0IDU3LjIwMjIgNi43ODk2MiA1Ny4yMDIyIDUuNTU2MjdDNTcuMjAyMiA0LjMyMjkyIDU2LjIyNTEgMy4zMjMwOSA1NS4wMTk3IDMuMzIzMDlDNTMuODE0NCAzLjMyMzA5IDUyLjgzNzMgNC4zMjI5MiA1Mi44MzczIDUuNTU2MjdaIiBmaWxsPSIjMjg2M0M1Ii8+CjxwYXRoIGQ9Ik00Ni40ODQ3IDUuNTU2MjdDNDYuNDg0NyA2Ljc4OTYyIDQ3LjQ2MTggNy43ODk0NCA0OC42NjcxIDcuNzg5NDRDNDkuODcyNCA3Ljc4OTQ0IDUwLjg0OTUgNi43ODk2MiA1MC44NDk1IDUuNTU2MjdDNTAuODQ5NSA0LjMyMjkyIDQ5Ljg3MjQgMy4zMjMwOSA0OC42NjcxIDMuMzIzMDlDNDcuNDYxOCAzLjMyMzA5IDQ2LjQ4NDcgNC4zMjI5MiA0Ni40ODQ3IDUuNTU2MjdaIiBmaWxsPSIjMjg2M0M1Ii8+CjxwYXRoIGQ9Ik00MC4xMzI5IDUuNTU2MjdDNDAuMTMyOSA2Ljc4OTYxIDQxLjExIDcuNzg5NDQgNDIuMzE1MyA3Ljc4OTQ0QzQzLjUyMDYgNy43ODk0NCA0NC40OTc3IDYuNzg5NjEgNDQuNDk3NyA1LjU1NjI3QzQ0LjQ5NzcgNC4zMjI5MiA0My41MjA2IDMuMzIzMDkgNDIuMzE1MyAzLjMyMzA5QzQxLjExIDMuMzIzMDkgNDAuMTMyOSA0LjMyMjkyIDQwLjEzMjkgNS41NTYyN1oiIGZpbGw9IiMyODYzQzUiLz4KPHBhdGggZD0iTTMzLjc4IDUuNTU2MjZDMzMuNzggNi43ODk2MSAzNC43NTcxIDcuNzg5NDQgMzUuOTYyNCA3Ljc4OTQ0QzM3LjE2NzcgNy43ODk0NCAzOC4xNDQ4IDYuNzg5NjEgMzguMTQ0OCA1LjU1NjI2QzM4LjE0NDggNC4zMjI5MiAzNy4xNjc3IDMuMzIzMDkgMzUuOTYyNCAzLjMyMzA5QzM0Ljc1NzEgMy4zMjMwOSAzMy43OCA0LjMyMjkyIDMzLjc4IDUuNTU2MjZaIiBmaWxsPSIjMjg2M0M1Ii8+CjxwYXRoIGQ9Ik04MS4xMDMzIDUuNDQxNzhDODEuMTAzMyA2LjIzODAzIDgxLjczNDEgNi44ODM1MSA4Mi41MTIyIDYuODgzNTFDODMuMjkwNCA2Ljg4MzUxIDgzLjkyMTIgNi4yMzgwMyA4My45MjEyIDUuNDQxNzhDODMuOTIxMiA0LjY0NTU0IDgzLjI5MDQgNC4wMDAwNiA4Mi41MTIyIDQuMDAwMDZDODEuNzM0MSA0LjAwMDA2IDgxLjEwMzMgNC42NDU1NCA4MS4xMDMzIDUuNDQxNzhaIiBmaWxsPSIjMjg2M0M1Ii8+CjxwYXRoIGQ9Ik0yNy40Mjc3IDUuNTU2MjZDMjcuNDI3NyA2Ljc4OTYxIDI4LjQwNDggNy43ODk0NCAyOS42MTAxIDcuNzg5NDRDMzAuODE1NCA3Ljc4OTQ0IDMxLjc5MjUgNi43ODk2MSAzMS43OTI1IDUuNTU2MjZDMzEuNzkyNSA0LjMyMjkyIDMwLjgxNTQgMy4zMjMwOSAyOS42MTAxIDMuMzIzMDlDMjguNDA0OCAzLjMyMzA5IDI3LjQyNzcgNC4zMjI5MiAyNy40Mjc3IDUuNTU2MjZaIiBmaWxsPSIjMjg2M0M1Ii8+CjxwYXRoIGQ9Ik03MS44OTQxIDUuNTU2MjlDNzEuODk0MSA2LjI4OTI4IDcyLjQ3NDggNi44ODM0OSA3My4xOTExIDYuODgzNDlDNzMuOTA3NCA2Ljg4MzQ5IDc0LjQ4ODEgNi4yODkyOCA3NC40ODgxIDUuNTU2MjlDNzQuNDg4MSA0LjgyMzMgNzMuOTA3NCA0LjIyOTEgNzMuMTkxMSA0LjIyOTFDNzIuNDc0OCA0LjIyOTEgNzEuODk0MSA0LjgyMzMgNzEuODk0MSA1LjU1NjI5WiIgZmlsbD0iIzI4NjNDNSIvPgo8cGF0aCBkPSJNNzYuNDc1NCA1LjUzMjQ3Qzc2LjQ3NTQgNi4yNzg2MiA3Ny4wNjY1IDYuODgzNSA3Ny43OTU3IDYuODgzNUM3OC41MjQ5IDYuODgzNSA3OS4xMTYgNi4yNzg2MiA3OS4xMTYgNS41MzI0N0M3OS4xMTYgNC43ODYzMiA3OC41MjQ5IDQuMTgxNDQgNzcuNzk1NyA0LjE4MTQ0Qzc3LjA2NjUgNC4xODE0NCA3Ni40NzU0IDQuNzg2MzIgNzYuNDc1NCA1LjUzMjQ3WiIgZmlsbD0iIzI4NjNDNSIvPgo8cGF0aCBkPSJNMTAuNDQ3OCA1LjM0NTM2QzEwLjQ0NzggOC4yOTc1MyA4LjEwODk0IDEwLjY5MDcgNS4yMjM4OCAxMC42OTA3QzIuMzM4ODEgMTAuNjkwNyAwIDguMjk3NTMgMCA1LjM0NTM2QzAgMi4zOTMyIDIuMzM4ODEgMCA1LjIyMzg4IDBDOC4xMDg5NCAwIDEwLjQ0NzggMi4zOTMyIDEwLjQ0NzggNS4zNDUzNloiIGZpbGw9IiMyODYzQzUiLz4KPC9zdmc+Cg==");
      background-repeat: no-repeat;
      background-position: left bottom;
    }
  }

  .state-card__state {
    font-family: var(--fnt-accent);
    font-size: 3rem;
    line-height: 3rem;
    color: #184ba06b;
    text-align: right;

    @media (min-width: 40rem) {
      font-size: 5.625rem;
      line-height: 5.625rem;
    }
  }

  .state-card__operations {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 1rem 3rem 2rem 2rem;
    list-style: none;

    @media (min-width: 40rem) {
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      padding: 2rem 2.25rem;
    }

    @media (min-width: 64rem) {
      padding: 2rem 3rem 2.6125rem 1rem;
    }
  }

  .state-card__operation {
    padding-left: 0.75rem;

    &::marker {
      content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.6842 5.29906L0 0V11.2265L11.6842 5.29906Z' fill='%23E6EFF8'/%3E%3C/svg%3E");
    }
  }

  .state-card__operation-title {
    font-size: 1.25rem;
    line-height: 1.5rem;
    margin-bottom: 0.25rem;
  }

  .state-card a {
    color: #0081ec;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.3125rem;
    text-decoration-thickness: 1px;

    &:hover {
      text-decoration: none;
    }
  }

  .add-ons {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .add-ons-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.875rem;
    margin: 3.5rem 0 2rem 0;
  }

  .add-on {
    display: inline-block;
    background-color: var(--clr-brand) !important;
    color: var(--clr-white) !important;
    padding: 0.625rem 1.25rem;
    border-radius: var(--rad-5);
    text-decoration: none;

    &:hover {
      background-color: var(--clr-accent) !important;
    }
  }

  .compliance-questions {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .compliance-question {
    position: relative;
    border: 1px solid var(--clr-border-light);
    background: linear-gradient(90deg, #ffffff 0%, #ecf4fa 100%);
    border-radius: var(--rad-10);
    padding: 2rem 3rem;
  }

  .compliance-question__title {
    color: var(--clr-brand);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5rem;
    margin-bottom: 1rem;

    &::before {
      position: absolute;
      display: inline-block;
      left: 0;
      top: 2.125rem;
      content: "";
      width: 23px;
      height: 21px;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 21' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.1873 9.81234L0 0V20.7882L22.1873 9.81234Z' fill='%23E6EFF8' /%3E%3C/svg%3E");
    }
  }

  .about-wtis {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 1.75rem 1rem;

    @media (min-width: 40rem) {
      grid-template-columns: 4fr 2fr;
      grid-template-rows: auto auto auto;
    }
  }

  .about-wtis .page-section__header {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    margin: 0;

    @media (min-width: 40rem) {
      grid-column: 1 / -1;
    }
  }

  .about-wtis .page-section__title {
    line-height: 1;
    margin: 0;
    text-align: center;

    @media (min-width: 40rem) {
      font-size: 1.875rem;
      text-align: left;
    }

    @media (min-width: 48rem) {
      font-size: 2.5rem;
    }
  }

  .about-wtis__content {
    grid-column: 1;
    grid-row: 2;
  }

  .about-wtis__content p {
    max-width: 72ch;
  }

  .about-wtis__content p + p {
    margin-top: 1.75rem;
  }

  .about-wtis__cta {
    grid-column: 1 / -1;
    grid-row: 3;

    @media (min-width: 48rem) {
      grid-column: 1;
      grid-row: 3;
    }
  }

  .about-wtis .button-cta {
    border-radius: var(--rad-5);
    font-size: 1.25rem;
    line-height: 4.25rem;
    padding-inline: 1rem;
    width: 100%;

    @media (min-width: 48rem) {
      font-size: 1.5rem;
      line-height: 3.75rem;
      padding-inline: 2rem;
      justify-self: start;
      margin-inline: 0;
      width: auto;
    }

    @media (min-width: 64rem) {
      width: auto;
    }
  }

  .wtis-mascot {
    grid-column: 1;

    background-image: url("../image/state-truck-insurance/genie.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    width: 100%;
    height: 306px;

    @media (min-width: 40rem) {
      grid-column: 2;
      grid-row: 2;
    }

    @media (min-width: 64rem) {
      grid-row: 1 / 4;
    }
  }

  .license-number {
    display: block;
    font-weight: 700;
    margin-bottom: 2rem;
  }

  .disclaimer {
    text-align: center;
  }

  .button-cta {
    background-color: var(--clr-accent) !important;
    color: var(--clr-white) !important;
    border: 0;
    border-radius: var(--rad-10);
    font-size: 1.5rem;
    display: inline-block;
    line-height: 3.75rem !important;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--clr-white);
    padding: 0 3.125rem;
    cursor: pointer;
    margin-inline: auto;
    align-self: end;
    transition:
      background-color 0.2s ease-in-out,
      transform 0.2s ease-in-out;

    &:hover {
      background-color: #ff9600 !important;
    }

    @media (min-width: 64rem) {
      margin-inline: 0;
    }
  }
}

@layer utilities {
  .relative {
    position: relative;
  }

  .text-narrow {
    max-width: 60ch;
    margin-inline: auto;
  }
}

.google-reviews-section {
  margin-top: 0rem;
  margin-inline: auto;
  max-width: 87.5rem;
}

.travel-with-section.__states-licensed {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 430px;
  height: 60px;
  max-width: 100%;
  background-image: url("../image/western-truck-insurance-travel-with-care2.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100%;
}