@import url(https://fonts.googleapis.com/css2?family=Work+Sans:wght@600&display=swap);
@font-face {
  font-family: 'Sofia-Pro-Regular';
  src: url(assets/fonts/Sofia-Pro-Regular.woff) format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sofia-Pro-Semi-Bold';
  src: url(assets/fonts/Sofia-Pro-Semi-Bold.woff) format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sofia-Pro-Bold';
  src: url(assets/fonts/Sofia-Pro-Bold.woff) format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Sofia-Pro-Regular', sans-serif;
}

p {
  font-size: 15px;
  line-height: 28px;
  margin-bottom: 20px;
}

nav ul a {
  font-size: 12px;
  font-family: 'Work Sans', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Sofia-Pro-Bold', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h2 {
  font-size: 42px;
  line-height: 50px;
}

h3 {
  font-size: 20px;
}

.ht-sub {
  font-size: 12px;
  padding: 3px 15px;
  color: #0276fd;
  display: inline-block;
  font-family: 'Work Sans', sans-serif;
  background-color: rgba(90, 73, 248, 0.1);
}

.ht-sub-two {
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
  padding-left: 60px;
}

.ht-sub-two::before {
  background: linear-gradient(to right, #0276fd, #0276fd);
  width: 50px;
  height: 3px;
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.ht-icon {
  font-size: 60px;
  color: #0276fd;
}

.btn {
  border-radius: 0px;
}

.ht-map {
  background-image: url(assets/images/HTMap.png);
  background-repeat: no-repeat;
  background-position: center;
}

.ht-step {
  display: block;
  font-size: 100px;
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.1;
}

.ht-slide-1 {
  background-image: url(assets/images/HTSlide1.jpg);
  background-size: cover;
}

.ht-slide-2 {
  background-image: url(assets/images/HTSlide2.jpg);
  background-size: cover;
}

.ht-slide-3 {
  background-image: url(assets/images/HTSlide3.jpg);
  background-size: cover;
}

.ht-innovative {
  background-image: url(assets/images/HTInnovative.jpeg);
  background-position: top center;
  background-repeat: no-repeat;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.ht-right {
  border-right: 1px solid #eeeeee;
}

.ht-overlay {
  background-color: rgba(5, 20, 65, 0.9);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

@media (min-width: 319px) and (max-width: 490px) {
  h2 {
    font-size: 28px;
    line-height: 36px;
  }
}

@font-face {
  font-family: 'business-icon';
  src: url(assets/fonts/business-icon.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.dl {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'business-icon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dl-alert:before {
  content: '\e900';
}
.dl-analysis:before {
  content: '\e901';
}
.dl-analysis-1:before {
  content: '\e902';
}
.dl-award:before {
  content: '\e903';
}
.dl-bank:before {
  content: '\e904';
}
.dl-briefcase:before {
  content: '\e905';
}
.dl-calculator:before {
  content: '\e906';
}
.dl-calendar:before {
  content: '\e907';
}
.dl-chess:before {
  content: '\e908';
}
.dl-clothes:before {
  content: '\e909';
}
.dl-cloud:before {
  content: '\e90a';
}
.dl-compass:before {
  content: '\e90b';
}
.dl-credit-card:before {
  content: '\e90c';
}
.dl-dollar:before {
  content: '\e90d';
}
.dl-exchange:before {
  content: '\e90e';
}
.dl-folder:before {
  content: '\e90f';
}
.dl-global:before {
  content: '\e910';
}
.dl-graph:before {
  content: '\e911';
}
.dl-growth:before {
  content: '\e912';
}
.dl-handshake:before {
  content: '\e913';
}
.dl-home:before {
  content: '\e914';
}
.dl-idea:before {
  content: '\e915';
}
.dl-idea-1:before {
  content: '\e916';
}
.dl-location:before {
  content: '\e917';
}
.dl-mobile:before {
  content: '\e918';
}
.dl-money:before {
  content: '\e919';
}
.dl-money-1:before {
  content: '\e91a';
}
.dl-money-2:before {
  content: '\e91b';
}
.dl-news:before {
  content: '\e91c';
}
.dl-notebook:before {
  content: '\e91d';
}
.dl-presentation:before {
  content: '\e91e';
}
.dl-profit:before {
  content: '\e91f';
}
.dl-puzzle:before {
  content: '\e920';
}
.dl-recruit:before {
  content: '\e921';
}
.dl-resume:before {
  content: '\e922';
}
.dl-savings:before {
  content: '\e923';
}
.dl-search:before {
  content: '\e924';
}
.dl-startup:before {
  content: '\e925';
}
.dl-startup-1:before {
  content: '\e926';
}
.dl-stats:before {
  content: '\e927';
}
.dl-strategy:before {
  content: '\e928';
}
.dl-success:before {
  content: '\e929';
}
.dl-target:before {
  content: '\e92a';
}
.dl-team:before {
  content: '\e92b';
}
.dl-think:before {
  content: '\e92c';
}
.dl-time:before {
  content: '\e92d';
}
.dl-timer:before {
  content: '\e92e';
}
.dl-trophy:before {
  content: '\e92f';
}
.dl-wallet:before {
  content: '\e930';
}
.dl-winner:before {
  content: '\e931';
}

/* ─── ht mobile menu (skin-local drawer — no M.Sidenav) ──────────────────
   Navy panel + blue rule + ghost numbers: echoes .ht-overlay / .ht-step /
   .ht-sub-two. Square corners throughout, per the skin's .btn reset. */

.ht-mmenu-trigger {
  cursor: pointer;
}

.ht-mmenu {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1300;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0.35s;
}

.ht-mmenu.ht-mmenu-open {
  visibility: visible;
  pointer-events: auto;
}

.ht-mmenu-backdrop {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(5, 20, 65, 0.7);
  opacity: 0;
  transition: opacity 0.35s;
}

.ht-mmenu-open .ht-mmenu-backdrop {
  opacity: 1;
}

.ht-mmenu-drawer {
  position: absolute;
  right: 0;
  top: 0;
  width: 320px;
  max-width: 85vw;
  height: 100%;
  overflow-y: auto;
  padding: 28px 30px 36px;
  background-color: #051441;
  border-left: 3px solid #0276fd;
  transform: translateX(105%);
  transition: transform 0.35s ease;
}

.ht-mmenu-open .ht-mmenu-drawer {
  transform: translateX(0);
}

.ht-mmenu-top {
  /* single-row: brand + close button (genuine flex case) */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ht-mmenu-brand {
  font-family: 'Sofia-Pro-Bold', sans-serif;
  font-size: 20px;
  color: #ffffff;
}

.ht-mmenu-close {
  color: #ffffff;
  cursor: pointer;
  line-height: 1;
}

.ht-mmenu-close:hover {
  color: #0276fd;
}

.ht-mmenu-kicker {
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #4ea3ff;
  position: relative;
  padding-left: 60px;
  margin: 34px 0 6px;
}

.ht-mmenu-kicker::before {
  background: linear-gradient(to right, #0276fd, #0276fd);
  width: 50px;
  height: 3px;
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Top margin separates the list from the name/close row above it; the bottom
   one holds the list off the language picker below. Both drawers stack the
   same three blocks (top → links → translator), so this spacing is the one
   place that sets the rhythm for each. */
.ht-mmenu-links {
  margin: 24px 0 48px;
}

.ht-mmenu-links li {
  border-bottom: 1px solid rgba(165, 189, 217, 0.15);
}

/* Flex row so the material icon sits centred against the label rather than on
   its baseline, and one `gap` owns the icon-to-text spacing for every row —
   the user drawer's links and its theme toggle alike. Text-only rows (the
   guest drawer) are unaffected: no icon, nothing to gap. */
.ht-mmenu-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 0;
  color: #ffffff;
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.2s, padding-left 0.2s;
}

.ht-mmenu-links a:hover {
  color: #4ea3ff;
  padding-left: 8px;
}

.ht-mmenu-num {
  font-family: 'Sofia-Pro-Bold', sans-serif;
  font-size: 13px;
  color: #ffffff;
  opacity: 0.25;
  margin-right: 14px;
}

/* ─── ht theme switch ────────────────────────────────────────────────────
   Navbar: square blue-ruled icon button (the skin resets .btn to 0 radius,
   so the switch is square too). Drawer: a links row whose icon takes the
   ghost-number slot, in the blue the kicker already uses. */

.ht-theme-toggle > a {
  display: block;
  cursor: pointer;
}

/* The box lives on the glyph, not the link: an inline-block inside the
   navbar's own line box centres itself at both nav heights (56/64px) with
   no height maths. */
.ht-theme-toggle .material-icons {
  display: inline-block;
  width: 36px;
  height: 36px;
  font-size: 20px;
  line-height: 34px;
  text-align: center;
  /* vertical-align: middle sits on the baseline + half x-height, which lands
     the box 2px high in this nav's line box — the margin takes that back. */
  vertical-align: middle;
  margin-top: 2px;
  border: 1px solid var(--primary-border-colour);
  transition: color 0.2s, border-color 0.2s;
}

.ht-theme-toggle > a:hover .material-icons {
  color: #0276fd;
  border-color: #0276fd;
}

.ht-mmenu-theme > a {
  cursor: pointer;
}

.ht-mmenu-icon {
  font-size: 16px;
  color: #4ea3ff;
  margin-right: 14px;
  vertical-align: -3px;
}

/* ─── ht dashboard ───────────────────────────────────────────────────────
   The open / closed positions tabs, carrying the skin's Work Sans caps and
   the blue rule that .ht-sub-two and .ht-mmenu-kicker use — under the
   current tab rather than beside it. */

.ht-trades-tab {
  display: block;
  padding: 12px 0;
  color: var(--primary-font-colour);
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  border-bottom: 3px solid var(--border-colour);
  transition: color 0.2s, border-color 0.2s;
}

.ht-trades-tab:hover {
  color: #0276fd;
}

.ht-trades-tab-on {
  color: #0276fd;
  border-bottom-color: #0276fd;
}

.ht-trades-tab .material-icons {
  font-size: 18px;
  vertical-align: -4px;
  margin-right: 8px;
}

/* ─── ht language picker ─────────────────────────────────────────────────
   Closed: a row that matches an .ht-mmenu link. Open: the navy panel a shade
   lighter, capped and scrollable — 27 languages do not fit a drawer. */

.ht-lang {
  margin-bottom: 26px;
  border-bottom: 1px solid rgba(165, 189, 217, 0.15);
}

.ht-lang-trigger {
  display: block;
  padding: 15px 0;
  color: #ffffff;
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: color 0.2s;
}

.ht-lang-trigger:hover {
  color: #4ea3ff;
}

.ht-lang-current {
  padding-left: 12px;
}

.ht-lang-caret {
  float: right;
  font-size: 20px;
  transition: transform 0.25s;
}

.ht-lang-open .ht-lang-caret {
  transform: rotate(180deg);
}

.ht-lang-list {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.ht-lang-open .ht-lang-list {
  max-height: 240px;
  overflow-y: auto;
}

.ht-lang-list li {
  border-top: 1px solid rgba(165, 189, 217, 0.12);
}

.ht-lang-list a {
  display: block;
  padding: 11px 0 11px 14px;
  color: rgba(255, 255, 255, 0.75);
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: color 0.2s, padding-left 0.2s;
}

.ht-lang-list a:hover {
  color: #ffffff;
  padding-left: 20px;
}

.ht-lang-list .flag-icon {
  margin-right: 10px;
}

/* Where the page already is — the blue rule the kicker uses, upright. */
.ht-lang-on a {
  color: #4ea3ff;
  border-left: 3px solid #0276fd;
  padding-left: 11px;
}

.ht-mmenu-cta {
  display: block;
  text-align: center;
  padding: 15px 20px;
  background-color: #0276fd;
  color: #ffffff;
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 0px;
  transition: background-color 0.2s;
}

.ht-mmenu-cta:hover {
  background-color: #0261d1;
  color: #ffffff;
}

.ht-mmenu-note {
  color: rgba(165, 189, 217, 0.7);
  font-size: 13px;
  line-height: 22px;
  margin-top: 26px;
  margin-bottom: 0;
}

/* ─── ht page hero (contact + article) ───────────────────────────────────
   Navy strip carrying the .ht-map watermark, blue kicker chip on top. */

.ht-page-hero {
  background-color: #051441;
  padding: 90px 0 70px;
}

.ht-page-hero h1 {
  color: #ffffff;
  font-size: 42px;
  line-height: 52px;
  margin: 18px 0 10px;
}

.ht-page-hero p {
  color: #a5bdd9;
  max-width: 640px;
  margin-bottom: 0;
}

.ht-page-hero .ht-sub {
  color: #4ea3ff;
  background-color: rgba(2, 118, 253, 0.15);
}

/* ─── ht contact page ────────────────────────────────────────────────────── */

.ht-contact-side {
  position: relative;
  background-color: #051441;
  border-bottom: 3px solid #0276fd;
  padding: 45px 30px 35px;
  color: #a5bdd9;
}

.ht-contact-side .ht-step {
  color: #ffffff;
  left: 10px;
}

.ht-contact-side .ht-sub-two {
  color: #4ea3ff;
}

.ht-contact-side h3 {
  color: #ffffff;
  font-size: 24px;
}

.ht-contact-side a {
  color: #ffffff;
}

.ht-contact-side a:hover {
  color: #4ea3ff;
}

.ht-contact-line {
  /* single-row: icon next to text (genuine flex case) */
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.ht-contact-line .material-icons {
  color: #0276fd;
  font-size: 20px;
  margin-right: 10px;
}

.ht-contact-card {
  border-radius: 0px;
  border-top: 3px solid #0276fd;
  padding: 40px 45px;
  margin-top: 0;
}

.ht-contact-title {
  font-size: 32px;
  line-height: 40px;
  margin-top: 12px;
}

/* ─── ht article page ────────────────────────────────────────────────────── */

.ht-article-card {
  border-radius: 0px;
  border-top: 3px solid #0276fd;
  padding: 40px 45px;
}

.ht-article-body img,
.ht-article-body video {
  max-width: 100%;
}

/* ─── ht mobile ──────────────────────────────────────────────────────────── */

@media (max-width: 992px) {
  .ht-page-hero {
    padding: 60px 0 45px;
  }

  .ht-page-hero h1 {
    font-size: 30px;
    line-height: 38px;
  }

  .ht-page-hero p {
    max-width: none;
  }

  .ht-contact-side {
    margin-bottom: 30px;
  }

  .ht-contact-line {
    justify-content: center;
  }

  .ht-contact-card,
  .ht-article-card {
    padding: 30px 20px;
  }

  .ht-contact-title {
    font-size: 26px;
    line-height: 34px;
  }
}

/* dashboard nav burger — opens this skin's drawer (same one the guest
   chrome uses); it is an <a> with no href, so it needs the pointer */
.ht-menu-trigger {
  cursor: pointer;
}


/* ─── sticky footer ───────────────────────────────────────────────────────
   Keeps the footer on the bottom edge when a page is shorter than the screen.
   No flex or grid: the shell stays in normal block flow, so nothing inside
   becomes a flex item and margins go on collapsing as before. On a long page
   there is nothing to stick to and the footer just ends the content.

   Note: this stops working if an ancestor of the footer ever sets
   overflow: hidden/auto/scroll. */

.ht-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

.ht-shell > footer {
  position: sticky;
  top: 100vh;
}

/* The default app's face. Set on BODY, not on .ap — that class is only on the
   guest layout, so /user and /cp were falling back to Materialize's default
   and the three areas did not match. The app stylesheet is the last one the
   shells load, so this wins on order without needing !important. */
:root {
  --ap-font: 'Signika Negative', 'Helvetica Neue', Arial, sans-serif;
}

body {
  font-family: var(--ap-font);
}

/* SCOPING (CRITICAL): this stylesheet used to be a skin's own _css/ap.css, so
   it could style bare `body`/`h1`/`.btn`. It now lives in the DEFAULT tree and
   is imported by app/(guest)/_layout.js, which means it bundles for EVERY skin
   — an unscoped rule here repaints every other skin's buttons and headings.
   So the design-wide rules below are scoped to `.ap`, the wrapper the default
   guest chrome renders. A skin that ships its own (guest)/_layout.js never
   renders that wrapper, so it keeps its own typography and buttons. Everything
   else in this file is already `.ap-*` prefixed — keep it that way. */
.ap {
  font-size: 16px;
  font-family: var(--ap-font);
}

/* Materialize pins .btn to `height: 36px; line-height: 36px`, so vertical
   padding alone cannot make the button taller — with box-sizing: border-box it
   only shrinks the content box while the 36px line box still starts BELOW the
   top padding, dropping the label ~7.5px under centre. That read as too much
   padding on top. Releasing the fixed height and the 36px line-height lets the
   padding do what it was written to do and re-centres the label. */
.ap .btn {
  height: auto;
  line-height: 1.5;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 20px;
}

.ap .btn.btn-secondary {
  border-color: #334155;
}

/* ─── Language switcher ────────────────────────────────────────────────────
   Rendered from the footer but pinned to the viewport, matching the reference.
   Bottom-LEFT on purpose: bottom-right is where support/chat buttons live. */
.ap .ap-translator {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 900;
}

.ap .ap-translator-trigger {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border-colour);
  border-radius: 999px;
  background: var(--primary-background);
  color: var(--background-font-colour);
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.ap .ap-translator-trigger .material-icons {
  font-size: 18px;
}

/* Catches the click that closes the panel without dimming the page. */
.ap .ap-translator-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
}

.ap .ap-translator-list {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  z-index: 2;
  width: 220px;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--border-colour);
  border-radius: 14px;
  background: var(--primary-background);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.ap .ap-translator-list li {
  margin: 0;
}

.ap .ap-translator-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--background-font-colour);
  cursor: pointer;
}

.ap .ap-translator-list a:hover {
  background: var(--hover);
}

.ap .ap-translator-current {
  font-weight: 600;
  background: var(--hover);
}

/* ─── Nav brand ────────────────────────────────────────────────────────────
   An <img> in a Materialize nav sits on the text baseline of a 64px
   line-height, which parks a 36px logo well above centre — the markup used to
   correct that with an inline `top: -8px`, which still left it 21px high and
   clipping the top of the bar. Centring it properly needs no magic number. */
.ap nav .ap-nav-brand a {
  display: flex;
  align-items: center;
  height: 64px;
  margin-left: -10px; /* optical: pulls the mark back to the container edge */
}

.ap nav .ap-nav-brand img {
  display: block;
}

/* ─── Hero background video ────────────────────────────────────────────────
   The section keeps its own dark `bg bg-secondary` surface, so a failed or
   still-buffering video degrades to exactly what was there before rather than
   to a blank band. The video is painted over that, the overlay over the video,
   and the copy over the overlay. */
.ap .ap-hero {
  position: relative;
  overflow: hidden;
}

.ap .ap-hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  pointer-events: none; /* decoration — never eats a click or a scroll */
}

/* Without this the copy would have to survive whatever frame is behind it. */
.ap .ap-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(1, 1, 33, 0.55);
}

.ap .ap-hero-inner {
  position: relative; /* lifts the copy above the video + overlay */
}

/* ─── The nav sits ON the hero video ───────────────────────────────────────
   This nav is a normal in-flow element (no Materialize .navbar-fixed), so the
   hero begins BELOW it and .ap-hero's overflow:hidden clips the video short of
   the bar. Lifting the nav out of flow lets the hero start at y=0 and paint
   its video the full height, nav included.

   :has() keeps all of this to pages that actually have a hero — every other
   guest page keeps its normal in-flow, solid bar. */
.ap:has(.ap-hero) {
  position: relative; /* containing block for the nav below */
}

.ap:has(.ap-hero) nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3; /* over the hero's video AND its overlay */
}

/* The nav no longer occupies flow, so the hero owes its content that height. */
.ap:has(.ap-hero) .ap-hero {
  padding-top: 64px;
}

/* No scroll-toggle back to a solid bar: this nav is not sticky, so it simply
   scrolls away with the hero and never ends up over other content. */
.ap:has(.ap-hero) nav {
  background: transparent;
  box-shadow: none;
}

.ap h1 {
  font-size: 72px;
  font-weight: 600;
}

.ap h2 {
  font-size: 40px;
  font-weight: 600;
}

/* ─── ap mobile drawer menu (skin-local, no M.Sidenav) ──────────────────── */

.ap-menu-trigger {
  cursor: pointer;
}

.ap-menu-trigger .material-icons {
  font-size: 28px;
  vertical-align: middle;
}

.ap-drawer-root {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1200;
  pointer-events: none;
}

.ap-drawer-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(4, 6, 16, 0.62);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ap-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 86vw;
  padding: 26px 24px 30px;
  overflow-y: auto;
  background: #10152a; /* solid fallback when backdrop-filter unsupported */
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: -30px 0 70px rgba(4, 6, 16, 0.55);
  color: #e2e8f0;
  font-family: var(--ap-font);
  transform: translateX(102%);
  transition: transform 0.32s cubic-bezier(0.22, 0.8, 0.3, 1);
}

@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .ap-drawer {
    background: rgba(12, 15, 25, 0.8);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
  }
}

/* hairline indigo shine across the drawer top — same motif as the ap signin card */
.ap-drawer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, rgba(129, 140, 248, 0), rgba(129, 140, 248, 0.75), rgba(129, 140, 248, 0));
}

.ap-drawer-root.ap-open {
  pointer-events: auto;
}

.ap-drawer-root.ap-open .ap-drawer-overlay {
  opacity: 1;
}

.ap-drawer-root.ap-open .ap-drawer {
  transform: translateX(0);
}

.ap-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.ap-drawer-brand {
  display: flex;
  align-items: center;
}

.ap-drawer-brand img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  margin-right: 10px;
}

