/* Resetting styles starts */
body {
  font-family: 'Zoho Puvi', -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;
}

html, body, div, span,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, address,
code, em, img, ins, kbd, q, s,
small, strong, sub, sup, b, u, i,
dl, dt, dd, ol, ul, li,
table, caption, tbody, tfoot, thead, tr, th, td,
canvas, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
}

ol,
ul {
  list-style: none;
}

a {
  text-decoration: none;
}

a:focus {
  outline: 0;
}

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

button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

/* Resetting styles ends */


@font-face {
  font-family: 'Zoho Puvi';
  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Thin.eot') format('embedded-opentype'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Thin.woff2') format('woff2'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Zoho Puvi';
  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Thin.eot') format('embedded-opentype'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Thin.woff2') format('woff2'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Thin.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Zoho Puvi';
  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Extralight.eot') format('embedded-opentype'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Extralight.woff2') format('woff2'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Extralight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Zoho Puvi';
  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Light.eot') format('embedded-opentype'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Light.woff2') format('woff2'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Zoho Puvi';
  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Light.eot') format('embedded-opentype'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Light.woff2') format('woff2'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Light.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Zoho Puvi';
  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.eot') format('embedded-opentype'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Zoho Puvi';
  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular_Italic.eot') format('embedded-opentype'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular_Italic.woff2') format('woff2'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular_Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Zoho Puvi';
  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Medium.eot') format('embedded-opentype'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Medium.woff2') format('woff2'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Zoho Puvi';
  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Semibold.eot') format('embedded-opentype'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Semibold.woff2') format('woff2'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Zoho Puvi';
  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Semibold_Italic.eot') format('embedded-opentype'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Semibold_Italic.woff2') format('woff2'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Semibold_Italic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Zoho Puvi';
  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Bold.eot') format('embedded-opentype'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Bold.woff2') format('woff2'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Zoho Puvi';
  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Extrabold.eot') format('embedded-opentype'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Extrabold.woff2') format('woff2'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Extrabold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Zoho Puvi';
  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Extrablack_Italic.eot') format('embedded-opentype'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Extrablack_Italic.woff2') format('woff2'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Extrablack_Italic.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Zoho Puvi';
  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Black.eot') format('embedded-opentype'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Black.woff2') format('woff2'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Zoho Puvi';
  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Extrablack.eot') format('embedded-opentype'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Extrablack.woff2') format('woff2'),
       url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Extrablack.otf') format('opentype');
  font-weight: 950;
  font-style: normal;
  font-display: swap;
}

:root {
  --zf-page-max-width: 1280px;
  --zf-page-horizontal-padding: 40px;

  /* Title token */

  /* Other title token used in exceptional cases, like anniversary, campaign pages, etc */
  --zf-fs-h-xl: 88px;
  --zf-lh-h-xl: 96px;

  --zf-fs-h-l: 72px;
  --zf-lh-h-l: 80px;

  --zf-fs-h-m: 36px;
  --zf-lh-h-m: 44px;


  /* h1 token */
  --zf-fs-h1-l: 60px;
  --zf-lh-h1-l: 68px;

  --zf-fs-h1-m: 52px;
  --zf-lh-h1-m: 60px;


  /* H2 token */
  --zf-fs-h2-l: 52px;
  --zf-lh-h2-l: 60px;

  --zf-fs-h2: 40px;
  --zf-lh-h2: 48px;


  /* H3 token */
  --zf-fs-h3-xl: 28px;
  --zf-lh-h3-xl: 36px;

  --zf-fs-h3-l: 24px;
  --zf-lh-h3-l: 32px;

  --zf-fs-h3-m: 20px;
  --zf-lh-h3-m: 28px;


  /* Description */
  --zf-fs-p-xl: 20px;
  --zf-lh-p-xl: 32px;

  --zf-fs-p-l: 18px;
  --zf-lh-p-l: 30px;

  --zf-fs-p-m: 16px;
  --zf-lh-p-m: 28px;


  /* Label */
  --zf-fs-label-l: 14px;
  --zf-lh-label-l: 26px;

  --zf-fs-label-m: 12px;
  --zf-lh-label-m: 24px;


  /* Border radius */
  --zf-br-s: 4px;
  --zf-br-m: 8px;
  --zf-br-l: 16px;
  --zf-br-xl: 20px;
  --zf-br-maximum: 9999px;
  --zf-br-full: 50%;


  /* Space between sections */
  --zf-section-spacing: 80px;
}

/* Zoho header signup CTA styling */
.zgh-accounts .zgh-login {
  font-size: 14px !important;
  font-weight: 600 !important;
}

