/* SHIELDIFYVPN - consolidated stylesheet (hand-cleaned Webflow export).
   1  reset (normalize)
   2  base framework -- the load-bearing rules, renamed .wf-
   2b widget geometry the dropped runtime rules used to provide
   3  ShieldifyVPN design, including the renamed commerce layout
   4  components -- vanilla replacements for the Webflow runtime
      and its IX2 / IX3 interactions
   4b the four content animations: geometry, mattes and playback
   5  the four content animations: the layer keyframes, transcribed
      from the export's own four Lottie files

   Fonts: assets/fonts/fonts.css -- Inter and Fira Code, both
   self-hosted woff2, both SIL OFL 1.1. The export pulled both
   from Google at runtime through webfont.js; neither family is
   substituted, only served locally, so every `--font-family--*`
   in :root below still names what the design named. */

/* ======================================================================
   1. Reset (normalize)
   ====================================================================== */
html {
  font-family: sans-serif;
  
  -ms-text-size-adjust: 100%;
  
  -webkit-text-size-adjust: 100%;
  
}
body {
  margin: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}
audio, canvas, progress, video {
  display: inline-block;
  
  vertical-align: baseline;
  
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden], template {
  display: none;
}
a {
  background-color: transparent;
}
a:active, a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b, strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  box-sizing: content-box;
  height: 0;
}
pre {
  overflow: auto;
}
code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button, input, optgroup, select, textarea {
  color: inherit;
  
  font: inherit;
  
  margin: 0;
  
}
button {
  overflow: visible;
}
button, select {
  text-transform: none;
}
button, html input[type="button"], input[type="reset"] {
  -webkit-appearance: button;
  
  cursor: pointer;
  
}
button[disabled], html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input {
  line-height: normal;
}
input[type='checkbox'], input[type='radio'] {
  box-sizing: border-box;
  
  padding: 0;
  
}
input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button {
  height: auto;
}
input[type='search'] {
  -webkit-appearance: none;
  
}
input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  
  padding: 0;
  
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td, th {
  padding: 0;
}

/* ======================================================================
   2. Base framework (runtime-only rules dropped; the rest kept as .wf-)
   ====================================================================== */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  background-color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}
img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}
.inline-block {
  max-width: 100%;
  display: inline-block;
}
.wf-button {
  display: inline-block;
  padding: 9px 15px;
  background-color: #3898EC;
  color: white;
  border: 0;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
}
input.wf-button {
  -webkit-appearance: button;
}
h1:where(:not([class*="heading-scale-"])), h2:where(:not([class*="heading-scale-"])), h3:where(:not([class*="heading-scale-"])), h4:where(:not([class*="heading-scale-"])), h5:where(:not([class*="heading-scale-"])), h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-1), :where(.heading-scale-2), :where(.heading-scale-3), :where(.heading-scale-4), :where(.heading-scale-5), :where(.heading-scale-6) {
  font-weight: bold;
  margin-bottom: 10px;
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  font-size: 38px;
  line-height: 44px;
  margin-top: 20px;
}
h2:where(:not([class*="heading-scale-"])), :where(.heading-scale-2) {
  font-size: 32px;
  line-height: 36px;
  margin-top: 20px;
}
h3:where(:not([class*="heading-scale-"])), :where(.heading-scale-3) {
  font-size: 24px;
  line-height: 30px;
  margin-top: 20px;
}
h4:where(:not([class*="heading-scale-"])), :where(.heading-scale-4) {
  font-size: 18px;
  line-height: 24px;
  margin-top: 10px;
}
h5:where(:not([class*="heading-scale-"])), :where(.heading-scale-5) {
  font-size: 14px;
  line-height: 20px;
  margin-top: 10px;
}
h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-6) {
  font-size: 12px;
  line-height: 18px;
  margin-top: 10px;
}
p {
  margin-top: 0;
  margin-bottom: 10px;
}
blockquote {
  margin: 0 0 10px 0;
  padding: 10px 20px;
  border-left: 5px solid #E2E2E2;
  font-size: 18px;
  line-height: 22px;
}
figure {
  margin: 0;
  margin-bottom: 10px;
}
figcaption {
  margin-top: 5px;
  text-align: center;
}
ul, ol {
  margin-top: 0px;
  margin-bottom: 10px;
  padding-left: 40px;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.embed:before, .embed:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.embed:after {
  clear: both;
}
fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}
button, [type='button'], [type='reset'] {
  border: 0;
  cursor: pointer;
  -webkit-appearance: button;
}
.wf-form {
  margin: 0 0 15px;
}
.wf-form-done {
  display: none;
  padding: 20px;
  text-align: center;
  background-color: #dddddd;
}
.wf-form-fail {
  display: none;
  margin-top: 10px;
  padding: 10px;
  background-color: #ffdede;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}.wf-input {
  display: block;
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333333;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}
.wf-input::placeholder {
  color: #999;
}
.wf-input:focus {
  border-color: #3898EC;
  outline: 0;
}
.wf-input[disabled], .wf-input[readonly], fieldset[disabled] .wf-input {
  cursor: not-allowed;
}
.wf-input[readonly] {
  background-color: #eeeeee;
}
textarea.wf-input {
  height: auto;
}

.wf-form-label {
  display: inline-block;
  cursor: pointer;
  font-weight: normal;
  margin-bottom: 0px;
}
.wf-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
}
.wf-container:before, .wf-container:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.wf-container:after {
  clear: both;
}@media screen and (max-width: 991px) {

  .wf-container {
    max-width: 728px;
  }}
@media screen and (max-width: 479px) {

  .wf-container {
    max-width: none;
  }}

.richtext:before, .richtext:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.richtext:after {
  clear: both;
}
.richtext[contenteditable="true"]:before, .richtext[contenteditable="true"]:after {
  white-space: initial;
}
.richtext ol, .richtext ul {
  overflow: hidden;
}.richtext figure[data-rt-type="video"] > div:after {
  content: '';
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.richtext figure {
  position: relative;
  max-width: 60%;
}
.richtext figure > div:before {
  cursor: default!important;
}
.richtext figure img {
  width: 100%;
}
.richtext figure div {
  
  font-size: 0px;
  color: transparent;
}.richtext figure[data-rt-type="image"] {
  display: table;
}
.richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}
.richtext figure[data-rt-type="image"] > figcaption {
  display: table-caption;
  caption-side: bottom;
}
.richtext figure[data-rt-type="video"] {
  width: 60%;
  height: 0;
}
.richtext figure[data-rt-type="video"] iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.richtext figure[data-rt-type="video"] > div {
  width: 100%;
}

.tabset {
  position: relative;
}
.tabset:before, .tabset:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.tabset:after {
  clear: both;
}
.tabset-menu {
  position: relative;
}
.tabset-link {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  padding: 9px 30px;
  text-align: left;
  cursor: pointer;
  color: #222222;
  background-color: #dddddd;
}
.tabset-link[aria-current="page"], .tabset-link.is-active {
  background-color: #C8C8C8;
}
.tabset-link:focus {
  outline: 0;
}
.tabset-content {
  position: relative;
  display: block;
  overflow: hidden;
}
.tabset-pane {
  position: relative;
  display: none;
}
.tabset-pane.is-active {
  display: block;
}@media screen and (max-width: 479px) {

  .tabset-link {
    display: block;
  }}


/* ======================================================================
   2b. Widget geometry the dropped framework rules used to provide
   ======================================================================

   Section 2 drops every webflow.css rule that only existed for the runtime
   to drive. Three of those families were carrying real LAYOUT as well as
   behaviour -- the navbar, the Pages dropdown and the collection lists --
   and this file restates that layout against the design's own class names
   so the pages measure the same without the framework's.

   It is emitted BETWEEN the framework and the design sheet, in the same
   place webflow.css sat, so the design keeps overriding it exactly as it
   did before: `.nav-dropdown-toggle`'s own `padding: 0` still beats the
   widget's 20px, `.menu-button`'s 32px square still beats the widget's
   18px padding, `.navbar-container`'s `z-index: 5` still beats the
   widget's 1000. Moving any of it after the design silently wins arguments
   it used to lose.

   Four details that are easy to get wrong and expensive to notice:

     * `.navbar-container`'s two pseudo-elements are NOT decoration.
       Webflow emits them as a clearfix, but `display: table` with
       `content: " "` is a real box with a real line, so dropping them
       moves everything below the bar. They are transcribed verbatim.
     * `[data-nav-menu-open]`'s `display: block !important` is the ONE
       runtime rule in this export that has to beat the design sheet
       (`.nav-menu { display: none }` at 991px is (0,1,0) and an attribute
       selector ties it). It is written here with the `!important` it
       shipped with, and it is why the open mobile panel is marked by an
       ATTRIBUTE rather than a class.
     * `.w-dropdown-list { display: none }` is the ONLY thing that closes
       the Pages panel -- the design sheet gives it a background and, in
       its `.w--open` state, a `position: fixed` and some padding, and
       stops. It IS restated here, because unlike the FAQ (whose answers
       collapse to a zero grid row in section 4) the Pages panel really is
       shown and hidden by `display`.
     * `.w-slider`'s 300px height and grey background are NOT restated.
       The export's only slider is inside the marketplace promo bar, which
       transform.py removes whole; the three widget names stay in
       transform's DROP_CLASSES so that a re-export growing a real carousel
       fails audit_css on an unstyled class rather than shipping a dead one.

   ---- what a <button> loses that an <a> or a <div> had -----------------
   transform.py turns five kinds of element into real <button>s: the
   hamburger, the Pages toggle, the FAQ question rows, the ten tab links,
   and the cart's open / close / remove controls. Two things get lost on
   the way, and both are invisible until something is measured.

     * The UA's form-control reset. `font: inherit` restores the family,
       the size, the weight and the line height -- and NOT
       `letter-spacing`, `word-spacing` or `text-transform`, which a
       control does not inherit at all. This design sets
       `letter-spacing: -.03em` on `body` and `.15em` on every `.subtitle`,
       so losing it is a visible re-wrap rather than a rounding error.
     * The design sheet's own bare `a` rule. It sets `color` and
       `text-decoration: none` on every link in the template (webflow.css
       adds `text-decoration: underline` underneath it), and a <button>
       stops matching it. `.link-button` restates exactly those -- inside
       `:where()`, so it scores 0 and keeps losing to every design class
       the type selector was already losing to. A plain class here would
       score (0,1,0) and start WINNING arguments the `a` rule used to lose,
       which is how an earlier conversion threw a slider arrow across the
       page. */
button {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
}

:where(.link-button) {
  color: var(--colors--mint-frost);
  text-decoration: none;
}

/* ---- the navbar (.w-nav / -brand / -menu / -button) ------------------ */
/* The design gives `.navbar-container` its width, padding, transparent
   background and `z-index: 5`; what the widget was still contributing is
   the positioning context the open menu's overlay is absolutely placed
   against. */
.navbar-container {
  position: relative;
}

/* Webflow's clearfix. `display: table` participates in layout. */
.navbar-container::before,
.navbar-container::after {
  content: " ";
  display: table;
  grid-area: 1 / 1 / 2 / 2;
}

.navbar-container::after {
  clear: both;
}

.navbar-brand {
  position: relative;
  text-decoration: none;
}

.nav-menu-wrapper {
  position: relative;
}

/* The hamburger's wrapper. `display: none` is what hides it above 991px;
   `data-collapse="medium"` turned it on below, and the design then sizes
   it to a 32px square with `padding: 0` in the same band -- which is why
   the widget's own 18px padding and 24px font-size are NOT restated. The
   border and background are the <button> reset, not the widget. */
.menu-button {
  position: relative;
  display: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
  border: 0;
  background-color: transparent;
}@media screen and (max-width: 991px) {

  /* `data-collapse="medium"`: the whole menu leaves the bar and the button
     arrives.

     BOTH halves matter, and only one of them looks redundant. The design
     hides `.nav-menu` -- the <ul> of desktop links -- in this same band, but
     `.nav-menu-wrapper` is a SECOND element, and it also holds
     `.nav-mobile-wrapper`, which the design turns ON at this width. Drop the
     wrapper's rule because the inner one looks like it covers it and the
     mobile panel ships permanently open below the navbar on every page.
     `[data-nav-menu-open]` above is what re-shows it. */
  .nav-menu-wrapper {
    display: none;
  }

  .menu-button {
    display: block;
  }}


/* The open menu. main.js moves `.nav-menu-wrapper` into this overlay --
   appended as the navbar container's last child, exactly where Webflow's
   runtime put its own -- so `top: 100%` measures from the BAR, padding
   included, rather than from `.navbar-wrapper`'s inner box. */
.nav-overlay {
  position: absolute;
  overflow: hidden;
  display: none;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
}

.nav-overlay[data-nav-open] {
  display: block;
}

/* Webflow's own rule, `!important` and all. The design paints this panel
   (`.nav-menu-wrapper` below 991px: 40px of padding on the deep-onyx
   ground) and never touches its `display`, so this is what opens it. The
   background and `text-align: center` below are the widget's defaults and
   the design overrides both -- they are transcribed anyway because the
   FIRST paint of the panel happens before the design's own background
   rule would matter if either were ever dropped. */
[data-nav-menu-open] {
  display: block !important;
  position: relative;
  background: #c8c8c8;
  text-align: center;
  overflow: visible;
  min-width: 200px;
}

/* ---- the Pages dropdown (.w-dropdown / -toggle / -list) --------------- */
/* The design supplies the toggle's flex row, its white ink and its 2px gap,
   and the panel's fixed full-width geometry in the open state; the widget
   supplied the boxes they sit in.

   `.nav-dropdown`'s own `display: flex` and its zeroed margins below 991px
   both beat the widget, so neither `display: inline-block` nor the auto
   margins are restated -- a declaration the design always beats never
   applies. What is left is the stacking context that keeps the open panel
   above the page, and the positioning context `.nav-dropdown-list-wrap`
   is placed against before it goes `fixed`. */
.nav-dropdown {
  position: relative;
  text-align: left;
  z-index: 900;
}

.nav-dropdown-toggle {
  position: relative;
  vertical-align: top;
  text-align: left;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  border: 0;
  background-color: transparent;
}

.nav-dropdown-list-wrap {
  position: absolute;
  display: none;
  min-width: 100%;
}

.nav-dropdown-list-wrap.is-open {
  display: block;
}

/* ======================================================================
   3. ShieldifyVPN design
   ====================================================================== */