.ap-drawer-brand span {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #ffffff;
}

.ap-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  color: #a5b4fc;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.ap-drawer-close:hover {
  background: rgba(79, 70, 229, 0.32);
  color: #ffffff;
}

.ap-drawer-close .material-icons {
  font-size: 21px;
}

.ap-drawer-eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(165, 180, 252, 0.8);
}

.ap-drawer-links {
  margin: 0 0 24px;
}

.ap-drawer-links li {
  list-style: none;
}

.ap-drawer-links a {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  padding: 12px 14px;
  font-size: 15.5px;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.85);
  border: 1px solid transparent;
  border-radius: 13px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ap-drawer-links a .material-icons {
  font-size: 20px;
  margin-right: 12px;
  color: #818cf8;
}

.ap-drawer-links a:hover {
  background: rgba(79, 70, 229, 0.16);
  border-color: rgba(129, 140, 248, 0.3);
  color: #ffffff;
}

.ap-drawer-cta .btn {
  display: block;
  width: 100%;
  text-align: center;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.4px;
  box-shadow: 0 14px 34px rgba(79, 70, 229, 0.4);
}

.ap-drawer-cta p {
  margin: 12px 0 0;
  font-size: 12.5px;
  text-align: center;
  color: rgba(226, 232, 240, 0.5);
}

/* ─── ap page hero strip (contact + article pages) ──────────────────────── */

.ap-page-hero {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0 5rem;
}

.ap-page-hero::before {
  content: '';
  position: absolute;
  top: -280px;
  left: 50%;
  width: 920px;
  height: 560px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(79, 70, 229, 0.42) 0%, rgba(79, 70, 229, 0) 70%);
  pointer-events: none;
}

.ap-page-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(129, 140, 248, 0), rgba(129, 140, 248, 0.6), rgba(129, 140, 248, 0));
}

.ap-hero-inner {
  position: relative;
}

.ap-hero-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: #a5b4fc;
}

.ap-page-hero h1 {
  margin: 0.4rem 0 1rem;
  font-size: 46px;
  color: #ffffff;
}

.ap-hero-sub {
  max-width: 620px;
  margin: 0 auto;
  color: rgba(226, 232, 240, 0.7);
}

/* ─── ap shared frosted card ────────────────────────────────────────────── */

.ap-card {
  position: relative;
  padding: 2.2rem 2.4rem;
  background: var(--primary-background);
  border: 1px solid var(--primary-border-colour);
  border-radius: 24px;
  box-shadow: 0 22px 60px rgba(8, 12, 30, 0.1);
}

.ap-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, rgba(129, 140, 248, 0), rgba(129, 140, 248, 0.65), rgba(129, 140, 248, 0));
}

/* ─── ap contact page ───────────────────────────────────────────────────── */

.ap-contact {
  padding-top: 3rem;
  padding-bottom: 1rem;
}

.ap-contact-panel {
  position: relative;
  overflow: hidden;
  padding: 2.2rem 1.8rem;
  background: #0c0f19;
  background-image: linear-gradient(180deg, #0f1428 0%, #0c0f19 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  color: #e2e8f0;
  box-shadow: 0 22px 60px rgba(8, 12, 30, 0.25);
}

.ap-contact-panel::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(99, 102, 241, 0.4) 0%, rgba(79, 70, 229, 0) 70%);
  pointer-events: none;
}

.ap-contact-panel h5 {
  position: relative;
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
}

.ap-contact-panel-sub {
  position: relative;
  margin: 0 0 22px;
  font-size: 14.5px;
  color: rgba(226, 232, 240, 0.65);
}

.ap-contact-list {
  position: relative;
  margin: 0;
}

.ap-contact-list li {
  display: flex;
  align-items: center;
  padding: 11px 0;
  font-size: 15px;
  color: rgba(226, 232, 240, 0.85);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
  list-style: none;
}

.ap-contact-list li:last-child {
  border-bottom: 0;
}