.zgh-accounts .zgh-signup {
  border-radius: 6px !important;
  padding: 10px 12px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* Label styling */
.zf-section-label-styling {
  letter-spacing: 2px;
  font-size: var(--zf-fs-label-m);
  line-height: var(--zf-lh-label-m);
  font-weight: 600;
}

/* H styling */
.zf-h1-styling {
  font-size: var(--zf-fs-h1-l);
  line-height: var(--zf-lh-h1-l);
  font-weight: 700;
  letter-spacing: -2px;
}

.zf-h2-styling {
  font-size: var(--zf-fs-h2);
  line-height: var(--zf-lh-h2);
  font-weight: 700;
  letter-spacing: -1px;
}

/* CTA styling - Partial in common repo */
.zf-cta-container {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.zf-cta-container.zf-left-align {
  justify-content: flex-start;
}

.zf-cta-container.zf-right-align {
  justify-content: flex-end;
}

.zf-cta-style {
  border-radius: var(--zf-br-m);
  cursor: pointer;
  padding: 18px 32px;
  font-weight: 700;
  font-size: var(--zf-fs-label-l);
  line-height: normal;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  outline: none;
  text-decoration: none;
}

.zf-cta-primary {
  background-color: var(--cta-primary-bg);
  color: var(--cta-primary-font-color);
  border: 1px solid var(--cta-primary-border-color);
}

.zf-cta-primary:hover {
  background-color: var(--cta-primary-hover-bg);
  color: var(--cta-primary-font-hover-color);
  border: 1px solid var(--cta-primary-hover-border-color);
}

.zf-cta-secondary {
  background-color: var(--cta-secondary-bg);
  color: var(--cta-secondary-font-color);
  border: 1px solid var(--cta-secondary-border-color);
}

.zf-cta-secondary:hover {
  background-color: var(--cta-secondary-hover-bg);
  color: var(--cta-secondary-font-hover-color);
  border: 1px solid var(--cta-secondary-hover-border-color);
}

.zf-cta-tertiary {
  background-color: var(--cta-tertiary-bg);
  color: var(--cta-tertiary-font-color);
  border: 1px solid var(--cta-tertiary-border-color);
}

.zf-cta-tertiary:hover {
  background-color: var(--cta-tertiary-hover-bg);
  color: var(--cta-tertiary-font-hover-color);
  border: 1px solid var(--cta-tertiary-hover-border-color);
}


/* link-href */
.zf-common-link-elem-wrap {
  cursor: pointer;
  font-size: var(--zf-fs-p-m);
  line-height: var(--zf-lh-p-m);
  color: var(--link-primary-color);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  letter-spacing: .2px;
}

.zf-common-link-elem-arrow {
  margin-left: 2px;
  transition: transform 0.2s ease;
}

.zf-common-link-elem-wrap:hover .zf-common-link-elem-arrow {
  transform: translateX(4px);
}

/* Icon CTA styling */
.zf-square-cta {
  display: inline-block;
  border-radius: 8px;
  border: 1px solid var(--theme-color);
  color: var(--theme-color);
  padding: 12px;
  transition: all .2s ease-in-out;
  font-size: 0;
  width: fit-content;
}

.zf-square-cta:hover {
  color: var(--theme-color-invert);
  background-color: var(--theme-color);
}

.zf-square-cta-arrow {
  width: 12px;
  height: 12px;
  transform: rotate(-45deg);
}

.zf-square-cta-arrow path {
  stroke: currentColor;
}

@media screen and (max-width: 768px) {
  :root {
    /* Title */
    --zf-fs-h-xl: 40px;
    --zf-lh-h-xl: 48px;

    --zf-fs-h-l: 40px;
    --zf-lh-h-l: 48px;

    --zf-fs-h-m: 24px;
    --zf-lh-h-m: 32px;

    --zf-fs-h1-l: 36px;
    --zf-lh-h1-l: 44px;

    --zf-fs-h1-m: 36px;
    --zf-lh-h1-m: 44px;

    --zf-fs-h2-l: 32px;
    --zf-lh-h2-l: 40px;

    --zf-fs-h2: 28px;
    --zf-lh-h2: 36px;

    --zf-fs-h3-xl: 20px;
    --zf-lh-h3-xl: 28px;

    --zf-fs-h3-l: 18px;
    --zf-lh-h3-l: 26px;

    --zf-fs-h3-m: 16px;
    --zf-lh-h3-m: 24px;

    /* Description */
    --zf-fs-p-xl: 18px;
    --zf-lh-p-xl: 26px;

    --zf-fs-p-l: 16px;
    --zf-lh-p-l: 24px;

    /* Label */
    --zf-fs-label-l: 12px;
    --zf-lh-label-l: 24px;

    /* Space between sections */
    --zf-section-spacing: 60px;
  }
}

@media screen and (max-width: 500px) {
  :root {
    --zf-page-horizontal-padding: 20px;
  }

  .zf-cta-container {
    flex-direction: column;
    text-align: center;
  }

  .zf-cta-style {
    align-self: stretch;
  }
}