/**
  * Template Styles
  */
@property --header-height {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

html {
  --content-max-width: 1200px;
  --wide-content-max-width: 1350px;
  --page-gutter: 6vw;

  --divider-full-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="none"></svg>');
  --divider-no-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="none"><path d="M0 0h1v1H0z"/></svg>');
  --divider-half-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 2" preserveAspectRatio="none"><path d="M0 1h1v1H0z"/></svg>');
  --divider-no-clip-path: none;
  --divider-default-mask: var(--divider-half-mask);

  --color-primary-low: oklch(from var(--color-primary) calc(l - 0.15) c h);
  --color-primary-lowest: oklch(
    from var(--color-primary) calc(l - 0.3) calc(c - 0.01) h
  );
  --color-primary-high: oklch(from var(--color-primary) l calc(c + 0.03) h);
  --color-primary-highest: oklch(from var(--color-primary) l calc(c + 0.06) h);
  --color-secondary-low: oklch(from var(--color-secondary) calc(l - 0.05) c h);
  --color-secondary-lowest: oklch(
    from var(--color-secondary) calc(l - 0.1) c h
  );
  --color-secondary-high: oklch(from var(--color-secondary) l c h);
  --color-secondary-highest: oklch(from var(--color-secondary) l c h);
}

.localized-service
  *:not(:where(svg, path, .wprevpro_badge *, .wprevpro_badge)) {
  all: revert;
}

.localized-service {
  font-family: var(--font-body);

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    font-family: var(--font-heading);
  }

  p {
    margin-block: 0;
  }

  .content-grid,
  .bleed-content > .bleed-content,
  .content-grid > .bleed-content {
    display: grid;
    grid-template-columns:
      [bleed-start] minmax(var(--page-gutter, var(--default-page-gutter)), 1fr)
      [wide-start] minmax(0, var(--wide-content-size)) [content-start] var(
        --content-layout
      )
      [content-end] minmax(0, var(--wide-content-size)) [wide-end] minmax(
        var(--page-gutter, var(--default-page-gutter)),
        1fr
      )
      [bleed-end];
  }

  .content-grid > *,
  .bleed-content > * {
    --col-start: content-start;
    --col-end: content-end;
    grid-column: var(--col-start) / var(--col-end);
  }

  .content-grid {
    --wide-content-size: calc(
      (
          var(--wide-content-max-width, var(--default-wide-content-max-width)) -
            var(--content-max-width, var(--default-content-max-width))
        ) / 2
    );
    --content-width: min(
      100% - (var(--page-gutter) * 2),
      var(--content-max-width, var(--default-content-max-width))
    );
    --content-layout: var(--content-width);
  }

  .bleed-content {
    --col-start: bleed-start;
    --col-end: bleed-end;
  }

  .bleed-only {
    --col-start: bleed-start;
    --col-end: bleed-end;
  }

  .split-2 {
    --content-layout: calc(var(--content-width) * var(--d1-position, 1/2)) [d1]
      calc(var(--content-width) * calc(1 - var(--d1-position, 1/2)));
  }

  /** Bleed Areas **/
  .from-bleed-start {
    --col-start: bleed-start;
  }

  .from-bleed-end {
    --col-start: bleed-end;
  }

  .to-bleed-start {
    --col-end: bleed-start;
  }

  .to-bleed-end {
    --col-end: bleed-end;
  }

  /** Wide Areas **/
  .from-wide-start {
    --col-start: wide-start;
  }

  .from-wide-end {
    --col-start: wide-end;
  }

  .to-wide-start {
    --col-end: wide-start;
  }

  .to-wide-end {
    --col-end: wide-end;
  }

  /** Content Areas **/
  .from-content-start {
    --col-start: content-start;
  }

  .from-content-end {
    --col-start: content-end;
  }

  .to-content-start {
    --col-end: content-start;
  }

  .to-content-end {
    --col-end: content-end;
  }

  .from-d1 {
    --col-start: d1;
  }

  /** Content Dividers **/
  .to-d1 {
    --col-end: d1;
  }

  .from-d2 {
    --col-start: d2;
  }

  .to-d2 {
    --col-end: d2;
  }

  .from-d1 {
    --col-start: d1;
  }

  .to-d1 {
    --col-end: d1;
  }

  .row-1 {
    grid-row: 1;
  }

  .absolute {
    position: absolute;
  }

  .relative {
    position: relative;
  }

  .divider-arch-down {
    + * {
      --divider-shape: url("data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e %3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 1000 100' preserveAspectRatio='none'%3e %3cpath d='M0%2c97.3'/%3e %3cpath d='M1000%2c100V0h0v2c-119.53%2c58.68-299.15%2c96-500%2c96S119.53%2c60.68%2c0%2c2v98h1000Z' fill='white'/%3e %3c/svg%3e");
    }
  }

  .divider-arch-up {
    + * {
      --divider-shape: url("data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e %3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 1000 100' preserveAspectRatio='none'%3e %3cpath d='M0%2c97.3'/%3e %3cpath d='M500%2c2C299.16%2c2%2c119.54%2c39.32%2c0%2c98v2h999.99v-2C880.47%2c39.32%2c700.85%2c2%2c500%2c2Z' fill='white'/%3e %3c/svg%3e");
    }
  }

  .divider {
    display: contents;
  }

  .divider-show:has(+ .divider-8) {
    --divider-bottom-size: 32px;
  }

  .divider-8 {
    + * {
      --divider-top-size: 32px;
    }
  }

  .divider + .divider-show {
    /* Support using image as divider mask */
    mask-image: var(--divider-shape, var(--divider-default-mask)),
      linear-gradient(
        transparent calc(var(--divider-top-size) - 1px),
        black calc(var(--divider-top-size) - 1px)
      );
    mask-repeat: no-repeat;
    mask-position: top, top, bottom;
    mask-size: 100% var(--divider-top-size), 100% auto;

    /* Support clip path as divider */
    clip-path: var(--divider-clip-path, var(--divider-no-clip-path));

    /* Apply padding to push content down below the divider */
    padding-top: var(--divider-top-size);
  }

  .py-divider,
  .pt-divider {
    padding-top: var(--divider-top-size, 0);
  }

  .py-divider,
  .pb-divider {
    padding-bottom: var(--divider-bottom-size, 0);
  }

  .divider-show:has(+ .divider) {
    /* Apply a negative margin to move next element over it */
    margin-bottom: calc(var(--divider-bottom-size) * -1);
  }

  .divider-show:has(+ .divider):not(:has(> :is(.py-divider, .pb-divider))) {
    /* Apply a bottom padding to ensure content stays out of the divider area */
    padding-bottom: var(--divider-bottom-size);
  }

  #title {
    min-height: calc(max(350px, 20vh) + var(--header-height));
    margin-top: calc(var(--header-height) * -1);

    .inner-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 15px;
      margin-top: calc(var(--header-height) + var(--header-top-space, 30px));
      margin-bottom: 10px;
    }

    .buttons {
      display: flex;
      gap: 10px;
    }

    .title-block h1 {
      font-size: 45px;
      text-align: center;
      text-wrap: pretty;
      color: white;
    }

    .title-block .label {
      color: #c7c7c7ff;
      font-size: 18px;
      font-weight: 500;
      text-align: center;
      background: rgb(255 255 255 / 8%);
      width: fit-content;
      margin-inline: auto;
      padding: 5px 10px;
      backdrop-filter: blur(12px);
      margin-bottom: 5px;
      border: 1px solid rgb(255 255 255 / 5%);
    }

    .line-decoration {
      height: 5px;
      background: var(--border-color);
      width: 100px;
      margin-bottom: 30px;
    }

    @media (width >= 512px) {
      .title-block h1 {
        font-size: 54px;
        color: white;
      }
    }

    @media (width <= 512px) {
      .wprevpro_badge {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 10px;
        align-items: center;
        text-align: center;
      }

      .wprevpro_badge > * {
        margin: 0;
      }
    }
  }

  #title-content {
    background: white;

    .inner-content {
      padding-block: 40px;
      display: flex;
      flex-direction: column-reverse;
      column-gap: 30px;
      row-gap: 30px;
    }

    .image-column img {
      width: 100%;
      aspect-ratio: 16/19;
      border-radius: 15px;
      object-fit: cover;
      object-position: center;
      display: block;
      max-width: 400px;
      margin-inline: auto;
    }

    .image-column .button {
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      width: fit-content;
      bottom: 10px;
    }

    @media (width >=1024px) {
      .inner-content {
        padding-block: 40px;
        display: grid;
        grid-template-columns: 380px 1fr;
        column-gap: 30px;
      }

      .image-column .img {
        max-width: auto;
      }
    }
  }

  #section-1 {
    container-type: inline-size;
    background: white;

    .arched-background {
      --radius: 25px;
      --arch-size: 30px;
      --top-size: calc(var(--radius) + var(--arch-size));
      --top-angle: atan2(var(--arch-size), calc(50cqi - var(--radius)));
      --top-y-curve: calc(var(--arch-size) * tan(var(--top-angle)));
      --bottom-angle: atan2(var(--arch-size), 50cqi);
      --bottom-y-curve: calc(var(--radius) * tan(var(--bottom-angle)));

      padding-top: var(--top-size);
      padding-bottom: calc(var(--radius) + 30px);
      padding-inline: 25px;

      background: linear-gradient(
        var(--color-primary-low),
        var(--color-primary-lowest)
      );
      clip-path: shape(
        from 0 var(--top-size),
        curve to var(--radius) var(--arch-size) with 0
          calc(var(--arch-size) + var(--top-y-curve)),
        curve to calc(100% - var(--radius)) var(--arch-size) with 50% 0,
        curve to 100% var(--top-size) with 100%
          calc(var(--arch-size) + var(--top-y-curve)),
        vline to calc(100% - var(--radius)),
        curve to calc(100% - var(--radius)) calc(100% - var(--bottom-y-curve))
          with 100% 100%,

        curve to var(--radius) calc(100% - var(--bottom-y-curve)) with 50%
          calc(100% - var(--arch-size)),
        curve to 0px calc(100% - var(--radius)) with 0 100%
      );
    }

    .title-block {
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      align-items: center;
      justify-content: center;
      margin-bottom: 15px;
      color: var(--color-on-primary);
    }

    .title-block svg {
      display: block;
      margin-bottom: 10px;
      margin-inline: auto;
      width: 50px;
      aspect-ratio: 1/1;
    }

    .title-block h2 {
      display: inline;

      font-size: 26px;
    }

    @media (width >=512px) {
      .title-block svg {
        width: 30px;
        display: inline;
        margin-inline-start: 0;
        margin-inline-end: 10px;
        margin-bottom: 0;
      }

      .title-block h2 {
        font-size: 40px;
      }

      .arched-background {
        padding-inline: 40px;
      }
    }
  }

  #section-2 {
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='white' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E"),
      linear-gradient(white, #f1f1f1ff);
    background-size: 150px;

    .inner-content {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      padding-block: 40px;
    }

    .image-column {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
    }

    .image-column img {
      display: block;
      width: 100%;
      aspect-ratio: 16/19;
      border-radius: 15px;
      border: 4px solid var(--border-color);
      object-fit: cover;
      object-position: center;
      box-shadow: 5px 5px 15px -4px rgba(0, 0, 0, 0.3);
      max-width: 400px;
    }

    .title-block {
      margin-bottom: 15px;
      text-align: center;
    }

    .title-block h2 {
      display: inline;
      font-size: 28px;
    }

    @media (width >=512px) {
      .title-block h2 {
        font-size: 40px;
      }

      .title-block {
        text-align: start;
      }
    }

    @media (width >=1024px) {
      .inner-content {
        grid-template-columns: 1fr 300px;
      }
    }
  }

  #section-3 {
    background-color: var(--color-primary-lowest);

    .inner-content {
      padding-block: 40px;
    }

    .title-block {
      text-align: center;
      margin-bottom: 15px;
    }

    .title-block h2 {
      display: inline;
      font-size: 28px;
    }

    .logos {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 25px;
    }

    .logos svg {
      height: 30px;
    }

    .line-decoration {
      height: 5px;
      background: var(--border-color);
      width: 100px;
      margin-inline: auto;
      margin-bottom: 30px;
    }

    @media (width >=512px) {
      .title-block h2 {
        font-size: 40px;
      }

      .logos svg {
        height: 50px;
      }
    }
  }

  section#faq {
    background: white;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDk2MCI+PHBhdGggZD0ibTAgMCAxNjAgMTYwTTMyMCAwIDE2MCAxNjBNNDgwIDAgMzIwIDE2ME02NDAgMCA0ODAgMTYwTTgwMCAwIDY0MCAxNjBNODAwIDBsMTYwIDE2MG0wLTE2MCAxNjAgMTYwbTAtMTYwIDE2MCAxNjBtMC0xNjAgMTYwIDE2ME0wIDE2MGwxNjAgMTYwbTAtMTYwIDE2MCAxNjBtMTYwLTE2MEwzMjAgMzIwbTMyMC0xNjBMNDgwIDMyMG0xNjAtMTYwIDE2MCAxNjBtMC0xNjAgMTYwIDE2MG0wLTE2MCAxNjAgMTYwbTAtMTYwIDE2MCAxNjBtMC0xNjAgMTYwIDE2ME0wIDMyMGwxNjAgMTYwbTAtMTYwIDE2MCAxNjBtMC0xNjAgMTYwIDE2MG05MS4xOS02OC44MUw4MDAgNjQwbTAtMzIwIDE2MCAxNjBtMC0xNjAgMTYwIDE2MG0wLTE2MCAxNjAgMTYwbTAtMTYwIDE2MCAxNjBtLTEyODAgMEwwIDY0MG0zMjAtMTYwTDE2MCA2NDBtMTYwLTE2MCAxNjAgMTYwbTAtMTYwIDE2MCAxNjBtLTgwLTQwMCAyNTEuNzEgMjUxLjcxTTk2MCA0ODAgODAwIDY0MG0zMjAtMTYwTDk2MCA2NDBtMTYwLTE2MCAxNjAgMTYwbTE2MC0xNjAtMTYwIDE2MG0tMTEyMCAwTDAgODAwbTE2MC0xNjAgMTYwIDE2MG0wLTE2MCAxNjAgMTYwbTAtMTYwIDE2MCAxNjBtMC0xNjAgMTYwIDE2MG0wLTE2MCAxNjAgMTYwbTMyMC0xNjAtMTYwIDE2MG0zMjAtMTYwLTE2MCAxNjBNMCA4MDBsMTYwIDE2MG0wLTE2MCAxNjAgMTYwbTAtMTYwIDE2MCAxNjBtMC0xNjAgMTYwIDE2MG0wLTE2MCAxNjAgMTYwbTAtMTYwIDE2MCAxNjBtMC0xNjAgMTYwIDE2MG0wLTE2MCAxNjAgMTYwbTAtMTYwIDE2MCAxNjBtLTMyMC0zMjBMOTYwIDgwMCIgb3BhY2l0eT0iLjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=");
    background-size: 500px;
    border-bottom: 1px solid #0000000f;

    .inner-content {
      padding-block: 40px;
    }

    .title-block h2 {
      display: block;
      text-align: center;
      margin-bottom: 15px;
      width: fit-content;
      margin-inline: auto;
      border-radius: 5px;
      clip-path: shape(
        from 0 15px,
        curve to 100% 15px with 50% 0,
        vline to 100%,
        hline to 0
      );

      .heading {
        background: var(--color-primary);
        color: var(--color-on-primary);
        display: block;
        padding: 20px 15px 8px 15px;
        font-size: 24px;
      }

      .label {
        display: block;
        background: var(--color-primary-low);
        color: var(--color-on-primary);
        padding: 6px 10px;
        font-weight: normal;
        font-size: 16px;

        &:empty {
          padding: 3px 0;
        }
      }
    }

    .faq-categories {
      margin-top: 20px;
    }

    .faq-categories h4 {
      font-size: 24px;
      color: var(--color-primary);
      margin-top: 15px;
      margin-bottom: 5px;
    }

    .faq-list > *:not(:last-child) {
      margin-bottom: 10px;
    }

    @media (width >= 512px) {
      .title-block h2 .heading {
        font-size: 32px;
      }

      .title-block h2 .label {
        font-size: 18px;
      }
    }

    @media (width >= 768px) {
      .title-block h2 .heading {
        font-size: 40px;
      }

      .title-block h2 .label {
        font-size: 20px;
      }
    }

    details {
      transition: box-shadow 0.15s ease;
      background: #e6e6e6;
      color: black;
      overflow: hidden;
      border-radius: 15px;

      summary::marker {
        display: none;
      }

      summary {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;

        font-weight: bold;

        list-style: none;
        padding: 15px 20px;
        transition: all 0.15s ease;
      }

      summary svg {
        transition: rotate 0.25s ease;
      }

      &[open] {
        -webkit-box-shadow: 5px 6px 14px 0px rgba(0, 0, 0, 0.15);
        box-shadow: 5px 6px 14px 0px rgba(0, 0, 0, 0.15);
        background: white;
      }

      &[open] summary {
        padding: 20px 20px;
        background: var(--color-primary);
        color: var(--color-on-primary);
      }

      &[open] summary svg {
        rotate: 90deg;
      }

      .answer-inner {
        padding: 20px;
      }
    }
  }

  .section-background {
    background-size: cover;
    background-position: center;
  }

  .section-overlay {
    background: linear-gradient(rgb(0 0 0 / 30%), rgb(0 0 0 / 80%));
  }

  .prose {
    font-size: 16px;
    line-height: 140%;

    ul {
      padding-inline-start: 40px;
    }

    p {
      margin-block: 1rem;
    }

    :first-child {
      margin-top: 0;
    }

    :last-child {
      margin-bottom: 0;
    }

    :where(ul, ol) > li:not(:first-child) {
      margin-top: 5px;
    }

    table {
      --table-header-background: var(--color-primary);
      --table-header-color: var(--color-on-primary);

      background: #d7d7d7;
      border-radius: 10px;
      border-spacing: 5px;

      width: 100%;
      min-width: 0;

      th {
        padding: 6px 6px;
        background: var(--table-header-background);
        color: var(--table-header-color);
        border-radius: 6px;
        text-align: start;
        font-family: var(--font-heading);
        font-weight: bolder;
      }

      td {
        background: white;
        align-content: start;
        padding: 4px 6px;
        border-radius: 6px;
        min-width: 150px;
        max-width: min(600px, 60vw);
        color: black;
      }

      @media (width <= 600px) {
        width: max-content;
      }
    }
  }

  .inner-curve {
    clip-path: shape(
      from 91.04% 100%,
      hline by -82.08%,
      curve by -8.93% -7.36% with -5.24% 0%/-9.36% -3.4%,
      line by 9.33% -86.39%,
      curve by 8.93% -6.25% with 0.38% -3.53%/4.27% -6.25%,
      hline by 72.75%,
      curve by 8.96% 6.81% with 4.95% 0%/8.96% 3.05%,
      vline by 86.39%,
      curve by -8.96% 6.81% with 0% 3.76%/-4.01% 6.81%,
      close
    );
  }

  .button {
    background: var(--button-background);
    color: var(--button-text);
    border-radius: 999px;
    height: 45px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;
    padding-inline: 15px;
    box-sizing: border-box;
  }

  .button:hover {
    background: color-mix(in srgb, var(--button-background), white 15%);
  }

  .button-lg {
    height: 55px;
    font-size: 28px;
    padding-inline: 25px;
  }

  @media (width < 512px) {
    .button-lg {
      height: 50px;
      font-size: 24px;
      padding-inline: 25px;
    }
  }

  .button.shrink {
    width: fit-content;
  }

  .button .icon {
    aspect-ratio: 1/1;
    height: calc(100% - 6px);
    background: var(--button-icon-background);
    color: var(--button-icon-color);
    border-radius: 999px;
    margin: 3px;
    display: grid;
    place-items: center;
  }

  .button > :first-child.icon {
    margin-left: -12px;
  }

  .button-lg > :first-child.icon {
    margin-left: -22px;
  }

  .button > :last-child.icon {
    margin-right: -12px;
  }

  .button-lg > :last-child.icon {
    margin-right: -22px;
  }

  @media (width >767px) {
    .button.mobile {
      display: none;
    }
  }

  @media (width <=767px) {
    .button.desktop {
      display: none;
    }
  }

  .text-primary {
    color: var(--color-primary);
  }

  .text-on-primary {
    color: var(--color-on-primary);
  }

  .text-on-secondary {
    color: var(--color-on-secondary);
  }

  .text-secondary {
    color: var(--color-secondary);
  }

  .text-white {
    color: white;
  }

  .mx-auto {
    margin-inline: auto;
  }

  .min-w-0 {
    min-width: 0;
  }

  .table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
  }
}