.ap-contact-list .material-icons {
  font-size: 19px;
  margin-right: 12px;
  padding: 6px;
  color: #818cf8;
  background: rgba(79, 70, 229, 0.16);
  border: 1px solid rgba(129, 140, 248, 0.3);
  border-radius: 9px;
}

.ap-contact-card h5 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.ap-contact-card-sub {
  margin: 0 0 20px;
  font-size: 14.5px;
  color: var(--primary-font-colour);
}

.ap-contact .ap-card .input-field input[type='text'],
.ap-contact .ap-card .input-field input[type='email'],
.ap-contact .ap-card .input-field textarea {
  box-sizing: border-box;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--primary-border-colour);
  border-radius: 13px;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ap-contact .ap-card .input-field input[type='text']:focus,
.ap-contact .ap-card .input-field input[type='email']:focus,
.ap-contact .ap-card .input-field textarea:focus {
  outline: none;
  border: 1px solid #4f46e5;
  border-bottom: 1px solid #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.22);
}

.ap-contact .ap-card .input-field label {
  font-size: 13px;
  letter-spacing: 0.3px;
  text-transform: capitalize;
  color: var(--primary-font-colour);
}

.ap-contact .ap-card .btn-full {
  width: 100%;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.4px;
  box-shadow: 0 14px 34px rgba(79, 70, 229, 0.35);
}

/* ─── ap article page ───────────────────────────────────────────────────── */

.ap-article {
  padding-top: 3rem;
  padding-bottom: 1rem;
}

.ap-article-card {
  padding: 2.6rem 2.8rem;
  font-size: 17px;
  line-height: 1.85;
  color: var(--background-font-colour);
}

.ap-article-card > div {
  margin-bottom: 0.35rem;
}

.ap-article-card b {
  color: var(--background-heading-colour);
}

.ap-article-card img.responsive-img,
.ap-article-card video {
  border-radius: 14px;
}

@media (min-width: 319px) and (max-width: 490px) {
  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 32px;
  }

  .ap-drawer {
    width: 100%;
    max-width: 100%;
    border-left: 0;
    border-radius: 0;
  }

  .ap-page-hero {
    padding: 3rem 0 3.4rem;
  }

  .ap-page-hero h1 {
    font-size: 30px;
  }

  .ap-card {
    padding: 1.6rem 1.2rem;
    border-radius: 18px;
  }

  .ap-contact {
    padding-top: 2rem;
  }

  .ap-contact-panel {
    padding: 1.8rem 1.4rem;
    border-radius: 18px;
  }

  .ap-article {
    padding-top: 2rem;
  }

  .ap-article-card {
    padding: 1.8rem 1.3rem;
    font-size: 16px;
  }
}

/* ─── Reviews wall ─────────────────────────────────────────────────────────
   DELIBERATELY NOT `.ap`-SCOPED, unlike everything above. APReviewsComponent is
   reached through TourContentComponent, which 24 skins render, and a skin with
   its own (guest)/_layout.js never emits the `.ap` wrapper — scoping these
   would blank the cards there and let the page colour show through (that was
   the blue tint in `ad`, whose --background-colour is #e6f3fd).

   Safe to leave unscoped because every selector is named `.ap-review*`, which
   only ever matches markup this one component renders. Colours come from the
   theme vars, so each skin's palette applies on its own. */

.ap-reviews {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  height: 49rem;
  max-height: 150vh;
  overflow: hidden;
  padding: 0 1rem;
  margin-top: 3rem;
  align-items: start;
}

@media (min-width: 601px) {
  .ap-reviews {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 993px) {
  .ap-reviews {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Columns beyond the first only exist at the widths that can hold them. */
.ap-reviews-col:nth-child(2),
.ap-reviews-col:nth-child(3) {
  display: none;
}

@media (min-width: 601px) {
  .ap-reviews-col:nth-child(2) {
    display: block;
  }
}

@media (min-width: 993px) {
  .ap-reviews-col:nth-child(3) {
    display: block;
  }
}

.ap-reviews-col {
  animation-name: ap-marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Different speeds keep the columns from marching in step. */
.ap-reviews-slow {
  animation-duration: 62s;
}
.ap-reviews-mid {
  animation-duration: 48s;
}
.ap-reviews-fast {
  animation-duration: 74s;
}

@keyframes ap-marquee {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

.ap-review {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 1.5rem;
  padding: 1.5rem;
  margin: 0 0 2rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.ap-reviews-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 0.75rem;
}

.ap-reviews-stars .material-icons {
  font-size: 20px;
  color: #06b6d4;
}

.ap-review blockquote {
  margin: 0;
  border: 0;
  padding: 0;
  color: var(--background-font-colour);
}

.ap-review figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-colour);
}

.ap-review figcaption img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

/* The window's edges dissolve rather than being cut off. This is a MASK on the
   wall itself, not two gradient overlays painted in --background-colour, which
   is what it used to be: those assumed the wall always sat on the page colour,
   so anywhere it sat on a different surface — inside `.bg` (white), or in a
   skin whose page colour differs — the gradients showed as a tint over it.
   A mask fades the cards themselves and therefore needs no colour at all. */
.ap-reviews {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 8rem,
    #000 calc(100% - 8rem),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 8rem,
    #000 calc(100% - 8rem),
    transparent 100%
  );
}

/* Motion is decoration here — the cards are all still readable standing still. */
@media (prefers-reduced-motion: reduce) {
  .ap-reviews-col {
    animation: none;
  }
}

/* ============================================================
   (user) — dashboard area
   Moved here from (user)/user.css: the default skin has ONE
   stylesheet, same rule every skin follows (see ai-rules.md).
   ============================================================ */

/* Tab switches. The tab wrapper in a route file is keyed on the active tab
   (see wallets.js), so switching remounts that node and replays this
   animation — no transition library and no exit state to coordinate. Keep it
   short: this sits between the click and the content. */
.tab-fade {
  animation: tab-fade-in 220ms ease-out;
}

@keyframes tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab-fade {
    animation: none;
  }
}

/* ─── Asset chart (holding / mining asset tabs) ────────────────────────────
   BrokerChartsComponent fills its container, and this one had no height — so
   under two full-height buy/sell panels the chart collapsed to the widget's
   own minimum. Every wrapper down to the iframe has to be stretched, since
   the TradingView levels ask for height:100% and that resolves to nothing
   unless each ancestor has one. */

.app-asset-chart {
  height: 55vh;
  margin-top: 8px;
}

.app-asset-chart > *,
.app-asset-chart .tradingview-widget-container,
.app-asset-chart .tradingview-widget-container > div:first-child,
.app-asset-chart iframe {
  width: 100%;
  height: 100%;
}

.app-asset-chart .tradingview-widget-copyright {
  display: none;
}



/* LiveChartComponent stamps the symbol as an <h2> over the top-left of the
   plot. The page heading above already names the asset, so it is the same
   word twice — and at that size it covers the first candles. */
.app-asset-chart h2 {
  display: none;
}

/* app.css disables pointer events on every TradingView embed
   (`iframe[src*='embed-widget']`) so the DECORATIVE ones — the guest ticker
   tape, the mini sparklines — cannot swallow clicks or scroll.
   This chart is not decorative: its range switcher (1D · 1M · 3M · 1Y · 5Y ·
   All) is the whole point, and the blanket rule made those tabs dead. Give
   the interaction back here only, rather than lifting the rule globally. */
.app-asset-chart iframe[src*='embed-widget'] {
  pointer-events: auto;
}


/* ═══ /user — the dashboard ═══════════════════════════════════════════════
   Modelled on the lqo wallet layout: a glow hero carrying the headline figure
   and two pills, then two panels of rows beneath it.

   The classes are the DEFAULT skin's own (db-*), not lqo's — a skin never
   reaches into another skin's stylesheet (ai-rules #11), so the look is
   reproduced here rather than borrowed.

   Three answers and nothing else: what the account is worth, the two balances
   behind that figure, and how the closed trades have gone. */

.db-hero {
  margin: -18px -18px 20px -18px;
  padding: 30px 20px;
  border-radius: 0 0 28px 28px;
  text-align: center;
  color: #ffffff;
  background:
    radial-gradient(110% 130% at 50% 0%, rgba(230, 255, 42, 0.3), transparent 62%),
    linear-gradient(180deg, #232b06 0%, #11150a 68%, #05060a 100%);
}

.db-hero small {
  font-size: 12.5px;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.72);
}

.db-hero h2 {
  margin: 4px 0;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  /* Tabular figures so the headline does not jitter as the live number ticks. */
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}

.db-hero-pnl {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 700;
}

.db-up {
  color: #0eba1f;
}

.db-down {
  color: #e5484d;
}

.db-hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.db-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.15s ease;
}

.db-pill:hover {
  transform: translateY(-1px);
}

.db-pill .material-icons {
  font-size: 17px;
}

.db-pill-volt {
  background: #e6ff2a;
  color: #030507;
}

.db-pill-white {
  background: #ffffff;
  color: #030507;
}

/* ─── Panels ────────────────────────────────────────────────────────────
   Side by side on a desktop, stacked on a phone. */

.db-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 992px) {
  .db-grid {
    grid-template-columns: 1fr;
  }
}

.db-section {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 18px;
  padding: 14px 16px;
}

/* Holds the panel's heading. Kept as a flex row so a control can sit beside
   the title later without the heading jumping. */
.db-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.db-section-head h5 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--background-heading-colour);
}

.db-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 8px;
  margin: 0 -8px;
  border-radius: 14px;
  transition: background 0.15s ease;
}

.db-row:hover {
  background: var(--hover);
}

.db-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: var(--background-colour);
  border: 1px solid var(--border-colour);
  color: var(--background-heading-colour);
  flex: 0 0 auto;
}

.db-row-icon .material-icons {
  font-size: 19px;
}

.db-row-name {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.db-row-name b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--background-heading-colour);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-row-name small {
  font-size: 11.5px;
  color: var(--primary-font-colour);
}

.db-row-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--background-heading-colour);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.db-empty {
  text-align: center;
  padding: 16px 0;
  color: var(--primary-font-colour);
}

/* The live row gets a quiet pulse so a number that moves does not look like a
   stored one. */
.db-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0eba1f;
  margin-right: 6px;
  vertical-align: middle;
  animation: db-pulse 2.4s ease-in-out infinite;
}

@keyframes db-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .db-live-dot { animation: none; }
}

@media (max-width: 600px) {
  .db-hero h2 {
    font-size: 34px;
  }
}

/* ─── Shared lists inside a db-section ──────────────────────────────────
   The trade lists, watchlist and their kin are Materialize `collection`
   markup and stay that way: open positions carry live profit, a countdown, a
   close button and the trader-name rule, and re-drawing those rows to match
   these panels would mean re-implementing all of it.

   So the PANEL adapts instead — the collection loses its own card edge and
   sits on the panel's rhythm rather than looking like a second card dropped
   inside the first. */

.db-section .collection {
  border: 0;
  margin: 0;
  list-style: none;
  padding-left: 0;
  background: transparent;
}

.db-section .collection .collection-item {
  background: transparent;
  border-bottom: 1px solid var(--border-colour);
  padding: 11px 8px;
  margin: 0 -8px;
  border-radius: 14px;
  transition: background 0.15s ease;
}

.db-section .collection .collection-item:last-child {
  border-bottom: 0;
}

.db-section .collection .collection-item:hover {
  background: var(--hover);
}

/* The ticket's inputs are Materialize columns inside a panel that is already
   padded, so the row's negative gutters would push them past the edge. */
.db-section form .row {
  margin-left: 0;
  margin-right: 0;
}

/* A panel that stands on its own rather than sitting in the two-column grid —
   for rows too wide to survive half the content width. */
.db-section-stacked {
  margin-top: 18px;
}

body {
  font-size: 16px;
  font-family: 'Space Grotesk';
}

.cry-rain {
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #9454ff, #ad56c5 23%, #ff5d02);
}

