{"version":3,"sources":["webpack:///./src/img/blog/lsAppDashboard.png","webpack:///./src/img/blog/covers/sessionRecordings.png","webpack:///./src/pages/blog/how-to-use-session-recordings-to-grow-your-saas.js","webpack:///./src/img/blog/lsAppFilters.png","webpack:///./src/img/ui/quote.svg","webpack:///./src/img/ui/arrow_black.svg","webpack:///./src/img/marketplace/covers/defaultCoverIntegrations.png","webpack:///./src/components/blog/content/styled.js"],"names":["module","exports","Wrapped","BlogArticle","bannerLink","useSourceParams","bannerCenter","btn","href","target","rel","className","link","id","src","img1","alt","title","img2","img3","frontmatter","url","description","author","img","imgSocial","date","category","group","timeToRead","process","Post","styled","div","media","mobile","quote","tablet","arrowIcon"],"mappings":"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","file":"component---src-pages-blog-how-to-use-session-recordings-to-grow-your-saas-js-70c3b9ef849bb742a7f9.js","sourcesContent":["module.exports = __webpack_public_path__ + \"static/lsAppDashboard-c961c1fb9d17cc74ddb24bdbedb4536f.png\";","module.exports = __webpack_public_path__ + \"static/sessionRecordings-b04b3db090b4804f3bc43e9424fb77ba.png\";","import React from 'react';\nimport BlogArticle from 'components/blog/blogArticle';\nimport { Post } from 'components/blog/content/styled';\nimport { authorKalina as author } from 'data/authors';\nimport { useSourceParams } from 'hooks/useSourceParams';\nimport img from 'img/blog/covers/sessionRecordings.png';\n\nimport img1 from 'img/blog/lsAppDashboard.png';\nimport img2 from 'img/blog/lsAppFilters.png';\nimport img3 from 'img/marketplace/covers/defaultCoverIntegrations.png';\n\nconst Content = () => {\n  const bannerLink = useSourceParams('banner');\n  const bannerCenter = useSourceParams('banner-center');\n  const btn = useSourceParams('button-end');\n  return (\n    <Post>\n      <p>Looking for SaaS optimization solutions that actually bring results?</p>\n      <p>\n        <strong>Session recording tools</strong> bring a lot to the table. They provide an excellent\n        opportunity to:\n      </p>\n      <ul>\n        <li>\n          <strong>Add more context to the user journey </strong>– Session replays allow you to watch\n          how visitors interacted with the landing page and what caused them to move forward in the\n          sales funnel. You can also use session recordings to find potential onboarding issues.\n        </li>\n\n        <li>\n          <strong>See how the users interact with your web application</strong> – You can track\n          every scroll, every mouse movement, and every click, just like you’re sitting next to each\n          other.\n        </li>\n\n        <li>\n          <strong>Find bugs and usability issues </strong>– Many of these are detected\n          automatically. We’re going to describe that below in more detail!\n        </li>\n      </ul>\n      <p>\n        We know that session replays may seem overwhelming at first. You’ve got plenty of{' '}\n        <a href=\"/blog/guide-to-qualitative-ux-research/\" target=\"_blank\" rel=\"noopener noreferrer\">\n          qualitative data\n        </a>{' '}\n        to process. If you were to watch all the recordings, one after the other, you’d probably\n        need some extra hours in the day.\n      </p>\n      <p>Luckily, analyzing session recordings can be more effective than that!</p>\n      <p>\n        In this article, we’re going to show you how to use session recordings to grow your SaaS\n        business. We’ll go through some of the tools, tips, and tricks you’re sure to find useful.\n        Last but not least, we’re also featuring a real-life <strong>SaaS success story!</strong>\n      </p>\n      <p>Ready to get the most out of your SaaS with the help of session replays? Let’s dive in!</p>\n\n      <a className=\"action-banner\" href={bannerLink.link} target=\"_blank\" rel=\"noopener noreferrer\">\n        Try a new session recording tool and see what&apos;s in it for your Saas! Test LiveSession\n        for free.\n      </a>\n\n      <ul>\n        <li>\n          <a href=\"#find-bugs-quicker\">Find bugs quicker</a>\n          <ul>\n            <li>\n              <a href=\"#qualitative-insights\">Qualitative insights</a>\n            </li>\n            <li>\n              <a href=\"#automatic-detection-rage-clicks-and-error-clicks\">\n                Automatic detection – rage clicks and error clicks\n              </a>\n            </li>\n          </ul>\n        </li>\n        <li>\n          <a href=\"#use-filters-and-custom-segments\">Use filters and custom segments</a>\n          <ul>\n            <li>\n              <a href=\"#filters\">Filters</a>\n            </li>\n            <li>\n              <a href=\"#custom-segments-for-saas-analytics\">Custom segments for SaaS analytics</a>\n            </li>\n          </ul>\n        </li>\n        <li>\n          <a href=\"#integrate-with-other-saas-tools\">Integrate with other SaaS tools</a>\n        </li>\n        <li>\n          <a href=\"#saas-and-session-recordings-success-story-rocketlink\">\n            SaaS and session recordings success story: RocketLink\n          </a>\n        </li>\n      </ul>\n\n      <h2 id=\"find-bugs-quicker\">Find bugs quicker</h2>\n\n      <p>\n        We’ve already mentioned this advantage in the introduction. There’s a couple of different\n        ways session replays can help you find bugs on your website and in your SaaS product:\n      </p>\n      <h3 id=\"qualitative-insights\">Qualitative insights</h3>\n\n      <p>\n        As soon as you start watching session recordings, you’ll soon realize they’re a goldmine of\n        information. Even when we watch recordings of our website, we’re often surprised by user\n        behavior we couldn’t predict.\n      </p>\n      <p>\n        Session replays can help you find the mismatch between your{' '}\n        <a\n          href=\"https://www.webdesignerdepot.com/2020/06/how-to-benefit-from-mental-models-in-ux-design/\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer nofollow\"\n        >\n          mental models\n        </a>{' '}\n        and the mental models of your users. You and the users might have very different ideas about\n        how things work. For example, we often find out that visitors consider some features to be\n        clickable while they’re not.\n      </p>\n      <h3 id=\"automatic-detection-rage-clicks-and-error-clicks\">\n        Automatic detection – rage clicks and error clicks\n      </h3>\n      <img src={img1} alt=\"LiveSession App\" title=\"Dashboard\" />\n      <p>\n        Aside from observations only, LiveSession detects two types of potential issues\n        automatically. They’re called{' '}\n        <a href=\"/blog/error-rage-clicks/\" target=\"_blank\" rel=\"noopener noreferrer\">\n          rage clicks and error clicks\n        </a>\n        :\n      </p>\n      <ul>\n        <li>\n          <strong>Rage clicks</strong> are registered when the user clicks on something repeatedly\n          and very fast. This is an indicator that they got frustrated with a feature that’s not\n          working properly.\n        </li>\n\n        <li>\n          <strong>Error clicks</strong>, on the other hand, apply to technical issues, specifically\n          JavaScript errors. The user might not realize that something is wrong in the app, yet this\n          kind of error suggests that there’s probably something to look into.\n        </li>\n      </ul>\n      <p>\n        Thanks to dedicated <strong>filters</strong>, these errors are really easy to browse. See\n        how it works:\n      </p>\n      <h2>Use session recording filters and custom segments</h2>\n\n      <p>\n        You can apply a wide variety of <strong>session recording filters </strong>to narrow down\n        your search results and find the most interesting session recordings faster.\n      </p>\n      <p>\n        Different combinations of filters can be saved as <strong>custom segments</strong> to\n        analyze later. You can also share these segments with your teammates and discuss your\n        findings with them.\n      </p>\n      <h3 id=\"filters\">Filters</h3>\n\n      <img src={img2} alt=\"Filters\" title=\"LiveSesssion filters list\" />\n\n      <p>\n        LiveSession offers an extensive choice of session recording filters. You can filter\n        recordings based on location, duration, system properties, and much, much more! If you’d\n        like to dig deeper, we recommend our{' '}\n        <a\n          href=\"/blog/how-to-use-filters-in-user-research/\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          article about user segmentation\n        </a>\n        .\n      </p>\n      <p>\n        In this post, we’re going to focus on the ones that can be particularly useful for SaaS\n        businesses:\n      </p>\n      <ul>\n        <li>\n          <strong>Pages count </strong>– You can choose to see recordings where the users have\n          visited more than just one page. This will give you more insights into the user journey.\n        </li>\n\n        <li>\n          <strong>First session </strong>– It’s a great way to analyze the behavior of users who are\n          visiting your website for the first time.{' '}\n        </li>\n\n        <li>\n          <strong>Start URL, Exit URL, Visited URL </strong>– This group of filters will help you\n          analyze sessions where users have interacted with a specific page and see how it affected\n          their experience.\n        </li>\n\n        <li>\n          <strong>Referrer, UTM tag</strong> – With these filters, you can get in-depth insights on\n          the results of your campaigns. Use them to see how the interactions vary depending on\n          where the users came from, e.g. social media shares or paid campaigns.\n        </li>\n\n        <li>\n          <strong>Device, mobile type, browser, OS, screen size </strong>– These filters will help\n          you analyze how the experience varies depending on the technical variables. Some pages or\n          features may work well on the desktop yet leave a lot to be desired on mobile.\n        </li>\n\n        <li>\n          <strong>Name, email, custom property</strong> – Last but not least, you can add custom\n          data to identify the users. These features allow you to match the recording with the\n          user’s name, email, or other types of data. One of the most common custom properties is\n          the <strong>pricing plan</strong>. This filter is also used for integrations with other\n          SaaS apps.\n        </li>\n      </ul>\n\n      <a\n        className=\"action-banner\"\n        href={bannerCenter.link}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        Test the filters yourself! Try LiveSession for free, no credit card required.\n      </a>\n\n      <p>\n        Now that you know the most important filters, it’s time to move on to the next step:\n        combining these into <strong>custom segments</strong>.\n      </p>\n      <h3 id=\"custom-segments-for-saas-analytics\">Custom segments for SaaS analytics</h3>\n\n      <p>\n        Need inspiration for your SaaS optimization strategy? Here are some of the custom segments\n        we’re using ourselves:\n      </p>\n      <ul>\n        <li>\n          <strong>Segments for PPC campaigns</strong> – Analyze the user journeys and the behavior\n          of visitors who came from Facebook, Google Ads, or other PPC marketing campaigns.\n        </li>\n\n        <li>\n          <strong>User who visited page X – </strong>e.g., users who visited the Pricing, or the\n          Features page. These key sections are usually the biggest SaaS conversion rate\n          optimization challenges. You can see how they interacted with this information, how they\n          got to this page and what were their next steps.\n        </li>\n\n        <li>\n          <strong>A/B test segments </strong>– It’s a fast and easy way to gain more qualitative\n          insight into your A/B tests! We enjoy this strategy so much we’ve created our own guide to\n          A/B testing with session recordings. Check it out if you’d like to learn even more about\n          growing SaaS businesses!\n        </li>\n\n        <li>\n          <strong>Feature-focused segments</strong> – When you introduce a new feature, you can set\n          up a dedicated segment for it. It’s an easy way to actually see how people interact with\n          it! You can see even the slightest moments of doubt.\n        </li>\n      </ul>\n      <p>\n        Now that we’ve mentioned A/B testing, it’s high time we moved on to the next step:\n        LiveSession <strong>integrations</strong>.\n      </p>\n      <h2 id=\"integrate-with-other-saas-tools\">Integrate with other SaaS tools</h2>\n      <img\n        src={img3}\n        alt=\"Connect your favorite tools to LiveSession\"\n        title=\"Integrate tools with LiveSession\"\n      />\n      <p>\n        LiveSession offers a wide array of integrations with other SaaS tools. You can browse all of\n        them in our{' '}\n        <a href=\"/integrations/\" target=\"_blank\" rel=\"noopener noreferrer\">\n          integrations marketplace\n        </a>{' '}\n        – and we’re constantly adding new ones, too!\n      </p>\n      <p>Here are some of the highlights when it comes to SaaS optimization and growth:</p>\n      <ul>\n        <li>\n          <strong>Google Optimize </strong>– You can easily set up an A/B test with the Google\n          Optimize tool and analyze session recordings for different variants. Test variants appear\n          as custom filters in LiveSession.\n        </li>\n\n        <li>\n          <strong>Google Analytics, Heap, Segment, and Mixpanel</strong> – LiveSession recordings\n          can appear as events in Google Analytics, Heap, Mixpanel and Segment. This way, you can\n          analyze different kinds of data in one place.\n        </li>\n\n        <li>\n          <strong>Sentry, Bugsnag, and Errorception </strong>– To top it all off, you can integrate\n          LiveSession with the most popular bug tracking tools. This makes the workflow of your\n          software developers much smoother! This way, it’s much easier to research the bug and find\n          an optimal solution.{' '}\n        </li>\n\n        <li>\n          <strong>Intercom, LiveChat, and other customer support tools </strong>– As you’re already\n          aware, satisfying customer support is crucial for retention and, ultimately, growth. Your\n          customer support agents can access LiveSession recordings straight from the conversation\n          in LiveChat or Intercom. This way, they can provide relevant help faster.\n        </li>\n      </ul>\n      <h2 id=\"saas-and-session-recordings-success-story-rocketlink\">\n        SaaS and session recordings success story: RocketLink\n      </h2>\n\n      <p>\n        Working with session recordings can result in visible, quantifiable growth. You don’t have\n        to take our word for it – have a look at these numbers and results from RocketLink:\n      </p>\n      <ul>\n        <li>\n          Among other things, fixing discount code issues with LiveSession helped the company\n          achieve a <strong>110% increase in signups. </strong>Session recordings helped RocketLink\n          find issues they wouldn’t spot otherwise.{' '}\n        </li>\n\n        <li>\n          <strong>Reduced churn</strong> thanks to improved onboarding and discovered issues. These\n          included users pasting an invalid format of the pixel ID and other bugs that couldn’t be\n          reproduced otherwise. What’s more, they wouldn’t even discover many of the issues if not\n          for LiveSession.{' '}\n        </li>\n\n        <li>\n          Last but not least, RocketLink claims they’ve reached{' '}\n          <strong>40% more paid subscriptions </strong>thanks to improvements they’ve implemented\n          with LiveSession.\n        </li>\n      </ul>\n      <p>\n        Sounds promising? Read more in our{' '}\n        <a href=\"/customers/rocketlink/\" target=\"_blank\" rel=\"noopener noreferrer\">\n          RocketLink case study\n        </a>{' '}\n        and see how a SaaS company can succeed with the help of the right session recording tool.\n      </p>\n      <p>\n        We hope this article has been a source of inspiration for you! Now that you know how to grow\n        your SaaS business with session recordings, why not try them yourself?\n      </p>\n      <a target=\"_blank\" rel=\"noopener noreferrer\" href={btn.link} className=\"action-btn\">\n        Sign up free\n      </a>\n    </Post>\n  );\n};\n\nconst Wrapped = BlogArticle(Content);\n\nexport const frontmatter = {\n  title: 'How to use Session Recordings to Grow Your SaaS',\n  url: '/blog/how-to-use-session-recordings-to-grow-your-saas/',\n  description: `Looking for an effective optimization platform for your SaaS? Read our guide to session recordings. `,\n  author,\n  img,\n  imgSocial: img,\n  date: '2020-07-29',\n  category: '',\n  group: 'Analytics',\n  timeToRead: 7,\n};\n\nexport default () => (\n  <Wrapped\n    title={frontmatter.title}\n    category={frontmatter.category}\n    description={frontmatter.description}\n    date={frontmatter.date}\n    author={frontmatter.author}\n    url={frontmatter.url}\n    img={frontmatter.img}\n    imgSocial={process.env.GATSBY_HOST + frontmatter.img}\n    group={frontmatter.group}\n    timeToRead={frontmatter.timeToRead}\n  />\n);\n","module.exports = __webpack_public_path__ + \"static/lsAppFilters-a7865fdd9cda997fab405bd98e72f18d.png\";","module.exports = \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5Mi4yNDUiIGhlaWdodD0iNzEuNjA4IiB2aWV3Qm94PSIwIDAgOTIuMjQ1IDcxLjYwOCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6I2ZmZTQ3ODt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik04OS43Miw2Ni4yNzFjMC0xNi4xNjItMTAuNDQzLTI1LjM2MS0yMi4xMjktMjUuMzYxQTE5LjksMTkuOSwwLDAsMCw0Ny45NDksNjAuOGMwLDEwLjQ0Myw3LjQ1OSwxNy45LDE2LjkwNywxNy45YTEyLjQ3OCwxMi40NzgsMCwwLDAsNC45NzMtLjk5NUM2Ny41OTEsODYuNjYsNTguMzkyLDk3LjEsNTAuNDM1LDEwMS4zMjlMNjQuMTEsMTEyLjUxOEM3OS41MjYsMTAxLjU3OCw4OS43Miw4NC45MTksODkuNzIsNjYuMjcxWm0tNTAuNDc0LDBjMC0xNi4xNjItMTAuNjkxLTI1LjM2MS0yMi4zNzgtMjUuMzYxQzYuNDI2LDQwLjkxLTIuNTI1LDQ5Ljg2MS0yLjUyNSw2MC44YzAsMTAuNDQzLDcuNDU5LDE3LjksMTYuOTA3LDE3LjlhMTEuMTY0LDExLjE2NCwwLDAsMCw0LjcyNC0uOTk1QzE3LjExOCw4Ni42Niw3LjkxOCw5Ny4xLS4wMzksMTAxLjMyOWwxMy42NzUsMTEuMTg5QzI4LjgsMTAxLjU3OCwzOS4yNDYsODQuOTE5LDM5LjI0Niw2Ni4yNzFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjUyNSAtNDAuOTEpIi8+PC9zdmc+\"","module.exports = \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDojMDAwMDAwO308L3N0eWxlPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtODUgLTg1KSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODUgODUpIj48cGF0aCBjbGFzcz0iYSIgZD0iTTg1LDkxLjc1aDkuMTEybC00LjIsNC4yTDkxLDk3bDYtNi02LTYtMS4wNSwxLjA1LDQuMTYyLDQuMkg4NVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04NSAtODUpIi8+PC9nPjwvZz48L3N2Zz4=\"","module.exports = __webpack_public_path__ + \"static/defaultCoverIntegrations-4ba919f937ae0f0a2755467e6df92172.png\";","import styled from 'styled-components';\nimport { media } from 'theme/breakpoints';\nimport quote from 'img/ui/quote.svg';\nimport arrowIcon from 'img/ui/arrow_black.svg';\n\nexport const Post = styled.div`\n  h3,\n  h2 {\n    font-weight: 700;\n    letter-spacing: 0.01em;\n    margin: 2em 0 0.8em;\n  }\n  h3 {\n    font-size: 1.1rem;\n    line-height: 1.8rem;\n  }\n  h2 {\n    font-size: 1.5rem;\n    line-height: 2rem;\n  }\n  h4 {\n    color: rgb(119, 119, 119);\n    font-weight: 700;\n    font-size: 1rem;\n  }\n  a {\n    display: inline;\n    font-size: 20px;\n  }\n  p {\n    margin-bottom: 1.25rem;\n    line-height: 1.8;\n    font-size: 20px;\n  }\n  img {\n    max-width: 100%;\n    height: auto;\n    margin: 1.2rem auto 1.4rem;\n    display: block;\n  }\n  pre,\n  p > em > code,\n  p code {\n    color: #c5c8c6;\n    text-shadow: 0 1px rgba(0, 0, 0, 0.3);\n    font-family: 'Inconsolata', 'Monaco', 'Consolas', 'Courier New', Courier, monospace;\n    direction: ltr;\n    text-align: left;\n    white-space: pre;\n    word-spacing: normal;\n    word-break: normal;\n    line-height: 1.5;\n\n    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n    background: #1d1f21;\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n    border-radius: 0.3em;\n  }\n  p > em > code,\n  p > code {\n    padding: 0.1em;\n    border-radius: 0.3em;\n    font-size: 78.5%;\n    margin: 0;\n  }\n  figure {\n    margin: 0 auto 1.5rem;\n    img {\n      margin: 0 auto 1rem;\n      display: block;\n      max-width: 100%;\n      height: auto;\n      padding-bottom: 0;\n    }\n    figcaption {\n      color: #888;\n      width: 85%;\n      margin: 0 auto;\n      text-align: center;\n    }\n  }\n  p img,\n  img {\n    margin: 1rem auto 2rem;\n    display: block;\n    max-width: 100%;\n    height: auto;\n    filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.16));\n  }\n  blockquote {\n    margin: 3.5rem 0 2rem;\n    position: relative;\n    background-color: #f1f5f9;\n    padding: 48px;\n    & p strong a {\n      font-weight: 700;\n    }\n    p:last-child {\n      margin-bottom: 0;\n    }\n    ${media.mobile} {\n      padding: 36px;\n    }\n    &::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      transform: translate(-30%, -50%);\n      background-image: url(${quote});\n      background-size: contain;\n      background-position: center;\n      background-repeat: no-repeat;\n      width: 82px;\n      height: 61px;\n      ${media.mobile} {\n        width: 74px;\n        height: 74px;\n        transform: translate(0, -50%);\n      }\n    }\n  }\n  ul li,\n  ol li {\n    margin-bottom: 0.5em;\n    line-height: 1.8;\n    font-size: 20px;\n  }\n  b {\n    font-weight: 700;\n  }\n  aside {\n    padding: 15px 25px;\n    border: 2px solid #000;\n    margin: 1.5rem 0;\n    &.red {\n      border-color: #e05c5e;\n      color: #e05c5e;\n      background-color: #ffebeb;\n    }\n    h2,\n    h3,\n    h4 {\n      margin-top: 1.25rem;\n    }\n    ul {\n      padding: 0 20px;\n      li {\n        margin-bottom: 1rem;\n      }\n    }\n    @media (min-width: 768px) {\n      padding: 15px 25px;\n    }\n  }\n  aside.blue {\n    background: #7cffef;\n    border-radius: 4px;\n    padding: 24px 48px;\n    margin: 4rem 0px;\n    border: none;\n    h2 {\n      font-size: 36px;\n      font-weight: 800;\n    }\n  }\n  a.link-button {\n    border-radius: 4px;\n    color: #fff;\n    cursor: pointer;\n    padding: 12px 36px;\n    transition: 0.2s;\n    text-transform: uppercase;\n    font-weight: 700;\n    min-width: 150px;\n    font-size: 14px;\n    text-align: center;\n    background-color: #0446ca;\n    margin: 0 auto 4rem;\n    display: block;\n    width: 250px;\n    text-decoration: none;\n    &:hover {\n      transform: scale(1.06);\n    }\n  }\n  .gatsby-resp-image-wrapper {\n    margin-top: 25px;\n    margin-bottom: 25px;\n  }\n  picture {\n    img {\n      margin: 5rem auto;\n      display: block;\n      filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.16));\n      @media (max-width: 800px) {\n        margin: 3rem auto;\n      }\n    }\n  }\n  .smaller-video {\n    max-width: 60%;\n    display: block;\n    margin: 0 auto;\n    ${media.tablet} {\n      max-width: 100%;\n    }\n  }\n  ol {\n    ul {\n      li {\n        margin-bottom: 5px;\n      }\n    }\n  }\n  .in-border {\n    border: 2px solid black;\n  }\n  .action-btn {\n    color: #fff !important;\n    margin: 3rem auto;\n    background-color: #0a4ed6;\n    padding: 8px 28px;\n    border: 2px solid #0a4ed6;\n    border-radius: 4px;\n    transition: 0.2s ease;\n    max-height: 48px;\n    font-size: 16px;\n    font-weight: 800;\n    text-align: center;\n    cursor: pointer;\n    min-width: 140px;\n    max-width: fit-content;\n    outline: 0;\n    display: block;\n    text-decoration: none;\n    white-space: nowrap;\n    &:hover {\n      color: #0a4ed6 !important;\n      background-color: #fff;\n      outline: 0;\n      border: 2px solid #0a4ed6;\n      text-decoration: none;\n    }\n  }\n  .action-banner {\n    background-color: #7cffef;\n    padding: 16px 24px;\n    font-size: 18px;\n    color: #000;\n    width: 100%;\n    display: block;\n    margin: 1.5rem 0;\n    font-weight: 700;\n    border-radius: 4px;\n    &::after {\n      content: url(${arrowIcon});\n      display: inline-block;\n      clear: both;\n      margin-left: 16px;\n      transition: 0.2s ease;\n    }\n    &:hover {\n      text-decoration: underline;\n      &::after {\n        transform: translateX(8px);\n      }\n    }\n  }\n`;\n"],"sourceRoot":""}