:root {
  --colors--deep-onyx: #080808;
  --font-family--body: Inter, sans-serif;
  --colors--mint-frost: #e9f8f3;
  --_typography---h6--font-size: 16px;
  --_typography---h6--line-height: 20px;
  --font-weight--normal: 400;
  --letter-spacing--letter-spacing-s: -.03em;
  --_perimeter---margin--margin-none: 0px;
  --font-family--heading: "Fira Code", sans-serif;
  --_typography---h1--font-size: 50px;
  --_typography---h1--line-height: 50px;
  --letter-spacing--letter-spacing-m: -.04em;
  --_typography---h2--font-size: 40px;
  --_typography---h2--line-height: 40px;
  --_typography---h3--font-size: 34px;
  --_typography---h3--line-height: 32px;
  --_typography---h4--font-size: 20px;
  --_typography---h4--line-height: 20px;
  --_typography---h5--font-size: 16px;
  --_typography---h5--line-height: 20px;
  --_perimeter---padding--padding-none: 0px;
  --colors--gray: #a7a7a7;
  --_perimeter---padding--padding-xxxl: 20px;
  --_perimeter---padding--padding-12xl: 100px;
  --_perimeter---padding--padding-xxl: 16px;
  --_perimeter---padding--padding-l: 12px;
  --colors--rich-charcoal: #1c1c1c;
  --_perimeter---padding--padding-9xl: 48px;
  --_perimeter---gap--gap-xl: 16px;
  --_perimeter---gap--gap-6xl: 32px;
  --_perimeter---gap--gap-5xl: 28px;
  --_perimeter---gap--gap-m: 10px;
  --_perimeter---gap--gap-s: 8px;
  --_typography---title--font-size: 14px;
  --_typography---title--line-height: 16px;
  --colors--emerald-teal: #26916b;
  --_perimeter---padding--padding-xxs: 4px;
  --font-weight--medium: 500;
  --colors--white: white;
  --_perimeter---padding--padding-s: 8px;
  --_typography---subtitle--font-size: 12px;
  --_typography---subtitle--line-height: 14px;
  --letter-spacing--letter-spacing-l: .15em;
  --_perimeter---padding--padding-m: 10px;
  --colors--white-lite: #ffffff0a;
  --_border-radius---radius-m: 10px;
  --_perimeter---gap--gap-l: 12px;
  --_border-radius---radius-8xl: 100px;
  --_perimeter---padding--padding-13xl: 120px;
  --_perimeter---padding--padding-8xl: 40px;
  --_perimeter---padding--padding-4xl: 24px;
  --_perimeter---gap--gap-xxxl: 20px;
  --_perimeter---padding--padding-7xl: 32px;
  --_perimeter---gap--gap-9xl: 48px;
  --_perimeter---gap--gap-8xl: 40px;
  --_perimeter---padding--padding-6xl: 30px;
  --_perimeter---gap--gap-4xl: 24px;
  --_border-radius---radius-s: 8px;
  --_perimeter---gap--gap-xxs: 4px;
  --_perimeter---gap--gap-xxl: 18px;
  --_perimeter---padding--padding-11xl: 80px;
  --_perimeter---padding--padding-10xl: 60px;
  --_perimeter---gap--gap-xs: 6px;
  --_perimeter---padding--padding-5xl: 28px;
  --_perimeter---gap--gap-11xl: 60px;
  --_border-radius---radius-xs: 6px;
  --_border-radius---radius-xxs: 4px;
  --colors--red: red;
  --_perimeter---padding--padding-xs: 6px;
  --_perimeter---gap--gap-xxxs: 2px;
  --_perimeter---gap--gap-none: 0px;
  --_perimeter---padding--padding-xl: 14px;
  --_perimeter---gap--gap-10xl: 56px;
  --_perimeter---gap--gap-7xl: 36px;
  --_perimeter---padding--padding-xxxs: 2px;
  --font-weight--semi-bold: 600;
  --_perimeter---margin--margin-m: 80px;
  --colors--dark: #151917;
  --colors--deep-dark: #0d0d0d;
  --colors--dark-orange: #916326;
  --_perimeter---padding--padding-14xl: 140px;
  --_perimeter---padding--padding-15xl: 160px;
  --_border-radius---radius-xxxs: 2px;
  --colors--black: black;
  --_border-radius---radius-l: 12px;
  --_border-radius---radius-xl: 16px;
  --_border-radius---radius-xxl: 18px;
  --_border-radius---radius-xxxl: 20px;
  --_border-radius---radius-4xl: 24px;
  --_border-radius---radius-5xl: 28px;
  --_border-radius---radius-6xl: 32px;
  --_border-radius---radius-7xl: 40px;
  --font-weight--bold: 700;
}
.wf-commerce-commercecartwrapper {
  display: inline-block;
  position: relative;
}
.wf-commerce-commercecartopenlink {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: flex;
}
.wf-commerce-commercecartopenlinkicon {
  margin-right: 8px;
}
.wf-commerce-commercecartopenlinkcount {
  color: #3898ec;
  text-align: center;
  background-color: #fff;
  border-radius: 9px;
  min-width: 18px;
  height: 18px;
  margin-left: 8px;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  display: inline-block;
}
.wf-commerce-commercecartcontainerwrapper {
  z-index: 1001;
  background-color: #000c;
  position: fixed;
  inset: 0;
}
.wf-commerce-commercecartcontainerwrapper--cartType-modal {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.wf-commerce-commercecartcontainer {
  background-color: #fff;
  flex-direction: column;
  width: 100%;
  min-width: 320px;
  max-width: 480px;
  display: flex;
  overflow: auto;
  box-shadow: 0 5px 25px #00000040;
}
.wf-commerce-commercecartheader {
  border-bottom: 1px solid #e6e6e6;
  flex: none;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  display: flex;
  position: relative;
}
.wf-commerce-commercecartheading {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}
.wf-commerce-commercecartcloselink {
  width: 16px;
  height: 16px;
}
.wf-commerce-commercecartformwrapper {
  flex-direction: column;
  flex: 1;
  display: flex;
}
.wf-commerce-commercecartform {
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  display: flex;
}
.wf-commerce-commercecartlist {
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 12px 24px;
  overflow: auto;
}
.wf-commerce-commercecartitem {
  align-items: flex-start;
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
}
.wf-commerce-commercecartitemimage {
  width: 60px;
  height: 0%;
}
.wf-commerce-commercecartiteminfo {
  flex-direction: column;
  flex: 1;
  margin-left: 16px;
  margin-right: 16px;
  display: flex;
}
.wf-commerce-commercecartproductname {
  font-weight: 700;
}
.wf-commerce-commercecartoptionlist {
  margin-bottom: 0;
  padding-left: 0;
  text-decoration: none;
  list-style-type: none;
}
.wf-commerce-commercecartquantity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 60px;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 6px 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecartquantity::placeholder {
  color: #999;
}
.wf-commerce-commercecartquantity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecartfooter {
  border-top: 1px solid #e6e6e6;
  flex-direction: column;
  flex: none;
  padding: 16px 24px 24px;
  display: flex;
}
.wf-commerce-commercecartlineitem {
  flex: none;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  display: flex;
}
.wf-commerce-commercecartordervalue {
  font-weight: 700;
}
.wf-commerce-commercecartcheckoutbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  text-align: center;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 2px;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: block;
}
.wf-commerce-commercecartemptystate {
  flex: 1;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
}
.wf-commerce-commercecarterrorstate {
  background-color: #ffdede;
  flex: none;
  margin: 0 24px 24px;
  padding: 10px;
}
.wf-checkbox {
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
}
.wf-checkbox:before {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}
.wf-checkbox:after {
  content: " ";
  clear: both;
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}
.checkbox-input {
  float: left;
  margin: 4px 0 0 -20px;
  line-height: normal;
}
.checkbox-input-custom {
  border: 1px solid #ccc;
  border-radius: 2px;
  width: 12px;
  height: 12px;
}
.wf-commerce-commerceaddtocartform {
  margin: 0 0 15px;
}
.wf-commerce-commerceaddtocartbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: flex;
}
.wf-commerce-commerceaddtocartoutofstock {
  background-color: #ddd;
  margin-top: 10px;
  padding: 10px;
}
.wf-commerce-commerceaddtocarterror {
  background-color: #ffdede;
  margin-top: 10px;
  padding: 10px;
}
.wf-commerce-commercecheckoutformcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercelayoutcontainer {
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.wf-commerce-commercelayoutmain {
  flex: 0 800px;
  margin-right: 20px;
}
.wf-commerce-commercecheckoutcustomerinfowrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutblockheader {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 20px;
  display: flex;
}
.wf-commerce-commercecheckoutblockcontent {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 20px;
}
.wf-commerce-commercecheckoutlabel {
  margin-bottom: 8px;
}
.wf-commerce-commercecheckoutemailinput {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutemailinput::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutemailinput:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingaddresswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutshippingfullname {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingfullname::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingfullname:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstreetaddress {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstreetaddress::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstreetaddress:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutrow {
  margin-left: -8px;
  margin-right: -8px;
  display: flex;
}
.wf-commerce-commercecheckoutcolumn {
  flex: 1;
  padding-left: 8px;
  padding-right: 8px;
}
.wf-commerce-commercecheckoutshippingcity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingcity::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingcity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstateprovince {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstateprovince::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstateprovince:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingzippostalcode {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingzippostalcode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingzippostalcode:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingcountryselector {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingcountryselector::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingcountryselector:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingmethodswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutshippingmethodslist {
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}
.wf-commerce-commercecheckoutshippingmethoditem {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 0;
  padding: 16px;
  font-weight: 400;
  display: flex;
}
.wf-commerce-commercecheckoutshippingmethoddescriptionblock {
  flex-direction: column;
  flex-grow: 1;
  margin-left: 12px;
  margin-right: 12px;
  display: flex;
}
.wf-commerce-commerceboldtextblock {
  font-weight: 700;
}
.wf-commerce-commercecheckoutshippingmethodsemptystate {
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 64px 16px;
}
.wf-commerce-commercecheckoutpaymentinfowrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutcardnumber {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardnumber::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardnumber:focus, .wf-commerce-commercecheckoutcardnumber.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutcardexpirationdate {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardexpirationdate::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardexpirationdate:focus, .wf-commerce-commercecheckoutcardexpirationdate.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutcardsecuritycode {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardsecuritycode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardsecuritycode:focus, .wf-commerce-commercecheckoutcardsecuritycode.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingaddresstogglewrapper {
  flex-direction: row;
  display: flex;
}
.wf-commerce-commercecheckoutbillingaddresstogglecheckbox {
  margin-top: 4px;
}
.wf-commerce-commercecheckoutbillingaddresstogglelabel {
  margin-left: 8px;
  font-weight: 400;
}
.wf-commerce-commercecheckoutbillingaddresswrapper {
  margin-top: 16px;
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutbillingfullname {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingfullname::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingfullname:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstreetaddress {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstreetaddress::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstreetaddress:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingcity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingcity::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingcity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstateprovince {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstateprovince::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstateprovince:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingzippostalcode {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingzippostalcode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingzippostalcode:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingcountryselector {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingcountryselector::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingcountryselector:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutorderitemswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutsummaryblockheader {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 20px;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemslist {
  margin-bottom: -20px;
}
.wf-commerce-commercecheckoutorderitem {
  margin-bottom: 20px;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemdescriptionwrapper {
  flex-grow: 1;
  margin-left: 16px;
  margin-right: 16px;
}
.wf-commerce-commercecheckoutorderitemquantitywrapper {
  white-space: pre-wrap;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemoptionlist {
  margin-bottom: 0;
  padding-left: 0;
  text-decoration: none;
  list-style-type: none;
}
.wf-commerce-commercelayoutsidebar {
  flex: 0 0 320px;
  position: sticky;
  top: 20px;
}
.wf-commerce-commercecheckoutordersummarywrapper {
  margin-bottom: 20px;
}.wf-commerce-commercecheckoutsummarylineitem {
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 8px;
  display: flex;
}

.wf-commerce-commercecheckoutsummarytotal {
  font-weight: 700;
}
.wf-commerce-commercecheckoutplaceorderbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  text-align: center;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 3px;
  align-items: center;
  margin-bottom: 20px;
  padding: 9px 15px;
  text-decoration: none;
  display: block;
}
.wf-commerce-commercecheckouterrorstate {
  background-color: #ffdede;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 10px 16px;
}
.wf-commerce-commercepaypalcheckoutformcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercecheckoutcustomerinfosummarywrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutsummaryitem, .wf-commerce-commercecheckoutsummarylabel {
  margin-bottom: 8px;
}
.wf-commerce-commercecheckoutsummaryflexboxdiv {
  flex-direction: row;
  justify-content: flex-start;
  display: flex;
}
.wf-commerce-commercecheckoutsummarytextspacingondiv {
  margin-right: .33em;
}
.wf-commerce-commercecheckoutpaymentsummarywrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercepaypalcheckouterrorstate {
  background-color: #ffdede;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 10px 16px;
}
.wf-commerce-commerceorderconfirmationcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercecheckoutshippingsummarywrapper {
  margin-bottom: 20px;
}@media screen and (max-width: 767px) {

  .wf-commerce-commercelayoutcontainer {
    flex-direction: column;
    align-items: stretch;
  }
  .wf-commerce-commercelayoutmain {
    flex-basis: auto;
    margin-right: 0;
  }
  .wf-commerce-commercelayoutsidebar {
    flex-basis: auto;
  }}
@media screen and (max-width: 479px) {

  .wf-commerce-commercecartcontainerwrapper--cartType-modal {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }  .wf-commerce-commercecartquantity, .wf-commerce-commercecheckoutemailinput, .wf-commerce-commercecheckoutshippingfullname, .wf-commerce-commercecheckoutshippingstreetaddress, .wf-commerce-commercecheckoutshippingstreetaddressoptional {
    font-size: 16px;
  }

  .wf-commerce-commercecheckoutrow {
    flex-direction: column;
  }
  .wf-commerce-commercecheckoutshippingcity, .wf-commerce-commercecheckoutshippingstateprovince, .wf-commerce-commercecheckoutshippingzippostalcode, .wf-commerce-commercecheckoutshippingcountryselector, .wf-commerce-commercecheckoutcardnumber, .wf-commerce-commercecheckoutcardexpirationdate, .wf-commerce-commercecheckoutcardsecuritycode, .wf-commerce-commercecheckoutbillingfullname, .wf-commerce-commercecheckoutbillingstreetaddress, .wf-commerce-commercecheckoutbillingstreetaddressoptional, .wf-commerce-commercecheckoutbillingcity, .wf-commerce-commercecheckoutbillingstateprovince, .wf-commerce-commercecheckoutbillingzippostalcode, .wf-commerce-commercecheckoutbillingcountryselector {
    font-size: 16px;
  }}

body {
  background-color: var(--colors--deep-onyx);
  font-family: var(--font-family--body);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h6--font-size);
  line-height: var(--_typography---h6--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-s);
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  margin-top: var(--_perimeter---margin--margin-none);
  margin-bottom: var(--_perimeter---margin--margin-none);
  font-family: var(--font-family--heading);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h1--font-size);
  line-height: var(--_typography---h1--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-m);
  text-transform: uppercase;
}
h2:where(:not([class*="heading-scale-"])), :where(.heading-scale-2) {
  margin-top: var(--_perimeter---margin--margin-none);
  margin-bottom: var(--_perimeter---margin--margin-none);
  font-family: var(--font-family--heading);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h2--font-size);
  line-height: var(--_typography---h2--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-m);
  text-transform: uppercase;
}
h3:where(:not([class*="heading-scale-"])), :where(.heading-scale-3) {
  margin-top: var(--_perimeter---margin--margin-none);
  margin-bottom: var(--_perimeter---margin--margin-none);
  font-family: var(--font-family--heading);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h3--font-size);
  line-height: var(--_typography---h3--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-s);
  text-transform: uppercase;
}
h4:where(:not([class*="heading-scale-"])), :where(.heading-scale-4) {
  margin-top: var(--_perimeter---margin--margin-none);
  margin-bottom: var(--_perimeter---margin--margin-none);
  font-family: var(--font-family--heading);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-m);
  text-transform: uppercase;
}
h5:where(:not([class*="heading-scale-"])), :where(.heading-scale-5) {
  margin-top: var(--_perimeter---margin--margin-none);
  margin-bottom: var(--_perimeter---margin--margin-none);
  font-family: var(--font-family--heading);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h5--font-size);
  line-height: var(--_typography---h5--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-m);
  text-transform: uppercase;
}
h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-6) {
  margin-top: var(--_perimeter---margin--margin-none);
  margin-bottom: var(--_perimeter---margin--margin-none);
  font-family: var(--font-family--body);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h6--font-size);
  line-height: var(--_typography---h6--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-s);
}
p {
  margin-bottom: var(--_perimeter---padding--padding-none);
  font-family: var(--font-family--body);
  color: var(--colors--gray);
  font-size: var(--_typography---h6--font-size);
  line-height: var(--_typography---h6--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-s);
}
a {
  color: var(--colors--mint-frost);
  text-decoration: none;
}
ul, ol {
  margin-bottom: var(--_perimeter---margin--margin-none);
  padding-left: var(--_perimeter---padding--padding-xxxl);
}
img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  display: inline-block;
}
.password {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
  position: relative;
}
.password.page-inner {
  flex-flow: column;
  align-items: stretch;
  height: auto;
  max-height: none;
}
.password-main {
  padding: var(--_perimeter---padding--padding-12xl) var(--_perimeter---padding--padding-xxxl);
  flex-direction: column;
  align-items: stretch;
  display: flex;
  position: relative;
}
.page-wrapper {
  position: relative;
  overflow: clip;
}
.page-inner {
  width: 100%;
  max-width: 1260px;
  padding-right: var(--_perimeter---padding--padding-xxxl);
  padding-left: var(--_perimeter---padding--padding-xxxl);
  margin-left: auto;
  margin-right: auto;
}
.stroke-wrap {
  border-right: 1px solid var(--colors--rich-charcoal);
  border-left: 1px solid var(--colors--rich-charcoal);
}
.container {
  width: 100%;
  position: relative;
}
.style-guide-inner {
  width: 100%;
  max-width: 886px;
  padding-right: var(--_perimeter---padding--padding-xxxl);
  padding-left: var(--_perimeter---padding--padding-xxxl);
  grid-column-gap: var(--_perimeter---padding--padding-12xl);
  grid-row-gap: var(--_perimeter---padding--padding-12xl);
  flex-flow: column;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.typography-list-wrap {
  margin-top: var(--_perimeter---padding--padding-9xl);
  grid-column-gap: var(--_perimeter---gap--gap-xl);
  grid-row-gap: var(--_perimeter---gap--gap-6xl);
  grid-template-rows: auto;
  grid-template-columns: 1fr .75fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.typography-list {
  grid-column-gap: var(--_perimeter---gap--gap-m);
  grid-row-gap: var(--_perimeter---gap--gap-m);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.title {
  font-family: var(--font-family--body);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---title--font-size);
  line-height: var(--_typography---title--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-s);
}
.title.copyright-title, .title.additional-link-title {
  color: var(--colors--gray);
  text-align: center;
}
.title.badge-title {
  font-family: var(--font-family--heading);
  color: var(--colors--emerald-teal);
  text-align: center;
  text-transform: uppercase;
}
.title.badge-title:where(.badge-left) {
  text-align: left;
}
.title.duration {
  padding-bottom: var(--_perimeter---padding--padding-xxs);
  color: var(--colors--gray);
}
.title.text-01 {
  color: var(--colors--emerald-teal);
  font-weight: var(--font-weight--medium);
}
.title.text-01:where(.button-03-white) {
  color: var(--colors--mint-frost);
}
.title.green {
  color: var(--colors--emerald-teal);
  font-weight: var(--font-weight--medium);
}
.title-medium {
  font-family: var(--font-family--body);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---title--font-size);
  line-height: var(--_typography---title--line-height);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--letter-spacing--letter-spacing-s);
}
.title-medium.btn-title-one {
  color: var(--colors--deep-onyx);
}
.title-medium.btn-title-one:where(.button-01-green), .title-medium.btn-title-two {
  color: var(--colors--white);
}
.title-medium.btn-title-two:where(.button-01-green) {
  color: var(--colors--deep-onyx);
}
.title-medium.btn-title-three {
  color: var(--colors--white);
}
.title-medium.btn-title-four {
  color: var(--colors--deep-onyx);
}
.title-medium.checkbox-title {
  margin-bottom: var(--_perimeter---margin--margin-none);
  margin-left: var(--_perimeter---padding--padding-s);
  color: var(--colors--gray);
}
.title-medium.password-link {
  color: var(--colors--gray);
  transition: color .3s;
}
.title-medium.password-link:hover {
  color: var(--colors--mint-frost);
}
.title-medium.view-link-title {
  color: var(--colors--deep-onyx);
}
.subtitle {
  font-family: var(--font-family--body);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---subtitle--font-size);
  line-height: var(--_typography---subtitle--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-s);
}
.subtitle.footer-badge {
  color: var(--colors--emerald-teal);
  font-weight: var(--font-weight--medium);
}
.subtitle.label-title {
  color: var(--colors--gray);
  text-transform: none;
}
.subtitle.number-label {
  color: var(--colors--gray);
  padding-bottom: 2px;
}
.subtitle-medium {
  font-family: var(--font-family--body);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---subtitle--font-size);
  line-height: var(--_typography---subtitle--line-height);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--letter-spacing--letter-spacing-l);
  text-transform: uppercase;
}
.h6 {
  font-family: var(--font-family--body);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h6--font-size);
  line-height: var(--_typography---h6--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-s);
}
.h6.footer-subtitle {
  width: 100%;
  max-width: 438px;
  color: var(--colors--gray);
}
.h6.blog-subtitle {
  color: var(--colors--gray);
}
.h6.blog-v3-subtitle {
  width: 100%;
  max-width: 582px;
  color: var(--colors--gray);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.h6.about-subtitle, .h6.intro-statistics-title, .h6.team-tagline, .h6.career-subtitle {
  color: var(--colors--gray);
}
.h6.features-subtitle, .h6.features-statistics-title {
  color: var(--colors--gray);
  text-align: center;
}
.h6.security-subtitle {
  color: var(--colors--gray);
}
.h6.extensions-subtitle {
  color: var(--colors--gray);
  text-align: center;
}
.h6.built-subtitle {
  color: var(--colors--gray);
}
.h6.answer {
  width: 100%;
  max-width: 570px;
  padding-top: var(--_perimeter---padding--padding-m);
  color: var(--colors--gray);
}
.h6.network-number-title {
  color: var(--colors--gray);
  text-align: center;
}
.h6.cart-item-title {
  color: var(--colors--deep-onyx);
  font-weight: var(--font-weight--medium);
}
.text-gray {
  color: var(--colors--gray);
}
.style-guide-title {
  font-family: var(--font-family--body);
  font-size: var(--_typography---h3--font-size);
  line-height: var(--_typography---h3--line-height);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--letter-spacing--letter-spacing-s);
  text-transform: uppercase;
}
.colors-wrap {
  width: 100%;
  margin-top: var(--_perimeter---padding--padding-9xl);
  grid-column-gap: var(--_perimeter---gap--gap-s);
  grid-row-gap: var(--_perimeter---gap--gap-s);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.colors-list {
  height: 305px;
  position: relative;
  overflow: hidden;
}
.color-plate {
  background-color: var(--colors--emerald-teal);
  height: 100%;
}
.color-plate.deep-onyx {
  border: 1px solid var(--colors--rich-charcoal);
  background-color: var(--colors--deep-onyx);
}
.color-plate.white-lite {
  background-color: var(--colors--white-lite);
}
.color-plate.rich-charcoal {
  background-color: var(--colors--rich-charcoal);
}
.color-plate.gradient {
  background-color: var(--colors--deep-onyx);
  background-image: linear-gradient(#2323234d, #3131314d);
}
.color-plate.mint-frost {
  background-color: var(--colors--mint-frost);
}
.color-plate.gray {
  background-color: var(--colors--gray);
}
.color-info-wrap {
  padding: var(--_perimeter---padding--padding-xxs) var(--_perimeter---padding--padding-m);
  border-radius: var(--_border-radius---radius-m);
  background-color: var(--colors--deep-onyx);
  position: absolute;
  inset: auto auto 16px 16px;
}
.buttons-wrap {
  margin-top: var(--_perimeter---padding--padding-9xl);
  grid-column-gap: var(--_perimeter---gap--gap-5xl);
  grid-row-gap: var(--_perimeter---gap--gap-l);
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.button-01 {
  padding: var(--_perimeter---padding--padding-m) var(--_perimeter---padding--padding-xxl);
  border: 1px solid var(--colors--mint-frost);
  border-radius: var(--_border-radius---radius-8xl);
  background-color: var(--colors--mint-frost);
  transition: box-shadow .25s, border-color .25s, background-color .25s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 44px 18px #bdbdbd05, 0 25px 15px #bdbdbd0d, 0 11px 11px #bdbdbd17, 0 3px 6px #bdbdbd1a;
}
.button-01:where(.button-01-green) {
  border-color: var(--colors--emerald-teal);
  background-color: var(--colors--emerald-teal);
  box-shadow: none;
  transition: border-color .25s, background-color .25s;
}
.button-01:where(.button-01-shadow-less) {
  box-shadow: none;
}
.button-01:hover {
  border-color: var(--colors--emerald-teal);
  background-color: var(--colors--emerald-teal);
  box-shadow: 0 0 #bdbdbd05, 0 0 #bdbdbd0d, 0 0 #bdbdbd17, 0 0 #bdbdbd1a;
}
.button-01:hover:where(.button-01-green) {
  border-color: var(--colors--mint-frost);
  background-color: var(--colors--mint-frost);
}
.button-mask {
  z-index: 2;
  height: var(--_typography---title--line-height);
  position: relative;
  overflow: hidden;
}
.button-02 {
  padding: var(--_perimeter---padding--padding-m) var(--_perimeter---padding--padding-xxl);
  border: 1px solid var(--colors--rich-charcoal);
  border-radius: var(--_border-radius---radius-8xl);
  background-image: linear-gradient(#2323234d, #3131314d);
  position: relative;
  overflow: hidden;
}
.button-02:where(.button-02-large) {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}
.button-02:where(.button-02-cta) {
  background-color: var(--colors--deep-onyx);
  background-image: none;
}
.button-02.large {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}
.button-02-bg {
  background-color: var(--colors--mint-frost);
  opacity: 0;
  position: absolute;
  inset: 0%;
}
.style-guide-wrap {
  padding-top: var(--_perimeter---padding--padding-13xl);
  padding-bottom: var(--_perimeter---padding--padding-13xl);
  border-top: 1px solid var(--colors--rich-charcoal);
  position: relative;
}
.corner {
  background-color: var(--colors--white);
  width: 4px;
  height: 4px;
  position: absolute;
  inset: -2px auto auto -2px;
}
.corner:where(.corner-top-right) {
  inset: -2px -2px auto auto;
}
.corner:where(.corner-bottom-left) {
  inset: auto auto -2px -2px;
}
.corner:where(.corner-bottom-right) {
  inset: auto -2px -2px auto;
}
.corner.top-right {
  inset: -2px -2px auto auto;
}
.corner.bottom-left {
  inset: auto auto -2px -2px;
}
.corner.bottom-right {
  inset: auto -2px -2px auto;
}
.blank-wrap {
  border-top: 1px solid var(--colors--rich-charcoal);
  border-bottom: 1px solid var(--colors--rich-charcoal);
  height: 60px;
}
.blank-wrap.stroke {
  border-right: 1px solid var(--colors--rich-charcoal);
  border-left: 1px solid var(--colors--rich-charcoal);
  position: relative;
}
.footer-top {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  position: relative;
}
.footer-column {
  padding: var(--_perimeter---padding--padding-8xl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.footer-column.border {
  border-left: 1px solid var(--colors--rich-charcoal);
}
.footer-text-wrap {
  margin-top: var(--_perimeter---padding--padding-9xl);
  grid-column-gap: var(--_perimeter---gap--gap-6xl);
  grid-row-gap: var(--_perimeter---gap--gap-6xl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.footer-details-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-xxxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.footer-button-wrap {
  margin-top: var(--_perimeter---padding--padding-7xl);
  grid-column-gap: var(--_perimeter---gap--gap-xl);
  grid-row-gap: var(--_perimeter---gap--gap-l);
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.footer-link-wrap {
  flex-flow: column;
  flex: 1;
  justify-content: space-between;
  width: 100%;
  display: flex;
}
.social-list {
  margin-top: var(--_perimeter---padding--padding-l);
  grid-column-gap: var(--_perimeter---gap--gap-l);
  grid-row-gap: var(--_perimeter---gap--gap-l);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.social-link {
  border-radius: var(--_border-radius---radius-8xl);
  background-color: var(--colors--white-lite);
  flex: none;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  display: flex;
  overflow: hidden;
}
.social-icon {
  width: 20px;
  height: 20px;
}
.footer-menu-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-xl);
  grid-row-gap: var(--_perimeter---gap--gap-xl);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.footer-menu-list {
  margin-top: var(--_perimeter---padding--padding-l);
  grid-column-gap: var(--_perimeter---gap--gap-s);
  grid-row-gap: var(--_perimeter---gap--gap-s);
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.footer-menu {
  font-family: var(--font-family--body);
  color: var(--colors--gray);
  font-size: var(--_typography---title--font-size);
  line-height: var(--_typography---title--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-s);
  transition: color .3s;
}
.footer-menu:hover, .footer-menu[aria-current="page"], .footer-menu.is-active {
  color: var(--colors--mint-frost);
}
.footer-center {
  padding: var(--_perimeter---padding--padding-6xl);
  grid-column-gap: var(--_perimeter---gap--gap-xxxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  border-top: 1px solid var(--colors--rich-charcoal);
  flex-flow: wrap;
  justify-content: space-between;
  display: flex;
}
.footer-list {
  grid-column-gap: var(--_perimeter---gap--gap-xxxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.footer-icon-wrap {
  border-radius: var(--_border-radius---radius-m);
  background-color: var(--colors--white-lite);
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  display: flex;
}
.footer-icon {
  filter: drop-shadow(0 4px 4px #00000040);
  width: 44px;
  height: 44px;
}
.footer-list-details {
  grid-column-gap: var(--_perimeter---gap--gap-xxs);
  grid-row-gap: var(--_perimeter---gap--gap-xxs);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.h5 {
  font-family: var(--font-family--heading);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h5--font-size);
  line-height: var(--_typography---h5--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-m);
  text-transform: uppercase;
}
.h5.text-gray {
  color: var(--colors--gray);
}
.h5.cart-total {
  font-family: var(--font-family--body);
  color: var(--colors--deep-onyx);
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  font-weight: var(--font-weight--medium);
  text-transform: none;
}
.footer-bottom {
  padding: var(--_perimeter---padding--padding-4xl) var(--_perimeter---padding--padding-6xl);
  border-top: 1px solid var(--colors--rich-charcoal);
  position: relative;
}
.footer-right-menu {
  grid-column-gap: var(--_perimeter---gap--gap-xxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxl);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.footer-bottom-content {
  grid-column-gap: var(--_perimeter---gap--gap-xl);
  grid-row-gap: var(--_perimeter---gap--gap-xl);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.copyright-link {
  transition: color .3s;
}
.copyright-link:hover {
  color: var(--colors--emerald-teal);
}
.utility-hero {
  position: relative;
}
.utility-hero-wrap {
  padding: var(--_perimeter---padding--padding-13xl) var(--_perimeter---padding--padding-xxxl);
  position: relative;
}
.utility-hero-wrap.sm {
  padding-top: var(--_perimeter---padding--padding-12xl);
  padding-bottom: var(--_perimeter---padding--padding-12xl);
}
.utility-hero-content {
  grid-column-gap: var(--_perimeter---gap--gap-6xl);
  grid-row-gap: var(--_perimeter---gap--gap-6xl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 714px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.utility-text-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-xxxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.utility-text-wrap.sm {
  max-width: 408px;
}
.utility-text-wrap.medium {
  max-width: 580px;
}
.align-center {
  text-align: center;
}
.hero-subtitle-wrap.sm {
  width: 100%;
  max-width: 438px;
}
.utility-subtitle {
  color: var(--colors--gray);
  text-align: center;
}
.changelog {
  border-top: 1px solid var(--colors--rich-charcoal);
  position: relative;
}
.changelog-wrap {
  padding: var(--_perimeter---padding--padding-12xl) var(--_perimeter---padding--padding-10xl);
}
.changelog-inner {
  grid-column-gap: var(--_perimeter---gap--gap-5xl);
  grid-row-gap: var(--_perimeter---gap--gap-5xl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 846px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.privacy {
  padding: var(--_perimeter---padding--padding-xxxl) var(--_perimeter---padding--padding-xxxl) var(--_perimeter---padding--padding-10xl);
  border-top: 1px solid var(--colors--rich-charcoal);
  position: relative;
}
.privacy-wrap {
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.privacy-details h2:where(:not([class*="heading-scale-"])), .privacy-details :where(.heading-scale-2) {
  margin-top: var(--_perimeter---padding--padding-8xl);
  font-family: var(--font-family--heading);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-m);
}
.privacy-details p, .privacy-details ul {
  margin-top: var(--_perimeter---padding--padding-xxl);
}
.utility-image-wrap {
  width: 100%;
  max-width: 516px;
  margin-top: var(--_perimeter---padding--padding-10xl);
  margin-left: auto;
  margin-right: auto;
}
.license {
  padding: var(--_perimeter---padding--padding-10xl) var(--_perimeter---padding--padding-xxxl);
  border-top: 1px solid var(--colors--rich-charcoal);
  position: relative;
}
.license-wrap {
  grid-column-gap: var(--_perimeter---padding--padding-12xl);
  grid-row-gap: var(--_perimeter---padding--padding-12xl);
  flex-flow: column;
  width: 100%;
  max-width: 846px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.license-list {
  grid-column-gap: var(--_perimeter---gap--gap-6xl);
  grid-row-gap: var(--_perimeter---gap--gap-6xl);
  flex-flow: column;
  display: flex;
}
.license-text-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-l);
  grid-row-gap: var(--_perimeter---gap--gap-l);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 450px;
  display: flex;
}
.h3 {
  font-family: var(--font-family--heading);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h3--font-size);
  line-height: var(--_typography---h3--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-s);
  text-transform: uppercase;
}
.h3.text-black {
  font-family: var(--font-family--body);
  text-transform: none;
}
.license-link {
  color: var(--colors--emerald-teal);
  transition: color .3s;
}
.license-link:hover {
  color: var(--colors--mint-frost);
}
.license-image-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-xxxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  grid-template-rows: auto;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.license-image-list {
  width: 100%;
  height: 260px;
  overflow: hidden;
}
.fit-cover {
  object-fit: cover;
}
.fit-cover.about-image {
  object-position: 50% 20%;
}
.fit-cover.team-image {
  object-position: 50% 5%;
}
.fit-cover.team-banner {
  object-position: 50% 15%;
}
.fit-cover.hero-image {
  object-position: 0% 0%;
  margin-bottom: -4px;
}
.license-card {
  height: 220px;
  padding: var(--_perimeter---padding--padding-5xl);
  background-color: var(--colors--white-lite);
  justify-content: center;
  align-items: center;
  display: flex;
}
.license-icon {
  width: 140px;
  height: auto;
}
.signup {
  position: relative;
}
.signup-wrap {
  padding: var(--_perimeter---padding--padding-13xl) var(--_perimeter---padding--padding-xxxl);
  position: relative;
}
.signup-content {
  grid-column-gap: var(--_perimeter---gap--gap-6xl);
  grid-row-gap: var(--_perimeter---gap--gap-6xl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.signup-content.space-large {
  grid-column-gap: var(--_perimeter---gap--gap-11xl);
  grid-row-gap: var(--_perimeter---gap--gap-11xl);
}
.signup-text-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-xxxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.form-wrap {
  width: 100%;
}
.form-block {
  margin-bottom: var(--_perimeter---margin--margin-none);
}
.form {
  grid-column-gap: var(--_perimeter---padding--padding-8xl);
  grid-row-gap: var(--_perimeter---padding--padding-8xl);
  flex-flow: column;
  display: flex;
}
.form-group {
  grid-column-gap: var(--_perimeter---gap--gap-m);
  grid-row-gap: var(--_perimeter---gap--gap-m);
  flex-flow: column;
  width: 100%;
  display: flex;
}
.label {
  font-family: var(--font-family--heading);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h5--font-size);
  line-height: var(--_typography---h5--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-m);
  text-transform: uppercase;
}
.input-filed {
  height: 46px;
  margin-bottom: var(--_perimeter---margin--margin-none);
  padding-right: var(--_perimeter---padding--padding-m);
  padding-left: var(--_perimeter---padding--padding-m);
  border: 1px solid var(--colors--deep-onyx);
  border-radius: var(--_border-radius---radius-s);
  background-color: var(--colors--white-lite);
  color: var(--colors--mint-frost);
}
.input-filed:focus, .input-filed.-wfp-focus {
  border-color: var(--colors--emerald-teal);
}
.input-filed::placeholder {
  color: var(--colors--gray);
  font-size: var(--_typography---title--font-size);
  line-height: var(--_typography---title--line-height);
  letter-spacing: var(--letter-spacing--letter-spacing-s);
}
.input-filed.textarea {
  height: 170px;
  padding-top: var(--_perimeter---padding--padding-xxl);
}
.form-group-bottom {
  grid-column-gap: var(--_perimeter---gap--gap-l);
  grid-row-gap: var(--_perimeter---gap--gap-l);
  flex-flow: column;
  display: flex;
}
.checkbox {
  width: 16px;
  height: 16px;
  margin-top: var(--_perimeter---margin--margin-none);
  margin-left: var(--_perimeter---margin--margin-none);
  border: 1px solid var(--colors--gray);
  border-radius: var(--_border-radius---radius-xxs);
}
.checkbox-field {
  margin-bottom: var(--_perimeter---margin--margin-none);
  padding-left: var(--_perimeter---padding--padding-none);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.checkbox-link {
  transition: color .3s;
}
.checkbox-link:hover {
  color: var(--colors--emerald-teal);
}
.submit-button {
  padding: var(--_perimeter---padding--padding-m) var(--_perimeter---padding--padding-xxl);
  border: 1px solid var(--colors--mint-frost);
  border-radius: var(--_border-radius---radius-8xl);
  background-color: var(--colors--mint-frost);
  color: var(--colors--deep-onyx);
  transition: box-shadow .25s, border-color .25s, background-color .25s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 44px 18px #bdbdbd05, 0 25px 15px #bdbdbd0d, 0 11px 11px #bdbdbd17, 0 3px 6px #bdbdbd1a;
}
.submit-button:where(.button-01-green) {
  border-color: var(--colors--emerald-teal);
  background-color: var(--colors--emerald-teal);
  box-shadow: none;
  transition: border-color .25s, background-color .25s;
}
.submit-button:hover {
  border-color: var(--colors--emerald-teal);
  background-color: var(--colors--emerald-teal);
  box-shadow: 0 0 #bdbdbd05, 0 0 #bdbdbd0d, 0 0 #bdbdbd17, 0 0 #bdbdbd1a;
}
.submit-button:hover:where(.button-01-green) {
  border-color: var(--colors--mint-frost);
  background-color: var(--colors--mint-frost);
}
.submit-button.contact-btn {
  width: 100%;
  max-width: 205px;
}
.success-message {
  background-color: var(--colors--emerald-teal);
  color: var(--colors--deep-onyx);
  font-weight: var(--font-weight--medium);
}
.error-message {
  background-color: var(--colors--red);
}
.additional-link {
  font-weight: var(--font-weight--medium);
  transition: color .3s;
}
.additional-link:hover {
  color: var(--colors--emerald-teal);
}
.checkbox-row {
  grid-column-gap: var(--_perimeter---gap--gap-l);
  grid-row-gap: var(--_perimeter---gap--gap-l);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.contact {
  position: relative;
}
.contact-wrap {
  padding: var(--_perimeter---padding--padding-13xl) var(--_perimeter---padding--padding-xxxl);
  position: relative;
}
.contact-content {
  grid-column-gap: var(--_perimeter---gap--gap-11xl);
  grid-row-gap: var(--_perimeter---gap--gap-11xl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.contact-text-wrap {
  margin-top: var(--_perimeter---padding--padding-7xl);
  grid-column-gap: var(--_perimeter---gap--gap-xxxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.form-row {
  grid-column-gap: var(--_perimeter---gap--gap-m);
  grid-row-gap: var(--_perimeter---gap--gap-m);
  display: flex;
}
.contact-form {
  grid-column-gap: var(--_perimeter---gap--gap-4xl);
  grid-row-gap: var(--_perimeter---gap--gap-4xl);
  flex-flow: column;
  display: flex;
}
.contact-button-wrap {
  margin-top: var(--_perimeter---padding--padding-xxl);
  justify-content: center;
  align-items: center;
  display: flex;
}
.info {
  position: relative;
}
.info-wrap {
  border-bottom: 1px solid var(--colors--rich-charcoal);
  border-left: 1px solid var(--colors--rich-charcoal);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.info-list {
  padding: var(--_perimeter---padding--padding-10xl) var(--_perimeter---padding--padding-4xl) var(--_perimeter---padding--padding-10xl) var(--_perimeter---padding--padding-10xl);
  border-top: 1px solid var(--colors--rich-charcoal);
  border-right: 1px solid var(--colors--rich-charcoal);
}
.info-details-wrap {
  margin-top: var(--_perimeter---padding--padding-6xl);
  grid-column-gap: var(--_perimeter---gap--gap-xs);
  grid-row-gap: var(--_perimeter---gap--gap-xs);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.info-link {
  font-family: var(--font-family--body);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h6--font-size);
  line-height: var(--_typography---h6--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-s);
  transition: color .3s;
}
.info-link:hover {
  color: var(--colors--emerald-teal);
}
.info-blank-block {
  border-right: 1px solid var(--colors--rich-charcoal);
  border-left: 1px solid var(--colors--rich-charcoal);
  height: 120px;
  position: relative;
}
.blog-v1 {
  position: relative;
}
.blog-v1-wrap {
  padding: var(--_perimeter---padding--padding-12xl) var(--_perimeter---padding--padding-xxxl);
  position: relative;
}
.blog-head-wrap {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.blog-headinig {
  text-align: center;
}
.blog-v2-wrap {
  position: relative;
}
.blog-tab-menu {
  border-left: 1px solid var(--colors--rich-charcoal);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.blog-tab-link {
  padding: var(--_perimeter---padding--padding-m);
  border-top: 1px solid var(--colors--rich-charcoal);
  border-right: 1px solid var(--colors--rich-charcoal);
  background-color: var(--colors--deep-onyx);
  font-family: var(--font-family--heading);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h5--font-size);
  line-height: var(--_typography---h5--line-height);
  font-weight: var(--font-weight--normal);
  text-align: center;
  letter-spacing: var(--letter-spacing--letter-spacing-m);
  text-transform: uppercase;
}
.blog-tab-link[aria-current="page"], .blog-tab-link.is-active {
  background-color: var(--colors--mint-frost);
  color: var(--colors--deep-onyx);
}
.blog-list {
  border-bottom: 1px solid var(--colors--rich-charcoal);
  border-left: 1px solid var(--colors--rich-charcoal);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.blog-item {
  border-top: 1px solid var(--colors--rich-charcoal);
  border-right: 1px solid var(--colors--rich-charcoal);
}
.blog-link {
  width: 100%;
  padding: var(--_perimeter---padding--padding-xxxl) var(--_perimeter---padding--padding-m);
}
.blog-image-wrap {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 194px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.blog-image-wrap.large {
  height: 472px;
  margin-top: var(--_perimeter---padding--padding-8xl);
}
.blog-details-wrap {
  margin-top: var(--_perimeter---padding--padding-xxxl);
  padding-right: var(--_perimeter---padding--padding-m);
  padding-left: var(--_perimeter---padding--padding-m);
  grid-column-gap: var(--_perimeter---gap--gap-m);
  grid-row-gap: var(--_perimeter---gap--gap-m);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.h4 {
  font-family: var(--font-family--heading);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-m);
  text-transform: uppercase;
}
.h4.intro-details {
  font-family: var(--font-family--body);
  color: var(--colors--gray);
  line-height: var(--_perimeter---padding--padding-4xl);
  letter-spacing: var(--letter-spacing--letter-spacing-s);
  text-transform: none;
}
.h4.apply-title {
  color: var(--colors--emerald-teal);
}
.h4.extensions-title {
  text-align: center;
}
.view-link {
  z-index: 1;
  padding: var(--_perimeter---padding--padding-m) var(--_perimeter---padding--padding-xxl);
  border-radius: var(--_border-radius---radius-8xl);
  background-color: var(--colors--mint-frost);
  position: absolute;
  transform: scale(0);
}
.view-link-mask {
  height: var(--_typography---title--line-height);
  overflow: hidden;
}
.blog-v3 {
  position: relative;
}
.blog-v3-head-wrap {
  padding: var(--_perimeter---padding--padding-10xl) var(--_perimeter---padding--padding-xxxl);
  position: relative;
}
.blog-v3-head-content {
  width: 100%;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.category-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-xs);
  grid-row-gap: var(--_perimeter---gap--gap-xs);
  justify-content: center;
  align-items: center;
  display: flex;
}
.blog-v3-text-wrap {
  margin-top: var(--_perimeter---padding--padding-7xl);
  grid-column-gap: var(--_perimeter---gap--gap-xxxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-v3-heading {
  text-align: center;
}
.blog-v3-image-wrap {
  width: 100%;
  height: 612px;
  position: relative;
  overflow: hidden;
}
.blog-v3-image-area {
  position: relative;
}
.blog-v3-main-wrap {
  padding: var(--_perimeter---padding--padding-8xl) var(--_perimeter---padding--padding-xxxl) var(--_perimeter---padding--padding-13xl);
  position: relative;
}
.blog-v3-details-wrap {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.blog-details h2:where(:not([class*="heading-scale-"])), .blog-details :where(.heading-scale-2) {
  margin-top: var(--_perimeter---padding--padding-8xl);
  font-family: var(--font-family--heading);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-m);
}
.blog-details p {
  margin-top: var(--_perimeter---padding--padding-xxl);
}
.blog-details ul {
  margin-top: var(--_perimeter---padding--padding-xxl);
  color: var(--colors--gray);
}
.blog-details h4:where(:not([class*="heading-scale-"])), .blog-details :where(.heading-scale-4) {
  margin-top: var(--_perimeter---padding--padding-8xl);
}
.blog-details h5:where(:not([class*="heading-scale-"])), .blog-details h6:where(:not([class*="heading-scale-"])), .blog-details :where(.heading-scale-5), .blog-details :where(.heading-scale-6) {
  margin-top: var(--_perimeter---padding--padding-xxxl);
}
.blog-details ol {
  margin-top: var(--_perimeter---padding--padding-l);
  color: var(--colors--gray);
}
.writer-wrap {
  margin-top: var(--_perimeter---padding--padding-8xl);
  padding: var(--_perimeter---padding--padding-7xl);
  border: 1px solid var(--colors--rich-charcoal);
}
.writer-info-wrap {
  margin-top: var(--_perimeter---padding--padding-4xl);
  grid-column-gap: var(--_perimeter---gap--gap-xxxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.writer-image {
  width: 48px;
  height: 48px;
}
.writer-info {
  grid-column-gap: var(--_perimeter---gap--gap-xxxs);
  grid-row-gap: var(--_perimeter---gap--gap-xxxs);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.blog-v3-bottom-wrap {
  margin-top: var(--_perimeter---padding--padding-8xl);
  grid-column-gap: var(--_perimeter---gap--gap-xxxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.share-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-xl);
  grid-row-gap: var(--_perimeter---gap--gap-xl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.share-list {
  grid-column-gap: var(--_perimeter---gap--gap-4xl);
  grid-row-gap: var(--_perimeter---gap--gap-4xl);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.share-link {
  opacity: .6;
  width: 20px;
  transition: opacity .3s;
}
.share-link:hover {
  opacity: 100;
}
.blog-v3-info-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-8xl);
  grid-row-gap: var(--_perimeter---gap--gap-8xl);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-v3-info-list {
  grid-column-gap: var(--_perimeter---gap--gap-s);
  grid-row-gap: var(--_perimeter---gap--gap-s);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-v3-info-icon {
  width: 20px;
  height: 20px;
}
.password-form {
  width: 100%;
  margin-bottom: var(--_perimeter---margin--margin-none);
  border-right: 1px solid var(--colors--rich-charcoal);
  border-left: 1px solid var(--colors--rich-charcoal);
}
.password-content {
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.title-hide {
  display: none;
}
.passwrod-text-wrap {
  margin-bottom: var(--_perimeter---padding--padding-10xl);
  grid-column-gap: var(--_perimeter---gap--gap-xxxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.password-button-wrap {
  margin-top: var(--_perimeter---gap--gap-8xl);
  justify-content: center;
  align-items: center;
  display: flex;
}
.pricing-v1 {
  position: relative;
}
.pricing-v1-wrap {
  padding-top: var(--_perimeter---padding--padding-10xl);
  position: relative;
}
.pricing-v1-wrap.space {
  padding-right: var(--_perimeter---padding--padding-xxxl);
  padding-bottom: var(--_perimeter---padding--padding-13xl);
  padding-left: var(--_perimeter---padding--padding-xxxl);
}
.pricing-head-wrap {
  width: 100%;
  max-width: 540px;
  margin-right: auto;
  margin-bottom: var(--_perimeter---padding--padding-10xl);
  padding-right: var(--_perimeter---padding--padding-xxxl);
  padding-left: var(--_perimeter---padding--padding-xxxl);
  margin-left: auto;
}
.pricing-head-wrap.sm {
  max-width: 400px;
  padding-right: var(--_perimeter---padding--padding-none);
  padding-left: var(--_perimeter---padding--padding-none);
}
.pricing-main-wrap {
  border-bottom: 1px solid var(--colors--rich-charcoal);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  position: relative;
}
.pricing-main-wrap.cate {
  padding-right: var(--_perimeter---padding--padding-xxl);
  padding-left: var(--_perimeter---padding--padding-xxl);
  border-top: 1px solid var(--colors--rich-charcoal);
  display: block;
}
.pricing-card {
  padding: var(--_perimeter---padding--padding-xxxl);
  border-top: 1px solid var(--colors--rich-charcoal);
  overflow: hidden;
}
.pricing-card.stroke {
  border-right: 1px solid var(--colors--rich-charcoal);
  border-left: 1px solid var(--colors--rich-charcoal);
}
.pricing-card.cate {
  border-right: 1px solid var(--colors--rich-charcoal);
  border-left: 1px solid var(--colors--rich-charcoal);
  border-top-width: 0;
}
.pricing-card-inner {
  grid-column-gap: var(--_perimeter---gap--gap-6xl);
  grid-row-gap: var(--_perimeter---gap--gap-6xl);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}
.pricing-top {
  grid-column-gap: var(--_perimeter---gap--gap-l);
  grid-row-gap: var(--_perimeter---gap--gap-l);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.pricing-icon-wrap {
  border-radius: var(--_border-radius---radius-m);
  background-color: var(--colors--white-lite);
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  display: flex;
}
.pricing-icon {
  filter: drop-shadow(0 4px 4px #00000040);
  width: 44px;
  height: 44px;
}
.price-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-xs);
  grid-row-gap: var(--_perimeter---gap--gap-xs);
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}
.pricing-text-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-m);
  grid-row-gap: var(--_perimeter---gap--gap-m);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.pricing-features-wrap {
  margin-top: var(--_perimeter---padding--padding-xxl);
  grid-column-gap: var(--_perimeter---gap--gap-m);
  grid-row-gap: var(--_perimeter---gap--gap-m);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.pricing-features-list {
  grid-column-gap: var(--_perimeter---gap--gap-m);
  grid-row-gap: var(--_perimeter---gap--gap-m);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.pricing-features-icon {
  width: 20px;
  height: 20px;
}
.section-header-wrap {
  padding: var(--_perimeter---padding--padding-13xl) var(--_perimeter---padding--padding-7xl) var(--_perimeter---padding--padding-10xl);
  border-bottom: 1px solid var(--colors--rich-charcoal);
  position: relative;
}
.section-header-wrap.bottom-border {
  border-bottom-width: 0;
}
.section-header-wrap.blog-border {
  border-right: 1px solid var(--colors--rich-charcoal);
  border-left: 1px solid var(--colors--rich-charcoal);
  border-bottom-width: 0;
}
.section-header-wrap.border {
  padding-bottom: var(--_perimeter---padding--padding-8xl);
  border-bottom-width: 0;
}
.section-header-wrap.top-bottom-border {
  border-bottom-width: 0;
}
.compare-head-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-6xl);
  grid-row-gap: var(--_perimeter---gap--gap-6xl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.compare-head-wrap.sm {
  max-width: 450px;
}
.section-text-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-xxxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
}
.section-text-wrap.left {
  justify-content: center;
  align-items: flex-start;
}
.subtitle-center {
  color: var(--colors--gray);
  text-align: center;
}
.compare-main-wrap {
  position: relative;
}
.compare-top-wrap {
  padding: var(--_perimeter---padding--padding-xxxl) var(--_perimeter---padding--padding-m);
  border-bottom: 1px solid var(--colors--rich-charcoal);
  background-color: var(--colors--white-lite);
  grid-template-rows: auto;
  grid-template-columns: .4fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  align-items: center;
  display: grid;
}
.compare-right {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.compare-row {
  padding: var(--_perimeter---padding--padding-xxxl) var(--_perimeter---padding--padding-m);
  border-bottom: 1px solid var(--colors--rich-charcoal);
  grid-template-rows: auto;
  grid-template-columns: .4fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}
.compare-details-wrap {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.compare-icon {
  width: 16px;
  height: 16px;
}
.compare-wrap {
  padding-bottom: var(--_perimeter---padding--padding-10xl);
}
.about, .about-wrap {
  position: relative;
}
.about-main-wrap {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.about-left {
  padding: var(--_perimeter---padding--padding-8xl);
  grid-column-gap: var(--_perimeter---gap--gap-5xl);
  grid-row-gap: var(--_perimeter---gap--gap-5xl);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}
.about-right {
  width: 100%;
  height: 605px;
  overflow: hidden;
}
.about-image-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.about-text-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-xxxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 450px;
  display: flex;
}
.about-button-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-xl);
  grid-row-gap: var(--_perimeter---gap--gap-l);
  flex-flow: wrap;
  display: flex;
}
.about-top {
  grid-column-gap: var(--_typography---h3--font-size);
  grid-row-gap: var(--_typography---h3--font-size);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.about-bottom {
  width: 100%;
  max-width: 530px;
  position: relative;
  overflow: hidden;
}
.brand-marquee {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  opacity: .6;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}
.brand-marquee.v2 {
  opacity: 1;
}
.brand-list {
  flex: none;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.brand-logo {
  flex: none;
  width: 82px;
  height: auto;
  margin-right: 45px;
}
.brand-logo._02 {
  width: 18px;
}
.brand-logo._03 {
  width: 78px;
}
.brand-logo._04 {
  width: 23px;
}
.brand-logo._05 {
  width: 108px;
}
.brand-logo._06 {
  width: 15px;
}
.brand-logo.v2 {
  margin-right: 160px;
}
.about-shadow {
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(90deg, #080808, #08080800);
  width: 100%;
  max-width: 118px;
  height: 110%;
  position: absolute;
  inset: -5% auto 0% 0%;
}
.about-shadow.right {
  background-image: linear-gradient(90deg, #08080800, #080808);
  inset: -5% 0% 0% auto;
}
.intro-head-wrap {
  padding: var(--_perimeter---padding--padding-10xl) var(--_perimeter---padding--padding-8xl);
  grid-column-gap: var(--_perimeter---gap--gap-xxxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
  position: relative;
}
.intro-head-left {
  grid-column-gap: var(--_perimeter---gap--gap-6xl);
  grid-row-gap: var(--_perimeter---gap--gap-6xl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 550px;
  display: flex;
}
.intro-head-right {
  width: 100%;
  max-width: 365px;
}
.intro-banner-wrap {
  width: 100%;
  height: 356px;
  overflow: hidden;
}
.intro-main-wrap {
  border-bottom: 1px solid var(--colors--rich-charcoal);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  position: relative;
}
.intro-column {
  padding: var(--_perimeter---padding--padding-8xl);
  border-right: 1px solid var(--colors--rich-charcoal);
}
.intro-column._02 {
  grid-column-gap: var(--_perimeter---gap--gap-8xl);
  grid-row-gap: var(--_perimeter---gap--gap-8xl);
  border-right-width: 0;
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}
.intro-details-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-xxxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 362px;
  display: flex;
}
.intro-image-wrap {
  width: 100%;
  max-width: 176px;
  height: 176px;
  overflow: hidden;
}
.intro-statistics-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-l);
  grid-row-gap: var(--_perimeter---gap--gap-l);
  justify-content: space-between;
  display: flex;
}
.intro-statistics-list {
  grid-column-gap: var(--_perimeter---gap--gap-m);
  grid-row-gap: var(--_perimeter---gap--gap-m);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.statistics-number-wrap {
  height: var(--_typography---h2--line-height);
  font-family: var(--font-family--heading);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h2--font-size);
  line-height: var(--_typography---h2--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-m);
  text-transform: uppercase;
  justify-content: flex-start;
  display: flex;
  overflow: hidden;
}
.statistics-number-wrap.h1 {
  height: var(--_typography---h1--line-height);
  font-size: var(--_typography---h1--font-size);
  line-height: var(--_typography---h1--line-height);
}
.statistics-number-wrap.h3 {
  height: var(--_typography---h3--line-height);
  font-size: var(--_typography---h3--font-size);
  line-height: var(--_typography---h3--line-height);
}
.statistics-number-box.upper {
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-end;
  display: flex;
}
.statistics-number-box.lower {
  flex-flow: column;
  display: flex;
}
.log {
  padding-left: var(--_perimeter---padding--padding-l);
}
.team-head-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-6xl);
  grid-row-gap: var(--_perimeter---gap--gap-6xl);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 520px;
  display: flex;
}
.team-wrap {
  position: relative;
}
.team-main-wrap {
  padding: var(--_perimeter---padding--padding-7xl);
  grid-column-gap: var(--_perimeter---padding--padding-11xl);
  grid-row-gap: var(--_perimeter---padding--padding-6xl);
  border-bottom: 1px solid var(--colors--rich-charcoal);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.team-list {
  background-color: var(--colors--deep-onyx);
}
.team-image-wrap {
  width: 100%;
  height: 230px;
  overflow: hidden;
}
.team-info-wrap {
  margin-top: var(--_perimeter---padding--padding-xxxl);
  grid-column-gap: var(--_perimeter---gap--gap-xs);
  grid-row-gap: var(--_perimeter---gap--gap-xs);
  flex-flow: column;
  display: flex;
}
.team-banner-wrap {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.team-button-wrap {
  z-index: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}
.career-main-wrap {
  padding-bottom: var(--_perimeter---padding--padding-6xl);
  grid-row-gap: var(--_perimeter---gap--gap-6xl);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  position: relative;
}
.career-list-wrap, .career-list, .career-item {
  height: 100%;
}
.career-card {
  height: 100%;
  padding: var(--_perimeter---padding--padding-7xl);
  border-bottom: 1px solid var(--colors--rich-charcoal);
  overflow: hidden;
}
.career-card.border {
  border-left: 1px solid var(--colors--rich-charcoal);
}
.career-card.border._04, .career-card._03 {
  border-top: 1px solid var(--colors--rich-charcoal);
}
.career-icon-wrap {
  border-radius: var(--_border-radius---radius-m);
  background-color: var(--colors--white-lite);
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  display: flex;
}
.career-icon {
  filter: drop-shadow(0 4px 4px #00000040);
  width: 44px;
  height: 44px;
}
.career-details-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-5xl);
  grid-row-gap: var(--_perimeter---gap--gap-5xl);
  flex-flow: column;
  display: flex;
}
.career-text-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-m);
  grid-row-gap: var(--_perimeter---gap--gap-m);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.career-tag-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-m);
  grid-row-gap: var(--_perimeter---gap--gap-m);
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.career-tag {
  padding: var(--_perimeter---padding--padding-xs) var(--_perimeter---padding--padding-m);
  border-radius: var(--_border-radius---radius-8xl);
  background-color: var(--colors--rich-charcoal);
}
.career-info-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-xl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  grid-template-rows: auto;
  grid-template-columns: 1fr .75fr;
  grid-auto-columns: 1fr;
  width: 100%;
  max-width: 398px;
  display: grid;
}
.career-info-list {
  grid-column-gap: var(--_perimeter---gap--gap-s);
  grid-row-gap: var(--_perimeter---gap--gap-s);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.career-info-icon {
  width: 18px;
  height: 18px;
}
.career-divider {
  border: 1px dashed var(--colors--rich-charcoal);
  width: 100%;
  height: 1px;
}
.requirements-wrap.v2 {
  margin-top: var(--_perimeter---padding--padding-8xl);
}
.requirements-list-wrap {
  margin-top: var(--_perimeter---gap--gap-xl);
  grid-column-gap: var(--_perimeter---gap--gap-m);
  grid-row-gap: var(--_perimeter---gap--gap-m);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.requirements-list {
  grid-column-gap: var(--_perimeter---gap--gap-m);
  grid-row-gap: var(--_perimeter---gap--gap-m);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.requirements-icon {
  width: 20px;
  height: 20px;
}
.career-inner {
  grid-column-gap: var(--_perimeter---gap--gap-8xl);
  grid-row-gap: var(--_perimeter---gap--gap-8xl);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}
.career-v2, .career-v2-wrap {
  position: relative;
}
.career-v2-head-wrap {
  padding: var(--_perimeter---padding--padding-11xl) var(--_perimeter---padding--padding-7xl);
  border-bottom: 1px solid var(--colors--rich-charcoal);
  position: relative;
}
.career-v2-head-content {
  grid-column-gap: var(--_perimeter---gap--gap-5xl);
  grid-row-gap: var(--_perimeter---gap--gap-5xl);
  flex-flow: column;
  width: 100%;
  max-width: 675px;
  display: flex;
}
.career-v2-text-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-xl);
  grid-row-gap: var(--_perimeter---gap--gap-xl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.career-v2-info-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-xl);
  grid-row-gap: var(--_perimeter---gap--gap-l);
  flex-flow: wrap;
  grid-template-rows: auto;
  grid-template-columns: 1fr .75fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  width: 100%;
  display: flex;
}
.career-v2-tag-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-m);
  grid-row-gap: var(--_perimeter---gap--gap-m);
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.career-v2-main-wrap {
  border-bottom: 1px solid var(--colors--rich-charcoal);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  position: relative;
}
.career-v2-details-wrap {
  padding: var(--_perimeter---padding--padding-xxxl) var(--_perimeter---padding--padding-7xl) var(--_perimeter---padding--padding-10xl);
  border-right: 1px solid var(--colors--rich-charcoal);
}
.career-details h2:where(:not([class*="heading-scale-"])), .career-details :where(.heading-scale-2) {
  margin-top: var(--_perimeter---padding--padding-8xl);
  font-family: var(--font-family--heading);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-m);
}
.career-details p {
  margin-top: var(--_perimeter---padding--padding-xxl);
}
.career-details ul {
  margin-top: var(--_perimeter---padding--padding-l);
}
.career-details h4:where(:not([class*="heading-scale-"])), .career-details :where(.heading-scale-4) {
  margin-top: var(--_perimeter---padding--padding-8xl);
}
.career-v2-form-wrap {
  padding: var(--_perimeter---padding--padding-10xl) var(--_perimeter---padding--padding-7xl);
  grid-column-gap: var(--_perimeter---gap--gap-8xl);
  grid-row-gap: var(--_perimeter---gap--gap-8xl);
  flex-flow: column;
  display: flex;
}
.apply-form {
  grid-column-gap: var(--_perimeter---gap--gap-6xl);
  grid-row-gap: var(--_perimeter---gap--gap-6xl);
  flex-flow: column;
  display: flex;
}
.career-blank-block {
  height: 120px;
  position: relative;
}
.pricing-single-card {
  margin-bottom: var(--_perimeter---gap--gap-8xl);
  padding: var(--_perimeter---padding--padding-8xl);
  grid-column-gap: var(--_perimeter---gap--gap-xl);
  grid-row-gap: var(--_perimeter---gap--gap-xl);
  border: 1px solid var(--colors--rich-charcoal);
  background-image: linear-gradient(#0e0e0e, #020202);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.pricing-single-wrap {
  width: 100%;
  max-width: 814px;
  margin-left: auto;
  margin-right: auto;
}
.add-to-cart-button {
  width: 100%;
  padding: var(--_perimeter---padding--padding-m) var(--_perimeter---padding--padding-xxl);
  border: 1px solid var(--colors--mint-frost);
  border-radius: var(--_border-radius---radius-8xl);
  background-color: var(--colors--mint-frost);
  color: var(--colors--deep-onyx);
  transition: box-shadow .25s, border-color .25s, background-color .25s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 44px 18px #bdbdbd05, 0 25px 15px #bdbdbd0d, 0 11px 11px #bdbdbd17, 0 3px 6px #bdbdbd1a;
}
.add-to-cart-button:where(.button-01-green) {
  border-color: var(--colors--emerald-teal);
  background-color: var(--colors--emerald-teal);
  box-shadow: none;
  transition: border-color .25s, background-color .25s;
}
.add-to-cart-button:hover {
  border-color: var(--colors--emerald-teal);
  background-color: var(--colors--emerald-teal);
  box-shadow: 0 0 #bdbdbd05, 0 0 #bdbdbd0d, 0 0 #bdbdbd17, 0 0 #bdbdbd1a;
}
.add-to-cart-button:hover:where(.button-01-green) {
  border-color: var(--colors--mint-frost);
  background-color: var(--colors--mint-frost);
}
.cart-state {
  margin-bottom: var(--_perimeter---margin--margin-none);
}
.pricing-card-details {
  grid-column-gap: var(--_perimeter---padding--padding-6xl);
  grid-row-gap: var(--_perimeter---padding--padding-6xl);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}
.pricing-details h2:where(:not([class*="heading-scale-"])), .pricing-details :where(.heading-scale-2) {
  margin-top: var(--_perimeter---padding--padding-8xl);
  font-family: var(--font-family--heading);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-m);
}
.pricing-details p {
  margin-top: var(--_perimeter---padding--padding-xxl);
}
.pricing-details ul {
  margin-top: var(--_perimeter---padding--padding-xxl);
  margin-bottom: var(--_perimeter---gap--gap-8xl);
}
.features, .features-wrap {
  position: relative;
}
.features-head-wrap {
  padding: var(--_perimeter---padding--padding-10xl) var(--_perimeter---padding--padding-xxxl);
  background-image: url('../images/bg.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.features-head-cintent {
  grid-column-gap: var(--_perimeter---gap--gap-7xl);
  grid-row-gap: var(--_perimeter---gap--gap-7xl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.features-text-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-xxxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.features-heading {
  text-align: center;
}
.features-main-wrap {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  position: relative;
}
.features-statistics-list {
  padding: var(--_perimeter---padding--padding-8xl) var(--_perimeter---padding--padding-xxl);
  grid-column-gap: var(--_perimeter---gap--gap-m);
  grid-row-gap: var(--_perimeter---gap--gap-m);
  border-top: 1px solid var(--colors--rich-charcoal);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.features-statistics-list._02, .features-statistics-list._03, .features-statistics-list._04 {
  border-left: 1px solid var(--colors--rich-charcoal);
}
.security-wrap {
  border-top: 1px solid var(--colors--rich-charcoal);
}
.security-main-wrap {
  grid-row-gap: var(--_perimeter---gap--gap-8xl);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.security-list {
  height: 100%;
  padding: var(--_perimeter---padding--padding-xxxl);
  border-top: 1px solid var(--colors--rich-charcoal);
  border-bottom: 1px solid var(--colors--rich-charcoal);
  background-color: var(--colors--deep-onyx);
}
.security-list._02, .security-list._05 {
  border-right: 1px solid var(--colors--rich-charcoal);
  border-left: 1px solid var(--colors--rich-charcoal);
}
.security-icon-wrap {
  border-radius: var(--_border-radius---radius-m);
  background-color: var(--colors--white-lite);
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  display: flex;
}
.security-icon {
  filter: drop-shadow(0 4px 4px #00000040);
  width: 44px;
  height: 44px;
}
.security-details-wrap {
  margin-top: var(--_perimeter---gap--gap-xxxl);
  grid-column-gap: var(--_perimeter---gap--gap-11xl);
  grid-row-gap: var(--_perimeter---gap--gap-11xl);
  flex-flow: column;
  flex: 1;
  justify-content: space-between;
  display: flex;
}
.security-text-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-m);
  grid-row-gap: var(--_perimeter---gap--gap-m);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.security-contnet {
  flex-flow: column;
  height: 100%;
  display: flex;
}
.extensions-wrap {
  position: relative;
}
.extensions-main-wrap {
  width: 100%;
  max-width: 440px;
  margin-top: var(--_perimeter---padding--padding-10xl);
  justify-content: center;
  align-items: flex-end;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.extensions-image-wrap {
  padding-bottom: var(--_perimeter---padding--padding-m);
  position: relative;
}
.extensions-cover {
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(#08080800, #080808 90%);
  position: absolute;
  inset: 0%;
}
.extensions-button-wrap {
  z-index: 2;
  justify-content: center;
  align-items: flex-end;
  display: flex;
  position: absolute;
}
.extensions-list-wrap {
  border-bottom: 1px solid var(--colors--rich-charcoal);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.extensions-list {
  padding: var(--_perimeter---padding--padding-7xl) var(--_perimeter---padding--padding-xxxl);
  border-top: 1px solid var(--colors--rich-charcoal);
}
.extensions-list._02 {
  border-right: 1px solid var(--colors--rich-charcoal);
  border-left: 1px solid var(--colors--rich-charcoal);
}
.extensions-list-content {
  grid-column-gap: var(--_perimeter---gap--gap-xl);
  grid-row-gap: var(--_perimeter---gap--gap-xl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.built-main-wrap {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.built-wrap {
  border-bottom: 1px solid var(--colors--rich-charcoal);
  position: relative;
}
.built-list {
  padding: var(--_perimeter---padding--padding-xxxl);
  grid-column-gap: var(--_perimeter---gap--gap-9xl);
  grid-row-gap: var(--_perimeter---gap--gap-9xl);
  border-top: 1px solid var(--colors--rich-charcoal);
  background-color: var(--colors--deep-onyx);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
  overflow: hidden;
}
.built-list._02 {
  border-right: 1px solid var(--colors--rich-charcoal);
  border-left: 1px solid var(--colors--rich-charcoal);
}
.built-text-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-m);
  grid-row-gap: var(--_perimeter---gap--gap-m);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.built-image-wrap {
  border-radius: var(--_border-radius---radius-m);
  width: 100%;
  overflow: hidden;
  box-shadow: 0 120px 48px #00000005, 0 67px 40px #00000014, 0 30px 30px #00000024, 0 7px 16px #00000029;
}
.faq-wrap {
  position: relative;
}
.faq-main-wrap {
  padding-right: var(--_perimeter---padding--padding-xxxl);
  padding-bottom: var(--_perimeter---padding--padding-13xl);
  padding-left: var(--_perimeter---padding--padding-xxxl);
}
.faq-list {
  grid-column-gap: var(--_perimeter---gap--gap-xxxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  flex-flow: column;
  width: 100%;
  max-width: 770px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.faq-item {
  padding: var(--_perimeter---padding--padding-xxxl);
  border: 1px solid var(--colors--rich-charcoal);
  cursor: pointer;
  background-image: linear-gradient(#0e0e0e, #020202);
}
.question-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-l);
  grid-row-gap: var(--_perimeter---gap--gap-l);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.faq-arrow {
  flex: none;
  width: 24px;
  height: 24px;
}
.answer-wrap {
  overflow: hidden;
}
.network-wrap {
  position: relative;
}
.network-tab-menu {
  border-bottom: 1px solid var(--colors--rich-charcoal);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.network-tab-link {
  padding: var(--_perimeter---padding--padding-m) var(--_perimeter---padding--padding-xxs);
  border-top: 1px solid var(--colors--rich-charcoal);
  border-right: 1px solid var(--colors--rich-charcoal);
  background-color: var(--colors--deep-onyx);
  font-family: var(--font-family--heading);
  color: var(--colors--mint-frost);
  text-align: center;
  letter-spacing: var(--letter-spacing--letter-spacing-m);
  text-transform: uppercase;
}
.network-tab-link[aria-current="page"], .network-tab-link.is-active {
  background-color: var(--colors--mint-frost);
  color: var(--colors--deep-onyx);
}
.network-tab-link._05 {
  border-right-width: 0;
}
.network-tab-content {
  margin-top: var(--_perimeter---padding--padding-5xl);
  padding-right: var(--_perimeter---padding--padding-xxxl);
  padding-left: var(--_perimeter---padding--padding-xxxl);
  border-top: 1px solid var(--colors--rich-charcoal);
  border-bottom: 1px solid var(--colors--rich-charcoal);
}
.network-tab-pane {
  width: 100%;
  max-width: 824px;
  margin-left: auto;
  margin-right: auto;
}
.network-content-wrap {
  border-right: 1px solid var(--colors--rich-charcoal);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.network-item {
  height: 364px;
  padding-bottom: var(--_perimeter---padding--padding-8xl);
  border-left: 1px solid var(--colors--rich-charcoal);
  justify-content: center;
  align-items: flex-start;
  display: flex;
  position: relative;
}
.network-image {
  width: auto;
  height: auto;
}
.network-number-wrap {
  padding-right: var(--_perimeter---padding--padding-xxxl);
  padding-bottom: var(--_perimeter---padding--padding-8xl);
  padding-left: var(--_perimeter---padding--padding-xxxl);
  grid-column-gap: var(--_perimeter---gap--gap-xxxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}
.network-details-wrap {
  padding: var(--_perimeter---padding--padding-8xl) var(--_perimeter---padding--padding-xxxl);
}
.network-details-content {
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.network-button-wrap {
  margin-top: var(--_perimeter---gap--gap-4xl);
  justify-content: center;
  align-items: flex-end;
  display: flex;
}
.network-image-wrap {
  position: relative;
}
.blog-v4-wrap {
  border-top: 1px solid var(--colors--rich-charcoal);
}
.blog-v4-main-wrap {
  position: relative;
}
.blog-v4-head-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-6xl);
  grid-row-gap: var(--_perimeter---gap--gap-6xl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.pricing-v2-wrap {
  border-top: 1px solid var(--colors--rich-charcoal);
}
.pricing-v2-main-wrap {
  border-bottom: 1px solid var(--colors--rich-charcoal);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  position: relative;
}
.hero {
  position: relative;
}
.hero-wrap {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  position: relative;
}
.hero-image-wrap {
  border-left: 1px solid var(--colors--rich-charcoal);
  position: relative;
  overflow: hidden;
}
.hero-content-wrap {
  padding: var(--_perimeter---padding--padding-8xl);
  grid-column-gap: var(--_perimeter---gap--gap-5xl);
  grid-row-gap: var(--_perimeter---gap--gap-5xl);
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
  overflow: hidden;
}
.hero-top-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-7xl);
  grid-row-gap: var(--_perimeter---gap--gap-7xl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.hero-text-wap {
  grid-column-gap: var(--_perimeter---gap--gap-xxxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.hero-button-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-xl);
  grid-row-gap: var(--_perimeter---gap--gap-l);
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.hero-bottom-wrap {
  grid-column-gap: var(--_perimeter---padding--padding-xl);
  grid-row-gap: var(--_perimeter---padding--padding-xl);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.hero-profile {
  width: 82px;
  height: auto;
}
.hero-brand-wrap {
  padding-top: var(--_perimeter---padding--padding-4xl);
  padding-bottom: var(--_perimeter---padding--padding-4xl);
  border-top: 1px solid var(--colors--rich-charcoal);
  border-bottom: 1px solid var(--colors--rich-charcoal);
  position: relative;
  overflow: hidden;
}
.security-v2-wrap {
  position: relative;
}
.security-v2-main-wrap {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.security-v2-card {
  padding-top: var(--_perimeter---padding--padding-6xl);
  padding-right: var(--_perimeter---padding--padding-6xl);
  padding-left: var(--_perimeter---padding--padding-6xl);
  border-top: 1px solid var(--colors--rich-charcoal);
  flex-flow: column;
  transition: box-shadow .3s;
  display: flex;
}
.security-v2-card:hover {
  box-shadow: 0 -25px 10px #022c1d12, 0 -14px 8px #022c1d3b, 0 -6px 6px #022c1d63, 0 -2px 3px #022c1d73;
}
.security-v2-card._02 {
  border-left: 1px solid var(--colors--rich-charcoal);
}
.security-v2-details {
  grid-column-gap: var(--_perimeter---gap--gap-5xl);
  grid-row-gap: var(--_perimeter---gap--gap-5xl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.security-v2-text-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-xxxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.button-03 {
  height: var(--_typography---title--line-height);
  overflow: hidden;
}
.button-03-text-wrap {
  transition: transform .3s;
}
.button-03-text-wrap:hover {
  transform: translate(0, -50%);
}
.security-v2-image-wrap {
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}
.security-v2-image {
  height: auto;
}
.security-v2-image.sm {
  max-width: 400px;
}
.security-v2-shadow {
  z-index: 1;
  background-image: linear-gradient(#080808b3, #08080800 70%);
  width: 100%;
  height: 30px;
  position: absolute;
  inset: 0% 0% auto;
}
.security-v2-head-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-6xl);
  grid-row-gap: var(--_perimeter---gap--gap-6xl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.security-v2-heading {
  text-align: center;
}
.servers {
  border-top: 1px solid var(--colors--rich-charcoal);
}
.servers-head-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-6xl);
  grid-row-gap: var(--_perimeter---gap--gap-6xl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.servers-heading {
  text-align: center;
}
.servers-image-wrap {
  justify-content: center;
  align-items: flex-end;
  display: flex;
  position: relative;
}
.servers-image {
  min-width: 904px;
  max-width: 904px;
  height: auto;
  min-height: 500px;
  margin-left: auto;
  margin-right: auto;
}
.servers-menu-wrap {
  border-bottom: 1px solid var(--colors--rich-charcoal);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.servers-menu-list {
  padding: var(--_perimeter---padding--padding-m) var(--_perimeter---padding--padding-xxs);
  border-top: 1px solid var(--colors--rich-charcoal);
  border-right: 1px solid var(--colors--rich-charcoal);
  background-color: var(--colors--deep-onyx);
  font-family: var(--font-family--heading);
  color: var(--colors--mint-frost);
  text-align: center;
  letter-spacing: var(--letter-spacing--letter-spacing-m);
  text-transform: uppercase;
}
.servers-menu-list[aria-current="page"], .servers-menu-list.is-active {
  background-color: var(--colors--mint-frost);
  color: var(--colors--deep-onyx);
}
.servers-list-wrap {
  margin-top: var(--_perimeter---gap--gap-11xl);
  grid-row-gap: var(--_perimeter---gap--gap-m);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.servers-link {
  padding: var(--_perimeter---padding--padding-4xl);
  border-top: 1px solid var(--colors--rich-charcoal);
  border-right: 1px solid var(--colors--rich-charcoal);
  border-bottom: 1px solid var(--colors--rich-charcoal);
  background-image: linear-gradient(#3131314d, #2323234d);
}
.servers-link._03, .servers-link._06 {
  border-right-width: 0;
}
.servers-content {
  grid-column-gap: var(--_perimeter---gap--gap-l);
  grid-row-gap: var(--_perimeter---gap--gap-l);
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.servers-info {
  grid-column-gap: var(--_perimeter---gap--gap-m);
  grid-row-gap: var(--_perimeter---gap--gap-m);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.flag {
  width: 20px;
  height: 20px;
}
.servers-arrow-wrap {
  justify-content: flex-end;
  align-items: center;
  width: 12px;
  height: 12px;
  display: flex;
  overflow: hidden;
}
.servers-arrow-group {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}
.performance-head-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-6xl);
  grid-row-gap: var(--_perimeter---gap--gap-6xl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.performance-heading {
  text-align: center;
}
.performance-wrap {
  position: relative;
}
.performance-main-wrap {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.performance-list {
  border-top: 1px solid var(--colors--rich-charcoal);
  background-color: var(--colors--deep-onyx);
  flex-flow: column;
  justify-content: space-between;
  height: 330px;
  display: flex;
}
.performance-list._02 {
  border-right: 1px solid var(--colors--rich-charcoal);
  border-left: 1px solid var(--colors--rich-charcoal);
}
.performance-text-wrap {
  padding: var(--_perimeter---padding--padding-xxxl);
  grid-column-gap: var(--_perimeter---gap--gap-m);
  grid-row-gap: var(--_perimeter---gap--gap-m);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.performance-image-wrap {
  border-radius: var(--_border-radius---radius-m);
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  display: flex;
  overflow: hidden;
  box-shadow: 0 120px 48px #00000005, 0 67px 40px #00000014, 0 30px 30px #00000024, 0 7px 16px #00000029;
}
.performance-image {
  width: auto;
  height: auto;
}
.checkout-form {
  padding: var(--_perimeter---padding--padding-12xl) var(--_perimeter---padding--padding-none) var(--_perimeter---padding--padding-10xl);
  border-top: 1px solid var(--colors--rich-charcoal);
  background-color: var(--colors--deep-onyx);
  font-family: var(--font-family--body);
  font-size: var(--_typography---h6--font-size);
  line-height: var(--_typography---h6--line-height);
  font-weight: var(--font-weight--normal);
}
.checkout-container {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.block-header {
  padding: var(--_perimeter---padding--padding-xl) var(--_perimeter---padding--padding-xxl);
  border-color: var(--colors--rich-charcoal);
  background-color: var(--colors--deep-onyx);
}
.block-content {
  padding: var(--_perimeter---padding--padding-xxxl);
  border-right-color: var(--colors--rich-charcoal);
  border-bottom-color: var(--colors--rich-charcoal);
  border-left-color: var(--colors--rich-charcoal);
  background-color: var(--colors--deep-onyx);
}
.checkout-text {
  font-family: var(--font-family--body);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--letter-spacing--letter-spacing-m);
}
.billing-address-toggle {
  margin-top: var(--_perimeter---padding--padding-m);
  justify-content: flex-start;
  align-items: center;
}
.checkout-checkbox {
  margin-top: -4px;
}
.form-label {
  margin-top: var(--_perimeter---padding--padding-xxl);
  font-family: var(--font-family--body);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h6--font-size);
  line-height: var(--_typography---h6--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-s);
}
.blog-header-title {
  font-family: var(--font-family--body);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h3--font-size);
  line-height: var(--_typography---h3--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-s);
  text-transform: none;
}
.catefory-list {
  width: 100%;
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
}
.security-v3-wrap {
  border-top: 1px solid var(--colors--rich-charcoal);
  position: relative;
}
.security-v3-heading {
  text-align: center;
}
.security-v3-main-wrap {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.security-v3-list {
  width: 100%;
  height: 332px;
  padding: var(--_perimeter---padding--padding-xxxl);
  border-top: 1px solid var(--colors--rich-charcoal);
  overflow: hidden;
}
.security-v3-list._02 {
  border-right: 1px solid var(--colors--rich-charcoal);
  border-left: 1px solid var(--colors--rich-charcoal);
}
.security-v3-inner {
  grid-column-gap: var(--_perimeter---gap--gap-xxxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  flex-flow: column;
  justify-content: space-between;
  height: 100%;
  display: flex;
}
.security-v3-content {
  grid-column-gap: var(--_perimeter---gap--gap-xxxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.security-v3-icon {
  filter: drop-shadow(0 4px 4px #00000040);
  width: 44px;
  height: 44px;
}
.security-v3-icon-wrap {
  border-radius: var(--_border-radius---radius-m);
  background-color: var(--colors--white-lite);
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  display: flex;
}
.security-v3-text {
  grid-column-gap: var(--_perimeter---gap--gap-m);
  grid-row-gap: var(--_perimeter---gap--gap-m);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.security-v3-bottom.grid {
  grid-column-gap: var(--_perimeter---gap--gap-xxs);
  grid-row-gap: var(--_perimeter---gap--gap-xxs);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}
.security-card-one {
  width: 100%;
  padding: var(--_perimeter---padding--padding-xxl);
  grid-column-gap: var(--_perimeter---gap--gap-xxs);
  grid-row-gap: var(--_perimeter---gap--gap-xxs);
  border: 1px solid var(--colors--rich-charcoal);
  border-radius: var(--_border-radius---radius-m);
  background-image: linear-gradient(#3131314d, #2323234d);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.security-statistics-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-xs);
  grid-row-gap: var(--_perimeter---gap--gap-xs);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.security-number-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-xxs);
  grid-row-gap: var(--_perimeter---gap--gap-xxs);
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}
.security-v3-features-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-xl);
  grid-row-gap: var(--_perimeter---gap--gap-xl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.security-v3-features-list {
  grid-column-gap: var(--_perimeter---gap--gap-xl);
  grid-row-gap: var(--_perimeter---gap--gap-xl);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.security-v3-check {
  width: 16px;
  height: 16px;
}
.nav-dropdown-list-body {
  width: 100%;
  max-width: 1220px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.navbar-container {
  z-index: 5;
  width: 100%;
  padding: var(--_perimeter---padding--padding-xxxl) var(--_perimeter---padding--padding-6xl);
  background-color: #ddd0;
  margin-left: auto;
  margin-right: auto;
}
.navbar-left {
  z-index: 9999;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.menu-lottie {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.nav-menu {
  grid-column-gap: var(--_perimeter---gap--gap-xxxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
}
.nav-button-wrapper {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.cart-quantity {
  color: var(--colors--deep-onyx);
  font-weight: var(--font-weight--semi-bold);
  margin-left: 0;
  position: absolute;
  inset: -3px 0 auto auto;
}
.nav-link {
  opacity: .6;
  color: var(--colors--white);
  font-size: var(--_typography---title--font-size);
  line-height: var(--_typography---title--line-height);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--letter-spacing--letter-spacing-s);
  transition: opacity .3s;
}
.nav-link:hover, .nav-link[aria-current="page"], .nav-link.is-active {
  opacity: 100;
}
.paragraph-03 {
  color: #eaeaea;
  letter-spacing: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.navbar-wrapper {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.qty-hide {
  display: none;
}
.cart-button {
  padding: var(--_perimeter---padding--padding-xs);
  background-color: #3898ec00;
}
.navbar-right {
  z-index: 9999;
  grid-column-gap: var(--_perimeter---gap--gap-6xl);
  grid-row-gap: var(--_perimeter---gap--gap-6xl);
  flex: 0 auto;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}
.nav-menu-wrapper {
  z-index: 1;
}
.navbar-center {
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}
.remove-button {
  color: var(--colors--red);
  font-size: var(--_typography---title--font-size);
  line-height: var(--_typography---title--line-height);
}
.navbar-logo {
  max-width: 118px;
  height: auto;
}
.menu-button {
  width: 32px;
  height: 32px;
}
.nav-mobile-wrapper {
  display: none;
}
.navbar {
  z-index: 9999;
  border-right: 1px solid var(--colors--rich-charcoal);
  border-left: 1px solid var(--colors--rich-charcoal);
  position: relative;
}
.cart-text-wrap {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}
.nav-dropdown-list-wrap {
  background-color: #ddd0;
}
.nav-dropdown-list-wrap.is-open {
  padding-top: var(--_perimeter---padding--padding-xxxl);
  padding-right: var(--_perimeter---padding--padding-xxxl);
  padding-left: var(--_perimeter---padding--padding-xxxl);
  position: fixed;
  left: 0;
  right: 0;
}
.cart-item-list {
  justify-content: flex-start;
  align-items: flex-start;
}
.nav-item.single {
  position: relative;
}
.nav-dropdown-toggle {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  color: var(--colors--white);
  font-size: var(--_typography---title--font-size);
  line-height: var(--_typography---title--line-height);
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  display: flex;
}
.nav-dropdown-toggle:focus-visible, .nav-dropdown-toggle[data-wf-focus-visible] {
  outline-offset: 0px;
  color: #0050bd;
  border-radius: 5px;
  outline: 2px solid #0050bd;
}
.mobile-margin-top-10 {
  display: none;
}
.text-black {
  color: var(--colors--deep-onyx);
}
.nav-dropdown {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.cart-header, .cart-list, .cart-footer {
  background-color: var(--colors--mint-frost);
}
.checkout-button {
  padding: var(--_perimeter---padding--padding-m);
  border-radius: var(--_border-radius---radius-8xl);
  background-color: var(--colors--deep-onyx);
  color: var(--colors--mint-frost);
  font-weight: var(--font-weight--medium);
  transition: color .3s, background-color .3s;
}
.checkout-button:hover {
  background-color: var(--colors--emerald-teal);
  color: var(--colors--white);
}
.empty-state {
  background-color: var(--colors--mint-frost);
}
.navbar-left-group {
  grid-column-gap: 75px;
  grid-row-gap: 75px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.nav-dropdown-body-inner {
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  height: 100%;
  padding: var(--_perimeter---padding--padding-8xl);
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.dropdown-menu-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-xl);
  grid-row-gap: var(--_perimeter---gap--gap-xl);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr .6fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.dropdown-menu-column {
  grid-column-gap: var(--_perimeter---padding--padding-6xl);
  grid-row-gap: var(--_perimeter---padding--padding-6xl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.dropdown-menu {
  height: var(--_typography---h2--line-height);
  font-family: var(--font-family--heading);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h2--font-size);
  line-height: var(--_typography---h2--line-height);
  letter-spacing: var(--letter-spacing--letter-spacing-m);
  text-transform: uppercase;
  overflow: hidden;
}
.dropdown-menu-text {
  transition: transform .3s;
}
.dropdown-menu-text:hover {
  transform: translate(0, -50%);
}
.dropdown-bottom-wrap {
  margin-top: var(--_perimeter---margin--margin-m);
  grid-column-gap: var(--_perimeter---gap--gap-xl);
  grid-row-gap: var(--_perimeter---gap--gap-xl);
  justify-content: space-between;
  display: flex;
}
.dropdown-bottom-left {
  grid-column-gap: var(--_perimeter---gap--gap-xxl);
  grid-row-gap: var(--_perimeter---gap--gap-xxl);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.dropdown-bottom-link {
  font-family: var(--font-family--body);
  color: var(--colors--gray);
  font-size: var(--_typography---title--font-size);
  line-height: var(--_typography---title--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-s);
  transition: color .3s;
}
.dropdown-bottom-link:hover {
  color: var(--colors--mint-frost);
}
.dropdown-copyright {
  font-family: var(--font-family--body);
  color: var(--colors--gray);
  font-size: var(--_typography---title--font-size);
  line-height: var(--_typography---title--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-s);
}
.dropdown-copyright.right {
  text-align: right;
}
.copyright-license-link {
  color: var(--colors--gray);
  transition: color .3s;
}
.copyright-license-link:hover {
  color: var(--colors--mint-frost);
}
.banner {
  padding: var(--_perimeter---padding--padding-xs);
  grid-column-gap: var(--_perimeter---gap--gap-m);
  grid-row-gap: var(--_perimeter---gap--gap-m);
  background-color: var(--colors--emerald-teal);
  justify-content: center;
  align-items: center;
  display: flex;
}
.banner-link {
  height: var(--_typography---subtitle--line-height);
  overflow: hidden;
}
.banner-link-text {
  transition: transform .3s;
}
.banner-link-text:hover {
  transform: translate(0, -50%);
}
.hero-card {
  z-index: 1;
  width: 100%;
  max-width: 194px;
  padding: var(--_perimeter---padding--padding-xl);
  grid-column-gap: var(--_perimeter---gap--gap-m);
  grid-row-gap: var(--_perimeter---gap--gap-m);
  border-radius: var(--_border-radius---radius-m);
  background-color: var(--colors--dark);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: absolute;
  inset: 20px auto auto 20px;
}
.country {
  max-width: 52px;
  height: auto;
}
.h1 {
  font-family: var(--font-family--heading);
  color: var(--colors--mint-frost);
  font-size: var(--_typography---h1--font-size);
  line-height: var(--_typography---h1--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--letter-spacing--letter-spacing-m);
}
.network-list {
  padding: var(--_perimeter---padding--padding-xxxl);
  grid-column-gap: var(--_perimeter---gap--gap-l);
  grid-row-gap: var(--_perimeter---gap--gap-l);
  border-bottom: 1px solid var(--colors--rich-charcoal);
  background-color: var(--colors--deep-dark);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.network-left {
  grid-column-gap: var(--_perimeter---padding--padding-xl);
  grid-row-gap: var(--_perimeter---padding--padding-xl);
  flex: none;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 160px;
  display: flex;
}
.network-flag {
  flex: none;
  width: 20px;
  height: 20px;
}
.flag-info {
  grid-column-gap: var(--_perimeter---gap--gap-xxs);
  grid-row-gap: var(--_perimeter---gap--gap-xxs);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.network-right {
  justify-content: space-between;
  width: 100%;
  max-width: 686px;
  display: flex;
}
.network-info-list {
  grid-column-gap: var(--_perimeter---gap--gap-xxs);
  grid-row-gap: var(--_perimeter---gap--gap-xxs);
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  max-width: 200px;
  display: flex;
}
.network-bar {
  border-radius: var(--_border-radius---radius-8xl);
  background-color: var(--colors--rich-charcoal);
  width: 100%;
  max-width: 200px;
  height: 8px;
}
.bar {
  border-radius: var(--_border-radius---radius-8xl);
  background-color: var(--colors--emerald-teal);
  width: 45%;
  height: 100%;
}
.bar._2 {
  background-color: var(--colors--dark-orange);
  width: 76%;
}
.bar._3 {
  width: 60%;
}
.bar._4 {
  background-color: var(--colors--dark-orange);
  width: 90%;
}
.bar._5 {
  background-color: var(--colors--dark-orange);
  width: 81%;
}
.network-ratio-wrap {
  grid-column-gap: var(--_perimeter---gap--gap-xxs);
  grid-row-gap: var(--_perimeter---gap--gap-xxs);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.network-link-wrap {
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  display: flex;
}
.network-title-row {
  padding: var(--_perimeter---padding--padding-xxxl);
  grid-column-gap: var(--_perimeter---padding--padding-xl);
  grid-row-gap: var(--_perimeter---padding--padding-xl);
  border-top: 1px solid var(--colors--rich-charcoal);
  border-bottom: 1px solid var(--colors--rich-charcoal);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.network-icon {
  width: 24px;
  height: 24px;
}@media screen and (max-width: 991px) {

  body {
    --_typography---h6--font-size: 16px;
    --_typography---h6--line-height: 20px;
    --_typography---h1--font-size: 44px;
    --_typography---h1--line-height: 44px;
    --_typography---h2--font-size: 40px;
    --_typography---h2--line-height: 40px;
    --_typography---h3--font-size: 30px;
    --_typography---h3--line-height: 30px;
    --_typography---h4--font-size: 20px;
    --_typography---h4--line-height: 20px;
    --_typography---h5--font-size: 16px;
    --_typography---h5--line-height: 20px;
    --_typography---title--font-size: 14px;
    --_typography---title--line-height: 16px;
    --_typography---subtitle--font-size: 12px;
    --_typography---subtitle--line-height: 14px;
    --_perimeter---margin--margin-none: 0px;
    --_perimeter---padding--padding-none: 0px;
    --_perimeter---padding--padding-xxxl: 20px;
    --_perimeter---padding--padding-12xl: 80px;
    --_perimeter---padding--padding-xxl: 16px;
    --_perimeter---padding--padding-l: 12px;
    --_perimeter---padding--padding-9xl: 40px;
    --_perimeter---gap--gap-xl: 16px;
    --_perimeter---gap--gap-6xl: 28px;
    --_perimeter---gap--gap-5xl: 28px;
    --_perimeter---gap--gap-m: 10px;
    --_perimeter---gap--gap-s: 8px;
    --_perimeter---padding--padding-xxs: 4px;
    --_perimeter---padding--padding-s: 8px;
    --_perimeter---padding--padding-m: 10px;
    --_perimeter---gap--gap-l: 12px;
    --_perimeter---padding--padding-13xl: 100px;
    --_perimeter---padding--padding-8xl: 32px;
    --_perimeter---padding--padding-4xl: 24px;
    --_perimeter---gap--gap-xxxl: 20px;
    --_perimeter---padding--padding-7xl: 28px;
    --_perimeter---gap--gap-9xl: 40px;
    --_perimeter---gap--gap-8xl: 32px;
    --_perimeter---padding--padding-6xl: 28px;
    --_perimeter---gap--gap-4xl: 24px;
    --_perimeter---gap--gap-xxs: 4px;
    --_perimeter---gap--gap-xxl: 18px;
    --_perimeter---padding--padding-11xl: 60px;
    --_perimeter---padding--padding-10xl: 48px;
    --_perimeter---gap--gap-xs: 6px;
    --_perimeter---padding--padding-5xl: 28px;
    --_perimeter---gap--gap-11xl: 48px;
    --_perimeter---padding--padding-xs: 6px;
    --_perimeter---gap--gap-xxxs: 2px;
    --_perimeter---gap--gap-none: 0px;
    --_perimeter---padding--padding-xl: 14px;
    --_perimeter---gap--gap-10xl: 48px;
    --_perimeter---gap--gap-7xl: 32px;
    --_perimeter---padding--padding-xxxs: 2px;
    --_perimeter---margin--margin-m: 60px;
    --_perimeter---padding--padding-14xl: 100px;
    --_perimeter---padding--padding-15xl: 100px;
    --_border-radius---radius-m: 10px;
    --_border-radius---radius-8xl: 100px;
    --_border-radius---radius-s: 8px;
    --_border-radius---radius-xs: 6px;
    --_border-radius---radius-xxs: 4px;
    --_border-radius---radius-xxxs: 2px;
    --_border-radius---radius-l: 12px;
    --_border-radius---radius-xl: 16px;
    --_border-radius---radius-xxl: 18px;
    --_border-radius---radius-xxxl: 20px;
    --_border-radius---radius-4xl: 24px;
    --_border-radius---radius-5xl: 24px;
    --_border-radius---radius-6xl: 28px;
    --_border-radius---radius-7xl: 32px;
  }
  .subtitle-medium.left {
    text-align: left;
  }
  .h6.blog-subtitle {
    display: none;
  }
  .h6.team-tagline, .h6.built-subtitle {
    font-size: var(--_typography---title--font-size);
    line-height: var(--_typography---title--line-height);
  }
  .colors-list {
    height: 200px;
  }
  .blank-wrap {
    height: 48px;
  }
  .footer-column {
    padding: var(--_perimeter---padding--padding-4xl);
  }
  .footer-text-wrap {
    margin-top: var(--_perimeter---padding--padding-8xl);
    grid-column-gap: var(--_perimeter---gap--gap-xxxl);
    grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  }
  .footer-details-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-xl);
    grid-row-gap: var(--_perimeter---gap--gap-xl);
  }
  .social-link {
    width: 44px;
    height: 44px;
  }
  .social-icon {
    width: 18px;
    height: 18px;
  }
  .footer-haeding {
    font-size: var(--_typography---h3--font-size);
    line-height: var(--_typography---h3--line-height);
  }
  .footer-center, .footer-bottom {
    padding-right: var(--_perimeter---padding--padding-4xl);
    padding-left: var(--_perimeter---padding--padding-4xl);
  }
  .utility-hero-wrap {
    padding-top: var(--_perimeter---padding--padding-12xl);
    padding-bottom: var(--_perimeter---padding--padding-12xl);
  }
  .utility-hero-content {
    grid-column-gap: var(--_perimeter---gap--gap-8xl);
    grid-row-gap: var(--_perimeter---gap--gap-8xl);
    max-width: 650px;
  }
  .utility-text-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-xl);
    grid-row-gap: var(--_perimeter---gap--gap-xl);
  }
  .changelog-inner {
    grid-column-gap: var(--_perimeter---gap--gap-4xl);
    grid-row-gap: var(--_perimeter---gap--gap-4xl);
  }
  .utility-image-wrap {
    max-width: 400px;
  }
  .license-image-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-xl);
    grid-row-gap: var(--_perimeter---gap--gap-xl);
  }
  .license-image-list {
    height: 220px;
  }
  .license-card {
    height: 180px;
  }
  .license-icon {
    width: 120px;
  }
  .signup-wrap {
    padding-top: var(--_perimeter---padding--padding-12xl);
    padding-bottom: var(--_perimeter---padding--padding-12xl);
  }
  .signup-content {
    grid-column-gap: var(--_perimeter---gap--gap-8xl);
    grid-row-gap: var(--_perimeter---gap--gap-8xl);
  }
  .signup-text-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-xl);
    grid-row-gap: var(--_perimeter---gap--gap-xl);
  }
  .input-filed.textarea {
    height: 140px;
  }
  .submit-button.contact-btn {
    max-width: 190px;
  }
  .contact-wrap {
    padding-top: var(--_perimeter---padding--padding-12xl);
    padding-bottom: var(--_perimeter---padding--padding-12xl);
  }
  .contact-content {
    max-width: 650px;
  }
  .contact-text-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-xl);
    grid-row-gap: var(--_perimeter---gap--gap-xl);
  }
  .contact-button-wrap {
    margin-top: var(--_perimeter---padding--padding-m);
  }
  .info-list {
    padding-top: var(--_perimeter---padding--padding-8xl);
    padding-bottom: var(--_perimeter---padding--padding-8xl);
    padding-left: var(--_perimeter---padding--padding-4xl);
  }
  .info-details-wrap {
    margin-top: var(--_perimeter---padding--padding-xxxl);
  }
  .info-blank-block {
    height: 48px;
  }
  .blog-head-wrap {
    max-width: 550px;
  }
  .blog-image-wrap.large {
    height: 400px;
    margin-top: var(--_perimeter---padding--padding-9xl);
  }
  .h4.blog-title, .h4.intro-details, .h4.built-title {
    font-size: var(--_typography---h5--font-size);
    line-height: var(--_typography---h5--line-height);
  }
  .blog-v3-head-content {
    max-width: 650px;
  }
  .blog-v3-image-wrap {
    height: 400px;
  }
  .blog-v3-main-wrap {
    padding-top: var(--_perimeter---padding--padding-xxxl);
    padding-bottom: var(--_perimeter---padding--padding-12xl);
  }
  .blog-details h4:where(:not([class*="heading-scale-"])), .writer-wrap, .blog-details :where(.heading-scale-4) {
    margin-top: var(--_perimeter---padding--padding-9xl);
  }
  .writer-info-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-xl);
    grid-row-gap: var(--_perimeter---gap--gap-xl);
  }
  .blog-v3-bottom-wrap {
    margin-top: var(--_perimeter---padding--padding-9xl);
  }
  .passwrod-text-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-xl);
    grid-row-gap: var(--_perimeter---gap--gap-xl);
  }
  .pricing-v1-wrap.space {
    padding-bottom: var(--_perimeter---padding--padding-11xl);
  }
  .pricing-main-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .pricing-card.stroke {
    border-right-width: 0;
  }
  .section-header-wrap {
    padding-right: var(--_perimeter---padding--padding-4xl);
    padding-left: var(--_perimeter---padding--padding-4xl);
  }
  .compare-head-wrap.sm {
    max-width: 400px;
  }
  .section-text-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-xl);
    grid-row-gap: var(--_perimeter---gap--gap-xl);
  }
  .compare-wrap {
    padding-bottom: var(--_perimeter---padding--padding-10xl);
  }
  .about-left {
    padding-right: var(--_perimeter---padding--padding-xxxl);
    padding-left: var(--_perimeter---padding--padding-xxxl);
  }
  .about-right {
    height: 500px;
  }
  .about-text-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-xl);
    grid-row-gap: var(--_perimeter---gap--gap-xl);
    max-width: 400px;
  }
  .about-heading {
    font-size: var(--_typography---h2--font-size);
    line-height: var(--_typography---h2--line-height);
  }
  .about-bottom {
    max-width: 350px;
  }
  .brand-logo.v2 {
    margin-right: 80px;
  }
  .about-shadow {
    max-width: 100px;
  }
  .intro-head-wrap {
    padding-right: var(--_perimeter---padding--padding-xxxl);
    padding-left: var(--_perimeter---padding--padding-xxxl);
  }
  .intro-heading {
    font-size: var(--_typography---h3--font-size);
    line-height: var(--_typography---h3--line-height);
  }
  .intro-head-right {
    max-width: 300px;
  }
  .intro-banner-wrap {
    height: 300px;
  }
  .intro-column {
    padding-right: var(--_perimeter---padding--padding-xxxl);
    padding-left: var(--_perimeter---padding--padding-xxxl);
  }
  .intro-image-wrap {
    max-width: 150px;
    height: 150px;
  }
  .intro-statistics-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-l);
    grid-row-gap: var(--_perimeter---gap--gap-5xl);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .statistics-number-wrap {
    height: var(--_typography---h3--line-height);
    font-size: var(--_typography---h3--font-size);
    line-height: var(--_typography---h3--line-height);
  }
  .team-head-wrap {
    max-width: 500px;
  }
  .team-main-wrap {
    padding-right: var(--_perimeter---padding--padding-4xl);
    padding-left: var(--_perimeter---padding--padding-4xl);
    grid-column-gap: var(--_perimeter---gap--gap-xl);
    grid-row-gap: var(--_perimeter---gap--gap-6xl);
  }
  .team-image-wrap {
    height: 200px;
  }
  .team-info-wrap {
    margin-top: var(--_perimeter---padding--padding-l);
  }
  .career-card {
    padding: var(--_perimeter---padding--padding-4xl);
  }
  .career-inner {
    grid-column-gap: var(--_perimeter---gap--gap-6xl);
    grid-row-gap: var(--_perimeter---gap--gap-6xl);
  }
  .career-v2-head-wrap, .career-v2-details-wrap, .career-v2-form-wrap {
    padding-right: var(--_perimeter---padding--padding-4xl);
    padding-left: var(--_perimeter---padding--padding-4xl);
  }
  .career-blank-block {
    height: 48px;
  }
  .pricing-single-card {
    margin-bottom: var(--_perimeter---gap--gap-9xl);
    padding: var(--_perimeter---padding--padding-4xl);
  }
  .features-head-cintent {
    max-width: 520px;
  }
  .features-text-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-xl);
    grid-row-gap: var(--_perimeter---gap--gap-xl);
  }
  .security-main-wrap {
    grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  }
  .security-details-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-8xl);
    grid-row-gap: var(--_perimeter---gap--gap-8xl);
  }
  .built-list {
    grid-column-gap: var(--_perimeter---gap--gap-5xl);
    grid-row-gap: var(--_perimeter---gap--gap-5xl);
  }
  .built-image-wrap {
    border-radius: var(--_border-radius---radius-s);
  }
  .faq-main-wrap {
    padding-bottom: var(--_perimeter---padding--padding-11xl);
  }
  .faq-arrow {
    width: 22px;
    height: 22px;
  }
  .network-item {
    height: 320px;
  }
  .pricing-v2-main-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .hero-content-wrap {
    padding: var(--_perimeter---padding--padding-4xl);
  }
  .hero-top-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-6xl);
    grid-row-gap: var(--_perimeter---gap--gap-6xl);
  }
  .hero-text-wap {
    grid-column-gap: var(--_perimeter---gap--gap-xl);
    grid-row-gap: var(--_perimeter---gap--gap-xl);
  }
  .hero-heading {
    font-size: var(--_typography---h3--font-size);
    line-height: var(--_typography---h3--line-height);
  }
  .security-v2-card {
    padding-top: var(--_perimeter---padding--padding-4xl);
    padding-right: var(--_perimeter---padding--padding-4xl);
    padding-left: var(--_perimeter---padding--padding-4xl);
  }
  .security-v2-details {
    grid-column-gap: var(--_perimeter---gap--gap-4xl);
    grid-row-gap: var(--_perimeter---gap--gap-4xl);
  }
  .security-v2-text-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-xl);
    grid-row-gap: var(--_perimeter---gap--gap-xl);
  }
  .security-v2-shadow {
    height: 24px;
  }
  .servers-image {
    aspect-ratio: 2;
    object-fit: contain;
    min-width: 400px;
    min-height: 450px;
  }
  .servers-list-wrap {
    margin-top: var(--_perimeter---gap--gap-6xl);
  }
  .servers-link {
    padding: var(--_perimeter---padding--padding-xxxl);
  }
  .performance-list {
    height: auto;
  }
  .performance-image-wrap {
    border-radius: var(--_border-radius---radius-s);
  }
  .security-v3-main-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .security-v3-list {
    height: 310px;
  }
  .security-v3-list._02 {
    border-right-width: 0;
  }
  .navbar-container {
    padding: var(--_perimeter---padding--padding-l) var(--_perimeter---padding--padding-xxxl);
  }
  .navbar-left {
    flex: 0 auto;
  }
  .nav-title-wrap {
    padding-bottom: var(--_perimeter---padding--padding-m);
    border-bottom: 1px solid #171e2c;
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }
  .nav-menu {
    grid-column-gap: 28px;
    grid-row-gap: 28px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: none;
  }
  .nav-button-wrapper {
    width: 100%;
    margin-left: 0;
    display: none;
  }
  .cart-quantity {
    min-width: 16px;
    height: 16px;
  }
  .nav-link {
    justify-content: flex-start;
    align-items: flex-start;
  }
  .nav-mobile-column {
    grid-column-gap: var(--_perimeter---gap--gap-xl);
    grid-row-gap: var(--_perimeter---gap--gap-xl);
    flex-flow: column;
    width: 100%;
    display: flex;
  }
  .menu-list-wrap {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .menu-list-wrap.single {
    display: block;
  }
  .navbar-right {
    flex: 0 auto;
  }
  .nav-menu-wrapper {
    padding: var(--_perimeter---padding--padding-8xl);
    background-color: var(--colors--deep-onyx);
    border-width: 0;
    border-radius: 0;
  }
  .menu-column {
    grid-column-gap: var(--_perimeter---gap--gap-xl);
    grid-row-gap: var(--_perimeter---gap--gap-xl);
    text-align: left;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
  }
  .menu-button {
    padding: 0;
  }
  .menu-button.is-open {
    color: #fff;
    background-color: #c8c8c800;
  }
  .nav-mobile-wrapper {
    grid-column-gap: var(--_perimeter---gap--gap-xxxl);
    grid-row-gap: var(--_perimeter---gap--gap-8xl);
    grid-template-rows: auto;
    grid-template-columns: 1fr .5fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .nav-item {
    width: 100%;
  }
  .nav-item.single {
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }
  .nav-dropdown-toggle {
    margin-left: 0;
    margin-right: 0;
  }
  .nav-dropdown {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: 0;
    margin-right: 0;
    display: flex;
  }
  .network-right {
    max-width: 600px;
  }
  .network-info-list {
    max-width: 160px;
  }}
@media screen and (max-width: 767px) {

  body {
    --_typography---h6--font-size: 16px;
    --_typography---h6--line-height: 20px;
    --_typography---h1--font-size: 40px;
    --_typography---h1--line-height: 40px;
    --_typography---h2--font-size: 36px;
    --_typography---h2--line-height: 36px;
    --_typography---h3--font-size: 28px;
    --_typography---h3--line-height: 28px;
    --_typography---h4--font-size: 20px;
    --_typography---h4--line-height: 20px;
    --_typography---h5--font-size: 16px;
    --_typography---h5--line-height: 20px;
    --_typography---title--font-size: 14px;
    --_typography---title--line-height: 16px;
    --_typography---subtitle--font-size: 12px;
    --_typography---subtitle--line-height: 14px;
    --_perimeter---margin--margin-none: 0px;
    --_perimeter---padding--padding-none: 0px;
    --_perimeter---padding--padding-xxxl: 20px;
    --_perimeter---padding--padding-12xl: 72px;
    --_perimeter---padding--padding-xxl: 16px;
    --_perimeter---padding--padding-l: 12px;
    --_perimeter---padding--padding-9xl: 32px;
    --_perimeter---gap--gap-xl: 16px;
    --_perimeter---gap--gap-6xl: 24px;
    --_perimeter---gap--gap-5xl: 24px;
    --_perimeter---gap--gap-m: 10px;
    --_perimeter---gap--gap-s: 8px;
    --_perimeter---padding--padding-xxs: 4px;
    --_perimeter---padding--padding-s: 8px;
    --_perimeter---padding--padding-m: 10px;
    --_perimeter---gap--gap-l: 12px;
    --_perimeter---padding--padding-13xl: 80px;
    --_perimeter---padding--padding-8xl: 28px;
    --_perimeter---padding--padding-4xl: 24px;
    --_perimeter---gap--gap-xxxl: 16px;
    --_perimeter---padding--padding-7xl: 24px;
    --_perimeter---gap--gap-9xl: 32px;
    --_perimeter---gap--gap-8xl: 28px;
    --_perimeter---padding--padding-6xl: 24px;
    --_perimeter---gap--gap-4xl: 20px;
    --_perimeter---gap--gap-xxs: 4px;
    --_perimeter---gap--gap-xxl: 16px;
    --_perimeter---padding--padding-11xl: 48px;
    --_perimeter---padding--padding-10xl: 40px;
    --_perimeter---gap--gap-xs: 6px;
    --_perimeter---padding--padding-5xl: 24px;
    --_perimeter---gap--gap-11xl: 40px;
    --_perimeter---padding--padding-xs: 6px;
    --_perimeter---gap--gap-xxxs: 2px;
    --_perimeter---gap--gap-none: 0px;
    --_perimeter---padding--padding-xl: 14px;
    --_perimeter---gap--gap-10xl: 40px;
    --_perimeter---gap--gap-7xl: 28px;
    --_perimeter---padding--padding-xxxs: 2px;
    --_perimeter---margin--margin-m: 48px;
    --_perimeter---padding--padding-14xl: 80px;
    --_perimeter---padding--padding-15xl: 80px;
    --_border-radius---radius-m: 10px;
    --_border-radius---radius-8xl: 100px;
    --_border-radius---radius-s: 8px;
    --_border-radius---radius-xs: 6px;
    --_border-radius---radius-xxs: 4px;
    --_border-radius---radius-xxxs: 2px;
    --_border-radius---radius-l: 12px;
    --_border-radius---radius-xl: 16px;
    --_border-radius---radius-xxl: 18px;
    --_border-radius---radius-xxxl: 20px;
    --_border-radius---radius-4xl: 20px;
    --_border-radius---radius-5xl: 20px;
    --_border-radius---radius-6xl: 24px;
    --_border-radius---radius-7xl: 24px;
  }
  .page-inner {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .h6.about-subtitle {
    text-align: center;
  }
  .h6.security-subtitle, .h6.answer {
    font-size: var(--_typography---title--font-size);
    line-height: var(--_typography---title--line-height);
  }
  .colors-list {
    height: 160px;
  }
  .blank-wrap {
    height: 32px;
  }
  .footer-top {
    grid-template-columns: 1fr;
  }
  .footer-column {
    padding-top: var(--_perimeter---padding--padding-8xl);
    padding-bottom: var(--_perimeter---padding--padding-8xl);
  }
  .footer-column.border {
    border-top: 1px solid var(--colors--rich-charcoal);
    border-left-width: 0;
  }
  .footer-brand {
    width: 130px;
  }
  .footer-details-wrap {
    width: 100%;
    max-width: 500px;
  }
  .footer-link-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-9xl);
    grid-row-gap: var(--_perimeter---gap--gap-9xl);
    flex-flow: column-reverse wrap;
  }
  .social-link {
    width: 40px;
    height: 40px;
  }
  .social-icon {
    width: 16px;
    height: 16px;
  }
  .footer-center {
    padding-top: var(--_perimeter---padding--padding-8xl);
    padding-bottom: var(--_perimeter---padding--padding-8xl);
    grid-row-gap: var(--_perimeter---gap--gap-4xl);
    display: none;
  }
  .footer-icon-wrap {
    border-radius: var(--_border-radius---radius-s);
    width: 48px;
    height: 48px;
  }
  .footer-icon {
    width: 36px;
    height: 36px;
  }
  .footer-bottom-content {
    grid-column-gap: var(--_perimeter---gap--gap-xl);
    grid-row-gap: var(--_perimeter---gap--gap-xl);
    flex-flow: wrap;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: flex;
  }
  .utility-hero-wrap, .utility-hero-wrap.sm {
    padding-top: var(--_perimeter---padding--padding-11xl);
    padding-bottom: var(--_perimeter---padding--padding-11xl);
  }
  .license-image-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-m);
    grid-row-gap: var(--_perimeter---gap--gap-m);
  }
  .license-image-list {
    height: 180px;
  }
  .license-card {
    height: 160px;
  }
  .signup-content {
    grid-column-gap: var(--_perimeter---gap--gap-9xl);
    grid-row-gap: var(--_perimeter---gap--gap-9xl);
  }
  .signup-content.space-large {
    max-width: 370px;
  }
  .input-filed.textarea {
    height: 120px;
  }
  .submit-button.contact-btn {
    max-width: 180px;
  }
  .contact-form {
    grid-column-gap: var(--_perimeter---gap--gap-5xl);
    grid-row-gap: var(--_perimeter---gap--gap-5xl);
  }
  .contact-button-wrap {
    margin-top: var(--_perimeter---padding--padding-s);
  }
  .info-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .info-blank-block {
    height: 32px;
  }
  .blog-v1-wrap {
    padding-top: var(--_perimeter---padding--padding-11xl);
    padding-bottom: var(--_perimeter---padding--padding-11xl);
  }
  .blog-tab-link {
    padding: var(--_perimeter---padding--padding-s);
  }
  .blog-list {
    grid-template-columns: 1fr;
  }
  .blog-image-wrap.large {
    height: 300px;
  }
  .h4.security-title, .h4.question {
    font-size: var(--_typography---h5--font-size);
    line-height: var(--_typography---h5--line-height);
  }
  .blog-v3-head-content {
    max-width: 600px;
  }
  .blog-v3-heading {
    font-size: var(--_typography---h3--font-size);
    line-height: var(--_typography---h3--line-height);
  }
  .blog-v3-image-wrap {
    height: 300px;
  }
  .blog-details h5:where(:not([class*="heading-scale-"])), .blog-details :where(.heading-scale-5) {
    margin-top: var(--_perimeter---padding--padding-xxl);
  }
  .writer-wrap {
    padding: var(--_perimeter---padding--padding-xxxl);
  }
  .share-list {
    grid-column-gap: var(--_perimeter---gap--gap-xxxl);
    grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  }
  .share-link {
    width: 18px;
  }
  .blog-v3-info-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-6xl);
    grid-row-gap: var(--_perimeter---gap--gap-6xl);
  }
  .blog-v3-info-icon {
    width: 18px;
    height: 18px;
  }
  .password-content {
    max-width: 400px;
  }
  .pricing-v1-wrap {
    padding-top: var(--_perimeter---padding--padding-11xl);
  }
  .pricing-main-wrap {
    grid-template-columns: 1fr;
  }
  .pricing-card.stroke {
    border-left-width: 0;
  }
  .pricing-icon-wrap {
    border-radius: var(--_border-radius---radius-s);
    width: 48px;
    height: 48px;
  }
  .pricing-icon {
    width: 36px;
    height: 36px;
  }
  .section-header-wrap {
    padding: var(--_perimeter---padding--padding-12xl) var(--_perimeter---padding--padding-xxxl) var(--_perimeter---padding--padding-11xl);
  }
  .compare-head-wrap {
    max-width: 400px;
  }
  .compare-top-wrap {
    grid-column-gap: var(--_perimeter---padding--padding-xxl);
    grid-row-gap: var(--_perimeter---padding--padding-xxl);
    grid-template-columns: 1fr;
  }
  .compare-right {
    grid-column-gap: var(--_perimeter---gap--gap-l);
    grid-row-gap: var(--_perimeter---gap--gap-l);
  }
  .compare-row {
    grid-column-gap: var(--_perimeter---gap--gap-xl);
    grid-row-gap: var(--_perimeter---gap--gap-xl);
    grid-template-columns: 1fr;
  }
  .compare-details-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-l);
    grid-row-gap: var(--_perimeter---gap--gap-l);
  }
  .compare-details-column {
    display: flex;
  }
  .compare-wrap {
    padding-bottom: var(--_perimeter---padding--padding-9xl);
  }
  .about-main-wrap {
    grid-template-columns: 1fr;
  }
  .about-left {
    padding-top: var(--_perimeter---padding--padding-11xl);
    padding-bottom: var(--_perimeter---padding--padding-10xl);
    grid-column-gap: var(--_perimeter---gap--gap-9xl);
    grid-row-gap: var(--_perimeter---gap--gap-9xl);
  }
  .about-right {
    height: 300px;
  }
  .about-text-wrap {
    max-width: 500px;
  }
  .about-heading {
    font-size: var(--_typography---h3--font-size);
    line-height: var(--_typography---h3--line-height);
    text-align: center;
  }
  .about-button-wrap {
    justify-content: center;
  }
  .about-top {
    grid-column-gap: var(--_perimeter---gap--gap-5xl);
    grid-row-gap: var(--_perimeter---gap--gap-5xl);
    justify-content: flex-start;
    align-items: center;
  }
  .about-bottom {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  .brand-logo {
    margin-right: 40px;
  }
  .brand-logo.v2 {
    margin-right: 72px;
  }
  .about-shadow {
    max-width: 80px;
  }
  .intro-head-wrap {
    padding-top: var(--_perimeter---padding--padding-11xl);
    padding-bottom: var(--_perimeter---padding--padding-11xl);
    grid-column-gap: var(--_perimeter---gap--gap-xl);
    grid-row-gap: var(--_perimeter---gap--gap-xl);
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  .intro-head-left, .intro-head-right {
    max-width: 400px;
  }
  .intro-banner-wrap {
    height: 220px;
  }
  .intro-main-wrap {
    grid-template-columns: 1fr;
  }
  .intro-column {
    border-bottom: 1px solid var(--colors--rich-charcoal);
    border-right-width: 0;
  }
  .intro-column._02 {
    border-bottom-width: 0;
  }
  .intro-details-wrap {
    max-width: 100%;
  }
  .intro-image-wrap {
    display: none;
  }
  .intro-statistics-wrap {
    grid-row-gap: var(--_perimeter---gap--gap-l);
    grid-template-columns: 1fr 1fr 1fr;
  }
  .statistics-number-wrap.h1 {
    height: var(--_typography---h2--line-height);
    font-size: var(--_typography---h2--font-size);
    line-height: var(--_typography---h2--line-height);
  }
  .team-head-wrap {
    max-width: 450px;
  }
  .team-heading {
    font-size: var(--_typography---h2--font-size);
    line-height: var(--_typography---h2--line-height);
  }
  .team-main-wrap {
    padding-right: var(--_perimeter---padding--padding-xxxl);
    padding-left: var(--_perimeter---padding--padding-xxxl);
    grid-column-gap: var(--_perimeter---gap--gap-l);
    grid-template-columns: 1fr 1fr 1fr;
  }
  .team-image-wrap {
    height: 180px;
  }
  .team-banner-wrap {
    height: 300px;
  }
  .career-main-wrap {
    padding-bottom: var(--_perimeter---padding--padding-none);
    grid-row-gap: var(--_perimeter---gap--gap-none);
    grid-template-columns: 1fr;
  }
  .career-card.border {
    border-left-width: 0;
  }
  .career-card.border._04 {
    border-top-width: 0;
    border-bottom-width: 0;
  }
  .career-card._03 {
    border-top-width: 0;
  }
  .career-icon-wrap {
    border-radius: var(--_border-radius---radius-s);
    width: 48px;
    height: 48px;
  }
  .career-icon {
    width: 36px;
    height: 36px;
  }
  .career-details-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-4xl);
    grid-row-gap: var(--_perimeter---gap--gap-4xl);
  }
  .career-tag-wrap, .career-divider, .requirements-wrap {
    display: none;
  }
  .requirements-wrap.v2 {
    margin-top: var(--_perimeter---padding--padding-7xl);
  }
  .career-v2-head-wrap {
    padding-right: var(--_perimeter---padding--padding-xxxl);
    padding-left: var(--_perimeter---padding--padding-xxxl);
  }
  .career-v2-heading {
    font-size: var(--_typography---h3--font-size);
    line-height: var(--_typography---h3--line-height);
  }
  .career-v2-info-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-9xl);
    justify-content: flex-start;
  }
  .career-v2-main-wrap {
    grid-template-columns: 1fr;
  }
  .career-v2-details-wrap {
    padding-bottom: var(--_perimeter---padding--padding-9xl);
    border-bottom: 1px solid var(--colors--rich-charcoal);
    border-right-width: 0;
  }
  .career-details h4:where(:not([class*="heading-scale-"])), .career-details :where(.heading-scale-4) {
    margin-top: var(--_perimeter---padding--padding-7xl);
  }
  .career-v2-form-wrap {
    padding-top: var(--_perimeter---padding--padding-9xl);
    padding-bottom: var(--_perimeter---padding--padding-9xl);
  }
  .career-blank-block {
    height: 32px;
  }
  .pricing-single-card {
    margin-bottom: var(--_perimeter---gap--gap-10xl);
    grid-column-gap: var(--_perimeter---gap--gap-8xl);
    grid-row-gap: var(--_perimeter---gap--gap-8xl);
    flex-flow: column-reverse wrap;
    display: flex;
  }
  .features-head-wrap {
    padding-top: var(--_perimeter---padding--padding-11xl);
    padding-bottom: var(--_perimeter---padding--padding-11xl);
  }
  .features-head-cintent {
    max-width: 500px;
  }
  .features-heading {
    font-size: var(--_typography---h2--font-size);
    line-height: var(--_typography---h2--line-height);
  }
  .features-main-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .features-statistics-list {
    padding-top: var(--_perimeter---padding--padding-7xl);
    padding-bottom: var(--_perimeter---padding--padding-7xl);
  }
  .security-main-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .security-list._02 {
    border-right-width: 0;
  }
  .security-list._04 {
    border-left: 1px solid var(--colors--rich-charcoal);
  }
  .security-icon-wrap {
    border-radius: var(--_border-radius---radius-s);
    width: 40px;
    height: 40px;
  }
  .security-icon {
    width: 28px;
    height: 28px;
  }
  .security-features-list {
    font-size: var(--_typography---title--font-size);
    line-height: var(--_typography---title--line-height);
  }
  .extensions-list-content {
    grid-column-gap: var(--_perimeter---gap--gap-l);
    grid-row-gap: var(--_perimeter---gap--gap-l);
  }
  .built-main-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .built-list._02 {
    border-right-width: 0;
  }
  .built-text-wrap {
    width: 100%;
    max-width: 400px;
  }
  .faq-item {
    padding: var(--_perimeter---padding--padding-xxl);
  }
  .faq-arrow {
    width: 20px;
    height: 20px;
  }
  .network-tab-menu {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .network-tab-link._03 {
    border-right-width: 0;
  }
  .network-tab-content {
    margin-top: var(--_perimeter---padding--padding-none);
    border-top-width: 0;
  }
  .network-item {
    height: 260px;
    padding-bottom: var(--_perimeter---padding--padding-9xl);
  }
  .network-number-wrap {
    padding-bottom: var(--_perimeter---padding--padding-8xl);
    grid-column-gap: var(--_perimeter---gap--gap-m);
    grid-row-gap: var(--_perimeter---gap--gap-m);
  }
  .blog-v4-head-wrap {
    max-width: 480px;
  }
  .pricing-v2-main-wrap, .hero-wrap {
    grid-template-columns: 1fr;
  }
  .hero-image-wrap {
    border-top: 1px solid var(--colors--rich-charcoal);
    border-left-width: 0;
    height: 350px;
  }
  .hero-content-wrap {
    padding: var(--_perimeter---padding--padding-10xl) var(--_perimeter---padding--padding-xxxl);
    grid-column-gap: var(--_perimeter---gap--gap-8xl);
    grid-row-gap: var(--_perimeter---gap--gap-8xl);
  }
  .security-v2-main-wrap {
    grid-template-columns: 1fr;
  }
  .security-v2-card:hover {
    box-shadow: none;
  }
  .security-v2-card._02 {
    border-left-width: 0;
  }
  .servers-heading {
    font-size: var(--_typography---h3--font-size);
    line-height: var(--_typography---h3--line-height);
  }
  .servers-image {
    min-width: 350px;
    min-height: 350px;
  }
  .servers-menu-wrap {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .servers-link {
    padding: var(--_perimeter---padding--padding-xxl);
  }
  .servers-info {
    grid-column-gap: var(--_perimeter---gap--gap-s);
    grid-row-gap: var(--_perimeter---gap--gap-s);
  }
  .flag {
    width: 18px;
    height: 18px;
  }
  .performance-head-wrap {
    max-width: 450px;
  }
  .performance-heading {
    font-size: var(--_typography---h3--font-size);
    line-height: var(--_typography---h3--line-height);
  }
  .performance-main-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .performance-list._02 {
    border-right-width: 0;
  }
  .performance-text-wrap {
    width: 100%;
    max-width: 400px;
  }
  .blog-header-title {
    font-size: var(--_typography---h4--font-size);
    line-height: var(--_typography---h4--line-height);
  }
  .security-v3-main-wrap {
    grid-template-columns: 1fr;
    position: relative;
  }
  .security-v3-list {
    background-color: var(--colors--deep-onyx);
    height: 290px;
    position: sticky;
    top: 50px;
  }
  .security-v3-icon {
    width: 36px;
    height: 36px;
  }
  .security-v3-icon-wrap {
    border-radius: var(--_border-radius---radius-s);
    width: 48px;
    height: 48px;
  }
  .navbar-logo {
    width: 145px;
  }
  .menu-button {
    width: 30px;
    height: 30px;
  }
  .nav-mobile-wrapper {
    grid-template-columns: 1fr;
  }
  .navbar-brand {
    padding-left: 0;
  }
  .nav-dropdown-toggle.is-open {
    margin-left: 0;
    margin-right: 0;
  }
  .mobile-margin-top-10 {
    margin-top: 10px;
  }
  .banner {
    display: none;
  }
  .network-right {
    justify-content: flex-end;
  }
  .network-info-list.hide {
    display: none;
  }}
@media screen and (max-width: 479px) {

  body {
    --_typography---h6--font-size: 16px;
    --_typography---h6--line-height: 20px;
    --_typography---h1--font-size: 36px;
    --_typography---h1--line-height: 36px;
    --_typography---h2--font-size: 32px;
    --_typography---h2--line-height: 32px;
    --_typography---h3--font-size: 24px;
    --_typography---h3--line-height: 24px;
    --_typography---h4--font-size: 20px;
    --_typography---h4--line-height: 20px;
    --_typography---h5--font-size: 16px;
    --_typography---h5--line-height: 20px;
    --_typography---title--font-size: 14px;
    --_typography---title--line-height: 16px;
    --_typography---subtitle--font-size: 12px;
    --_typography---subtitle--line-height: 14px;
    --_perimeter---margin--margin-none: 0px;
    --_perimeter---padding--padding-none: 0px;
    --_perimeter---padding--padding-xxxl: 20px;
    --_perimeter---padding--padding-12xl: 60px;
    --_perimeter---padding--padding-xxl: 16px;
    --_perimeter---padding--padding-l: 12px;
    --_perimeter---padding--padding-9xl: 28px;
    --_perimeter---gap--gap-xl: 12px;
    --_perimeter---gap--gap-6xl: 20px;
    --_perimeter---gap--gap-5xl: 20px;
    --_perimeter---gap--gap-m: 10px;
    --_perimeter---gap--gap-s: 8px;
    --_perimeter---padding--padding-xxs: 4px;
    --_perimeter---padding--padding-s: 8px;
    --_perimeter---padding--padding-m: 10px;
    --_perimeter---gap--gap-l: 10px;
    --_perimeter---padding--padding-13xl: 72px;
    --_perimeter---padding--padding-8xl: 24px;
    --_perimeter---padding--padding-4xl: 20px;
    --_perimeter---gap--gap-xxxl: 16px;
    --_perimeter---padding--padding-7xl: 20px;
    --_perimeter---gap--gap-9xl: 28px;
    --_perimeter---gap--gap-8xl: 24px;
    --_perimeter---padding--padding-6xl: 20px;
    --_perimeter---gap--gap-4xl: 16px;
    --_perimeter---gap--gap-xxs: 4px;
    --_perimeter---gap--gap-xxl: 14px;
    --_perimeter---padding--padding-11xl: 40px;
    --_perimeter---padding--padding-10xl: 32px;
    --_perimeter---gap--gap-xs: 6px;
    --_perimeter---padding--padding-5xl: 20px;
    --_perimeter---gap--gap-11xl: 40px;
    --_perimeter---padding--padding-xs: 6px;
    --_perimeter---gap--gap-xxxs: 2px;
    --_perimeter---gap--gap-none: 0px;
    --_perimeter---padding--padding-xl: 14px;
    --_perimeter---gap--gap-10xl: 32px;
    --_perimeter---gap--gap-7xl: 24px;
    --_perimeter---padding--padding-xxxs: 2px;
    --_perimeter---margin--margin-m: 40px;
    --_perimeter---padding--padding-14xl: 72px;
    --_perimeter---padding--padding-15xl: 72px;
    --_border-radius---radius-m: 10px;
    --_border-radius---radius-8xl: 100px;
    --_border-radius---radius-s: 8px;
    --_border-radius---radius-xs: 6px;
    --_border-radius---radius-xxs: 4px;
    --_border-radius---radius-xxxs: 2px;
    --_border-radius---radius-l: 12px;
    --_border-radius---radius-xl: 16px;
    --_border-radius---radius-xxl: 18px;
    --_border-radius---radius-xxxl: 16px;
    --_border-radius---radius-4xl: 16px;
    --_border-radius---radius-5xl: 16px;
    --_border-radius---radius-6xl: 20px;
    --_border-radius---radius-7xl: 20px;
  }
  .page-inner {
    padding-right: var(--_perimeter---padding--padding-l);
    padding-left: var(--_perimeter---padding--padding-l);
  }
  .style-guide-inner {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .typography-list-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-5xl);
    grid-row-gap: var(--_perimeter---gap--gap-5xl);
    grid-template-columns: 1fr;
  }
  .typography-list {
    grid-column-gap: var(--_perimeter---gap--gap-s);
    grid-row-gap: var(--_perimeter---gap--gap-s);
  }
  .h6.intro-statistics-title, .h6.features-statistics-title, .h6.extensions-subtitle, .h6.country {
    font-size: var(--_typography---title--font-size);
    line-height: var(--_typography---title--line-height);
  }
  .colors-list {
    height: 100px;
  }
  .color-info-wrap {
    display: none;
  }
  .button-01, .button-02 {
    padding-top: var(--_perimeter---padding--padding-s);
    padding-bottom: var(--_perimeter---padding--padding-s);
  }
  .blank-wrap {
    height: 24px;
  }
  .footer-column {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .footer-brand {
    width: 120px;
  }
  .footer-text-wrap {
    margin-top: var(--_perimeter---padding--padding-9xl);
  }
  .subtitle-wrap.hide {
    display: none;
  }
  .footer-button-wrap {
    margin-top: var(--_perimeter---padding--padding-8xl);
  }
  .footer-menu-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-xl);
    grid-row-gap: var(--_perimeter---gap--gap-8xl);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .footer-haeding {
    font-size: var(--_typography---h4--font-size);
    line-height: var(--_typography---h4--line-height);
  }
  .h5.name {
    font-size: var(--_typography---title--font-size);
    line-height: var(--_typography---title--line-height);
  }
  .footer-bottom, .utility-hero-wrap {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .changelog-wrap {
    padding-right: var(--_perimeter---padding--padding-8xl);
    padding-left: var(--_perimeter---padding--padding-8xl);
  }
  .privacy {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .privacy-details p, .privacy-details ul {
    margin-top: var(--_perimeter---padding--padding-l);
  }
  .utility-image-wrap {
    max-width: 300px;
    margin-top: var(--_perimeter---padding--padding-9xl);
  }
  .license-image-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-xs);
    grid-row-gap: var(--_perimeter---gap--gap-xs);
  }
  .license-image-list {
    height: 100px;
  }
  .license-card {
    height: 140px;
  }
  .license-icon {
    width: 100px;
  }
  .signup-wrap {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .input-filed {
    border-radius: var(--_border-radius---radius-xs);
    height: 42px;
  }
  .input-filed.textarea {
    height: 100px;
  }
  .submit-button {
    padding-top: var(--_perimeter---padding--padding-s);
    padding-bottom: var(--_perimeter---padding--padding-s);
  }
  .submit-button.contact-btn {
    max-width: 170px;
  }
  .contact-wrap {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .form-row {
    grid-column-gap: var(--_perimeter---gap--gap-5xl);
    grid-row-gap: var(--_perimeter---gap--gap-5xl);
    flex-flow: column;
  }
  .contact-button-wrap {
    margin-top: var(--_perimeter---padding--padding-xs);
  }
  .info-wrap {
    grid-template-columns: 1fr;
  }
  .info-details-wrap {
    margin-top: var(--_perimeter---padding--padding-xxl);
  }
  .info-blank-block {
    height: 24px;
  }
  .blog-headinig {
    font-size: var(--_typography---h3--font-size);
    line-height: var(--_typography---h3--line-height);
  }
  .blog-tab-menu {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .blog-image-wrap {
    height: 180px;
  }
  .blog-image-wrap.large {
    height: 200px;
  }
  .blog-details-wrap {
    margin-top: var(--_perimeter---padding--padding-xxl);
    padding-right: var(--_perimeter---padding--padding-xxs);
    padding-left: var(--_perimeter---padding--padding-xxs);
  }
  .h4.extensions-title, .h4.security-v2-title {
    font-size: var(--_typography---h5--font-size);
    line-height: var(--_typography---h5--line-height);
  }
  .blog-v3-head-wrap {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .blog-v3-text-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-xxl);
    grid-row-gap: var(--_perimeter---gap--gap-xxl);
  }
  .blog-v3-heading {
    font-size: var(--_typography---h4--font-size);
    line-height: var(--_typography---h4--line-height);
  }
  .blog-v3-image-wrap {
    height: 200px;
  }
  .blog-v3-main-wrap {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .blog-details p, .blog-details ul {
    margin-top: var(--_perimeter---padding--padding-l);
  }
  .blog-details h4:where(:not([class*="heading-scale-"])), .blog-details :where(.heading-scale-4) {
    margin-top: var(--_perimeter---padding--padding-10xl);
  }
  .writer-wrap {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .blog-v3-bottom-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-9xl);
    grid-row-gap: var(--_perimeter---gap--gap-9xl);
    flex-flow: column-reverse wrap;
    justify-content: space-between;
    align-items: flex-start;
  }
  .password-button-wrap {
    margin-top: var(--_perimeter---gap--gap-xxxl);
  }
  .pricing-v1-wrap.space, .pricing-head-wrap {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .pricing-head-wrap.sm {
    max-width: 350px;
  }
  .pricing-main-wrap.cate {
    padding-right: var(--_perimeter---padding--padding-none);
    padding-left: var(--_perimeter---padding--padding-none);
  }
  .pricing-card {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .pricing-card.cate {
    border-left-width: 0;
    border-right-width: 0;
  }
  .pricing-icon-wrap {
    width: 44px;
    height: 44px;
  }
  .pricing-icon {
    width: 32px;
    height: 32px;
  }
  .section-header-wrap {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .compare-wrap {
    padding-bottom: var(--_perimeter---padding--padding-8xl);
  }
  .about-left {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .about-right {
    height: 220px;
  }
  .about-bottom {
    max-width: 260px;
  }
  .brand-logo {
    margin-right: 36px;
  }
  .brand-logo.v2 {
    margin-right: 60px;
  }
  .about-shadow {
    max-width: 40px;
  }
  .intro-head-wrap {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .intro-banner-wrap {
    height: 160px;
  }
  .intro-column {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .intro-details-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-xxl);
    grid-row-gap: var(--_perimeter---gap--gap-xxl);
  }
  .intro-statistics-wrap {
    grid-row-gap: var(--_perimeter---gap--gap-5xl);
    grid-template-columns: 1fr 1fr;
  }
  .statistics-number-wrap.h1 {
    height: var(--_typography---h3--line-height);
    font-size: var(--_typography---h3--font-size);
    line-height: var(--_typography---h3--line-height);
  }
  .statistics-number-wrap.h3 {
    height: var(--_typography---h5--line-height);
    font-size: var(--_typography---h5--font-size);
    line-height: var(--_typography---h5--line-height);
  }
  .team-heading {
    font-size: var(--_typography---h3--font-size);
    line-height: var(--_typography---h3--line-height);
  }
  .team-main-wrap {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
    grid-template-columns: 1fr 1fr;
  }
  .team-image-wrap {
    height: 160px;
  }
  .team-banner-wrap {
    height: 180px;
  }
  .career-card {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .career-details-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-xxl);
    grid-row-gap: var(--_perimeter---gap--gap-xxl);
  }
  .career-info-wrap {
    display: none;
  }
  .career-inner {
    grid-column-gap: var(--_perimeter---gap--gap-8xl);
    grid-row-gap: var(--_perimeter---gap--gap-8xl);
  }
  .career-v2-head-wrap {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .career-v2-text-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-xxxl);
    grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  }
  .career-v2-details-wrap {
    padding-top: var(--_perimeter---padding--padding-xl);
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .career-details p, .career-details ul {
    margin-top: var(--_perimeter---padding--padding-l);
  }
  .career-v2-form-wrap {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .apply-form {
    grid-column-gap: var(--_perimeter---gap--gap-4xl);
    grid-row-gap: var(--_perimeter---gap--gap-4xl);
  }
  .career-blank-block {
    height: 24px;
  }
  .pricing-single-card {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .add-to-cart-button {
    padding-top: var(--_perimeter---padding--padding-s);
    padding-bottom: var(--_perimeter---padding--padding-s);
  }
  .pricing-details p, .pricing-details ul {
    margin-top: var(--_perimeter---padding--padding-l);
  }
  .features-head-wrap {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .features-statistics-list {
    padding-right: var(--_perimeter---padding--padding-l);
    padding-left: var(--_perimeter---padding--padding-l);
  }
  .features-statistics-list._03 {
    border-left-width: 0;
  }
  .security-main-wrap {
    grid-row-gap: var(--_perimeter---gap--gap-xl);
    grid-template-columns: 1fr;
  }
  .security-list {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
    position: sticky;
    top: 50px;
  }
  .security-list._02 {
    border-left-width: 0;
  }
  .security-list._05 {
    border-left-width: 0;
    border-right-width: 0;
  }
  .security-list._04 {
    border-left-width: 0;
  }
  .security-details-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-6xl);
    grid-row-gap: var(--_perimeter---gap--gap-6xl);
  }
  .extensions-list-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .extensions-list {
    padding-right: var(--_perimeter---padding--padding-xxxs);
    padding-left: var(--_perimeter---padding--padding-xxxs);
  }
  .extensions-list._02 {
    border-right-width: 0;
  }
  .built-main-wrap {
    grid-template-columns: 1fr;
  }
  .built-list {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
    position: sticky;
    top: 50px;
  }
  .built-list._02 {
    border-left-width: 0;
  }
  .faq-main-wrap {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .faq-arrow {
    width: 18px;
    height: 18px;
  }
  .network-tab-menu {
    grid-template-columns: 1fr 1fr;
  }
  .network-tab-link {
    padding-top: var(--_perimeter---padding--padding-l);
    padding-bottom: var(--_perimeter---padding--padding-l);
    font-size: var(--_typography---title--font-size);
    line-height: var(--_typography---title--line-height);
  }
  .network-tab-link._03 {
    border-right-width: 1px;
  }
  .network-tab-link._02, .network-tab-link._04 {
    border-right-width: 0;
  }
  .network-tab-content {
    padding-right: var(--_perimeter---padding--padding-none);
    padding-left: var(--_perimeter---padding--padding-none);
  }
  .network-content-wrap {
    border-right-width: 0;
  }
  .network-item {
    height: 190px;
    padding-bottom: var(--_perimeter---padding--padding-none);
    border-left-width: 0;
  }
  .network-item._02 {
    border-left-width: 1px;
  }
  .network-number-wrap {
    padding-right: var(--_perimeter---padding--padding-m);
    padding-bottom: var(--_perimeter---padding--padding-7xl);
    padding-left: var(--_perimeter---padding--padding-m);
  }
  .network-details-wrap {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .network-button-wrap {
    margin-top: var(--_perimeter---gap--gap-5xl);
  }
  .blog-v4-head-wrap {
    max-width: 300px;
  }
  .hero-image-wrap {
    height: 260px;
  }
  .hero-content-wrap {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .hero-bottom-wrap {
    grid-column-gap: var(--_perimeter---gap--gap-xl);
    grid-row-gap: var(--_perimeter---gap--gap-xl);
  }
  .hero-profile {
    width: 75px;
  }
  .security-v2-card {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .security-v2-heading {
    max-width: 280px;
  }
  .servers-image {
    min-width: 280px;
    min-height: 200px;
  }
  .servers-menu-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .servers-menu-list {
    padding-top: var(--_perimeter---padding--padding-l);
    padding-bottom: var(--_perimeter---padding--padding-l);
    font-size: var(--_typography---title--font-size);
    line-height: var(--_typography---title--line-height);
  }
  .servers-list-wrap {
    grid-row-gap: var(--_perimeter---gap--gap-s);
    grid-template-columns: 1fr 1fr;
  }
  .servers-link {
    padding: var(--_perimeter---padding--padding-xl);
  }
  .servers-link.hide {
    display: none;
  }
  .servers-link._02 {
    border-right-width: 0;
  }
  .servers-link._03 {
    border-right-width: 1px;
  }
  .servers-link._04 {
    border-right-width: 0;
  }
  .servers-arrow-wrap {
    width: 10px;
    height: 10px;
  }
  .performance-main-wrap {
    grid-template-columns: 1fr;
  }
  .performance-list {
    position: sticky;
    top: 50px;
  }
  .performance-list._02 {
    border-left-width: 0;
  }
  .performance-text-wrap {
    padding-bottom: var(--_perimeter---padding--padding-l);
  }
  .block-header {
    padding: var(--_perimeter---padding--padding-l) var(--_perimeter---padding--padding-xl);
  }
  .block-content {
    padding-top: var(--_perimeter---padding--padding-xxl);
    padding-bottom: var(--_perimeter---padding--padding-xxl);
  }
  .form-label {
    margin-top: var(--_perimeter---padding--padding-l);
  }
  .security-v3-heading {
    max-width: 280px;
    font-size: var(--_typography---h3--font-size);
    line-height: var(--_typography---h3--line-height);
  }
  .security-v3-list {
    height: 270px;
    padding: var(--_perimeter---padding--padding-xxl);
  }
  .security-card-one {
    padding: var(--_perimeter---padding--padding-l);
    border-radius: var(--_border-radius---radius-xs);
  }
  .nav-dropdown-list-body {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
  }
  .navbar-container {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .nav-button-wrapper {
    width: auto;
  }
  .nav-mobile-column {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .navbar-right {
    grid-column-gap: var(--_perimeter---gap--gap-xxxl);
    grid-row-gap: var(--_perimeter---gap--gap-xxxl);
  }
  .nav-menu-wrapper {
    padding: var(--_perimeter---padding--padding-9xl) var(--_perimeter---padding--padding-xxxl);
  }
  .navbar-logo {
    width: 135px;
  }
  .menu-button {
    width: 28px;
    height: 28px;
  }
  .nav-mobile-wrapper {
    grid-row-gap: var(--_perimeter---gap--gap-10xl);
  }
  .network-list {
    padding-right: var(--_perimeter---padding--padding-xxl);
    padding-left: var(--_perimeter---padding--padding-xxl);
  }
  .network-left {
    grid-column-gap: var(--_perimeter---padding--padding-m);
    grid-row-gap: var(--_perimeter---padding--padding-m);
    max-width: 150px;
  }
  .network-flag {
    width: 18px;
    height: 18px;
  }
  .network-title-row {
    padding: var(--_perimeter---padding--padding-xxl);
  }}

#node-_4d9373b9-3d06-4b4a-8f5c-48f21eba158e-3c20fcd5 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}
#node-af80921a-5133-9676-48c1-b954f1c9ba91-c51a0248, #node-ef6b3be3-b61f-17c1-1ccf-4e6b206537d3-c51a0248 {
  grid-area: span 1 / span 6 / span 1 / span 6;
}
#node-_2c9e0692-427b-70fd-d626-cf45973d2da2-c51a0248, #node-a362caaa-f78d-b29c-7c14-c5978b58ec71-c51a0248 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}
#node-b17d15ba-fc92-5465-7ec5-fd7bd32bd86c-c51a0248, #node-bdc135e4-abae-a7b1-1aa5-84d2ddc003b8-c51a0248, #node-db1121bb-a663-a2ae-8783-9b5febc8aec6-c51a0248 {
  grid-area: span 1 / span 6 / span 1 / span 6;
}@media screen and (max-width: 991px) {

  #node-db6b26d5-88ac-f617-e212-a327bfdaae65-3c20fcd4, #node-a8f03b56-a904-b398-5f8f-e11ee41fe8bc-3c20fcd4, #node-_92a207d3-3757-69bd-8bb2-ee8baff797e6-3c20fcd7 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }}
@media screen and (max-width: 767px) {

  #node-db6b26d5-88ac-f617-e212-a327bfdaae65-3c20fcd4 {
    grid-column: span 1 / span 1;
  }
  #node-_6e9e328b-07aa-5ae7-76b1-fe934271760c-3c20fcd4, #node-e77d5401-9776-32fa-4b75-c2be6dd305ac-3c20fcd4 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
  #node-a8f03b56-a904-b398-5f8f-e11ee41fe8bc-3c20fcd4 {
    grid-column: span 1 / span 1;
  }
  #node-_4d9373b9-3d06-4b4a-8f5c-48f21eba158e-3c20fcd5 {
    grid-column: span 3 / span 3;
  }
  #node-_188554ff-342a-07f9-7b5e-b2e3c3022231-3c20fcd6, #node-f06d0153-9449-b08e-d128-d5c7ab73e313-3c20fcd6 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
  #node-_92a207d3-3757-69bd-8bb2-ee8baff797e6-3c20fcd7 {
    grid-column: span 1 / span 1;
  }
  #node-_4aea5987-5ddc-ef8a-5fd3-77d36a339fef-3c20fcd9 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
  #node-_2c9e0692-427b-70fd-d626-cf45973d2da2-c51a0248, #node-a362caaa-f78d-b29c-7c14-c5978b58ec71-c51a0248 {
    grid-column: span 6 / span 6;
  }
  #node-db1121bb-a663-a2ae-8783-9b5febc8aec6-c51a0248 {
    grid-column: span 12 / span 12;
  }}
@media screen and (max-width: 479px) {

  #node-e77d5401-9776-32fa-4b75-c2be6dd305ac-3c20fcd4 {
    grid-column: span 1 / span 1;
  }
  #node-_96afaf54-47ab-86fd-bcf3-9cb537628e98-3c20fcd5 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
  #node-_4d9373b9-3d06-4b4a-8f5c-48f21eba158e-3c20fcd5 {
    grid-column: span 2 / span 2;
  }
  #node-_69f1b135-c7bc-808d-0bc5-a88b226d9ada-3c20fcd6 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
  #node-_188554ff-342a-07f9-7b5e-b2e3c3022231-3c20fcd6 {
    grid-column: span 1 / span 1;
  }
  #node-_36453970-9be8-68bd-1bd0-b826098a23c7-3c20fcd8 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
  #node-_4aea5987-5ddc-ef8a-5fd3-77d36a339fef-3c20fcd9 {
    grid-column: span 1 / span 1;
  }}


/* ======================================================================
   4. Components -- vanilla replacements for the Webflow runtime, IX2 and IX3
   ======================================================================

   Everything below implements behaviour the export delegated to
   webflow.js: the four reveal families, the eight hovers, the rolling
   statistics counters, the brand marquee, the navbar overlay and its
   hamburger, the Pages dropdown and the blur it puts on the page behind
   it, the two tab sets, the hover-opened FAQ, the demo forms and the
   localStorage cart. main.js drives the state classes; this sheet owns
   every keyframe and transition.

   ## Where the numbers come from

   Three payloads, all of them the export's own:

     * IX3 (`register([interactions], [timelines])` inside webflow.js) --
       thirteen interactions. Eight hovers, one scroll reveal, one page-load
       stagger, and the three page-scoped ones: the about page's zoom reveal
       and the two brand marquees.
     * IX2 (`Webflow.require("ix2").init({...})`) -- nine events, four of
       which belong to the marketplace promo bar transform.py removes. What
       is left is the statistics counter, the hamburger and the dropdown.
     * The design sheet itself, which already carries several of the rest
       states (`.view-link { transform: scale(0) }`, `.button-02-bg
       { opacity: 0 }`) -- those are NOT restated here.

   IX3's easings are indices into GSAP's own table. Three appear in this
   payload, and each has an exact or standard cubic-bezier:

       0  none          linear
       3  power1.inOut  cubic-bezier(0.455, 0.03, 0.515, 0.955)
       5  power2.out    cubic-bezier(0.333, 1, 0.667, 1)

   `power2.out` is GSAP's cubic ease-out, and that bezier is EXACT rather
   than an approximation: solving a cubic Bezier with x(t) = t for
   y = 1 - (1-t)^3 gives control points (1/3, 1) and (2/3, 1).

   ## Conventions, learned the hard way across this series

     * REVEALS ARE ANIMATIONS, NEVER TRANSITIONS. A `transition` shorthand
       on a reveal class REPLACES whatever transition the element already
       had, which is how an earlier conversion deleted a card's own hover.
     * A FINISHED REVEAL HANDS OVER TO `.is-shown`, and the handover pins
       OPACITY ONLY. `animation-fill-mode` pins the last keyframe for ever
       and outranks every normal declaration, so an element left on
       `.is-revealed` could never be moved by anything else again -- which
       on an earlier build flattened five cards the design rests at
       different offsets.
     * EVERY REST STATE THE HEAD'S IX3 BLOCK CARRIED IS EITHER HERE OR IN
       THE DESIGN SHEET. The export hid twenty selectors with
       `visibility: hidden !important` until the runtime loaded;
       build_head deletes that block, and what the design sheet did not
       already carry is restated below -- gated on `.js`, so a visitor
       without JavaScript sees the page rather than 534 invisible boxes.
     * A STYLED HOOK NOTHING EVER WRITES IS INVISIBLE TO EVERY AUDIT.
       audit_hooks.py checks that each class named here is also written by
       main.js, and each attribute here is also written by transform.py. */

:root {
  /* GSAP power1.inOut and power2.out; see the header. */
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-out-cubic: cubic-bezier(0.333, 1, 0.667, 1);
}

/* The <main> wrapper transform.py introduces for the skip link and the
   document outline. `display: contents` keeps it out of layout entirely: an
   ordinary <div> opened between `.page-inner-body` and its sections would
   become the containing block for the stroke rules. */
main {
  display: contents;
}

/* The skip link: visually hidden until it has focus. */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 2000;
  padding: 0.5rem 1rem;
  background-color: var(--colors--mint-frost);
  color: var(--colors--deep-onyx);
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* The three commerce pages have no visible page title -- their first
   heading names a block ("Customer Info") -- so transform.py gives each a
   real <h1> that only a screen reader reaches. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ======================================================================
   Reveals
   ======================================================================

   Four families, all of them driven off attributes the designer wrote by
   hand in the Webflow UI and IX3 then addressed by selector:

     [data-reveal="slide"]  534 elements. `wf:scroll` with
                            `enter: "play"`, clamped, start "top bottom":
                            it fires as the element's top passes the bottom
                            of the viewport. 0.6s, 0.1s in, power2.out,
                            opacity 0 -> 1 and y 30px -> 0.
     [data-reveal="scale"]  one element, the about page's team banner.
                            Same trigger, 0.7s, scale 1.15 -> 1.
     [data-load="1".."7"]   the above-the-fold furniture, staggered on
                            `wf:load` by 0.1s per step (step 7 lands on
                            0.6s, not 0.7 -- the payload's own order).
     [data-load="image"]    two hero images, 0.8s from scale 1.3.

   The rest states are gated on `.js`, and the scroll ones additionally on
   `main.js` having reached them: a page whose script fails to load must
   still show its content. */
:where(.js) [data-reveal],
:where(.js) [data-load] {
  opacity: 0;
}

:where(.js) [data-reveal="slide"] {
  translate: 0 30px;
}

:where(.js) [data-reveal="scale"] {
  scale: 1.15;
}

:where(.js) [data-load="image"] {
  scale: 1.3;
}

:where(.js) [data-load]:not([data-load="image"]) {
  translate: 0 30px;
}

/* The scroll reveals. main.js adds `.is-revealed` when the element crosses
   the viewport's bottom edge and swaps it for `.is-shown` when the
   animation finishes, so nothing is left pinned by a fill mode. */
[data-reveal].is-revealed {
  animation: reveal-slide 0.6s var(--ease-out-cubic) 0.1s both;
}

[data-reveal="scale"].is-revealed {
  animation: reveal-scale 0.7s var(--ease-out-cubic) 0.1s both;
}@keyframes reveal-slide {

  from { opacity: 0; translate: 0 30px; }
  to { opacity: 1; translate: 0 0; }}
@keyframes reveal-scale {

  from { opacity: 0; scale: 1.15; }
  to { opacity: 1; scale: 1; }}


/* The load stagger. `wf:load` fires once, for everything at once, so these
   are plain animations with a per-step delay rather than anything main.js
   has to schedule -- it only adds `.is-loaded` to <html> once the fonts and
   the first paint are out of the way, so the stagger is not spent behind a
   blocking stylesheet. */
.is-loaded [data-load] {
  animation: reveal-slide 0.6s var(--ease-out-cubic) both;
}

.is-loaded [data-load="1"] { animation-delay: 0.1s; }
.is-loaded [data-load="2"] { animation-delay: 0.2s; }
.is-loaded [data-load="3"] { animation-delay: 0.3s; }
.is-loaded [data-load="4"] { animation-delay: 0.4s; }
.is-loaded [data-load="5"] { animation-delay: 0.5s; }
.is-loaded [data-load="7"] { animation-delay: 0.6s; }

.is-loaded [data-load="image"] {
  animation: reveal-zoom 0.8s var(--ease-out-cubic) 0.2s both;
}@keyframes reveal-zoom {

  from { opacity: 0; scale: 1.3; }
  to { opacity: 1; scale: 1; }}


/* The handover. `.is-shown` pins OPACITY and nothing else -- see the
   header -- so an element whose design rule rests it somewhere other than
   the origin keeps that rule. */
[data-reveal].is-shown,
[data-load].is-shown {
  opacity: 1;
  translate: none;
  scale: none;
  animation: none;
}@media (prefers-reduced-motion: reduce) {

  :where(.js) [data-reveal],
  :where(.js) [data-load] {
    opacity: 1;
    translate: none;
    scale: none;
    animation: none !important;
  }}


/* ======================================================================
   Hovers
   ======================================================================

   Eight IX3 interactions, all `wf:hover` with a `mouseleave` reverse, all
   scoped to the whole site, all targeting a class WITHIN the trigger.
   Four of them carry `conditionalPlayback: dont-animate` on the `small`
   and `tiny` breakpoints -- 767px and below, where there is no pointer to
   hover with -- and those four are inside the media query at the end.

   THE STATE CLASS LANDS ON THE TRIGGER, so each rule is written against
   the trigger's own `:hover` rather than against the target's. Writing it
   the other way round is how eleven of fourteen zoom effects on an earlier
   conversion never played. */

/* i-d0dfaad3 / t-d537e001: .button-01 -> .button-text-wrap y 0 -> -50%,
   0.25s, power1.inOut. `.button-mask` is one line tall with
   `overflow: hidden`, so the second copy of the label rolls up into view. */
.button-text-wrap {
  transition: translate 0.25s var(--ease-in-out-quad);
}

.button-01:hover .button-text-wrap,
.button-02:hover .button-text-wrap {
  translate: 0 -50%;
}

/* i-dcaae39c / t-f9886d68: .button-02 also fades its fill in and swaps its
   border colour. The rest states (`opacity: 0`, `border-color:
   rich-charcoal`) are the design sheet's own and are not restated. */
.button-02 {
  transition: border-color 0.25s var(--ease-in-out-quad);
}

.button-02-bg {
  transition: opacity 0.25s var(--ease-in-out-quad);
}

.button-02:hover {
  border-color: var(--colors--mint-frost);
}

.button-02:hover .button-02-bg {
  opacity: 1;
}

/* i-893000e8 / t-21792d23: .social-link -> .social-icon opacity 60% ->
   100%, 0.2s, linear. The 60% is IX3's own "from" value and appears in no
   design rule, so it is the rest state here. */
.social-icon {
  opacity: 0.6;
  transition: opacity 0.2s linear;
}

/* i-e23fb472 / t-435f7eb2: the FAQ row. Height 0 -> auto on `.answer-wrap`
   and 0 -> 180deg on `.faq-arrow`, 0.4s, power1.inOut. THIS IS A HOVER, not
   a click -- the payload has no click trigger anywhere -- so the row opens
   under the pointer exactly as it does on the published site, and
   transform.py adds a real disclosure button underneath so that a keyboard
   and a touch screen can open it too.

   `height: auto` is not animatable, so the panel is a one-row grid that
   collapses to `minmax(0, 0fr)`. A plain `0fr` does NOT collapse -- the row
   still takes its content's min-content height, which on an earlier
   conversion left every answer half-open. */
.answer-wrap {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows 0.4s var(--ease-in-out-quad);
}

.answer-wrap > * {
  min-height: 0;
}

.faq-arrow {
  transition: rotate 0.4s var(--ease-in-out-quad);
}

.faq-item:hover .answer-wrap,
.faq-item:has(.question-wrap[aria-expanded="true"]) .answer-wrap {
  grid-template-rows: minmax(0, 1fr);
}

.faq-item:hover .faq-arrow,
.faq-item:has(.question-wrap[aria-expanded="true"]) .faq-arrow {
  rotate: 180deg;
}

/* The question row is a <button> now: it fills the row it used to be a
   <div> in, and it carries none of a control's own chrome. */
.faq-heading {
  display: contents;
}

.question-wrap {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}@media screen and (min-width: 768px) {

  /* i-2135307d / t-ba3530a7: .view-link -> .view-link-text y 0 -> -50%.
     Same roll as the buttons, in the pill that sits over a blog cover. */
  .view-link-text {
    transition: translate 0.25s var(--ease-in-out-quad);
  }

  .view-link:hover .view-link-text {
    translate: 0 -50%;
  }

  /* i-e9252b22 / t-dc9069df: .blog-link -> the cover image scales to 1.13
     and the "View Blog" pill scales up from nothing, both 0.35s. The pill's
     `transform: scale(0)` rest state is the design sheet's own, and is
     overridden here with `transform` rather than with the `scale` property:
     the two multiply, and `scale: 1` over `transform: scale(0)` is still
     zero. */
  .fit-cover {
    transition: scale 0.35s var(--ease-in-out-quad);
  }

  .view-link {
    transition: transform 0.35s var(--ease-in-out-quad);
  }

  .blog-link:hover .fit-cover {
    scale: 1.13;
  }

  .blog-link:hover .view-link {
    transform: scale(1);
  }

  /* i-bf45d759 / t-26dd705c: .team-list -> the portrait scales to 1.1. */
  .team-list:hover .fit-cover.team-image {
    scale: 1.1;
  }

  /* i-c19e017c / t-9b37823c: .servers-link -> .servers-arrow-group
     x 0 -> 100%, 0.3s. The arrow slides out of its own width. */
  .servers-arrow-group {
    transition: translate 0.3s var(--ease-in-out-quad);
  }

  .servers-link:hover .servers-arrow-group {
    translate: 100% 0;
  }}


/* ======================================================================
   The brand marquee
   ======================================================================

   i-c12c2b8b (about) and i-ecc9e750 (home): `wf:load`, `repeat: -1`,
   `.brand-list` x 0% -> -100%, linear. The two pages run the same rail at
   different speeds -- 30s on the about page, 50s on the home page -- which
   is the one place in this payload where a page-scoped interaction really
   does differ from its site-wide twin.

   Each rail holds TWO identical `.brand-list` copies inside an
   `overflow: hidden` track, so translating both by exactly their own width
   is seamless. */
.brand-list {
  animation: marquee 50s linear infinite;
}

.about .brand-list,
.intro .brand-list {
  animation-duration: 30s;
}@keyframes marquee {

  from { translate: 0 0; }
  to { translate: -100% 0; }}
@media (prefers-reduced-motion: reduce) {

  .brand-list {
    animation: none;
  }}


/* ======================================================================
   The rolling statistics counters
   ======================================================================

   IX2 event `e`, action list `a`: SCROLL_INTO_VIEW on
   `.statistics-number-wrap` with a 2% offset, `useFirstGroupAsInitialState`,
   500ms rest / 1500ms play, easing "ease".

   `.statistics-number-wrap` is one line tall with `overflow: hidden`, and
   each `.statistics-number-box` inside it is a flex COLUMN of five digits
   stretched to that one line -- so four of the five digits overflow. The
   `.upper` boxes are bottom-aligned and the `.lower` ones top-aligned,
   which is why the payload's +/-400% is four digit heights in each
   direction: the roll starts on the digit four places away and lands on
   the one the box rests at.

   main.js adds `.is-counting` when the wrap reaches the viewport. */
.statistics-number-box {
  transition: translate 1.5s ease;
}

:where(.js) .statistics-number-box.upper {
  translate: 0 400%;
}

:where(.js) .statistics-number-box.lower {
  translate: 0 -400%;
}

.is-counting .statistics-number-box {
  translate: 0 0;
}@media (prefers-reduced-motion: reduce) {

  :where(.js) .statistics-number-box {
    translate: 0 0;
  }}


/* ======================================================================
   The navbar
   ======================================================================

   IX2 `e-3` / `e-4` (NAVBAR_OPEN / NAVBAR_CLOSE) play the hamburger's
   Lottie file to 45% and back over 500ms. build_lottie has the decode; the
   short version is that 45% of the file's 140 frames is frame 63, and the
   file gets there in four moves: the outer bars hold, spring APART to
   y = 22 and y = 78, converge on the centre line, and then rotate to
   +/-45deg -- of which frame 63 catches all but the last 1.8deg.

   The three bars are a 62 x 8 rounded rect each, at y 30 / 50 / 70 on a
   100 x 100 canvas, so "converge on the centre" is +/-20 units. */
.burger {
  display: block;
  width: 100%;
  height: 100%;
}

.burger-bar {
  transform-origin: 51px 50px;
  transform-box: fill-box;
}

.burger-bar.top { transform-origin: center; }
.burger-bar.middle { transform-origin: center; }
.burger-bar.bottom { transform-origin: center; }

[aria-expanded="true"] .burger-bar.top { animation: burger-top 0.5s linear forwards; }
[aria-expanded="true"] .burger-bar.middle { animation: burger-middle 0.5s linear forwards; }
[aria-expanded="true"] .burger-bar.bottom { animation: burger-bottom 0.5s linear forwards; }

.is-closing .burger-bar.top { animation: burger-top 0.5s linear reverse forwards; }
.is-closing .burger-bar.middle { animation: burger-middle 0.5s linear reverse forwards; }
.is-closing .burger-bar.bottom { animation: burger-bottom 0.5s linear reverse forwards; }@keyframes burger-top {

  0% { translate: 0 0; rotate: 0deg; animation-timing-function: linear; }
  15.873% { translate: 0 0; rotate: 0deg; animation-timing-function: cubic-bezier(0.333, 0, 0.667, 1); }
  36.508% { translate: 0 -8px; rotate: 0deg; animation-timing-function: cubic-bezier(0.333, 0, 0.667, 1); }
  57.143% { translate: 0 20px; rotate: 0deg; animation-timing-function: linear; }
  63.492% { translate: 0 20px; rotate: 0deg; animation-timing-function: cubic-bezier(0.333, 0, 0.667, 1); }
  95.238% { translate: 0 20px; rotate: -45deg; animation-timing-function: cubic-bezier(0.333, 0, 0.667, 1); }
  100% { translate: 0 20px; rotate: -43.21deg; }}
@keyframes burger-middle {

  0% { rotate: 0deg; animation-timing-function: linear; }
  63.492% { rotate: 0deg; animation-timing-function: cubic-bezier(0.333, 0, 0.667, 1); }
  95.238% { rotate: 45deg; animation-timing-function: cubic-bezier(0.333, 0, 0.667, 1); }
  100% { rotate: 43.21deg; }}
@keyframes burger-bottom {

  0% { translate: 0 0; rotate: 0deg; animation-timing-function: linear; }
  15.873% { translate: 0 0; rotate: 0deg; animation-timing-function: cubic-bezier(0.333, 0, 0.667, 1); }
  36.508% { translate: 0 8px; rotate: 0deg; animation-timing-function: cubic-bezier(0.333, 0, 0.667, 1); }
  57.143% { translate: 0 -20px; rotate: 0deg; animation-timing-function: linear; }
  63.492% { translate: 0 -20px; rotate: 0deg; animation-timing-function: cubic-bezier(0.333, 0, 0.667, 1); }
  95.238% { translate: 0 -20px; rotate: -45deg; animation-timing-function: cubic-bezier(0.333, 0, 0.667, 1); }
  100% { translate: 0 -20px; rotate: -43.21deg; }}


/* The open mobile panel scrolls if it is taller than what is left of the
   viewport below the bar. Webflow's own overlay had no such limit and its
   last two columns were simply unreachable on a short phone. */
.nav-overlay .nav-menu-wrapper {
  max-height: calc(100vh - 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ======================================================================
   The Pages dropdown
   ======================================================================

   IX2 `e-5` / `e-6` (DROPDOWN_OPEN / DROPDOWN_CLOSE), action lists `a-4`
   and `a-5`. Group 0 is the rest state and group 1 the open state, both
   over 400ms with easing "ease":

       .dropdown-arrow          opacity 0.6 -> 1, rotate 0 -> 180deg
       .nav-dropdown-text       opacity 0.6 -> 1
       .nav-dropdown-list-wrap  y 10px -> 0, opacity 0 -> 1
       .page-inner-body         blur 0 -> 25px

   The blur is the one that is easy to miss and impossible to un-see: the
   whole page behind the panel goes soft while it is open. */
.dropdown-arrow,
.nav-dropdown-toggle .nav-dropdown-text {
  opacity: 0.6;
  transition: opacity 0.4s ease, rotate 0.4s ease;
}

.nav-dropdown-list-wrap {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.4s ease, translate 0.4s ease;
}

.nav-dropdown-list-wrap.is-open {
  opacity: 1;
  translate: 0 0;
}

[aria-expanded="true"] .dropdown-arrow {
  opacity: 1;
  rotate: 180deg;
}

[aria-expanded="true"] .nav-dropdown-text {
  opacity: 1;
}

.page-inner-body {
  transition: filter 0.4s ease;
}

.is-dropdown-open .page-inner-body {
  filter: blur(25px);
}

/* ======================================================================
   Tab sets
   ======================================================================

   Two of them: the blog page's five category filters and the features
   page's five server regions. Webflow's runtime moved `.w--current` and
   `.w--tab-active`; build_css maps both onto `.is-active`, which main.js
   now moves. The widget's own `display: none` on a closed pane is kept
   (build_css renames it `.tabset-pane`), so nothing here has to hide one. */
.tabset-link {
  cursor: pointer;
}

.tabset-pane.is-active {
  display: block;
}

/* ======================================================================
   The demo forms
   ======================================================================

   Five of them, plus the 401 password box. Webflow POSTed to its own
   endpoint and swapped the success block in itself; main.js does the swap
   and nothing leaves the page. */
[hidden] {
  display: none !important;
}

/* ======================================================================
   The custom checkbox
   ======================================================================

   Webflow draws a checkbox twice: the real `<input type="checkbox">` is
   pushed behind the layout with an inline `position: absolute; z-index: -1`
   -- so it stays focusable and stays in the accessibility tree -- and a
   `<div class="checkbox-input-custom">` in front of it is what anyone
   actually sees. The runtime then mirrored the input's state onto that div
   as `.w--redirected-checked` and `.w--redirected-focus-visible`, which
   build_css renames to `.is-checked` and `.is-focus-visible`.

   NOTHING WRITES THOSE NOW, and the design sheet still styles them: the tick
   and the focus ring were both dead. There is no need for a script, because
   the input is the proxy's NEXT SIBLING and `:has()` reads forwards -- the
   browser owns the state and the CSS just asks it.

   Two of these ship: "Remember me" on sign-in and sign-up, and "Billing
   address is the same as shipping" on the checkout.

   The tick is inlined as a data URI. Webflow served it from its own CDN
   through the rule this build drops, so localize_cdn no longer has anything
   to download it from -- and 167 bytes of SVG is cheaper inline than as a
   request. The blue is Webflow's own, which is what the published site
   shows: the design never restyled a state its own preview never entered. */
.checkbox-input-custom:has(+ input:checked) {
  background-color: #3898ec;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2013%2011'%3E%3Cpath%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-miterlimit='10'%20d='M11%202L5.5%208.5%202%205'/%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-color: #3898ec;
}

.checkbox-input-custom:has(+ input:focus-visible) {
  box-shadow: 0 0 3px 1px #3898ec;
}

/* ======================================================================
   The cart
   ======================================================================

   A localStorage basket (`shieldifyvpn:cart`) behind the export's own
   Ecommerce markup: every element keeps its `.wf-commerce-*` class and
   therefore its layout, and only the hook it hangs on has changed. The
   drawer's `display: none` was the runtime's inline rest state, which
   clean_style strips -- so the closed state is this pair of rules. */
.cart-modal {
  display: none;
}

.cart-modal.is-open {
  display: flex;
}

/* THE FORM IS CLOSED UNTIL THERE IS SOMETHING IN IT.
   The export hid it with an inline `display: none` that the runtime removed
   once it had items; clean_style strips that inline style, and the design's
   own `display: flex` then showed the subtotal and the Continue to Checkout
   button on top of the "No items found." message in an EMPTY cart -- on
   every page of the site. main.js writes `.is-filled` when the basket has a
   line in it, and that is the only thing that opens it. */
.cart-form {
  display: none;
}

.cart-form.is-filled {
  display: flex;
}

.cart-empty.is-hidden {
  display: none;
}

.remove-button {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* ======================================================================
   Reduced motion
   ======================================================================

   The four reveal families, the marquees, the counters and the four content
   animations each cancel themselves where they are declared -- those are the
   ones that move a whole block or loop for ever. What is left is this
   sheet's TRANSITIONS: the label rolls, the cover zooms, the FAQ's height
   collapse, the dropdown's rise and the hamburger's fold.

   None of them is large or unprompted, but all of them are motion a visitor
   has asked not to see, and the states they animate are all still reachable
   without the animation -- so they are made instant rather than removed. The
   design's own two transitions (the top banner's link roll and `.button-03`)
   are included for the same reason. */
@media (prefers-reduced-motion: reduce) {
  .button-text-wrap,
  .button-02,
  .button-02-bg,
  .social-icon,
  .view-link-text,
  .fit-cover,
  .view-link,
  .answer-wrap,
  .faq-arrow,
  .servers-arrow-group,
  .dropdown-arrow,
  .nav-dropdown-toggle .nav-dropdown-text,
  .nav-dropdown-list-wrap,
  .page-inner-body,
  .statistics-number-box,
  .banner-link-text,
  .button-03-text-wrap {
    transition: none;
  }

  .burger-bar {
    animation: none !important;
  }
}

/* ======================================================================
   4b. The four content animations -- geometry, mattes and playback
   ======================================================================

   The home page's globe, padlock and two dashboard cards were four Lottie
   files the Webflow runtime re-rendered sixty times a second. build_lottie.py
   transcribes them: the PNG layers ship as real images inside an <svg>, the
   layer transforms become the generated @keyframes in section 5 below, and
   everything that is NOT a layer transform is written here.

   That leaves four kinds of thing:

     * the playback envelope -- each animation's own duration, taken from its
       frame count over its frame rate, and whether it loops. Two do (the
       globe and the padlock); the two dashboard cards carry `data-loop="0"`
       in the export and play once, coming to rest on their last frame.
     * the alpha mattes. Lottie mattes one layer with the alpha of the layer
       above it, and all four here are simple shapes: two rectangles (which
       are a `<clipPath>` and a `clip-path: inset()`) and two strokes over a
       gradient image (which is one stroked path, with the gradient applied
       directly rather than matted through).
     * the six placements of the globe's travelling arc, which differ only in
       position, rotation, mirroring and start time.
     * `prefers-reduced-motion`, which none of this had.

   Two details worth knowing before editing anything below:

     * `translate`, `rotate` and `scale` are used as INDEPENDENT properties
       rather than as one `transform`. Several layers animate position and
       scale on different keyframe schedules and a single `transform` list
       can only carry one. Never collapse them.
     * CSS applies them in the order translate, rotate, scale -- which is
       Lottie's own order, and is why nothing here needs its transform
       rewritten. An earlier conversion in this series clipped every button
       arrow to 46% of itself by composing a rotate and a translate the other
       way round. */

/* ---- the four players ------------------------------------------------
   Each <svg> replaces a `<div data-animation-type="lottie">` and keeps that
   div's own design classes, so `.security-v2-image`'s max-width, the hero
   wrap's border and the performance card's radius all still apply. What the
   div had no size of its own for, the viewBox now supplies. */
.lottie {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* THE ANIMATIONS WAIT UNTIL THE CARD IS ON SCREEN, and that is not a
   nicety. Webflow's player defers `autoplay` while the element is offscreen
   (`_isOffscreen` -> `_pendingAutoplay`); a CSS animation has no such idea
   and starts at first layout. The two cards that play ONCE therefore ran
   their whole eight seconds while nobody was looking and came to rest on
   their last frame -- which for the threat card is an empty progress bar and
   a counter back at its first digit, i.e. a card that looks broken.

   main.js adds `.is-playing` on the same IntersectionObserver every reveal
   uses. `animation-play-state` does not inherit, so it is set on the
   descendants, which are the elements that carry the animations. */
.lottie * {
  animation-duration: inherit;
  animation-timing-function: linear;
  animation-iteration-count: inherit;
  animation-fill-mode: both;
  animation-play-state: paused;
}

:where(html:not(.js)) .lottie *,
.lottie.is-playing * {
  animation-play-state: running;
}

/* 137, 198, 482 and 283 frames, all at 60fps. The two cards do not loop. */
.lottie-earth  { animation-duration: 2.2833s; animation-iteration-count: infinite; }
.lottie-lock   { animation-duration: 3.3s;    animation-iteration-count: infinite; }
.lottie-threat { animation-duration: 8.0333s; animation-iteration-count: 1; }
.lottie-graph  { animation-duration: 4.7167s; animation-iteration-count: 1; }

/* ---- the globe's travelling arc -------------------------------------
   In the file this is a precomp: a three-point bezier with a trim-path
   filter, used as an alpha matte over `fwae.png` -- a 316x232 image whose
   colour is a flat #05744d and whose ALPHA falls from 0.97 on the left to
   0.01 on the right. Matting a flat colour through a stroke is the same
   picture as stroking with that colour, so the two layers collapse into one
   `<path>` with a gradient stroke.

   The trim animates start 100 -> 0 over frames 0-48.6 and then end 100 -> 0
   over frames 56.7-105.4: the arc appears at its far end, grows back to its
   start, holds, and then retracts from the far end. With a dash pattern that
   is `visible-length, 2 x path-length`, showing the run from s to e is
   `stroke-dasharray: (e-s)L` with `stroke-dashoffset: -sL`, which is what the
   two keyframe blocks below animate. The path is 263 units long. */
.arc-line {
  fill: none;
  stroke: url(#earth-arc-fade);
  stroke-width: 1;
  stroke-dasharray: 0 526;
  stroke-dashoffset: -263;
  animation-name: earth-arc-draw, earth-arc-sweep;
}@keyframes earth-arc-draw {

  0% { stroke-dasharray: 0 526; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  35.501% { stroke-dasharray: 263 526; }
  41.418% { stroke-dasharray: 263 526; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  76.919% { stroke-dasharray: 0 526; }
  100% { stroke-dasharray: 0 526; }}
@keyframes earth-arc-sweep {

  0% { stroke-dashoffset: -263px; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  35.501% { stroke-dashoffset: 0px; }
  100% { stroke-dashoffset: 0px; }}


/* The two dots that light up at the ends of the pass. */
.arc-dot {
  transform-origin: 35px 35px;
  scale: 0 0;
}

.arc-dot.dot-a {
  translate: 360.75px 311.5px;
  animation-name: earth-dot-a;
}

.arc-dot.dot-b {
  translate: 131px 330.75px;
  animation-name: earth-dot-b;
}@keyframes earth-dot-a {

  0% { scale: 0 0; animation-timing-function: linear; }
  2.19% { scale: 0 0; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  15.136% { scale: 0.5 0.5; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  44.526% { scale: 0.5 0.5; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  57.471% { scale: 0 0; }
  100% { scale: 0 0; }}
@keyframes earth-dot-b {

  0% { scale: 0 0; animation-timing-function: linear; }
  19.708% { scale: 0 0; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  32.655% { scale: 0.5 0.5; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  62.045% { scale: 0.5 0.5; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  74.989% { scale: 0 0; }
  100% { scale: 0 0; }}


/* The six instances. Each is the same arc under a different transform, and
   each starts at its own point in the 137-frame loop -- expressed as a
   NEGATIVE `animation-delay` of `((-st) mod 137) / 60` seconds so that every
   instance is already mid-cycle on the first frame, which is what makes the
   pair that straddles the wrap (arc-3 and arc-4, `st` -61 and 78) read as
   one continuous pass rather than two.

   `animation-delay` does not inherit, so it is set on the arc and its two
   dots rather than on the group that places them. */
.earth-arc {
  transform-origin: 304.5px 279.5px;
}

.earth-arc.arc-1 { translate: -461.5px -234px; }
.earth-arc.arc-2 { translate: -47.5px -361px; rotate: 40deg; scale: 2.02; }
.earth-arc.arc-3 { translate: -101.5px -98px; rotate: 230deg; scale: 2.02 -2.02; }
.earth-arc.arc-4 { translate: -101.5px -98px; rotate: 230deg; scale: 2.02 -2.02; }
.earth-arc.arc-5 { translate: -356.5px -333px; rotate: -49deg; scale: -1.475 1.475; }
.earth-arc.arc-6 { translate: -309.5px -180px; rotate: -49deg; scale: -1.475 1.475; }

.earth-arc.arc-1 * { animation-delay: 0s; }
.earth-arc.arc-2 * { animation-delay: -2.0833s; }
.earth-arc.arc-3 * { animation-delay: -1.0167s; }
.earth-arc.arc-4 * { animation-delay: -0.9833s; }
.earth-arc.arc-5 * { animation-delay: -2.0167s; }
.earth-arc.arc-6 * { animation-delay: -1.6667s; }

/* ---- the threat card's loading bar ----------------------------------
   Two layers in the file: a straight 254-unit stroke with a round cap, used
   as an alpha matte over `track for load.png` -- a 257x43 image that is a
   flat left-to-right ramp from #154735 to #258d68. Same collapse as the arc:
   one line, stroked with that ramp.

   Its trim runs start 100 -> 0 over frames 0-193 (the bar fills), holds to
   427, and returns to 100 by 481 (it empties again). With the end fixed at
   100, `stroke-dashoffset` alone carries it.

   THE LINE RUNS RIGHT TO LEFT, which is the source path's own direction and
   the whole reason the bar fills from the left. A trim shows the run between
   its start and end percentages: with the end pinned at 100%, the visible
   part is always the TAIL of the path, so reversing the path reverses the
   bar. Drawn left-to-right it filled from the right-hand end, which is what
   the first build shipped. */
.threat-bar {
  fill: none;
  stroke: url(#threat-bar-fade);
  stroke-width: 5.1;
  stroke-linecap: round;
  stroke-dasharray: 266.125;
  stroke-dashoffset: -266.125;
  animation-name: threat-bar-fill;
}@keyframes threat-bar-fill {

  0% { stroke-dashoffset: -266.125px; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  40.041% { stroke-dashoffset: 0px; animation-timing-function: linear; }
  88.59% { stroke-dashoffset: 0px; animation-timing-function: cubic-bezier(1, 0, 0.46, 1); }
  99.793% { stroke-dashoffset: -266.125px; }
  100% { stroke-dashoffset: -266.125px; }}


/* ---- the chart card's crosshair -------------------------------------
   `graph-curve` has two masks. The one on the chart image is a rectangle
   larger than the image on every side -- it masks nothing, and is not
   reproduced. The one on the vertical crosshair is a box that grows from
   42x24.75 to the whole 70x420 layer and shrinks back, which is a
   `clip-path: inset()`: the same four numbers, measured from the other side.

   `clip-path` is applied in the element's own coordinate space, BEFORE its
   transform -- which is also where a Lottie mask lives, so the numbers
   transfer unchanged even though the layer is scaled to half size. */
.graph-line {
  clip-path: inset(88px 16.25px 307.25px 11.75px);
  /* animation-name is emitted by build_lottie, which names this keyframe
     block alongside the layer transform -- see HAND_ANIMATIONS there. */
}@keyframes graph-line-reveal {

  0% { clip-path: inset(88px 16.25px 307.25px 11.75px); animation-timing-function: linear; }
  29.329% { clip-path: inset(88px 16.25px 307.25px 11.75px); animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  35.336% { clip-path: inset(0px 0px 0px 0px); animation-timing-function: linear; }
  83.039% { clip-path: inset(0px 0px 0px 0px); animation-timing-function: cubic-bezier(1, 0, 0.46, 1); }
  89.046% { clip-path: inset(88px 16.25px 307.25px 11.75px); }
  100% { clip-path: inset(88px 16.25px 307.25px 11.75px); }}


/* ---- reduced motion --------------------------------------------------
   A visitor who asks for less motion gets the picture without it -- but NOT
   by turning the animations off. `animation: none` rests every layer at its
   own frame 0, and frame 0 of these four files is not a picture anyone would
   draw on purpose: the threat card's progress bar is empty, the chart's
   crosshair and tooltip are scaled to nothing, its cursor is parked 26px
   past the right edge of the viewBox, the padlock is open and the globe has
   no routes on it at all. Two of the four cards would read as broken.

   Each animation is PAUSED at a chosen moment instead, expressed as a
   negative `animation-delay`: the browser renders the frame at that offset
   from the real keyframes and holds it. The moments are the long middle hold
   every one of these files is built around -- the state the card sits in for
   half its length, and the one still frame it is really about.

     globe    38%   the six routes drawn, both endpoint dots lit
     padlock  50%   shut, shackle down, shield at full size
     threat   65%   bar full, counter part-way up its digits
     chart    60%   crosshair open, tooltip up, cursor on the curve

   `!important` on the delay is what makes this work for the globe, whose six
   arc instances each carry a delay of their own; overriding all six to the
   same moment is the point, because a still wants every route drawn. */
@media (prefers-reduced-motion: reduce) {
  .lottie * {
    animation-play-state: paused !important;
  }

  .lottie-earth  * { animation-delay: -0.8677s !important; }
  .lottie-lock   * { animation-delay: -1.65s !important; }
  .lottie-threat * { animation-delay: -5.2217s !important; }
  .lottie-graph  * { animation-delay: -2.83s !important; }
}

/* ======================================================================
   5. The four content animations
   ======================================================================

   Generated by build_lottie.py from the export's own Lottie files -- see
   that module for how a Lottie layer's `translate(p) . rotate(r) . scale(s)`
   about its anchor becomes `transform-origin` plus the three independent CSS
   transform properties, and why they are kept independent rather than merged
   into one `transform` list.

   Every duration below is the source file's own frame count over its own
   frame rate. The static geometry, the two gradients, the four mattes and
   the six placements of the globe's arc are in lottie.hand.css, which is
   emitted just above this. */


/* ---- stroke-earth: 137 frames at 60fps = 2.283s, looping ---- */
/* layer 1: NULL */
.earth-orbit {
  transform-origin: 50px 50px;
  translate: 465.5px 238px;
}

/* layer 11: base earth.png */
.earth-globe {
  transform-origin: 609px 559px;
  translate: -766px -513.5px;
  scale: 0.5 0.5;
}

/* ---- lock: 198 frames at 60fps = 3.300s, looping ---- */
/* layer 1: NULL */
.lock-body-group {
  transform-origin: 50px 50px;
  translate: 225px 140px;
  animation-name: lock-body-group-move, lock-body-group-zoom;
}

/* layer 2: Subtract.png */
.lock-body {
  transform-origin: 101.5px 116.5px;
  translate: -51.5px -38px;
  scale: 0.5 0.5;
}

/* layer 3: Vector.png */
.lock-shackle {
  transform-origin: 52px 73px;
  translate: -2px -78px;
  scale: 0.5 0.5;
  animation-name: lock-shackle-move;
}

/* layer 4: shield.png */
.lock-shield {
  transform-origin: 233px 269px;
  translate: 42px -87px;
  scale: 0.5 0.5;
  animation-name: lock-shield-zoom;
}

/* layer 5: lock bg.png */
.lock-glow {
  transform-origin: 558px 453px;
  translate: -283px -271px;
  scale: 0.5 0.5;
}@keyframes lock-body-group-move {

  0% { translate: 225px 140px; animation-timing-function: linear; }
  10.101% { translate: 225px 140px; animation-timing-function: cubic-bezier(0.167, 0, 0.833, 1); }
  13.131% { translate: 225px 143px; animation-timing-function: cubic-bezier(0.167, 0, 0.833, 1); }
  15.657% { translate: 225px 139px; animation-timing-function: cubic-bezier(0.167, 0, 0.833, 1); }
  20.707% { translate: 225px 140px; }
  100% { translate: 225px 140px; }}
@keyframes lock-body-group-zoom {

  0% { scale: 1 1; animation-timing-function: linear; }
  9.091% { scale: 1 1; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  15.152% { scale: 1.199 1.199; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  79.798% { scale: 1.199 1.199; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  99.495% { scale: 1 1; }
  100% { scale: 1 1; }}
@keyframes lock-shackle-move {

  0% { translate: -2px -78px; animation-timing-function: linear; }
  6.061% { translate: -2px -78px; animation-timing-function: cubic-bezier(0.41, 0, 0, 1); }
  20.202% { translate: -2px -51.5px; animation-timing-function: cubic-bezier(0.167, 0.167, 0, 0); }
  79.798% { translate: -2px -51.5px; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  99.495% { translate: -2px -78px; }
  100% { translate: -2px -78px; }}
@keyframes lock-shield-zoom {

  0% { scale: 0.5 0.5; animation-timing-function: cubic-bezier(0.67, 0, 0.34, 1); }
  22.727% { scale: 0.591 0.591; animation-timing-function: cubic-bezier(0.67, 0, 0.38, 1); }
  76.768% { scale: 0.591 0.591; animation-timing-function: cubic-bezier(0.65, 0, 0.38, 1); }
  99.495% { scale: 0.5 0.5; }
  100% { scale: 0.5 0.5; }}


/* ---- threat-blocker: 482 frames at 60fps = 8.033s, once ---- */
/* layer 2: 43 44 45 46 47.png */
.threat-count {
  transform-origin: 16px 78.5px;
  translate: 352.25px 122px;
  scale: 0.5 0.5;
  animation-name: threat-count-move;
}

/* layer 3: 1,247.png */
.threat-total {
  transform-origin: 32px 13px;
  translate: 327.25px 154.125px;
  scale: 0.5 0.5;
}

/* layer 6: live indicator.png */
.threat-live-b {
  transform-origin: 35px 35px;
  translate: -3.25px 131px;
  scale: 0.5 0.5;
  opacity: 0;
  animation-name: threat-live-b-fade;
}

/* layer 7: live indicator.png */
.threat-live-a {
  transform-origin: 35px 35px;
  translate: -3.25px 131px;
  scale: 0.5 0.5;
  opacity: 0;
  animation-name: threat-live-a-fade;
}

/* layer 9: threast bg.png */
.threat-card {
  transform-origin: 405px 204px;
  translate: -202.5px -102px;
  scale: 0.5 0.5;
}@keyframes threat-count-move {

  0% { translate: 352.25px 122px; animation-timing-function: linear; }
  4.357% { translate: 352.25px 122px; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  10.581% { translate: 352.25px 104.427px; animation-timing-function: cubic-bezier(0.54, 0.54, 0, 0); }
  29.253% { translate: 352.25px 104.427px; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  35.477% { translate: 352.25px 88.282px; animation-timing-function: cubic-bezier(0.54, 0.54, 0, 0); }
  53.112% { translate: 352.25px 88.282px; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  59.336% { translate: 352.25px 70.591px; animation-timing-function: cubic-bezier(0.54, 0.54, 0, 0); }
  74.896% { translate: 352.25px 70.591px; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  81.12% { translate: 352.25px 54.091px; animation-timing-function: cubic-bezier(0.167, 0.167, 0, 0); }
  86.515% { translate: 352.25px 54.091px; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  99.793% { translate: 352.25px 122px; }
  100% { translate: 352.25px 122px; }}
@keyframes threat-live-b-fade {

  0% { opacity: 0; animation-timing-function: linear; }
  50% { opacity: 0; animation-timing-function: cubic-bezier(0.167, 0.167, 0.833, 0.833); }
  51.729% { opacity: 1; animation-timing-function: cubic-bezier(0.167, 0.167, 0.833, 0.833); }
  60.373% { opacity: 0; animation-timing-function: cubic-bezier(0.167, 0.167, 0.833, 0.833); }
  63.485% { opacity: 0; animation-timing-function: cubic-bezier(0.167, 0.167, 0.833, 0.833); }
  65.215% { opacity: 1; animation-timing-function: cubic-bezier(0.167, 0.167, 0.833, 0.833); }
  73.859% { opacity: 0; animation-timing-function: cubic-bezier(0.167, 0.167, 0.833, 0.833); }
  76.141% { opacity: 0; animation-timing-function: cubic-bezier(0.167, 0.167, 0.833, 0.833); }
  77.87% { opacity: 1; animation-timing-function: cubic-bezier(0.167, 0.167, 0.833, 0.833); }
  86.515% { opacity: 0; animation-timing-function: cubic-bezier(0.167, 0.167, 0.833, 0.833); }
  89.627% { opacity: 0; animation-timing-function: cubic-bezier(0.167, 0.167, 0.833, 0.833); }
  91.356% { opacity: 1; animation-timing-function: cubic-bezier(0.167, 0.167, 0.833, 0.833); }
  100% { opacity: 0; }}
@keyframes threat-live-a-fade {

  0% { opacity: 0; animation-timing-function: cubic-bezier(0.167, 0.167, 0.833, 0.833); }
  1.729% { opacity: 1; animation-timing-function: cubic-bezier(0.167, 0.167, 0.833, 0.833); }
  10.373% { opacity: 0; animation-timing-function: cubic-bezier(0.167, 0.167, 0.833, 0.833); }
  13.485% { opacity: 0; animation-timing-function: cubic-bezier(0.167, 0.167, 0.833, 0.833); }
  15.215% { opacity: 1; animation-timing-function: cubic-bezier(0.167, 0.167, 0.833, 0.833); }
  23.859% { opacity: 0; animation-timing-function: cubic-bezier(0.167, 0.167, 0.833, 0.833); }
  26.141% { opacity: 0; animation-timing-function: cubic-bezier(0.167, 0.167, 0.833, 0.833); }
  27.87% { opacity: 1; animation-timing-function: cubic-bezier(0.167, 0.167, 0.833, 0.833); }
  36.515% { opacity: 0; animation-timing-function: cubic-bezier(0.167, 0.167, 0.833, 0.833); }
  39.627% { opacity: 0; animation-timing-function: cubic-bezier(0.167, 0.167, 0.833, 0.833); }
  41.356% { opacity: 1; animation-timing-function: cubic-bezier(0.167, 0.167, 0.833, 0.833); }
  50% { opacity: 0; }
  100% { opacity: 0; }}


/* ---- graph-curve: 283 frames at 60fps = 4.717s, once ---- */
/* layer 1: Polygon 1.png */
.graph-cursor {
  transform-origin: 20px 21px;
  translate: 432px 130.5px;
  scale: 0.5 0.5;
  animation-name: graph-cursor-move, graph-cursor-zoom;
}

/* layer 2: Frame 2147258624.png */
.graph-tooltip {
  transform-origin: 74.5px 47.5px;
  translate: 172.25px 31.75px;
  scale: 0.5 0.5;
  opacity: 0;
  animation-name: graph-tooltip-move, graph-tooltip-fade;
}

/* layer 3: Group 2147258165.png */
.graph-line {
  transform-origin: 35px 102px;
  translate: 168px -51.5px;
  scale: 0 0;
  animation-name: graph-line-reveal, graph-line-zoom;
}

/* layer 4: Group 2147258164.png */
.graph-chart {
  transform-origin: 368px 188.5px;
  translate: -165px -72px;
  scale: 0.5 0.5;
}@keyframes graph-cursor-move {

  0% { translate: 432px 130.5px; animation-timing-function: cubic-bezier(0.56, 0, 0.1, 1); }
  27.208% { translate: 189.5px 39px; animation-timing-function: cubic-bezier(0.167, 0.167, 0.1, 0.1); }
  71.731% { translate: 189.5px 39px; animation-timing-function: cubic-bezier(0.167, 0, 0.1, 1); }
  99.647% { translate: -178px 116px; }
  100% { translate: -178px 116px; }}
@keyframes graph-cursor-zoom {

  0% { scale: 0.5 0.5; animation-timing-function: linear; }
  27.562% { scale: 0.5 0.5; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  29.24% { scale: 0.394 0.394; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  31.758% { scale: 0.566 0.566; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  35.336% { scale: 0.5 0.5; }
  100% { scale: 0.5 0.5; }}
@keyframes graph-tooltip-move {

  0% { translate: 172.25px 31.75px; animation-timing-function: linear; }
  29.682% { translate: 172.25px 31.75px; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  42.756% { translate: 172.25px 17.75px; animation-timing-function: cubic-bezier(0.54, 0.54, 0.52, 0.52); }
  76.325% { translate: 172.25px 17.75px; animation-timing-function: cubic-bezier(1, 0, 0.52, 1); }
  89.399% { translate: 172.25px 31.75px; }
  100% { translate: 172.25px 31.75px; }}
@keyframes graph-tooltip-fade {

  0% { opacity: 0; animation-timing-function: linear; }
  29.682% { opacity: 0; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  42.756% { opacity: 1; animation-timing-function: cubic-bezier(0.54, 0, 0.52, 1); }
  76.325% { opacity: 1; animation-timing-function: cubic-bezier(1, 0, 0.52, 1); }
  89.399% { opacity: 0; }
  100% { opacity: 0; }}
@keyframes graph-line-zoom {

  0% { scale: 0 0; animation-timing-function: linear; }
  27.562% { scale: 0 0; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  29.24% { scale: 0.394 0.394; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  31.758% { scale: 0.566 0.566; animation-timing-function: cubic-bezier(0.54, 0, 0, 1); }
  35.336% { scale: 0.5 0.5; animation-timing-function: cubic-bezier(0.167, 0, 0, 1); }
  81.272% { scale: 0.5 0.5; animation-timing-function: cubic-bezier(1, 0, 0.46, 1); }
  84.85% { scale: 0.566 0.566; animation-timing-function: cubic-bezier(1, 0, 0.46, 1); }
  87.367% { scale: 0.394 0.394; animation-timing-function: cubic-bezier(1, 0, 0.46, 1); }
  89.046% { scale: 0 0; }
  100% { scale: 0 0; }}