.cry-label {
  font-size: 10px;
  letter-spacing: 1.5px;
  background: #19172c;
  padding: 10px;
  border-radius: 15px;
  border: 1.5px solid #ffffff0d;
  font-family: IBM Plex Mono, sans-serif;
  background-image: linear-gradient(#dcd9e41a, #3f1ba726);
}

.cry-card {
  border-radius: 18px;
  padding: 30px 28px 28px 30px;
  border: 1.7px solid #ffffff0d;
  margin-bottom: 1rem;
  background-image: linear-gradient(#46468c26, #09091640);
}

h2 {
  font-size: 48px;
  font-weight: 800;
}

.review {
  line-height: 1.8em;
}

.bb-container {
  width: 60%;
  margin: auto;
}

.app-bg-numbers {
  background-image: url(assets/images/BBBgNumbers.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.app-bg-numbers2 {
  background-image: url(assets/images/BBBgNumbers2.png);
  background-size: cover;
  background-repeat: no-repeat;
}

/* ── bb mobile menu drawer (skin-local, no M.Sidenav) ───────────────────── */
.bb-menu-trigger {
  cursor: pointer;
}

.bb-drawer-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1002;
  background: rgba(4, 16, 42, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.bb-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.bb-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1003;
  width: 330px;
  max-width: 88vw;
  padding: 26px 28px 30px;
  overflow-y: auto;
  border-left: 1.7px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px 0 0 18px;
  background: linear-gradient(160deg, #1a73e8 0%, #1259c4 45%, #0b3d92 100%);
  color: #ffffff;
  font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  transform: translateX(105%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.bb-drawer.is-open {
  transform: translateX(0);
}

.bb-drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

.bb-drawer-brand {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.bb-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #ffffff;
  transition: background 0.18s ease;
}

.bb-drawer-close:hover {
  background: rgba(255, 255, 255, 0.14);
}

.bb-drawer-label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 8px 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.06);
}

.bb-drawer-links {
  margin: 0 0 24px;
}

.bb-drawer-links li {
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.12);
}

.bb-drawer-links li a {
  display: block;
  padding: 15px 2px;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: padding-left 0.18s ease, color 0.18s ease;
}

.bb-drawer-links li a:hover {
  padding-left: 10px;
  color: #cfe3ff;
}

.bb-drawer-index {
  margin-right: 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

.bb-drawer-cta {
  display: block;
  margin-bottom: 18px;
  padding: 14px 22px;
  text-align: center;
  border-radius: 999px;
  background: #ffffff;
  color: #0b3d92;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.bb-drawer-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(3, 20, 51, 0.45);
  color: #0b3d92;
}

.bb-drawer-cta .material-icons {
  margin-left: 8px;
  font-size: 18px;
  vertical-align: middle;
}

.bb-drawer-utils {
  margin: 0;
  padding-top: 8px;
  border-top: 1.5px solid rgba(255, 255, 255, 0.12);
}

.bb-drawer-utils li a {
  display: flex;
  align-items: center;
  padding: 10px 2px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}

.bb-drawer-ghost {
  display: block;
  margin-top: 26px;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
  user-select: none;
  pointer-events: none;
}

/* ── bb shared page accents (contact + article) ─────────────────────────── */
.bb-pill-label {
  position: relative;
  display: inline-block;
  padding: 9px 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.08);
}

.bb-pill-label.bb-pill-blue {
  color: #1a73e8;
  border-color: rgba(26, 115, 232, 0.35);
  background: rgba(26, 115, 232, 0.08);
}

.bb-ghostword {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(80px, 14vw, 190px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.14);
  user-select: none;
  pointer-events: none;
}

.bb-card {
  padding: 30px 28px;
  margin-bottom: 1.4rem;
  border: 1.7px solid var(--border-colour);
  border-radius: 18px;
  background: var(--primary-background);
  color: var(--primary-font-colour);
}

.bb-card-accent {
  position: relative;
  overflow: hidden;
}

.bb-card-accent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1a73e8, #0b3d92);
}

/* ── bb contact page ────────────────────────────────────────────────────── */
.bb-contact-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 16px 72px;
  text-align: center;
  background: linear-gradient(135deg, #1a73e8 0%, #1259c4 55%, #0b3d92 100%);
  color: #ffffff;
}

.bb-contact-hero h1 {
  position: relative;
  margin: 16px 0 10px;
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.bb-contact-hero p {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.85);
}

.bb-contact-body {
  padding: 56px 0 40px;
}

.bb-contact-title {
  margin-top: 18px;
  font-size: 34px;
  color: var(--background-heading-colour);
}

.bb-contact-copy {
  margin: 0 0 22px;
  line-height: 1.8em;
}

.bb-contact-chip {
  display: inline-block;
  margin: 6px 8px 6px 0;
  padding: 12px 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.9rem;
  border: 1.5px solid var(--border-colour);
  border-radius: 15px;
  background: var(--primary-background);
  color: var(--primary-font-colour);
}

.bb-contact-chip .material-icons {
  margin-right: 8px;
  font-size: 18px;
  vertical-align: middle;
  color: #1a73e8;
}

/* ── bb article page ────────────────────────────────────────────────────── */
.bb-article-hero {
  position: relative;
  overflow: hidden;
  padding: 58px 0 84px;
  background: linear-gradient(135deg, #0b3d92 0%, #1259c4 60%, #1a73e8 100%);
  color: #ffffff;
}

.bb-article-hero .bb-ghostword {
  left: auto;
  right: -20px;
  transform: translateY(-50%);
}

.bb-article-hero h1 {
  position: relative;
  margin: 18px 0 0;
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.bb-article-body {
  padding: 0 0 56px;
}

.bb-article-card {
  position: relative;
  z-index: 2;
  margin-top: -34px;
  padding: 36px 34px;
  font-size: 1.02rem;
  line-height: 1.8em;
}

@media (min-width: 319px) and (max-width: 490px) {
  .bb-drawer {
    width: 86vw;
    padding: 22px 20px 26px;
  }

  .bb-contact-hero {
    padding: 48px 16px 56px;
  }

  .bb-contact-body {
    padding: 40px 0 28px;
  }

  .bb-contact-title {
    font-size: 26px;
  }

  .bb-article-hero {
    padding: 44px 0 66px;
  }

  .bb-article-card {
    margin-top: -24px;
    padding: 26px 20px;
  }

  .bb-ghostword {
    font-size: 64px;
  }

  .bb-container {
    width: 95%;
  }

  h1 {
    font-size: 32px;
  }

  h2 {
    font-size: 25px;
  }

  h3 {
    font-size: 20px;
  }
}

/* ============================================================
   bb user dashboard — paper & emerald (reference design system).
   Tokens: Urbanist (loaded in (user)/user.twig) · emerald
   #1BC199 · acid lime #ECFF8C · ink #05060F on the light
   accents. Surfaces ride the theme vars so LIGHT (the mock's
   paper-on-sage) and DARK both work. Signature: the floating
   white pill nav whose active tab is a filled emerald circle —
   top-center on PC, bottom-center on phones. Desktop first,
   ONE mobile block at the bottom.
   ============================================================ */

.bbf {
  min-height: 100vh;
  background: var(--background-colour);
  color: var(--background-font-colour);
  font-family: 'Urbanist', 'Space Grotesk', sans-serif;
}

.bbf a:focus-visible {
  outline: 2px solid #1bc199;
  outline-offset: 2px;
  border-radius: 12px;
}

/* header: greeting · pill nav · utility circles */

.bbf .bbf-top {
  /* must track .bbf-main below — if the header stays narrower than the content
     the greeting and the pill nav stop lining up with the cards */
  max-width: 1340px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 28px;
}

.bbf .bbf-hello {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bbf .bbf-hello img {
  height: 42px;
  width: 42px;
  border-radius: 50%;
}

.bbf .bbf-hello small {
  display: block;
  font-size: 12px;
  color: var(--primary-font-colour);
}

.bbf .bbf-hello b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--background-heading-colour);
}

.bbf .bbf-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border-radius: 999px;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  box-shadow: 0 10px 30px rgba(5, 6, 15, 0.08);
}

.bbf .bbf-nav-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  width: 42px;
  border-radius: 50%;
  color: var(--primary-font-colour);
  transition: color 0.15s ease, background 0.15s ease;
}

.bbf .bbf-nav-tab:hover {
  color: var(--background-heading-colour);
}

.bbf .bbf-nav-tab .material-icons {
  font-size: 21px;
}

.bbf .bbf-nav-active {
  background: #1bc199;
  color: #ffffff;
}

.bbf .bbf-nav-active:hover {
  color: #ffffff;
}

.bbf .bbf-top-icons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bbf .bbf-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  width: 42px;
  border-radius: 50%;
  cursor: pointer;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  color: var(--primary-font-colour);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.bbf .bbf-circle:hover {
  color: #1bc199;
  border-color: #1bc199;
}

.bbf .bbf-circle .material-icons {
  font-size: 20px;
}

.bbf .bbf-main {
  /* 1120px left a desktop screen mostly gutter; bottom padding clears the
     bottom nav rather than letting content run under it */
  max-width: 1340px;
  margin: 0 auto;
  padding: 18px 28px 110px 28px;
}

.bbf .bbf-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--background-heading-colour);
  margin: 8px 0 16px 0;
}

.bbf .bbf-bottom-nav {
  display: none;
}

/* home — PC spread */

.bbf .bbf-grid {
  display: grid;
  grid-template-columns: 430px 1fr;
  gap: 18px;
  align-items: start;
}

.bbf .bbf-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* balance card */

.bbf .bbf-balance {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 20px;
  padding: 18px 20px;
}

.bbf .bbf-balance-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.bbf .bbf-balance-head small {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-font-colour);
}

.bbf .bbf-balance-head small .material-icons {
  font-size: 18px;
}

.bbf .bbf-lime-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  background: #ecff8c;
  color: #05060f;
  transition: transform 0.15s ease;
}

.bbf .bbf-lime-bubble:hover {
  transform: translateY(-2px);
}

.bbf .bbf-lime-bubble .material-icons {
  font-size: 18px;
}

.bbf .bbf-balance-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.bbf .bbf-balance-row h2 {
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--background-heading-colour);
}

.bbf .bbf-balance-row h2 span {
  color: var(--primary-font-colour);
  font-size: 26px;
  font-weight: 700;
}

.bbf .bbf-chip-currency {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary-font-colour);
  border: 1px solid var(--border-colour);
  border-radius: 999px;
  padding: 5px 12px;
}

.bbf .bbf-balance-sub {
  margin: 10px 0 0 0;
  font-size: 13px;
  color: var(--primary-font-colour);
}

.bbf .bbf-balance-sub b {
  font-weight: 700;
}

.bbf .bbf-balance-ml {
  float: right;
}

.bbf .bbf-up {
  color: #1bc199;
}

.bbf .bbf-down {
  color: #e5484d;
}

/* admin messages — banner on Home, or a dialog when set to "Popup" */

.bbf .bbf-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-left: 4px solid #1bc199;
}

.bbf .bbf-notice-icon {
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  background: #ecff8c;
  color: #05060f;
}

.bbf .bbf-notice-icon .material-icons {
  font-size: 19px;
}

.bbf .bbf-notice-text {
  flex: 1;
  min-width: 0;
  /* first line sits level with the middle of the icon */
  margin: 7px 0 0 0;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--background-heading-colour);
}

/* explicit :focus backgrounds — Materialize paints a teal fill on button:focus */

.bbf .bbf-notice-close {
  flex: 0 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-colour);
  background: transparent;
  color: var(--primary-font-colour);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.bbf .bbf-notice-close:hover,
.bbf .bbf-notice-close:focus {
  background: transparent;
  color: #1bc199;
  border-color: #1bc199;
}

.bbf .bbf-notice-close .material-icons {
  font-size: 18px;
}

.bbf .bbf-modal-overlay {
  position: fixed;
  inset: 0;
  /* above the phone bottom nav (120) */
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 6, 15, 0.55);
}

.bbf .bbf-modal {
  width: 100%;
  max-width: 440px;
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 22px 20px 22px;
  border-radius: 22px;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  box-shadow: 0 24px 60px rgba(5, 6, 15, 0.3);
}

.bbf .bbf-modal .bbf-notice-icon {
  flex: 0 0 auto;
  align-self: center;
  height: 48px;
  width: 48px;
}

.bbf .bbf-modal .bbf-notice-icon .material-icons {
  font-size: 24px;
}

.bbf .bbf-modal .bbf-notice-text {
  flex: 0 0 auto;
  margin: 0;
}

.bbf .bbf-modal-close {
  height: 44px;
  border: none;
  border-radius: 999px;
  background: #1bc199;
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.bbf .bbf-modal-close:hover,
.bbf .bbf-modal-close:focus {
  background: #1bc199;
  transform: translateY(-1px);
}

.bbf .bbf-notice-close:focus-visible,
.bbf .bbf-modal-close:focus-visible {
  outline: 2px solid #1bc199;
  outline-offset: 2px;
}

/* signal strength strip (inside the balance card) */

.bbf .bbf-signal {
  clear: both;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-colour);
}

.bbf .bbf-signal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-font-colour);
}

.bbf .bbf-signal-head > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bbf .bbf-signal-head .material-icons {
  font-size: 18px;
  color: #1bc199;
}

.bbf .bbf-signal-head b {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--background-heading-colour);
}

.bbf .bbf-signal-track {
  display: block;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--primary-border-colour);
}

.bbf .bbf-signal-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #1bc199;
  transition: width 0.4s ease;
}

/* action buttons */

.bbf .bbf-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.bbf .bbf-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 6px;
  border-radius: 16px;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  color: var(--background-heading-colour);
  font-size: 12.5px;
  font-weight: 700;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.bbf .bbf-action:hover {
  border-color: #1bc199;
  transform: translateY(-1px);
}

.bbf .bbf-action .material-icons {
  font-size: 22px;
  color: #1bc199;
}

/* copy-trading banner (the mock's gradient strip, honest copy) */

.bbf .bbf-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  padding: 14px 16px;
  background: linear-gradient(105deg, #1bc199 0%, #8fe0c3 55%, #ecff8c 100%);
  color: #05060f;
  transition: transform 0.15s ease;
}

.bbf .bbf-banner:hover {
  transform: translateY(-1px);
}

.bbf .bbf-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  color: #05060f;
}

.bbf .bbf-banner > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.bbf .bbf-banner b {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
}

.bbf .bbf-banner small {
  font-size: 12px;
}

.bbf .bbf-banner-arrow {
  font-size: 20px;
}

/* gated product pills */

.bbf .bbf-products {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bbf .bbf-products:empty {
  display: none;
}

.bbf .bbf-product {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  color: var(--primary-font-colour);
  font-size: 12.5px;
  font-weight: 600;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.bbf .bbf-product:hover {
  color: #1bc199;
  border-color: #1bc199;
}

.bbf .bbf-product .material-icons {
  font-size: 16px;
}

/* markets card */

.bbf .bbf-markets {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 20px;
  padding: 14px 16px;
}

.bbf .bbf-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: none;
}

.bbf .bbf-chips::-webkit-scrollbar {
  display: none;
}

.bbf .bbf-chip {
  flex: 0 0 auto;
  cursor: pointer;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-colour);
  color: var(--primary-font-colour);
  font-size: 12.5px;
  font-weight: 700;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.bbf .bbf-chip:hover {
  color: var(--background-heading-colour);
}

.bbf .bbf-chip-active {
  background: #ecff8c;
  border-color: #ecff8c;
  color: #05060f;
}

.bbf .bbf-chip-active:hover {
  color: #05060f;
}

.bbf .bbf-empty {
  text-align: center;
  padding: 16px 0;
  color: var(--primary-font-colour);
}

.bbf .bbf-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 8px;
  margin: 0 -8px;
  border-radius: 14px;
  transition: background 0.15s ease;
}

.bbf .bbf-row:hover {
  background: var(--hover);
}

.bbf .bbf-row img {
  height: 34px;
  width: 34px;
  border-radius: 50%;
}

.bbf .bbf-row-name {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.bbf .bbf-row-name b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--background-heading-colour);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bbf .bbf-row-tag {
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--primary-font-colour);
}

.bbf .bbf-row-price {
  text-align: right;
  line-height: 1.35;
}

.bbf .bbf-row-price b {
  display: block;
  font-size: 13.5px;
  color: var(--background-heading-colour);
  font-variant-numeric: tabular-nums;
}

.bbf .bbf-row-price small {
  font-size: 11.5px;
  font-weight: 700;
}

.bbf .bbf-row-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.bbf .bbf-row-badge .material-icons {
  font-size: 16px;
}

.bbf .bbf-badge-up {
  background: rgba(27, 193, 153, 0.16);
  color: #1bc199;
}

.bbf .bbf-badge-down {
  background: rgba(229, 72, 77, 0.14);
  color: #e5484d;
}

@media (prefers-reduced-motion: reduce) {
  .bbf * {
    transition: none !important;
  }
}

/* ─── phone: the reference mock ─── */

@media only screen and (max-width: 992px) {
  /* the header tracks .bbf-main's phone padding — the 28px desktop gutter
     would waste half the width on a phone */
  .bbf .bbf-top {
    padding: 12px 14px;
  }

  .bbf .bbf-top-nav {
    display: none;
  }

  .bbf .bbf-bottom-nav {
    display: block;
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 120;
  }

  .bbf .bbf-bottom-nav .bbf-nav {
    box-shadow: 0 14px 36px rgba(5, 6, 15, 0.22);
  }

  .bbf .bbf-main {
    padding: 4px 14px 104px 14px;
  }

  .bbf .bbf-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .bbf .bbf-balance-row h2 {
    font-size: 34px;
  }
}

/* header avatar: forbid flex-squeeze (same fix as he) */
.bbf .bbf-hello img {
  flex: 0 0 42px;
  object-fit: cover;
}

/* ─── guest shell ─────────────────────────────────────────────────────────
   Sticky footer WITHOUT changing the layout mode. The shell stays plain block
   flow — no flex, no grid — so nothing inside it becomes a flex item: margins
   still collapse as before, nothing acquires flex-shrink, and percentage
   heights resolve against the same boxes they always did.

   How it works: the shell is at least a screen tall, and the footer is offset
   to the bottom of that screen. On a page shorter than the viewport the footer
   is pushed down to the bottom edge; on a longer page there is nothing to
   stick to, so it just sits at the end of the content as normal.

   Requires no ancestor in the footer's scroll chain to clip overflow — checked:
   bb's overflow rules are on the drawer, cards, heroes and chip strip, none of
   which contain the footer. */

.bb-shell {
  min-height: 100vh;
  /* dvh accounts for mobile browser chrome; ignored where unsupported, so the
     vh line above stays as the fallback. */
  min-height: 100dvh;
}

.bb-shell > footer {
  position: sticky;
  top: 100vh;
}

/* ============================================================
   PL skin — Plus500-style navy/azure futures design.
   Brand tokens are fixed (the navy sections stay navy in both
   themes); light sections use the theme vars so LIGHT/DARK
   still works everywhere else.
   Desktop styles first, ONE @media (max-width: 992px) block at
   the bottom. Layout = Materialize grid (row/col) in the JSX —
   this file only paints.
   ============================================================ */

:root {
  --pl-navy: #14307c;
  --pl-navy-deep: #0e2464;
  --pl-navy-ink: #0b1c4e;
  --pl-azure: #0f9bf5;
  --pl-azure-soft: #35c1ff;
  --pl-sky: #3d7bfd;
  --pl-line: rgba(255, 255, 255, 0.14);
  --pl-white-70: rgba(255, 255, 255, 0.72);
  --pl-white-55: rgba(255, 255, 255, 0.55);
  --pl-tp-green: #00b67a;
}

.pl {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
}

.pl h1,
.pl h2,
.pl h3,
.pl h4,
.pl h5 {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
}

/* --- Buttons ------------------------------------------------ */

.pl .pl-btn,
.pl .pl-btn-outline,
.pl .pl-btn-ghost {
  display: inline-block;
  height: auto;
  line-height: 1;
  padding: 16px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.pl .pl-btn {
  background: var(--pl-azure);
  color: #ffffff;
  border: 1px solid var(--pl-azure);
  box-shadow: 0 8px 22px rgba(15, 155, 245, 0.35);
}

.pl .pl-btn:hover {
  background: var(--pl-azure-soft);
  border-color: var(--pl-azure-soft);
  transform: translateY(-1px);
}

.pl .pl-btn-outline {
  background: #ffffff;
  color: var(--pl-azure);
  border: 1px solid #ffffff;
}

.pl .pl-btn-outline:hover {
  background: transparent;
  color: #ffffff;
}

.pl .pl-btn-ghost {
  background: transparent;
  color: #ffffff;
  border: 1px solid var(--pl-line);
}

.pl .pl-btn-ghost:hover {
  border-color: #ffffff;
}

.pl .pl-btn-ghost .material-icons {
  font-size: 16px;
  vertical-align: -3px;
  margin-right: 8px;
}

/* --- Navy surfaces + decorative squares --------------------- */

.pl .pl-dark {
  background: var(--pl-navy);
  color: var(--pl-white-70);
  position: relative;
  overflow: hidden;
  clear: both;
}

.pl .pl-dark h1,
.pl .pl-dark h2,
.pl .pl-dark h3,
.pl .pl-dark h4,
.pl .pl-dark h5 {
  color: #ffffff;
}

.pl .pl-sq {
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  pointer-events: none;
}

.pl .pl-sq-fill {
  background: rgba(255, 255, 255, 0.05);
  border: 0;
}

/* --- Guest nav ---------------------------------------------- */

/* fixed header: Materialize .navbar-fixed makes the inner nav
   position:fixed while the wrapper holds the flow height — but its default
   height is 64px, so match our 72px nav to avoid a jump/overlap */
.pl .pl-nav-wrap {
  height: 72px;
}

.pl .pl-nav {
  background: var(--pl-navy);
  box-shadow: none;
  height: 72px;
  line-height: 72px;
  /* overflow must stay VISIBLE — the translator's Materialize dropdown opens
     below the 72px nav and overflow:hidden clipped it. The floated ul.left/
     ul.right are instead contained by the .nav-wrapper clearfix below, and the
     hero/sections underneath already clear:both, so nothing gets squeezed. */
  overflow: visible;
}

/* contain the floated ul.left/ul.right without clipping the dropdown */
.pl .pl-nav .nav-wrapper::after {
  content: '';
  display: table;
  clear: both;
}

.pl .pl-nav .brand-logo,
.pl .pl-nav ul a {
  color: #ffffff;
}

.pl .pl-nav ul a {
  font-size: 15px;
  font-weight: 600;
  opacity: 0.92;
}

.pl .pl-nav ul a:hover {
  opacity: 1;
  background: transparent;
}

.pl .pl-logo {
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.3px;
}

.pl .pl-nav .pl-nav-cta {
  background: var(--pl-azure);
  color: #ffffff;
  border-radius: 22px;
  padding: 0 22px;
  height: 42px;
  line-height: 42px;
  display: inline-block;
  margin-top: 15px;
  font-weight: 700;
}

.pl .pl-nav .pl-nav-cta:hover {
  background: var(--pl-azure-soft);
}

/* shared TranslatorComponent trigger — bare <li> text, so it doesn't pick up
   the ul a colour; the nav surface is permanently navy */
.pl .pl-nav .dropdown-trigger {
  color: #ffffff;
  cursor: pointer;
  padding: 0 12px;
  font-size: 15px;
  font-weight: 600;
  opacity: 0.92;
}

.pl .pl-nav .dropdown-trigger:hover {
  opacity: 1;
}

/* the translator trigger sits near the right edge and Materialize's default
   constrainWidth clamps the dropdown to the tiny trigger (~100px), truncating
   the language names — pin it to the right of the nav and force the real
   320px list width (capped to the viewport on small phones) */
.pl .pl-nav .dropdown-content {
  left: auto !important;
  right: 24px !important;
  width: 320px !important;
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}

.pl .pl-nav .pl-nav-theme {
  cursor: pointer;
}

.pl .pl-nav .pl-nav-theme .material-symbols-outlined {
  font-size: 22px;
  vertical-align: middle;
}

.pl .pl-nav .pl-nav-trade {
  background: var(--pl-azure);
  color: #ffffff;
  border-radius: 18px;
  padding: 0 20px;
  height: 38px;
  line-height: 38px;
  display: inline-block;
  margin-top: 17px;
  font-weight: 700;
}

.pl .pl-nav .pl-nav-burger {
  cursor: pointer;
}

.pl .pl-nav .pl-nav-burger .material-symbols-outlined {
  font-size: 26px;
  vertical-align: middle;
}

/* mobile dropdown menu — replaces the shared sidenav for this skin */

.pl .pl-nav-menu {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  z-index: 996;
  background: #1747c8;
  padding: 12px 24px 24px 24px;
  box-shadow: 0 26px 44px rgba(5, 12, 38, 0.35);
}

.pl .pl-nav-menu a {
  display: block;
  color: #ffffff;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 600;
}

.pl .pl-nav-menu .pl-nav-menu-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin: 10px 0 18px 0;
}

.pl .pl-nav-menu .pl-nav-menu-cta {
  background: #ffffff;
  color: var(--pl-azure);
  text-align: center;
  border-radius: 26px;
  padding: 13px 0;
  font-weight: 700;
}

/* --- Hero ---------------------------------------------------- */

.pl .pl-hero {
  padding: 30px 0 90px 0;
}

.pl .pl-hero h1 {
  font-size: 56px;
  line-height: 1.08;
  font-weight: 800;
  margin: 24px 0 0 0;
  color: #ffffff;
}

.pl .pl-hero h1 .pl-hero-accent {
  color: var(--pl-sky);
  display: block;
}

.pl .pl-hero .pl-hero-sub {
  font-size: 19px;
  color: var(--pl-white-70);
  margin: 22px 0 30px 0;
}

.pl .pl-hero-ticks {
  margin-top: 26px;
  font-size: 14.5px;
  color: var(--pl-white-70);
  font-weight: 600;
}

.pl .pl-hero-ticks span {
  margin-right: 14px;
  padding-right: 14px;
  border-right: 1px solid var(--pl-line);
}

.pl .pl-hero-ticks span:last-child {
  border-right: 0;
}

.pl .pl-award {
  margin-top: 38px;
}

.pl .pl-award .pl-award-item {
  display: inline-block;
  vertical-align: middle;
  margin-right: 46px;
}

.pl .pl-award-laurel {
  text-align: center;
  color: #ffffff;
}

.pl .pl-award-laurel .pl-award-year {
  font-size: 22px;
  font-weight: 800;
}

.pl .pl-award-laurel .pl-award-label {
  font-size: 12px;
  font-weight: 700;
}

.pl .pl-award-laurel .pl-award-sub {
  font-size: 10.5px;
  color: var(--pl-white-55);
}

.pl .pl-trustpilot .pl-tp-star {
  color: var(--pl-tp-green);
  font-size: 18px;
  vertical-align: -3px;
}

.pl .pl-trustpilot .pl-tp-score {
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
  margin-right: 8px;
}

.pl .pl-trustpilot .pl-tp-note {
  font-size: 11px;
  color: var(--pl-white-55);
}

/* Phone mockup image */

.pl .pl-phone-wrap {
  position: relative;
  padding: 20px 10px 0 10px;
  text-align: center;
}

.pl .pl-phone-img {
  max-width: 100%;
  width: 420px;
  display: inline-block;
  filter: drop-shadow(0 30px 50px rgba(3, 10, 40, 0.55));
}

.pl .pl-phone-note {
  text-align: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 8px;
}

/* --- Light sections ------------------------------------------ */

.pl .pl-light {
  /* the design's light sections are WHITE (not the tinted page bg):
     --primary-background = #ffffff in light theme, dark navy in dark theme */
  background: var(--primary-background);
  color: var(--background-font-colour);
  position: relative;
  overflow: hidden;
  clear: both;
}

.pl .pl-light h2 {
  color: var(--pl-sky);
  font-size: 40px;
  font-weight: 800;
}

.pl .pl-light .pl-sq {
  border-color: var(--border-colour);
}

.pl .pl-section {
  padding: 72px 0;
}

.pl .pl-section-lead {
  max-width: 640px;
  margin: 18px auto 0 auto;
  font-size: 16.5px;
}

/* Category pills */

.pl .pl-pills {
  margin-top: 34px;
}

.pl .pl-pills-title {
  font-weight: 800;
  color: var(--background-heading-colour);
  margin-bottom: 16px;
}

.pl .pl-pill {
  display: inline-block;
  border: 1px solid var(--border-colour);
  background: var(--primary-background);
  color: var(--primary-font-colour);
  border-radius: 10px;
  padding: 12px 18px;
  margin: 6px 5px;
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.pl .pl-pill:hover {
  border-color: var(--pl-azure);
  transform: translateY(-1px);
}

.pl .pl-pill .material-icons {
  font-size: 16px;
  vertical-align: -3px;
  margin-right: 7px;
  color: var(--pl-azure);
}

/* Payment marks */

.pl .pl-pay {
  margin-top: 40px;
}

.pl .pl-pay .pl-pay-item {
  display: inline-block;
  vertical-align: middle;
  margin: 8px 24px;
  font-size: 22px;
  font-weight: 800;
  color: var(--background-heading-colour);
  opacity: 0.9;
}

.pl .pl-pay .pl-mc-c {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  vertical-align: middle;
}

.pl .pl-pay .pl-mc-c1 {
  background: #eb001b;
}

.pl .pl-pay .pl-mc-c2 {
  background: #f79e1b;
  margin-left: -12px;
  /* no mix-blend-mode: multiply — it renders near-black on the dark theme's
     navy --background-colour; a translucent overlap reads in both themes */
  opacity: 0.9;
}

/* --- Benefits (navy) ----------------------------------------- */

.pl .pl-benefits h2 {
  color: var(--pl-sky);
  font-size: 42px;
  font-weight: 800;
}

.pl .pl-benefit {
  text-align: center;
  padding: 26px 10px;
}

.pl .pl-benefit .pl-benefit-icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 16px auto;
  display: block;
  object-fit: contain;
}

.pl .pl-benefit h5 {
  font-size: 19px;
  font-weight: 800;
  margin: 6px 0 10px 0;
}

.pl .pl-benefit p {
  font-size: 14.5px;
  color: var(--pl-white-70);
  margin: 0 auto;
  max-width: 320px;
}

.pl .pl-benefits-cta {
  text-align: center;
  margin-top: 26px;
}

.pl .pl-benefits-cta .pl-btn,
.pl .pl-benefits-cta .pl-btn-outline {
  margin: 8px 8px;
}

/* --- Academy card --------------------------------------------- */

.pl .pl-academy {
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(100deg, var(--pl-navy-deep) 42%, #132c6e 60%, #1b2340 100%);
  color: var(--pl-white-70);
  box-shadow: 0 30px 60px rgba(8, 18, 60, 0.35);
  position: relative;
}

.pl .pl-academy .pl-academy-body {
  padding: 54px 46px;
}

.pl .pl-academy .pl-academy-kicker {
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.4px;
}

.pl .pl-academy h3 {
  font-size: 34px;
  font-weight: 700;
  margin: 18px 0 14px 0;
}

.pl .pl-academy p {
  max-width: 420px;
}

.pl .pl-academy .pl-academy-icon {
  width: 92px;
  height: 92px;
  margin-top: 26px;
}

.pl .pl-academy .pl-academy-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
}

/* --- Stats ----------------------------------------------------- */

.pl .pl-stats-card {
  background: var(--primary-background);
  color: var(--primary-font-colour);
  border-radius: 16px;
  border: 1px solid var(--border-colour);
  box-shadow: 0 24px 50px rgba(13, 32, 90, 0.08);
  padding: 46px 30px;
  position: relative;
}

.pl .pl-stats-chip {
  position: absolute;
  top: -16px;
  right: 26px;
  background: var(--pl-navy-deep);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 16px;
  padding: 7px 16px;
}

.pl .pl-stat {
  text-align: center;
  padding: 10px 0;
}

.pl .pl-stat .pl-stat-n {
  font-size: 46px;
  font-weight: 800;
  color: var(--primary-heading-colour);
}

.pl .pl-stat .pl-stat-n small {
  font-size: 30px;
  font-weight: 600;
}

.pl .pl-stat .pl-stat-l {
  font-size: 15px;
}

.pl .pl-stats-note {
  font-size: 12px;
  color: var(--background-font-colour);
  opacity: 0.75;
  max-width: 640px;
  margin: 26px auto 0 auto;
  text-align: center;
}

/* --- Why us ----------------------------------------------------- */

.pl .pl-why {
  border-radius: 20px;
  background: var(--pl-navy-deep);
  color: var(--pl-white-70);
  padding: 56px 50px 40px 50px;
  transform: rotate(-1.2deg);
  box-shadow: 0 34px 70px rgba(8, 18, 60, 0.35);
}

.pl .pl-why > .pl-why-inner {
  transform: rotate(1.2deg);
}

.pl .pl-why h2 {
  color: var(--pl-sky);
  font-size: 36px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 34px;
}

.pl .pl-why-item {
  margin-bottom: 26px;
  min-height: 96px;
}

.pl .pl-why-item .pl-why-icon {
  float: left;
  width: 46px;
  height: 46px;
  margin-right: 16px;
  object-fit: contain;
}

.pl .pl-why-item .pl-why-txt {
  overflow: hidden;
}

.pl .pl-why-item h5 {
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 8px 0;
  /* the card is brand-navy in BOTH themes; the global heading rule would
     paint this with --background-heading-colour (navy-on-navy in light) */
  color: #ffffff;
}

.pl .pl-why-item p {
  font-size: 14.5px;
  margin: 0;
  color: var(--pl-white-70);
}

/* --- Footer ------------------------------------------------------ */

.pl .pl-footer {
  background: var(--pl-navy-ink);
  color: rgba(255, 255, 255, 0.6);
  padding: 54px 0 0 0;
  font-size: 13.5px;
}

.pl .pl-footer a {
  color: rgba(255, 255, 255, 0.78);
  display: block;
  padding: 5px 0;
  font-weight: 600;
}

.pl .pl-footer a:hover {
  color: #ffffff;
}

.pl .pl-footer .pl-footer-title {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 12px;
}

.pl .pl-footer .pl-footer-strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
}

.pl .pl-footer .pl-footer-social a,
.pl .pl-footer .pl-footer-social span {
  display: inline-block;
  margin-right: 14px;
  padding: 0;
}

.pl .pl-footer .pl-footer-social img {
  width: 24px;
  vertical-align: middle;
  /* the brand svgs stroke with currentColor (renders black in <img>) —
     invert to white for the navy footer */
  filter: invert(1);
  opacity: 0.85;
}

.pl .pl-footer .pl-footer-social a:hover img {
  opacity: 1;
}

.pl .pl-footer .pl-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 36px;
  padding: 18px 0;
  text-align: center;
  font-size: 12.5px;
}

.pl .pl-footer .pl-footer-bottom .material-icons {
  font-size: 14px;
  vertical-align: -2px;
}

/* --- Contact page (navy hero + pulled-up split cards) ------------ */

.pl .pl-contact-hero {
  padding: 30px 0 132px 0;
}

.pl .pl-contact-hero h1 {
  font-size: 46px;
  line-height: 1.12;
  font-weight: 800;
  margin: 14px 0 0 0;
}

.pl .pl-contact-hero .pl-hero-accent {
  display: block;
  color: var(--pl-sky);
  font-size: 30px;
}

.pl .pl-contact-hero .pl-hero-ticks {
  margin-top: 22px;
}

.pl .pl-contact-kicker {
  margin: 0;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pl-azure-soft);
}

.pl .pl-contact-body {
  padding: 0 0 70px 0;
}

.pl .pl-contact-pull {
  position: relative;
  z-index: 2;
  margin-top: -84px;
}

/* navy contact-desk panel (echoes the pl-why card) */

.pl .pl-contact-panel {
  background: var(--pl-navy-deep);
  color: var(--pl-white-70);
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 30px 60px rgba(8, 18, 60, 0.35);
}

.pl .pl-contact-panel h5 {
  /* brand-navy card in BOTH themes — keep the heading white explicitly */
  color: #ffffff;
  font-size: 21px;
  font-weight: 800;
  margin: 0 0 6px 0;
}

.pl .pl-contact-panel .pl-contact-panel-sub {
  font-size: 13.5px;
  color: var(--pl-white-55);
  margin: 0 0 24px 0;
}

.pl .pl-contact-item {
  margin-bottom: 20px;
  min-height: 44px;
}

.pl .pl-contact-item > .material-icons {
  float: left;
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--pl-azure-soft);
  font-size: 20px;
  margin-right: 14px;
}

.pl .pl-contact-item .pl-contact-item-txt {
  overflow: hidden;
  font-size: 14.5px;
  word-break: break-word;
}

.pl .pl-contact-item .pl-contact-item-txt b {
  display: block;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.pl .pl-contact-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 24px 0 16px 0;
}

.pl .pl-contact-note {
  font-size: 13px;
  color: var(--pl-white-55);
  margin: 0;
}

/* white form card */

.pl .pl-contact-card {
  background: var(--primary-background);
  color: var(--primary-font-colour);
  border: 1px solid var(--border-colour);
  border-radius: 20px;
  padding: 36px 34px;
  box-shadow: 0 24px 50px rgba(13, 32, 90, 0.12);
}

.pl .pl-contact-card .pl-contact-card-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--pl-azure);
}

.pl .pl-contact-card h5 {
  color: var(--primary-heading-colour);
  font-size: 26px;
  font-weight: 800;
  margin: 8px 0 10px 0;
}

.pl .pl-contact-card .pl-contact-card-sub {
  font-size: 14.5px;
  margin: 0 0 10px 0;
}

/* boxed fields over Materialize's underline inputs */

.pl .pl-contact-form .input-field input,
.pl .pl-contact-form .input-field textarea {
  border: 1px solid var(--border-colour);
  border-radius: 10px;
  background: var(--background-colour);
  color: var(--background-font-colour);
  box-sizing: border-box;
  padding: 0 14px;
}

.pl .pl-contact-form .input-field textarea {
  width: 100%;
  padding: 12px 14px !important; /* beats the component's inline 5px padding */
  resize: vertical;
}

.pl .pl-contact-form .input-field input:focus,
.pl .pl-contact-form .input-field textarea:focus {
  border: 1px solid var(--pl-azure);
  box-shadow: 0 0 0 3px rgba(15, 155, 245, 0.16);
  outline: none;
}

.pl .pl-contact-form .input-field label {
  color: var(--primary-font-colour);
  font-weight: 700;
  text-transform: capitalize;
}

.pl .pl-contact-form .btn {
  background: var(--pl-azure);
  color: #ffffff;
  border-radius: 10px;
  height: auto;
  line-height: 1;
  padding: 17px 30px;
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.2px;
  box-shadow: 0 8px 22px rgba(15, 155, 245, 0.35);
  transition: background 0.2s ease, transform 0.15s ease;
}

.pl .pl-contact-form .btn:hover {
  background: var(--pl-azure-soft);
  transform: translateY(-1px);
}

/* --- Dynamic article page (navy band + reading card) -------------- */

.pl .pl-article-hero {
  padding: 36px 0 128px 0;
}

.pl .pl-article-hero h1 {
  font-size: 42px;
  line-height: 1.15;
  font-weight: 800;
  margin: 12px 0 0 0;
  max-width: 860px;
}

.pl .pl-article-kicker {
  margin: 0;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pl-azure-soft);
}

.pl .pl-article-kicker .material-icons {
  font-size: 15px;
  vertical-align: -3px;
  margin-right: 6px;
}

.pl .pl-article-body {
  padding: 0 0 80px 0;
}

.pl .pl-article-card {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: -80px auto 0 auto;
  background: var(--primary-background);
  color: var(--primary-font-colour);
  border: 1px solid var(--border-colour);
  border-top: 4px solid var(--pl-azure);
  border-radius: 22px;
  box-shadow: 0 30px 60px rgba(13, 32, 90, 0.14);
  padding: 50px 54px;
  font-size: 15.5px;
  line-height: 1.9;
}

.pl .pl-article-chip {
  /* floating navy chip — echoes .pl-stats-chip */
  position: absolute;
  top: -16px;
  right: 30px;
  background: var(--pl-navy-deep);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 16px;
  padding: 7px 16px;
}

.pl .pl-article-card b {
  color: var(--primary-heading-colour);
}

.pl .pl-article-card img,
.pl .pl-article-card video {
  max-width: 100%;
  border-radius: 14px;
}

.pl .pl-article-card .responsive-img {
  display: block;
  margin: 18px auto;
}

/* ============================================================
   Dashboard (user area) — Plus500-style webtrader
   ============================================================ */

.pl-dash {
  min-height: 100vh;
  background: var(--background-colour);
}

.pl-dash .pl-side {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 264px;
  background: var(--pl-navy-deep);
  color: rgba(255, 255, 255, 0.75);
  overflow-y: auto;
  z-index: 998;
  padding: 18px 0 12px 0;
}

.pl-dash .pl-side-brand {
  display: block;
  padding: 4px 20px 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pl-dash .pl-side-brand .pl-logo {
  font-size: 21px;
}

/* outlined icon font used across the dashboard chrome */
.pl-dash .material-symbols-outlined {
  font-size: 22px;
  vertical-align: -6px;
}

.pl-dash .pl-side-account {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12.5px;
}

.pl-dash .pl-side-account p {
  margin: 4px 0;
}

.pl-dash .pl-side-account p span {
  float: right;
  color: #ffffff;
  font-weight: 700;
}

.pl-dash .pl-side-kicker {
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.pl-dash .pl-side-nav {
  margin: 10px 0;
}

.pl-dash .pl-side-nav li a {
  display: block;
  padding: 11px 20px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  margin: 2px 10px;
  line-height: 24px;
}

.pl-dash .pl-side-nav li a:hover {
  background: rgba(255, 255, 255, 0.07);
}

.pl-dash .pl-side-nav li.pl-side-active a {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.pl-dash .pl-side-nav li a .material-symbols-outlined {
  vertical-align: -6px;
  margin-right: 12px;
  font-size: 21px;
}

.pl-dash .pl-side-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 20px;
  font-size: 13.5px;
}

.pl-dash .pl-side-bottom a {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  padding: 8px 0;
  font-weight: 600;
}

.pl-dash .pl-side-bottom a:hover {
  color: #ffffff;
}

.pl-dash .pl-side-bottom .material-symbols-outlined {
  vertical-align: -6px;
  margin-right: 10px;
  font-size: 20px;
}

.pl-dash .pl-side-user {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* mobile chrome (top bar, drawer close, backdrop, tab bar) — desktop: hidden */

.pl-dash .pl-dash-topbar,
.pl-dash .pl-side-close,
.pl-dash .pl-dash-backdrop,
.pl-dash .pl-tabbar {
  display: none;
}

/* main area */

.pl-dash .pl-dash-main {
  margin-left: 264px;
  padding: 26px 30px 60px 30px;
  min-height: 100vh;
}

.pl-dash .pl-dash-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--background-heading-colour);
  margin: 6px 0 22px 0;
}

.pl-dash .pl-dash-subtitle {
  font-size: 19px;
  font-weight: 800;
  color: var(--background-heading-colour);
  margin: 10px 0 14px 0;
}

.pl-dash .pl-stat-card {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 8px;
}

.pl-dash .pl-stat-card .pl-stat-label {
  margin: 0 0 8px 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--primary-font-colour);
}

.pl-dash .pl-stat-card .pl-stat-label .material-symbols-outlined {
  font-size: 16px;
  vertical-align: -4px;
  margin-right: 8px;
  color: var(--pl-azure);
}

.pl-dash .pl-stat-card h5 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: var(--primary-heading-colour);
}

.pl-dash .pl-stat-card small {
  color: var(--primary-font-colour);
}

/* markets */

.pl-dash .pl-dash-chips {
  margin-bottom: 14px;
}

.pl-dash .pl-dash-chip {
  display: inline-block;
  cursor: pointer;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  color: var(--primary-font-colour);
  border-radius: 16px;
  padding: 6px 16px;
  margin: 0 6px 6px 0;
  font-size: 13px;
  font-weight: 600;
}

.pl-dash .pl-dash-chip-active {
  background: var(--pl-navy-deep);
  border-color: var(--pl-navy-deep);
  color: #ffffff;
}

.pl-dash .pl-market-row {
  display: block;
  cursor: pointer;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  color: var(--primary-font-colour);
  position: relative;
  min-height: 62px;
}

.pl-dash .pl-market-row b {
  display: block;
  color: var(--primary-heading-colour);
  font-size: 14.5px;
}

.pl-dash .pl-market-row small {
  font-size: 12px;
}

.pl-dash .pl-market-row .pl-market-price {
  position: absolute;
  right: 14px;
  top: 12px;
  text-align: right;
  font-weight: 800;
  color: var(--primary-heading-colour);
  font-size: 14px;
}

.pl-dash .pl-market-active {
  border-color: var(--pl-azure);
  box-shadow: 0 0 0 2px rgba(15, 155, 245, 0.18);
}

.pl-dash .pl-market-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: contain;
}

.pl-dash .pl-market-has-icon {
  padding-left: 60px;
}

.pl-up {
  color: #18a058;
  font-weight: 700;
  font-size: 12px;
}

.pl-down {
  color: #e5484d;
  font-weight: 700;
  font-size: 12px;
}

/* place trade panel */

.pl-dash .pl-trade-panel {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 12px;
  padding: 16px;
}

.pl-dash .pl-trade-panel .pl-trade-head {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-colour);
  color: var(--primary-font-colour);
}

.pl-dash .pl-trade-panel .pl-trade-head b {
  display: block;
  color: var(--primary-heading-colour);
}

.pl-dash .pl-trade-panel .pl-trade-head .pl-market-icon {
  left: 0;
  top: calc(50% - 6px);
}

.pl-dash .pl-trade-panel .pl-trade-head.pl-market-has-icon {
  padding-left: 46px;
}

.pl-dash .pl-trade-panel .pl-trade-head .pl-market-price {
  position: absolute;
  right: 0;
  top: 0;
  font-weight: 800;
  color: var(--primary-heading-colour);
}

/* dashboard quick actions — one per Materialize col, so the button just
   fills the column it is given */

.pl-dash .pl-dash-action {
  display: block;
  text-align: center;
  cursor: pointer;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  color: var(--primary-heading-colour);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 700;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.pl-dash .pl-dash-action:hover {
  border-color: var(--pl-azure);
  transform: translateY(-1px);
}

.pl-dash .pl-dash-action .material-symbols-outlined {
  font-size: 18px;
  vertical-align: -4px;
  margin-right: 8px;
  color: var(--pl-azure);
}

.pl-dash .pl-dash-action-primary {
  background: var(--pl-azure);
  border-color: var(--pl-azure);
  color: #ffffff;
}

.pl-dash .pl-dash-action-primary:hover {
  background: var(--pl-navy-deep);
  border-color: var(--pl-navy-deep);
}

.pl-dash .pl-dash-action-primary .material-symbols-outlined {
  color: #ffffff;
}

/* ============================================================
   Mobile / tablet
   ============================================================ */

@media only screen and (max-width: 992px) {
  /* NOTE: the mobile top-bar can't fit brand + flag + theme + Trade + burger
     on one line, so keep overflow:hidden HERE (mobile only) to clip the
     wrapped cluster as before — pending the design decision on what moves off
     the bar. Desktop keeps overflow:visible so the translator dropdown shows. */
  .pl .pl-nav {
    overflow: hidden;
  }

  .pl .pl-hero {
    padding: 10px 0 60px 0;
    text-align: center;
  }

  .pl .pl-hero h1 {
    font-size: 36px;
  }

  .pl .pl-hero .pl-hero-sub {
    font-size: 16.5px;
  }

  .pl .pl-hero-ticks span {
    display: block;
    border-right: 0;
    margin: 6px 0;
    padding-right: 0;
  }

  .pl .pl-award .pl-award-item {
    margin: 12px 16px;
  }

  .pl .pl-phone-wrap {
    padding-top: 44px;
  }

  .pl .pl-light h2,
  .pl .pl-benefits h2 {
    font-size: 29px;
  }

  .pl .pl-section {
    padding: 52px 0;
  }

  .pl .pl-academy .pl-academy-body {
    padding: 36px 26px;
  }

  .pl .pl-academy .pl-academy-img {
    min-height: 220px;
    max-height: 260px;
  }

  .pl .pl-why {
    padding: 36px 22px 24px 22px;
    transform: none;
  }

  .pl .pl-why > .pl-why-inner {
    transform: none;
  }

  .pl .pl-stat .pl-stat-n {
    font-size: 34px;
  }

  .pl .pl-footer {
    text-align: center;
  }

  .pl .pl-footer .pl-footer-social a {
    margin: 0 7px;
  }

  /* contact page */

  .pl .pl-contact-hero {
    padding: 14px 0 96px 0;
    text-align: center;
  }

  .pl .pl-contact-hero h1 {
    font-size: 32px;
  }

  .pl .pl-contact-hero .pl-hero-accent {
    font-size: 22px;
  }

  .pl .pl-contact-pull {
    margin-top: -56px;
  }

  .pl .pl-contact-panel {
    padding: 26px 20px;
    margin-bottom: 24px;
  }

  .pl .pl-contact-card {
    padding: 28px 20px;
  }

  .pl .pl-contact-card h5 {
    font-size: 21px;
  }

  /* article page */

  .pl .pl-article-hero {
    padding: 18px 0 96px 0;
  }

  .pl .pl-article-hero h1 {
    font-size: 29px;
  }

  .pl .pl-article-card {
    margin-top: -56px;
    padding: 30px 20px;
    border-radius: 16px;
  }

  .pl .pl-article-chip {
    right: 16px;
  }

  /* dashboard: top bar + off-canvas drawer + bottom tab bar */

  .pl-dash .pl-dash-topbar {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 58px;
    line-height: 58px;
    background: var(--pl-navy-deep);
    padding: 0 16px;
    z-index: 999;
  }

  .pl-dash .pl-dash-topbar .pl-logo {
    font-size: 20px;
    vertical-align: middle;
  }

  .pl-dash .pl-topbar-theme {
    float: right;
    color: #ffffff;
    cursor: pointer;
  }

  /* uniform half-width stat cards (unequal heights snag the floats) */

  .pl-dash .pl-stat-card {
    min-height: 116px;
    padding: 12px 14px;
  }

  .pl-dash .pl-stat-card h5 {
    font-size: 17px;
  }

  .pl-dash .pl-stat-card .pl-stat-label {
    font-size: 10px;
    letter-spacing: 0.6px;
  }

  .pl-dash .pl-topbar-burger {
    color: #ffffff;
    cursor: pointer;
    margin-right: 14px;
    vertical-align: middle;
  }

  .pl-dash .pl-topbar-burger .material-symbols-outlined {
    font-size: 26px;
    vertical-align: -7px;
  }

  /* the sidebar becomes a slide-in drawer */

  .pl-dash .pl-side {
    width: 282px;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    z-index: 1002;
  }

  .pl-drawer-open .pl-side {
    transform: translateX(0);
  }

  .pl-dash.pl-drawer-open .pl-dash-backdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 12, 38, 0.55);
    z-index: 1001;
  }

  .pl-dash .pl-side-close {
    display: block;
    position: absolute;
    top: 14px;
    right: 14px;
    color: #ffffff;
    cursor: pointer;
    z-index: 2;
  }

  .pl-dash .pl-dash-main {
    margin-left: 0;
    padding: 78px 14px 96px 14px;
  }

  /* bottom tab bar — floating capsule, outlined icons (reference design) */

  .pl-dash .pl-tabbar {
    display: block;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 10px;
    background: var(--primary-background);
    border: 1px solid var(--border-colour);
    border-radius: 24px;
    box-shadow: 0 8px 26px rgba(13, 32, 90, 0.12);
    padding: 8px 4px;
    z-index: 999;
    text-align: center;
  }

  .pl-dash .pl-tabbar a {
    display: inline-block;
    width: 19%;
    text-align: center;
    color: var(--primary-font-colour);
    font-size: 11px;
    font-weight: 600;
  }

  .pl-dash .pl-tabbar .pl-tab-icon {
    display: block;
    margin: 0 auto;
  }

  .pl-dash .pl-tabbar .pl-tab-icon .material-symbols-outlined {
    font-size: 22px;
    vertical-align: middle;
  }

  .pl-dash .pl-tabbar .pl-tab-active {
    color: var(--pl-azure);
  }

  .pl-dash .pl-tab-label {
    display: block;
  }
}


/* ─── sticky footer ───────────────────────────────────────────────────────
   Keeps the footer on the bottom edge when a page is shorter than the screen.
   No flex or grid: the shell stays in normal block flow, so nothing inside
   becomes a flex item and margins go on collapsing as before. On a long page
   there is nothing to stick to and the footer just ends the content.

   Note: this stops working if an ancestor of the footer ever sets
   overflow: hidden/auto/scroll. */

.pl {
  min-height: 100vh;
  min-height: 100dvh;
}

.pl > footer {
  position: sticky;
  top: 100vh;
}

@charset "UTF-8";

/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */

@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media (print), (prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}

:root {
  /* Last-resort value only — skin.js writes --primary-button on :root from
     NODE_PRIMARY (or the active skin's entry in SKIN_PRIMARY), and an inline
     style out-ranks this. */
  --primary-button: #766fb2;

  /* material-resets-public.css styles .btn-alt-secondary, .btn-trans-secondary
     and .btn-alt-secondary:hover out of this token, but nothing in the repo has
     ever DEFINED it — those three rules have always resolved var() to nothing,
     which makes the whole declaration invalid at computed-value time, so the
     border and text colour silently fell back to inherited values. A mid slate
     reads against both the light and the dark themes. */
  --secondary-button: #6078a9;

  --secondary-link-colour: #766fb2;

  --primary-border-colour: silver;
}

iframe[src*='embed-widget'] {
  pointer-events: none;
}

#goog-gt-vt {
  display: none;
}

iframe.VIpgJd-ZVi9od-ORHb-OEVmcd {
  display: none;
}

/* Public landing pages use the Urbanist dashboard palette and typography. */
.pl {
  --pl-navy: #14307c;
  --pl-navy-deep: #0e2464;
  --pl-navy-ink: #0b1c4e;
  --pl-azure: #0f9bf5;
  --pl-azure-soft: #35c1ff;
  --pl-sky: #3d7bfd;
  --pl-line: rgba(255, 255, 255, 0.14);
  --pl-white-70: rgba(255, 255, 255, 0.72);
  --pl-white-55: rgba(255, 255, 255, 0.55);
  --pl-tp-green: #00b67a;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  font-family: "Inter", system-ui, sans-serif;
}

.pl h1, .pl h2, .pl h3, .pl h4, .pl h5,
.pl .pl-btn, .pl .pl-btn-outline, .pl .pl-btn-ghost {
  font-family: "Urbanist", "Inter", system-ui, sans-serif;
}

.pl img, .pl video, .pl iframe, .pl canvas { max-width: 100%; }
.pl .pl-nav .pl-nav-burger { display: none; }

@media only screen and (max-width: 992px) {
  .pl .pl-nav-wrap { height: 64px; }
  .pl .pl-nav {
    height: 64px;
    line-height: 64px;
    overflow: visible;
  }
  .pl .pl-nav .container {
    width: 100%;
    max-width: none;
  }
  .pl .pl-nav .nav-wrapper {
    min-height: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 0 12px;
    box-sizing: border-box;
  }
  .pl .pl-nav .nav-wrapper::after { display: none; }
  .pl .pl-nav ul.left,
  .pl .pl-nav ul.right {
    display: flex;
    float: none !important;
    align-items: center;
    height: 64px;
    line-height: normal;
    margin: 0;
  }
  .pl .pl-nav .nav-wrapper > ul.left {
    order: 1;
    flex: 0 0 auto;
    min-width: 0;
    margin-right: 10px;
  }
  .pl .pl-nav .nav-wrapper > ul.left li {
    display: flex;
    align-items: center;
    min-width: 0;
  }
  .pl .pl-nav .pl-logo {
    width: 164px;
    height: 48px;
    max-width: 100%;
    flex: 0 1 164px;
    background-position: left center;
  }
  .pl .pl-nav .nav-wrapper > ul.right.hide-on-med-and-down { display: none !important; }
  .pl .pl-nav .nav-wrapper > ul.right.hide-on-large-only {
    order: 2;
    display: flex !important;
    flex: 0 0 auto;
    gap: 7px;
    margin-left: auto;
  }
  .pl .pl-nav .nav-wrapper > ul.right.hide-on-large-only > li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    float: none;
    margin: 0;
  }
  .pl .pl-nav .nav-wrapper > ul.right.hide-on-large-only > li:last-child {
    display: none !important;
  }
  .pl .pl-nav .dropdown-trigger,
  .pl .pl-nav .pl-nav-theme {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,.10);
    line-height: 1;
    box-sizing: border-box;
  }
  .pl .pl-nav .dropdown-trigger { font-size: 0; }
  .pl .pl-nav .nav-wrapper > ul.right.hide-on-large-only > li.dropdown-trigger {
    height: 38px;
  }
  .pl .pl-nav .dropdown-trigger > .flag-icon {
    display: inline-block;
    width: 22px;
    height: 16px;
    margin-right: 0;
    font-size: 0;
    border-radius: 3px;
    background-size: cover;
  }
  .pl .pl-nav .pl-nav-theme .material-symbols-outlined {
    font-size: 20px;
    line-height: 1;
  }
  .pl .pl-nav .pl-nav-trade { display: none !important; }
  .pl .pl-nav .nav-wrapper > ul.right:not(.hide-on-med-and-down):not(.hide-on-large-only) {
    order: 3;
    display: flex !important;
    flex: 0 0 auto;
    margin-left: 0;
  }
  .pl .pl-nav .nav-wrapper > ul.right:not(.hide-on-med-and-down):not(.hide-on-large-only) > li {
    display: flex;
    align-items: center;
    height: 64px;
    margin: 0 !important;
    padding: 0 !important;
  }
  .pl .pl-nav .pl-nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    color: #fff;
    line-height: 1;
  }
  .pl .pl-nav .pl-nav-burger .material-symbols-outlined { font-size: 23px; }
  .pl .pl-nav .dropdown-content {
    position: fixed !important;
    top: 64px !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - 84px);
    max-height: calc(100dvh - 84px) !important;
    overflow-y: auto !important;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 24px 44px rgba(5, 12, 38, 0.35);
    -webkit-overflow-scrolling: touch;
  }
  .pl .pl-nav .dropdown-content .row,
  .pl .pl-nav .dropdown-content .col {
    width: 100% !important;
  }
  .pl .pl-nav .dropdown-content .col {
    margin: 0;
    border-bottom: 1px solid rgba(12, 26, 84, 0.08);
  }
  .pl .pl-nav .dropdown-content .col:last-child {
    border-bottom: 0;
  }
  .pl .pl-nav .dropdown-content .col a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 600;
    color: #17255c;
    line-height: 1.2;
  }
  .pl .pl-nav .dropdown-content .col a .flag-icon {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  .pl .pl-nav-menu {
    top: 64px;
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px 22px 22px;
  }
  .pl .pl-hero { padding: 22px 0 48px; text-align: center; }
  .pl .pl-hero h1 {
    width: 100%;
    max-width: 620px;
    margin: 10px auto 0;
    font-size: clamp(32px, 5vw, 44px);
    line-height: 1.08;
    overflow-wrap: break-word;
  }
  .pl .pl-hero .pl-hero-sub { max-width: 560px; margin: 18px auto 24px; }
  .pl .pl-hero-ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; }
  .pl .pl-hero-ticks span { margin: 0; padding: 0; border: 0; }
  .pl .pl-phone-wrap { padding: 26px 0 0; }
  .pl .pl-phone-img { width: min(360px, 90vw); height: auto; }
  .pl .pl-award { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; margin-top: 28px; }
  .pl .pl-award .pl-award-item { margin: 0; }
  .pl .pl-section { padding: 56px 0; }
  .pl .pl-light h2, .pl .pl-benefits h2 { font-size: clamp(29px, 4.5vw, 36px); line-height: 1.15; }
  .pl .pl-academy .pl-academy-body { padding: 34px 28px; }
  .pl .pl-academy .pl-academy-img { min-height: 250px; max-height: 320px; }
  .pl .pl-stats-card { padding: 36px 22px 24px; }
  .pl .pl-stats-chip { position: static; display: table; margin: 0 auto 14px; }
  .pl .pl-why { padding: 38px 28px 24px; transform: none; }
  .pl .pl-why > .pl-why-inner { transform: none; }
  .pl .pl-footer { text-align: left; }
}

@media only screen and (max-width: 600px) {
  .pl .container { width: calc(100% - 32px); max-width: none; }
  .pl .pl-nav .container { width: 100%; }
  .pl .pl-nav .nav-wrapper { gap: 6px; padding: 0 10px; }
  .pl .pl-nav .pl-logo { width: 136px; height: 44px; flex-basis: 136px; }
  .pl .pl-nav .nav-wrapper > ul.right.hide-on-large-only { gap: 6px; }
  .pl .pl-nav .dropdown-trigger, .pl .pl-nav .pl-nav-theme { width: 36px; height: 36px; }
  .pl .pl-nav .pl-nav-burger { width: 36px; height: 36px; }
  .pl .pl-nav .nav-wrapper > ul.right.hide-on-large-only > li.dropdown-trigger { height: 36px; }
  .pl .pl-hero { padding: 20px 0 40px; }
  .pl .pl-hero h1 { max-width: 100%; font-size: clamp(30px, 8.5vw, 36px); }
  .pl .pl-hero .pl-hero-sub { max-width: 34rem; font-size: 16px; }
  .pl .pl-phone-img { width: min(320px, 86vw); }
  .pl .pl-section { padding: 42px 0; }
  .pl .pl-section-lead { font-size: 15px; }
  .pl .pl-pill { margin: 5px 3px; padding: 10px 12px; font-size: 13px; }
  .pl .pl-pay .pl-pay-item { margin: 7px 10px; font-size: 19px; }
  .pl .pl-benefit { padding: 22px 6px; }
  .pl .pl-benefit p { max-width: 30rem; }
  .pl .pl-benefits-cta .pl-btn, .pl .pl-benefits-cta .pl-btn-outline { margin: 6px 4px; }
  .pl .pl-academy { border-radius: 16px; }
  .pl .pl-academy .pl-academy-body { padding: 26px 22px; }
  .pl .pl-academy h3 { font-size: 29px; }
  .pl .pl-academy .pl-academy-img { min-height: 210px; max-height: 250px; }
  .pl .pl-stats-card { padding: 28px 16px 18px; }
  .pl .pl-stat .pl-stat-n { font-size: 34px; }
  .pl .pl-stat .pl-stat-n small { font-size: 23px; }
  .pl .pl-why { padding: 30px 20px 18px; border-radius: 16px; }
  .pl .pl-why h2 { margin-bottom: 24px; font-size: 30px; }
  .pl .pl-why-item { min-height: 0; margin-bottom: 24px; }
  .pl .pl-why-item .pl-why-icon { width: 40px; height: 40px; margin-right: 12px; }
  .pl .pl-footer { padding-top: 40px; text-align: center; }
  .pl .pl-footer .pl-footer-social a { margin: 0 7px; }
  .pl .pl-footer .container { width: calc(100% - 36px); }
}

@media only screen and (max-width: 360px) {
  .pl .pl-nav .nav-wrapper { gap: 4px; padding: 0 8px; }
  .pl .pl-nav .pl-logo { width: 112px; height: 40px; flex-basis: 112px; }
  .pl .pl-nav .nav-wrapper > ul.right.hide-on-large-only { gap: 4px; }
  .pl .pl-nav .dropdown-trigger, .pl .pl-nav .pl-nav-theme { width: 33px; height: 33px; }
  .pl .pl-nav .pl-nav-burger { width: 33px; height: 33px; }
  .pl .pl-nav .dropdown-trigger > .flag-icon { width: 19px; height: 14px; }
  .pl .pl-nav .nav-wrapper > ul.right.hide-on-large-only > li.dropdown-trigger { height: 33px; }
  .pl .pl-nav .nav-wrapper > ul.right:not(.hide-on-med-and-down):not(.hide-on-large-only) { margin-left: 0; }
  .pl .pl-hero h1 { font-size: 29px; }
  .pl .pl-section { padding: 36px 0; }
}

/* Hide the Google Translate top banner */
.goog-te-banner-frame.skiptranslate {
  display: none !important;
}

.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  box-shadow: none !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.goog-te-banner-frame.skiptranslate {
  display: none !important;
}