@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@400;500;600;700&display=swap);
/* PR (Proline-style) design — scoped styles
 * Rules: only theme-system CSS vars (set in prThemeReducer.js),
 *        no design-specific vars, single @media block at the bottom.
 *
 * Typography matches Proline source:
 *   - Display/headings: "Sora" (geometric, free Google Fonts substitute for Mori),
 *     semibold 600, with -0.02em tracking
 *   - Body / UI / numerics: "Inter" 400/500/600
 */

/* ===== Proline animations ===== */
@keyframes pr-rotate-border-line {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 14px; }
}

@keyframes pr-rotate-pill-border {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 4px; }
}

@keyframes pr-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes pr-shimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

@keyframes pr-shimmer-reverse {
  0% { left: 200%; }
  100% { left: -100%; }
}

@keyframes pr-letter-slide-in {
  0% { opacity: 0; filter: blur(2px); transform: translateY(3px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes pr-orb-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pr-fade-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ===== Rotating dashed border (SVG) wrapper =====
 * Drop <PRBorder /> inside any position: relative element.
 * The SVG fills the bounding box and animates stroke-dashoffset
 * for the "marching ants" effect Proline uses on every card/pill.
 */
.pr .pr-rotating-border {
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  overflow: visible;
  z-index: 0;
}

.pr .pr-rotating-border svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.pr .pr-rotating-border rect {
  fill: none;
  stroke: var(--border-colour);
  stroke-width: 1px;
  stroke-dasharray: 6 8;
  animation: 3s linear infinite pr-rotate-border-line;
  vector-effect: non-scaling-stroke;
}

.pr .pr-rotating-border-tight rect {
  stroke-dasharray: 2 2;
  animation: 3s linear infinite pr-rotate-pill-border;
}

/* ===== Shimmer hover overlay ===== */
.pr .pr-shimmer-wrap {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.pr .pr-shimmer-overlay,
.pr .pr-shimmer-overlay-reverse {
  position: absolute;
  top: 0;
  height: 100%;
  width: 60%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(190, 167, 255, 0.10) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
}

.pr .pr-shimmer-overlay { left: -100%; }
.pr .pr-shimmer-overlay-reverse { left: 200%; }

.pr .pr-feature-card:hover .pr-shimmer-overlay {
  animation: 0.8s ease-in-out forwards pr-shimmer;
}

.pr .pr-feature-card:hover .pr-shimmer-overlay-reverse {
  animation: 0.8s ease-in-out forwards pr-shimmer-reverse;
}

/* ===== Float ===== */
.pr .pr-float {
  animation: 5s ease-in-out infinite pr-float;
}

/* ===== Section backlight ===== */
.pr .pr-backlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  background: linear-gradient(180deg, rgba(113, 50, 245, 0.06) 0%, transparent 40%);
  opacity: 0.6;
  transition: opacity 0.3s;
}

/* Make sure all real card content sits above border/shimmer/backlight.
 * Don't set overflow:hidden on cards — that would clip the rotating
 * stroke. Clipping happens inside .pr-shimmer-wrap instead. */
.pr .pr-feature-card,
.pr .pr-review-card,
.pr .pr-pill,
.pr .pr-stats-card {
  position: relative;
}

.pr .pr-feature-card > *:not(.pr-rotating-border):not(.pr-shimmer-wrap),
.pr .pr-review-card > *:not(.pr-rotating-border):not(.pr-shimmer-wrap),
.pr .pr-pill > *:not(.pr-rotating-border) {
  position: relative;
  z-index: 2;
}

/* Pill gradient text + arrow chip — Proline pillText style */
.pr .pr-pill-text {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary-button) 70%, white) 0%,
    color-mix(in srgb, var(--primary-button) 80%, white) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.pr .pr-pill-arrow {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary-button);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.pr .pr-pill-arrow svg {
  display: block;
}

/* Section "in view" reveal — base state set in JSX with .pr-reveal,
 * elements animate on intersection (added via .pr-revealed class) */
.pr .pr-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.pr .pr-reveal.pr-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger reveals when multiple items appear in the same viewport */
.pr .row.pr-reveal-stagger > [class*="col"]:nth-child(1) .pr-reveal { transition-delay: 0ms; }
.pr .row.pr-reveal-stagger > [class*="col"]:nth-child(2) .pr-reveal { transition-delay: 80ms; }
.pr .row.pr-reveal-stagger > [class*="col"]:nth-child(3) .pr-reveal { transition-delay: 160ms; }
.pr .row.pr-reveal-stagger > [class*="col"]:nth-child(4) .pr-reveal { transition-delay: 240ms; }
.pr .row.pr-reveal-stagger > [class*="col"]:nth-child(5) .pr-reveal { transition-delay: 320ms; }
.pr .row.pr-reveal-stagger > [class*="col"]:nth-child(6) .pr-reveal { transition-delay: 400ms; }

.pr {
  background: var(--background-colour);
  color: var(--background-font-colour);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  min-height: 100vh;
  overflow-x: hidden;
}

.pr h1,
.pr h2,
.pr h3,
.pr h4,
.pr h5,
.pr h6 {
  color: var(--background-heading-colour);
  font-family: 'Sora', 'Inter', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 16px;
}

/* Hero "lockup" title — Proline: 60px / 66px line-height */
.pr h1 {
  font-size: 60px;
  line-height: 66px;
  font-weight: 600;
}

/* Section title — Proline: 40px / 48px */
.pr h2 {
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
}

/* Sub-card title — Proline: 18px / 24px (mobile section title) */
.pr h5 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}

/* Feature block title — Proline: 16px / 16px */
.pr h6 {
  font-size: 16px;
  line-height: 16px;
  font-weight: 600;
}

.pr p {
  color: var(--background-font-colour);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 22px;
  margin: 0 0 12px;
}

.pr .container {
  max-width: 1180px;
  width: 92%;
  margin: 0 auto;
}

/* Pill — Proline pillContainer style: faint outline bg with rotating border,
 * gradient text, optional arrow chip on the right. 14px / 18px Inter. */
.pr .pr-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(190, 167, 255, 0.06);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  margin-bottom: 18px;
  position: relative;
}

.pr .pr-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-button);
  box-shadow: 0 0 8px var(--primary-button);
}

/* Buttons — Proline buttonText: 14px / 20px Inter 500 */
.pr .pr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
}

.pr .pr-btn-arrow {
  transition: transform 0.18s ease-out;
}

.pr .pr-btn:hover .pr-btn-arrow {
  transform: translateX(3px);
}

.pr .pr-btn-text {
  display: inline-block;
}

.pr .pr-btn-primary {
  background: var(--primary-button);
  color: #ffffff;
}

.pr .pr-btn-primary:hover {
  filter: brightness(1.1);
  color: #ffffff;
}

.pr .pr-btn-ghost {
  background: var(--primary-background);
  color: var(--background-heading-colour);
  border: 1px solid var(--border-colour);
}

.pr .pr-btn-lg {
  padding: 12px 24px;
  font-size: 14px;
  line-height: 20px;
}

.pr .pr-btn-sm {
  padding: 6px 12px;
  font-size: 12px;
  line-height: 16px;
}

/* Header — Proline keeps it fully transparent across all breakpoints */
.pr .pr-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 18px 0;
  background: transparent;
}

.pr .pr-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.pr .pr-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.pr .pr-logo-mark {
  display: inline-flex;
  align-items: center;
}

/* Wordmark next to the logo — default visible (used by the footer) */
.pr .pr-logo-text {
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: var(--background-heading-colour);
  letter-spacing: -0.01em;
}

/* Proline header uses only the lightning-bolt glyph — wordmark hidden in
 * the header context. (Footer keeps its own brand text.) */
.pr .pr-header .pr-logo-text {
  display: none;
}

.pr .pr-nav ul {
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pr .pr-nav a {
  color: var(--nav-primary-font-colour);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  transition: color 0.15s ease;
}

.pr .pr-nav a:hover {
  color: var(--background-heading-colour);
}

.pr .pr-caret {
  margin-left: 4px;
  opacity: 0.6;
  vertical-align: -1px;
}

.pr .pr-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pr .pr-mobile-trigger {
  color: var(--background-heading-colour);
}

/* Hero — Proline hero: padding 160px 0, lockup max-width 650px */
.pr .pr-hero {
  position: relative;
  padding: 120px 0 80px;
  text-align: center;
  overflow: hidden;
}

.pr .pr-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}

.pr .pr-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Veil the (dark) bg video with the page colour so it reads as a subtle
   * texture in BOTH themes — on the light theme an unveiled dark video
   * turns the whole hero muddy grey. */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--background-colour) 45%, transparent) 0%,
    var(--background-colour) 90%
  );
  z-index: 1;
  pointer-events: none;
}

.pr .pr-hero-bignum {
  position: absolute;
  top: 60px;
  left: -40px;
  font-size: 260px;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--background-font-colour) 14%, transparent);
  letter-spacing: -0.05em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.pr .pr-hero-inner {
  position: relative;
  z-index: 2;
}

/* Hero lockup title — Proline lockupTitle: 60px / 66px, Mori/Sora 600 */
.pr .pr-hero-title {
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
  font-size: 60px;
  line-height: 66px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 12px 0 20px;
}

/* Hero subtext — Proline lockupSubtext: 18px / 26px Inter */
.pr .pr-hero-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px;
  line-height: 26px;
  color: var(--background-font-colour);
  max-width: 560px;
  margin: 0 auto 28px;
}

/* Hero screenshot — real dashboard PNG */
.pr .pr-hero-screenshot {
  margin: 60px auto 0;
  max-width: 1080px;
  position: relative;
}

.pr .pr-hero-screenshot img {
  width: 100%;
  height: auto;
  display: block;
  /* The dashboard PNGs have transparent panels — back them with the dark
   * secondary surface or they ghost out on the light theme's white page. */
  background: var(--secondary-background);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(113, 50, 245, 0.18);
  border: 1px solid var(--border-colour);
}

/* Dashboard mock card (legacy JSX — kept for reference, replaced by screenshot above) */
.pr .pr-dashboard-card {
  margin-top: 60px;
  display: flex;
  gap: 1px;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 18px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.pr .pr-dashboard-side {
  width: 200px;
  flex: 0 0 200px;
  background: var(--secondary-background);
  padding: 20px 0;
}

.pr .pr-dashboard-side-logo {
  padding: 0 20px 16px;
  border-bottom: 1px solid var(--border-colour);
  margin-bottom: 10px;
}

.pr .pr-dashboard-side ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr .pr-dashboard-side li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  font-size: 13px;
  color: var(--secondary-font-colour);
  cursor: pointer;
}

.pr .pr-dashboard-side li.active {
  color: var(--background-heading-colour);
  background: rgba(190, 167, 255, 0.06);
  border-left: 2px solid var(--primary-button);
  padding-left: 18px;
}

.pr .pr-dashboard-side li .material-icons {
  font-size: 18px;
  opacity: 0.75;
}

.pr .pr-dashboard-main {
  flex: 1 1 auto;
  padding: 20px 24px;
  background: var(--primary-background);
  min-width: 0;
}

.pr .pr-dashboard-balance-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 18px;
}

.pr .pr-dashboard-label {
  font-size: 11px;
  color: var(--secondary-font-colour);
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pr .pr-dashboard-balance {
  font-size: 24px;
  font-weight: 600;
  color: var(--background-heading-colour);
  margin: 0;
}

.pr .pr-dashboard-actions-mini {
  display: flex;
  gap: 6px;
}

.pr .pr-mini-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-colour);
  background: transparent;
  color: var(--background-heading-colour);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pr .pr-mini-icon .material-icons {
  font-size: 16px;
}

.pr .pr-dashboard-holdings {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr .pr-dashboard-holdings li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-colour);
  font-size: 13px;
}

.pr .pr-dashboard-holdings li .pr-holdings-name {
  flex: 1 1 auto;
  min-width: 0;
}

.pr .pr-dashboard-holdings li:last-child {
  border-bottom: 0;
}

.pr .pr-holdings-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  flex-shrink: 0;
}

.pr .pr-holdings-icon img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.pr .pr-holdings-name {
  color: var(--background-heading-colour);
  font-weight: 500;
}

.pr .pr-holdings-name em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--primary-font-colour);
}

.pr .pr-holdings-amount {
  color: var(--secondary-font-colour);
  font-weight: 500;
}

.pr .pr-holdings-change {
  font-weight: 600;
  font-size: 12px;
}

.pr .pr-holdings-change.positive,
.pr .positive {
  color: #01B28B;
}

.pr .pr-holdings-change.negative,
.pr .negative {
  color: #FF3344;
}

.pr .pr-dashboard-chart {
  margin-top: 12px;
  height: 60px;
}

.pr .pr-dashboard-chart svg {
  width: 100%;
  height: 100%;
}

.pr .pr-dashboard-stats {
  width: 260px;
  flex: 0 0 260px;
  padding: 20px;
  background: var(--secondary-background);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pr .pr-stats-card {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 12px;
  padding: 14px;
}

.pr .pr-donut {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 6px auto 10px;
}

.pr .pr-donut svg {
  width: 100%;
  height: 100%;
}

.pr .pr-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--background-heading-colour);
  font-size: 18px;
}

.pr .pr-stats-legend {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr .pr-stats-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--secondary-font-colour);
  padding: 4px 0;
}

.pr .pr-stats-legend li span {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.pr .pr-stats-legend li em {
  margin-left: auto;
  font-style: normal;
  color: var(--background-heading-colour);
  font-weight: 600;
}

.pr .pr-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.pr .pr-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(190, 167, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.pr .pr-progress-bar i {
  display: block;
  height: 100%;
  background: var(--primary-button);
}

.pr .pr-progress-row em {
  font-style: normal;
  font-weight: 600;
  color: var(--background-heading-colour);
  font-size: 12px;
}

.pr .pr-bars-mini {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 60px;
}

.pr .pr-bars-mini i {
  flex: 1;
  border-radius: 2px;
}

/* Why */
.pr .pr-why {
  padding: 40px 0 80px;
}

.pr .pr-why-item {
  padding: 24px 16px;
  text-align: left;
}

/* Proline why-item icon — no circular wrapper, just an accent-purple glyph */
.pr .pr-why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-button);
  margin-bottom: 12px;
}

/* subFeatureBlockTitle — Mori/Sora 600 14px/18px */
.pr .pr-why-item h6 {
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--background-heading-colour);
  margin: 0 0 8px;
}

/* subFeatureBlockDescription — Inter 14px/22px text-extra */
.pr .pr-why-item p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--primary-font-colour);
  margin: 0;
}

/* Section heading — Proline lockup: centered column, max-width 650px */
.pr .pr-section-head {
  text-align: center;
  margin: 60px auto 40px;
  max-width: 650px;
}

.pr .pr-section-head .pr-pill {
  margin-bottom: 16px;
}

.pr .pr-section-head h2 {
  margin: 0 0 14px;
}

.pr .pr-section-head p {
  margin: 0;
}

/* Section head paragraph — Proline contentRightText: 16px / 24px Inter */
.pr .pr-section-head p {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--background-font-colour);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

/* Features */
.pr .pr-features {
  padding: 60px 0;
}

/* Proline featureBlockWrapper: 44px padding for big cards, smaller for compact */
.pr .pr-feature-card {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 16px;
  padding: 32px;
  height: 100%;
}

.pr .pr-feature-card-lg {
  padding: 44px;
  min-height: 380px;
}

.pr .pr-feature-card-head {
  margin-bottom: 18px;
}

/* mainFeatureBlockTitle — Mori/Sora 600 16px */
.pr .pr-feature-card-head h5 {
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 16px;
  font-weight: 600;
  margin: 0 0 8px;
}

/* mainFeatureBlockDesc — Inter 16px/24px text-tertiary */
.pr .pr-feature-card-head p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: var(--primary-font-colour);
  margin: 0;
}

.pr .pr-markets-table {
  font-size: 13px;
}

.pr .pr-markets-th,
.pr .pr-markets-tr {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  align-items: center;
}

.pr .pr-markets-th > span,
.pr .pr-markets-tr > span {
  flex: 1 1 0;
}

.pr .pr-markets-name {
  flex: 1.5 1 0 !important;
}

.pr .pr-markets-th {
  font-size: 11px;
  color: var(--primary-font-colour);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-colour);
}

.pr .pr-markets-tr {
  border-bottom: 1px solid var(--border-colour);
}

.pr .pr-markets-tr:last-child {
  border-bottom: 0;
}

.pr .pr-markets-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--background-heading-colour);
  font-weight: 500;
}

.pr .pr-markets-name i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  overflow: hidden;
  flex-shrink: 0;
}

.pr .pr-markets-name i img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

/* Always-dark product surfaces (they keep the dark secondary background in
 * BOTH themes): pin their hairlines to a translucent lavender, because
 * --border-colour flips to a pale tint in light mode and would glare
 * against these dark panels. */
.pr .pr-hero-screenshot img,
.pr .pr-copy-card,
.pr .pr-speed-card,
.pr .pr-leverage-card,
.pr .pr-cardmock-inner {
  --border-colour: rgba(190, 167, 255, 0.16);
}

.pr .pr-copy-card {
  background: var(--secondary-background);
  border: 1px solid var(--border-colour);
  border-radius: 12px;
  padding: 16px;
}

.pr .pr-copy-trader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-colour);
}

.pr .pr-copy-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #050024;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
  background: #FFB266;
}

.pr .pr-copy-avatar-img {
  background: transparent;
}

.pr .pr-copy-avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pr .pr-copy-trader > div {
  flex: 1;
}

/* traderName — 14px/20px */
.pr .pr-copy-trader strong {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--secondary-heading-colour);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  display: block;
}

/* traderUsername — 12px/12px text-extra */
.pr .pr-copy-trader em {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--secondary-font-colour);
  font-style: normal;
  font-size: 12px;
  line-height: 12px;
}

.pr .pr-copy-stats {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-colour);
}

.pr .pr-copy-stats > div {
  flex: 1 1 0;
}

.pr .pr-copy-stats:last-child {
  border-bottom: 0;
}

/* copyTradingInfoRow value — 12px/12px */
.pr .pr-copy-stats > div strong {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--secondary-heading-colour);
  font-size: 12px;
  line-height: 12px;
  font-weight: 600;
}

.pr .pr-copy-stats > div span {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--secondary-font-colour);
  font-size: 12px;
  line-height: 12px;
  margin-top: 4px;
}

/* Small features row */
.pr .pr-small-features {
  margin-top: 36px;
}

/* Small feature block — icon now lives inside the h6 so it sits inline
 * with the title naturally. The p body sits underneath. Desktop is
 * left-aligned, mobile flips to centered (rule in @media at the bottom). */
.pr .pr-small-feature {
  padding: 18px 12px;
}

.pr .pr-small-feature h6 {
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--background-heading-colour);
  display: flex;
  align-items: center;
  gap: 8px;
}

.pr .pr-small-feature p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--primary-font-colour);
  margin: 0;
}

.pr .pr-small-feature-vert {
  flex-direction: column;
  text-align: left;
}

/* Small-feature icon — accent-purple glyph, no circle */
.pr .pr-small-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-button);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* Card section */
.pr .pr-card-section {
  padding: 80px 0;
  text-align: center;
}

/* Crypto card section feature blocks — Proline subFeatureBlock pattern:
 * horizontal icon-left-of-title, body underneath, dashed vertical divider
 * between each column. */
.pr .pr-card-features {
  margin-top: 24px !important;
}

.pr .pr-card-feature-col {
  position: relative;
}

.pr .pr-card-feature-col.pr-card-feature-divider::before {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 0;
  border-left: 1px dashed var(--border-colour);
}

.pr .pr-card-feature {
  padding: 16px 22px;
  text-align: left;
}

.pr .pr-card-feature-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.pr .pr-card-feature-icon {
  font-size: 18px !important;
  color: var(--primary-button);
  flex-shrink: 0;
}

.pr .pr-card-feature h6 {
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--background-heading-colour);
  margin: 0;
}

.pr .pr-card-feature p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--primary-font-colour);
  margin: 0;
}

/* Slim Proline-style card mock — Proline mobile dimensions ~320×170 */
.pr .pr-cardmock {
  margin: 0 auto 40px;
  width: 320px;
  max-width: 90%;
}

.pr .pr-cardmock-inner {
  /* Opaque dark gradient (was translucent) — over the light theme's white
   * page the see-through version turned murky grey. */
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--secondary-background) 70%, var(--background-colour)) 0%,
    var(--secondary-background) 100%
  );
  border: 1px solid var(--border-colour);
  border-radius: 14px;
  padding: 20px;
  text-align: left;
  position: relative;
  height: 180px;
}

.pr .pr-cardmock-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pr .pr-cardmock-visa {
  color: var(--secondary-heading-colour);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.06em;
  font-size: 18px;
}

.pr .pr-cardmock-chip {
  display: none;
}

.pr .pr-cardmock-num {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: var(--secondary-font-colour);
  letter-spacing: 0.18em;
  font-weight: 500;
  font-size: 15px;
}

/* Tools */
.pr .pr-tools {
  padding: 80px 0;
  position: relative;
}

/* Subtle gradient hairline divider between major sections — Proline pattern */
.pr .pr-tools::before,
.pr .pr-card-section::before,
.pr .pr-features::before,
.pr .pr-reviews::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 1080px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--border-colour) 50%,
    transparent 100%
  );
  pointer-events: none;
}

/* Tools brand orbs — 5 round chips, center one highlighted with purple glow ring */
.pr .pr-tools-orbs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.pr .pr-tools-orb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-colour);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 0.2s, transform 0.2s;
}

.pr .pr-tools-orb img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.pr .pr-tools-orb.active {
  width: 44px;
  height: 44px;
  opacity: 1;
  border-color: var(--primary-button);
  box-shadow: 0 0 0 6px rgba(113, 50, 245, 0.12), 0 0 24px rgba(113, 50, 245, 0.45);
  transform: scale(1);
  position: relative;
}

/* Proline orbShadow SVG behind the active orb */
.pr .pr-tools-orb-shadow {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0.6;
  filter: blur(8px);
  pointer-events: none;
}

/* "Built for speed" card — Proline digital/dot-matrix style display */
.pr .pr-speed-card {
  background: var(--secondary-background);
  border: 1px solid var(--border-colour);
  border-radius: 12px;
  padding: 16px;
  margin-top: 20px;
  position: relative;
}

.pr .pr-speed-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 70px;
}

.pr .pr-speed-bars i {
  flex: 1;
  border-radius: 1px;
  opacity: 0.85;
}

.pr .pr-speed-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-family: 'Inter', monospace;
  color: var(--secondary-font-colour);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-colour);
}

.pr .pr-speed-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 10px;
  border-bottom: 1px dashed var(--border-colour);
  margin-bottom: 10px;
}

.pr .pr-speed-digital {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: #46DFA5;
  font-family: 'Courier New', monospace;
  font-feature-settings: 'tnum';
  text-shadow: 0 0 12px rgba(70, 223, 165, 0.4);
}

.pr .pr-speed-digital strong {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pr .pr-speed-digital em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.15em;
}

.pr .pr-speed-stats {
  display: inline-flex;
  gap: 24px;
}

.pr .pr-speed-stats > span {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
}

.pr .pr-speed-stats em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--secondary-font-colour);
}

.pr .pr-speed-stats strong {
  font-family: 'Courier New', monospace;
  font-size: 16px;
  color: var(--secondary-heading-colour);
  font-weight: 700;
}

.pr .pr-speed-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--secondary-font-colour);
  text-transform: uppercase;
}

.pr .pr-speed-bottom em {
  color: #46DFA5;
  font-style: normal;
  font-weight: 700;
  margin-right: 4px;
}

.pr .pr-speed-strength {
  display: inline-flex;
  gap: 3px;
  margin-left: 6px;
  vertical-align: middle;
}

.pr .pr-speed-strength i {
  width: 10px;
  height: 8px;
  border: 1px solid var(--border-colour);
  border-radius: 1px;
  display: inline-block;
}

.pr .pr-speed-strength i.on {
  background: #46DFA5;
  border-color: #46DFA5;
}

.pr .pr-leverage-card {
  background: var(--secondary-background);
  border: 1px solid var(--border-colour);
  border-radius: 12px;
  padding: 16px;
  margin-top: 20px;
}

.pr .pr-leverage-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--secondary-font-colour);
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border-colour);
  margin-bottom: 12px;
}

.pr .pr-leverage-head em {
  color: var(--secondary-heading-colour);
  font-style: normal;
  font-weight: 600;
}

.pr .pr-leverage-amount {
  font-size: 20px !important;
  font-weight: 600 !important;
}

.pr .pr-leverage-stats {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr .pr-leverage-stats li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 6px 0;
}

.pr .pr-leverage-stats li span {
  color: var(--secondary-font-colour);
}

.pr .pr-leverage-stats li em {
  color: var(--secondary-heading-colour);
  font-style: normal;
  font-weight: 500;
  font-family: 'Inter', monospace;
}

.pr .pr-leverage-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  margin-top: 14px;
  border-top: 1px dashed var(--border-colour);
  font-size: 12px;
  color: var(--secondary-font-colour);
}

.pr .pr-toggle {
  display: inline-block;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: var(--primary-button);
  position: relative;
  flex-shrink: 0;
}

.pr .pr-toggle i {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
}

.pr .pr-leverage-symbol {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-colour);
  margin-bottom: 14px;
  color: var(--secondary-heading-colour);
  font-weight: 500;
}

.pr .pr-leverage-symbol em {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
}

.pr .pr-leverage-slider {
  position: relative;
  height: 6px;
  background: rgba(190, 167, 255, 0.12);
  border-radius: 999px;
  margin: 18px 0 18px;
}

.pr .pr-leverage-slider i {
  display: block;
  height: 100%;
  background: var(--primary-button);
  border-radius: 999px;
}

.pr .pr-leverage-slider b {
  position: absolute;
  top: -28px;
  transform: translateX(-50%);
  background: var(--primary-button);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
}

.pr .pr-leverage-marks {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--secondary-font-colour);
}

.pr .pr-leverage-marks .active {
  color: var(--secondary-heading-colour);
  font-weight: 600;
}

/* Reviews */
.pr .pr-reviews {
  padding: 60px 0 100px;
}

.pr .pr-review-card {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 14px;
  padding: 22px;
  height: 100%;
}

.pr .pr-review-text {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--primary-font-colour);
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 22px;
}

.pr .pr-review-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pr .pr-review-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #050024;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}

.pr .pr-review-avatar-img {
  background: transparent;
}

.pr .pr-review-avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pr .pr-review-author strong {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--background-heading-colour);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.pr .pr-review-author em {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--primary-font-colour);
  font-style: normal;
  font-size: 12px;
  line-height: 16px;
}

/* Footer */
.pr .pr-footer {
  padding: 60px 0 30px;
  border-top: 1px solid var(--border-colour);
  background: var(--background-colour);
}

.pr .pr-footer-main {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border-colour);
}

.pr .pr-footer-brand {
  padding-right: 24px;
}

/* footerLinkHeader — Inter 500 13px/20px */
.pr .pr-footer-col h6 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  color: var(--background-heading-colour);
  margin-bottom: 12px;
}

.pr .pr-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr .pr-footer-col li {
  margin-bottom: 8px;
}

/* footerLinksItem — Inter 13px/20px */
.pr .pr-footer-col a {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--background-font-colour);
  font-size: 13px;
  line-height: 20px;
  text-decoration: none;
}

.pr .pr-footer-col a:hover {
  color: var(--background-heading-colour);
}

.pr .pr-footer-bottom {
  padding: 24px 0;
  align-items: center;
  font-size: 12px;
  color: var(--primary-font-colour);
}

.pr .pr-footer-socials {
  display: flex;
  gap: 14px;
}

.pr .pr-footer-socials a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--background-font-colour);
  text-decoration: none;
}

.pr .pr-footer-socials a:hover {
  color: var(--background-heading-colour);
}

.pr .pr-footer-socials .material-icons {
  font-size: 16px;
}

.pr .pr-footer-legal-links a {
  color: var(--background-font-colour);
  text-decoration: none;
  margin-left: 14px;
}

.pr .pr-footer-disclaimer {
  padding-top: 16px;
}

/* disclaimerText — 13px/20px text-tertiary */
.pr .pr-footer-disclaimer p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: var(--primary-font-colour);
}

/* Mobile / tablet — single block. Proline mobile sizes:
 *  - lockupTitle: 32px / 40px
 *  - section titles: 28px / 40px
 *  - lockupSubtext: 16px / 24px
 *  - feature desc: 14px / 24px
 */
@media (max-width: 992px) {
  .pr h1 {
    font-size: 32px;
    line-height: 40px;
  }
  .pr h2 {
    font-size: 28px;
    line-height: 40px;
  }
  .pr .pr-hero {
    padding: 40px 0;
  }
  .pr .pr-hero-title {
    font-size: 32px;
    line-height: 40px;
  }
  .pr .pr-hero-sub {
    font-size: 16px;
    line-height: 24px;
  }
  .pr .pr-hero-bignum {
    font-size: 140px;
    top: 80px;
    left: -20px;
  }
  .pr .pr-hero-screenshot {
    margin-top: 36px;
  }
  .pr .pr-feature-card-head p {
    font-size: 14px;
    line-height: 24px;
  }
  .pr .pr-dashboard-card {
    flex-direction: column;
  }
  .pr .pr-dashboard-side,
  .pr .pr-dashboard-stats {
    width: 100%;
    flex: none;
  }
  .pr .pr-dashboard-side ul {
    display: flex;
    overflow-x: auto;
  }
  .pr .pr-dashboard-side li {
    white-space: nowrap;
  }
  .pr .pr-dashboard-side li.active {
    border-left: 0;
    border-bottom: 2px solid var(--primary-button);
    padding-left: 20px;
  }
  .pr .pr-section-head {
    margin: 48px auto 28px;
  }
  /* More generous vertical breathing room on mobile so sections don't run
   * into each other (Proline mobile uses ~80px section padding). */
  .pr .pr-card-section,
  .pr .pr-tools,
  .pr .pr-features,
  .pr .pr-reviews {
    padding: 64px 0;
  }
  /* Big feature cards on mobile — Proline lets the heading + description
   * sit directly on the page background (no card chrome). Only the inner
   * table / copy-card retains its own contained styling. */
  .pr .pr-feature-card,
  .pr .pr-feature-card-lg {
    background: transparent;
    border: 0;
    padding: 8px 0;
    min-height: auto;
  }
  /* Kill the rotating dashed SVG border on mobile too — Proline shows none */
  .pr .pr-feature-card .pr-rotating-border,
  .pr .pr-feature-card-lg .pr-rotating-border {
    display: none;
  }
  /* Inner markets/copy/leverage panels: keep their own dark container on
   * mobile so they read as contained widgets sitting under each
   * description (Proline pattern). */
  .pr .pr-markets-table,
  .pr .pr-copy-card,
  .pr .pr-speed-card,
  .pr .pr-leverage-card {
    margin-top: 18px;
    background: var(--secondary-background);
    border: 1px solid var(--border-colour);
    border-radius: 12px;
    padding: 14px 16px;
  }
  /* The markets-table already had its own internal styling; just keep its
   * row dividers inside the new wrapper */
  .pr .pr-markets-table .pr-markets-th {
    padding-top: 4px;
  }
  /* On mobile the markets table moves onto the dark secondary surface in
   * BOTH themes — switch its text and hairlines to the secondary tokens. */
  .pr .pr-markets-table {
    --border-colour: rgba(190, 167, 255, 0.16);
  }
  .pr .pr-markets-table .pr-markets-th,
  .pr .pr-markets-table .pr-markets-tr {
    color: var(--secondary-font-colour);
  }
  .pr .pr-markets-table .pr-markets-name {
    color: var(--secondary-heading-colour);
  }
  /* Small features (Multi-account, Global market access, Fast deposits) —
   * Proline mobile: no card / background, centered, icon inline with the
   * title on a single row, description centered below. Dashed horizontal
   * divider between blocks. */
  .pr .pr-small-features {
    margin-top: 12px;
  }
  .pr .pr-small-features .col {
    margin-bottom: 0;
  }
  .pr .pr-small-feature {
    padding: 22px 0;
    border-bottom: 1px dashed var(--border-colour);
    text-align: center;
  }
  .pr .pr-small-features .col:last-child .pr-small-feature {
    border-bottom: 0;
  }
  .pr .pr-small-feature h6 {
    justify-content: center;
  }
  .pr .pr-small-feature p {
    max-width: 320px;
    margin: 0 auto;
  }
  /* Tools orbs — make them larger on mobile so the row reads clearly */
  .pr .pr-tools-orb {
    width: 38px;
    height: 38px;
  }
  .pr .pr-tools-orb.active {
    width: 56px;
    height: 56px;
  }
  .pr .pr-tools-orbs {
    gap: 16px;
    margin-bottom: 32px;
  }
  /* Crypto-card features: vertical divider becomes a horizontal one
   * between stacked cards on mobile. Centered icon-title-text block. */
  .pr .pr-card-feature-col.pr-card-feature-divider::before {
    top: 0;
    bottom: auto;
    left: 12px;
    right: 12px;
    width: auto;
    height: 0;
    border-left: 0;
    border-top: 1px dashed var(--border-colour);
  }
  .pr .pr-card-feature {
    text-align: center;
    padding: 22px 18px;
  }
  .pr .pr-card-feature-head {
    justify-content: center;
  }
  .pr .pr-card-feature p {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .pr .pr-footer-bottom {
    text-align: left;
  }
  .pr .pr-footer-legal-links {
    margin-top: 12px;
    text-align: left !important;
  }
  .pr .pr-footer-legal-links a {
    margin-left: 0;
    margin-right: 14px;
  }

  /* Mobile header — slightly tighter vertical padding. Already transparent
   * via the global rule. Wordmark hidden globally. */
  .pr .pr-header {
    padding: 14px 0;
  }

  /* Mobile hero screenshot — Proline uses a tall portrait image edge-to-edge
   * with no card border or shadow, gently blended into the page bg */
  .pr .pr-hero-screenshot {
    max-width: 100%;
    margin-top: 28px;
  }
  .pr .pr-hero-screenshot img {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .pr .pr-hero-screenshot-mobile {
    max-width: 360px;
    margin: 0 auto;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  }

  /* Mobile-only "All the features you need for profits" lockup, sits above
   * the stacked feature list. Centered, generous bottom margin. */
  .pr .pr-why-mobile-headline {
    text-align: center;
    margin: 24px auto 32px;
    max-width: 420px;
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--background-heading-colour);
  }

  /* Centered, divider-separated feature items (Proline mobile layout).
   * Title sits inline with its icon, body underneath. */
  .pr .pr-why-item {
    padding: 24px 0;
    border-bottom: 1px dashed var(--border-colour);
    text-align: center;
  }

  .pr .pr-why-item:last-child {
    border-bottom: 0;
  }

  .pr .pr-why-item h6 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
  }

  .pr .pr-why-icon {
    margin-bottom: 0;
    vertical-align: middle;
  }

  .pr .pr-why-item p {
    margin: 0;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   CR skin — Betterment-style guest site + dark SaaS console.

   Three surfaces live in this one file (it is the ONLY stylesheet
   the skin ships — every _css/*.css is auto-bundled by the skin
   registry, so a second file would ship globally):

     1. GUEST  — white space, big tight-tracked Manrope headlines,
                 a saturated YELLOW band and a deep NAVY band that
                 meet their neighbours through CHEVRON edges,
                 blue CTAs, pale-blue illustration panels.
     2. PAGE / CONTACT — the shared guest routes, re-chromed.
     3. DASHBOARD — a dark indigo console BY DEFAULT, painted from
                 --cr-dash-* tokens with literal white/rgba text.
                 Light theme = the `cr-light` class the (user)
                 _layout adds to the .cr-dash root; the LIGHT
                 CONSOLE section at the bottom re-tokens it white.

   RULES THIS FILE OBEYS
   - Every selector is scoped under `.cr` or `.cr-dash`. The bundle
     is global; an unscoped rule leaks into every other skin, the
     /user dashboard and /cp admin.
   - Brand surfaces that are the SAME colour in both themes (yellow,
     navy, the console) use --cr-* tokens + literal white/ink text.
     Surfaces that SHOULD flip (white cards, page bg) use the theme
     vars set by crThemeReducer.
   - --primary-button is hijacked at runtime by NODE_PRIMARY, so
     CTAs use var(--cr-blue), never var(--primary-button).
   - Layout is Materialize row/col in the JSX; this file only paints
     (plus the handful of single-row flex arrangements the layout
     rules allow: icon-next-to-text, header bars, bubble tails).
   - Desktop first. ONE @media (max-width: 992px) block at the very
     bottom, with a small phone-only block after it.
   ============================================================ */

:root {
  --cr-yellow: #ffd45e;
  --cr-yellow-soft: #ffe9a8;
  --cr-navy: #0a1a4a;
  --cr-navy-ink: #061232;
  /* the brighter royal blue the nav + hero band share (the deeper --cr-navy
     stays for the quiz band and the footer, which sit darker in the design) */
  --cr-royal: #17287d;
  --cr-blue: #1667e8;
  --cr-blue-dark: #0d4fc0;
  --cr-blue-10: #e3f5fd;
  --cr-grey-bg: #f4f5f6;
  --cr-teal: #16797f;
  --cr-ink: #16181d;
  --cr-indigo: #7b7df5;
  --cr-indigo-dark: #6567e0;
  --cr-dash-bg: #232743;
  --cr-dash-panel: #2a2f4d;
  --cr-dash-side: #1b1f36;
  --cr-line: #e4e6ea;

  /* console-only tiers — read by the recharts colour hook in
     (user)/index.js via getComputedStyle, so they are load-bearing */
  --cr-dash-grid: rgba(255, 255, 255, 0.09);
  --cr-dash-muted: #9fa4c8;

  /* text tiers for the permanently-dark / permanently-navy surfaces */
  --cr-on-dark: #ffffff;
  --cr-on-dark-70: rgba(255, 255, 255, 0.72);
  --cr-on-dark-50: rgba(255, 255, 255, 0.52);
  --cr-on-dark-line: rgba(255, 255, 255, 0.12);
  --cr-ink-60: rgba(22, 24, 29, 0.66);
  --cr-ink-45: rgba(22, 24, 29, 0.48);

  /* status colours (profit/buy vs loss/sell) — used by the trade modal */
  --cr-up: #16b364;
  --cr-up-dark: #12923f;
  --cr-down: #f04438;
  --cr-down-dark: #d92d20;
  --cr-up-soft: rgba(22, 179, 100, 0.1);
  --cr-down-soft: rgba(240, 68, 56, 0.1);
}

/* Google Translate (loaded in the twig) injects an inline height:100% on <html>,
   which clamps the root to the viewport and FREEZES page scrolling. Force the
   root back to its natural, content-driven height so the document scrolls. */
html {
  height: auto !important;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.cr {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.cr h1,
.cr h2,
.cr h3,
.cr h4,
.cr h5,
.cr h6 {
  font-family: 'Manrope', 'Inter', 'Segoe UI', Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.12;
  /* body { word-break: break-word } is global and shreds big headlines */
  word-break: normal;
  overflow-wrap: anywhere;
}

.cr p {
  line-height: 1.62;
}

/* full-bleed bands: Materialize columns are floats, so every band
   must clear the one above it or the layout snags */
.cr .cr-landing,
.cr .cr-press,
.cr .cr-help,
.cr .cr-savings,
.cr .cr-ira,
.cr .cr-automation,
.cr .cr-stats,
.cr .cr-reviews,
.cr .cr-accounts,
.cr .cr-quiz,
.cr .cr-hustle,
.cr .cr-contact,
.cr .cr-page-hero,
.cr .cr-page-body,
.cr .cr-footer {
  clear: both;
  position: relative;
}

/* ============================================================
   BUTTONS / LINK PRIMITIVES
   Guest CTAs are deliberately NOT Materialize .btn — restyling
   bare .btn would leak into every form in the app.
   ============================================================ */

.cr .cr-btn {
  display: inline-block;
  padding: 15px 30px;
  border: 1px solid var(--cr-blue);
  border-radius: 6px;
  background: var(--cr-blue);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.cr .cr-btn:hover {
  background: var(--cr-blue-dark);
  border-color: var(--cr-blue-dark);
  color: #ffffff;
  transform: translateY(-1px);
}

.cr .cr-btn-ghost {
  display: inline-block;
  padding: 15px 30px;
  border: 1px solid var(--cr-blue);
  border-radius: 6px;
  background: transparent;
  color: var(--cr-blue);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.cr .cr-btn-ghost:hover {
  background: var(--cr-blue-10);
  color: var(--cr-blue-dark);
}

/* ============================================================
   GUEST HEADER + DROPDOWN MENU + VALUE STRIP
   The audience bar is black and the nav sits on the SAME royal navy
   as the hero, so the two read as one band. Both hard-set their own
   colours instead of relying on --nav-primary-font-colour (that var
   belongs to the dashboard/admin nav).
   ============================================================ */

/* black audience switcher above the nav */
.cr .cr-audiencebar {
  background: #000000;
  height: 44px;
  line-height: 44px;
}

.cr .cr-audiencebar .container {
  white-space: nowrap;
  overflow-x: auto;
}

.cr a.cr-audience-link {
  display: inline-block;
  margin-right: 30px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  line-height: 40px;
}

.cr a.cr-audience-link:hover {
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

.cr a.cr-audience-active {
  border-bottom-color: #ffffff;
}

/* the template's feather markup: .fe base + feather-webfont's icon-* glyphs */
.fe {
  font-family: 'feather-icons';
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  speak: none;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   BOOTSTRAP-ERA COMPAT — cr runs on Bootstrap 5.3.3 (skin.js),
   so Materialize's css is pruned on cr-owned pages. These are
   the few Materialize behaviours the cr markup still leans on,
   replicated 1:1 and scoped under .cr. Shared default pages
   load Materialize's real css after Bootstrap, so these rules
   change nothing there.
   ============================================================ */

.cr a {
  text-decoration: none;
}

.cr .left {
  float: left !important;
}

.cr .right {
  float: right !important;
}

.cr .center {
  text-align: center !important;
}

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

.cr nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cr nav ul li {
  float: left;
  padding: 0;
  list-style: none;
}

.cr nav ul a {
  display: inline-block;
}

/* --- translator: Bootstrap/React dropdown (replaces the old M.Dropdown) --- */
@media only screen and (max-width: 992px) {
  .cr .hide-on-med-and-down {
    display: none !important;
  }
}

@media only screen and (min-width: 993px) {
  .cr .hide-on-large-only {
    display: none !important;
  }
}

.cr .cr-nav-wrap {
  position: relative;
  z-index: 999;
  /* the gradient's dark top colour — the hero gradient in .cr-landing starts
     from this exact colour, so the band flows seamlessly from the nav into the
     landing. The 2px shadow keeps the white page bg out of the nav/content seam. */
  background: #000b50;
  box-shadow: 0 2px 0 0 #000b50;
}

.cr .cr-nav {
  height: 78px;
  line-height: 78px;
  background: #000b50;
  color: #ffffff;
  box-shadow: none;
  /* keep visible so the Translator dropdown is not clipped */
  overflow: visible;
}

.cr .cr-nav .nav-wrapper::after {
  content: '';
  display: table;
  clear: both;
}

.cr .cr-nav ul li {
  margin-left: 0;
}

.cr .cr-nav ul li.dropdown-trigger:hover {
  color: var(--cr-blue);
  cursor: pointer;
}

.cr .cr-nav .dropdown-content {
  left: auto !important;
  right: 24px !important;
  width: 320px !important;
  max-width: calc(100vw - 48px) !important;
  border-radius: 10px;
}

.cr .cr-logo {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #ffffff;
}

/* guest-nav wordmark: uppercase + much smaller than the base logo */
.cr .cr-nav .cr-logo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* the section links sit immediately right of the logo */
.cr .cr-nav-sections {
  margin-left: 26px;
}

.cr .cr-nav ul a.cr-nav-link,
.cr .cr-nav ul button.cr-nav-link {
  margin: 0 13px;
  padding: 0;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
}

.cr .cr-nav ul a.cr-nav-link:hover,
.cr .cr-nav ul button.cr-nav-link:hover {
  color: rgba(255, 255, 255, 0.72);
}

.cr .cr-nav-caret.fe {
  font-size: 20px;
  vertical-align: -5px;
  margin-left: 1px;
  color: rgba(255, 255, 255, 0.85);
}

.cr .cr-nav-burger,
.cr .cr-nav-theme {
  display: inline-block;
  margin: 0 6px;
  color: #ffffff;
  cursor: pointer;
}

.cr .cr-nav-burger .fe,
.cr .cr-nav-theme .fe {
  font-size: 24px;
  vertical-align: -6px;
  color: #ffffff;
}

.cr .cr-nav-burger:hover .fe,
.cr .cr-nav-theme:hover .fe {
  color: rgba(255, 255, 255, 0.72);
}

.cr .cr-nav ul a.cr-nav-signin {
  margin: 0 16px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
}

.cr .cr-nav ul a.cr-nav-signin:hover {
  color: rgba(255, 255, 255, 0.72);
}

.cr .cr-nav ul a.cr-nav-cta {
  display: inline-block;
  height: auto;
  margin: 0 0 0 6px;
  padding: 11px 22px;
  border-radius: 6px;
  background: var(--cr-blue);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition: background 0.2s ease;
}

.cr .cr-nav ul a.cr-nav-cta:hover {
  background: var(--cr-blue-dark);
}

/* --- off-canvas menu panel (all widths, opened by the always-visible burger;
       full-screen on mobile, a right-anchored drawer on wider screens) --- */

.cr .cr-nav-menu {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(10, 26, 74, 0.38);
  animation: cr-menu-fade 0.18s ease;
}

@keyframes cr-menu-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.cr .cr-nav-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  box-shadow: -18px 0 48px rgba(10, 26, 74, 0.18);
  animation: cr-menu-slide 0.22s ease;
}

@keyframes cr-menu-slide {
  from {
    transform: translateX(26px);
    opacity: 0.5;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.cr .cr-nav-panel-head {
  flex: 0 0 auto;
  height: 78px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--cr-line);
}

.cr .cr-logo.cr-logo-ink {
  color: var(--cr-navy);
}

.cr .cr-nav-panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-right: -9px;
  color: var(--cr-ink);
  cursor: pointer;
}

.cr .cr-nav-panel-close .fe {
  font-size: 27px;
}

.cr .cr-nav-panel-close:hover {
  color: var(--cr-blue);
}

/* --- desktop section dropdowns (same links as the mobile accordion) --- */
.cr .cr-nav-section {
  position: relative;
}

.cr .cr-nav-sections .cr-nav-link {
  border: 0;
  background: transparent;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}

.cr .cr-nav-sections .cr-nav-link.is-open {
  color: #ffffff;
}

.cr .cr-nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1001;
  min-width: 262px;
  padding: 10px 0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(10, 26, 74, 0.22);
}

.cr .cr-nav-dropdown-link {
  display: block;
  padding: 10px 20px;
  color: var(--cr-ink);
  font-size: 14.5px;
  line-height: 1.35;
  white-space: normal;
}

.cr .cr-nav-dropdown-link:hover {
  background: var(--cr-grey-bg);
  color: var(--cr-blue);
}

.cr .cr-nav-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 22px 30px 22px;
}

/* --- accordion groups in the off-canvas menu --- */
.cr .cr-nav-group {
  border-bottom: 1px solid var(--cr-line);
}

.cr .cr-nav-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 17px 2px;
  border: 0;
  background: transparent;
  color: var(--cr-ink);
  font-family: inherit;
  font-size: 19px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.cr .cr-nav-group-head .fe {
  top: 0;
  color: var(--cr-ink-45);
  font-size: 20px;
}

/* the open section's title turns blue and underlined, as in the reference */
.cr .cr-nav-group-head.is-open {
  color: var(--cr-blue);
  text-decoration: underline;
}

.cr .cr-nav-group-head.is-open .fe {
  color: var(--cr-blue);
}

/* the revealed links sit on a grey tray, indented under the title */
.cr .cr-nav-group-body {
  margin: 0 -22px;
  padding: 6px 0 14px 0;
  background: var(--cr-grey-bg);
}

.cr .cr-nav-group-link {
  display: block;
  padding: 9px 32px;
  color: var(--cr-ink);
  font-size: 17px;
  font-weight: 400;
}

.cr .cr-nav-group-link:hover {
  color: var(--cr-blue);
}

.cr .cr-nav-menu-link .fe {
  font-size: 22px;
  color: var(--cr-ink-45);
}

.cr .cr-nav-menu-link:hover,
.cr .cr-nav-menu-link:hover .fe {
  color: var(--cr-blue);
}

.cr .cr-nav-menu-section {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--cr-line);
}

.cr .cr-nav-menu-label {
  margin: 0 0 4px 0;
  color: var(--cr-ink-45);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cr .cr-nav-menu-sublink {
  display: block;
  padding: 13px 2px;
  color: var(--cr-ink);
  font-size: 18px;
  font-weight: 500;
}

.cr .cr-nav-menu-sublink:hover {
  color: var(--cr-blue);
}

.cr .cr-nav-panel-actions {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--cr-line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cr .cr-nav-menu-cta,
.cr .cr-nav-menu-login {
  display: block;
  width: 100%;
  padding: 16px 20px;
  border-radius: 8px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cr .cr-nav-menu-cta {
  background: var(--cr-blue);
  color: #ffffff;
}

.cr .cr-nav-menu-cta:hover {
  background: var(--cr-blue-dark);
  color: #ffffff;
}

.cr .cr-nav-menu-login {
  background: #ffffff;
  color: var(--cr-ink);
  border: 1px solid var(--cr-line);
}

.cr .cr-nav-menu-login:hover {
  border-color: var(--cr-blue);
  color: var(--cr-blue);
}

/* --- value strip BELOW the hero; sticks to the top once scrolled past --- */

.cr .cr-valuestrip {
  clear: both;
  position: sticky;
  top: 0;
  z-index: 900;
  background: #ffffff;
  border-bottom: 1px solid var(--cr-line);
}

.cr .cr-valuestrip-row {
  margin-bottom: 0;
}

.cr .cr-valuestrip-item {
  display: block;
  padding: 24px 4px;
  text-align: center;
  color: var(--cr-ink);
  font-size: 15px;
}

.cr .cr-valuestrip-item:hover .cr-valuestrip-title {
  color: var(--cr-blue);
}

.cr .cr-valuestrip-title {
  color: var(--cr-ink);
  font-weight: 400;
  transition: color 0.2s ease;
}

.cr .cr-valuestrip-sub {
  color: var(--cr-ink);
}

/* --- generic hero band (used by pages that pass a hero object) --- */

.cr .cr-hero {
  background: var(--cr-navy);
}

.cr .cr-hero .cr-nav-wrap,
.cr .cr-hero .cr-nav {
  background: #ffffff;
}

.cr .cr-hero-body {
  padding: 76px 0 88px 0;
}

.cr .cr-hero-body h1 {
  max-width: 860px;
  margin: 0 auto;
  color: #ffffff;
  font-size: 52px;
}

.cr .cr-hero-body p {
  max-width: 640px;
  margin: 18px auto 0 auto;
  color: var(--cr-on-dark-70);
  font-size: 18px;
}

/* ============================================================
   HOMEPAGE — 1. LANDING
   ============================================================ */

/* the hero band — a vertical gradient, darker at the top */
.cr .cr-landing {
  padding: 30px 0 70px 0;
  background: linear-gradient(180deg, #000b50, #1b2a89 50%);
}

.cr .cr-landing-row {
  margin-bottom: 0;
}

/* --- dismissible promo card floating on the band --- */

.cr .cr-promo {
  position: relative;
  max-width: 880px;
  margin: 0 auto 58px auto;
  padding: 20px 56px 20px 60px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.cr .cr-promo-icon.fe {
  position: absolute;
  top: 22px;
  left: 22px;
  color: var(--cr-ink);
  font-size: 24px;
  cursor: default;
}

.cr .cr-promo-copy {
  margin: 0;
  color: var(--cr-ink);
  font-size: 15px;
  line-height: 1.5;
}

.cr a.cr-promo-link {
  color: var(--cr-blue);
  font-weight: 600;
  white-space: nowrap;
}

.cr a.cr-promo-link:hover {
  color: var(--cr-blue-dark);
}

.cr .cr-promo-close {
  position: absolute;
  top: 18px;
  right: 18px;
  color: var(--cr-ink);
  cursor: pointer;
}

.cr .cr-promo-close .fe {
  font-size: 22px;
}

/* --- hero copy --- */

.cr .cr-landing-copy {
  padding-top: 26px;
}

.cr .cr-landing-title {
  margin: 0 0 24px 0;
  color: #ffffff;
  font-family: 'GT America Extended', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.cr .cr-landing-sub {
  max-width: 500px;
  margin: 0 0 38px 0;
  color: #ffffff;
  font-size: 17px;
  line-height: 1.6;
}

.cr .cr-landing-sub b {
  font-weight: 700;
}

.cr .cr-landing-actions {
  margin-bottom: 0;
}

.cr .cr-landing-cta {
  margin-right: 26px;
  padding: 15px 30px;
  font-size: 16px;
}

.cr a.cr-landing-login {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cr a.cr-landing-login:hover {
  color: rgba(255, 255, 255, 0.78);
}

.cr .cr-landing-media {
  padding-top: 6px;
}

.cr .cr-landing-img {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  margin: 0 auto;
}

/* ============================================================
   HOMEPAGE — 2. PRESS STRIP
   ============================================================ */

.cr .cr-press {
  padding: 74px 0 34px 0;
  background: #ffffff;
}

.cr .cr-press-row {
  margin-bottom: 40px;
}

.cr .cr-press-cell {
  text-align: center;
}

.cr .cr-press-logo {
  display: block;
  max-height: 40px;
  width: auto;
  margin: 0 auto 16px auto;
}

/* the accolade under each logo */
.cr .cr-press-award {
  margin: 0;
  color: var(--cr-ink);
  font-size: 15px;
  line-height: 1.45;
}

.cr .cr-press-stars {
  margin: 0;
  color: var(--cr-ink);
  font-size: 19px;
  letter-spacing: 0.06em;
}

.cr .cr-press-rule {
  max-width: 940px;
  height: 1px;
  margin: 0 auto 22px auto;
  background: var(--cr-line);
}

.cr .cr-press-note {
  max-width: 880px;
  margin: 0 auto;
  color: #5b6472;
  font-size: 13px;
  line-height: 1.65;
}

.cr a.cr-press-link {
  color: var(--cr-blue);
  text-decoration: underline;
}

.cr a.cr-press-link:hover {
  color: var(--cr-blue-dark);
}

/* ============================================================
   HOMEPAGE — 3. HELP (two white cards)
   ============================================================ */

.cr .cr-help {
  padding: 92px 0 96px 0;
  /* permanently-light brand surface (see .cr-landing) */
  background: #ffffff;
}

.cr .cr-help-heading {
  max-width: 760px;
  margin: 0 auto 44px auto;
  color: var(--cr-ink);
  font-size: 44px;
}

.cr .cr-help-row {
  margin-bottom: 0;
}

.cr .cr-help-card {
  min-height: 300px;
  margin-bottom: 24px;
  padding: 34px 32px 30px 32px;
  border: 1px solid var(--cr-line);
  border-bottom: 3px solid var(--cr-line);
  border-radius: 12px;
  /* permanently-light brand surface (see .cr-landing) — also keeps the
     --cr-line border reading as a hairline rather than framing a dark card */
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(10, 26, 74, 0.06);
}

.cr .cr-help-card-title {
  margin: 0 0 14px 0;
  color: var(--cr-ink);
  font-size: 26px;
}

.cr .cr-help-card-text {
  margin: 0 0 18px 0;
  color: var(--cr-ink-60);
  font-size: 16px;
}

.cr .cr-help-disclaimer {
  margin: 0;
  color: var(--cr-ink-45);
  font-size: 11.5px;
  line-height: 1.6;
}

.cr .cr-help-disclaimer-link {
  color: var(--cr-blue);
  font-weight: 600;
  text-decoration: underline;
}

.cr .cr-help-disclaimer-link:hover {
  color: var(--cr-blue-dark);
}

/* ============================================================
   HOMEPAGE — 4. SAVINGS (pale blue band)
   ============================================================ */

.cr .cr-savings {
  padding: 92px 0;
  background: var(--cr-blue-10);
}

.cr .cr-savings-row {
  margin-bottom: 0;
}

.cr .cr-savings-copy {
  padding-top: 18px;
}

.cr .cr-savings-title {
  margin: 0 0 18px 0;
  color: var(--cr-ink);
  font-size: 44px;
}

.cr .cr-savings-lead {
  max-width: 520px;
  margin: 0 0 26px 0;
  color: var(--cr-ink-60);
  font-size: 17px;
}

.cr .cr-savings-list {
  margin: 0 0 30px 0;
  padding: 0;
}

.cr .cr-savings-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}

.cr .cr-savings-check.fe {
  top: 0;
  flex: 0 0 auto;
  margin-right: 11px;
  color: var(--cr-blue);
  font-size: 20px;
  cursor: default;
  vertical-align: middle;
}

.cr .cr-savings-item-text {
  color: var(--cr-ink);
  font-size: 15.5px;
  font-weight: 600;
}

.cr .cr-savings-cta {
  margin-bottom: 24px;
}

.cr .cr-savings-btn {
  margin-right: 18px;
}

.cr .cr-savings-more {
  color: var(--cr-blue);
  font-size: 15px;
  font-weight: 700;
}

.cr .cr-savings-more:hover {
  color: var(--cr-blue-dark);
}

.cr .cr-savings-more-arrow.fe {
  top: 0;
  margin-left: 5px;
  font-size: 17px;
  cursor: pointer;
  vertical-align: -3px;
  transition: transform 0.2s ease;
}

.cr .cr-savings-more:hover .cr-savings-more-arrow {
  transform: translateX(4px);
}

.cr .cr-savings-disclaimer {
  max-width: 540px;
  margin: 0;
  color: var(--cr-ink-45);
  font-size: 11.5px;
  line-height: 1.6;
}

.cr .cr-savings-figure {
  padding-left: 14px;
  text-align: center;
}

.cr .cr-savings-image {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto;
}

.cr .cr-savings-caption {
  margin-top: 12px;
  color: var(--cr-ink-45);
  font-size: 11px;
}

/* the second APY card sits below and slightly inset, as in the reference */
.cr .cr-savings-figure-offset {
  margin-top: 26px;
  padding-left: 34px;
}

/* ============================================================
   HOMEPAGE — 5. IRA (white band)
   ============================================================ */

.cr .cr-ira {
  padding: 94px 0;
  /* permanently-light brand surface (see .cr-landing) */
  background: #ffffff;
}

.cr .cr-ira-row {
  margin-bottom: 0;
}

.cr .cr-ira-figure {
  padding-right: 18px;
  text-align: center;
}

.cr .cr-ira-img {
  display: block;
  width: 100%;
  max-width: 580px;
  height: auto;
  margin: 0 auto;
}

.cr .cr-ira-caption {
  margin-top: 12px;
  color: var(--cr-ink-45);
  font-size: 11px;
}

.cr .cr-ira-copy {
  padding-top: 14px;
}

.cr .cr-ira-title {
  margin: 0 0 16px 0;
  color: var(--cr-ink);
  font-size: 42px;
}

.cr .cr-ira-lead {
  max-width: 520px;
  margin: 0 0 22px 0;
  color: var(--cr-ink-60);
  font-size: 17px;
}

.cr .cr-ira-list {
  margin: 0 0 26px 0;
  padding: 0;
}

.cr .cr-ira-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 11px;
}

.cr .cr-ira-check.fe {
  top: 0;
  flex: 0 0 auto;
  margin-right: 11px;
  color: var(--cr-blue);
  font-size: 20px;
  cursor: default;
}

.cr .cr-ira-item-text {
  color: var(--cr-ink);
  font-size: 15.5px;
  font-weight: 600;
}

/* the callout stays yellow in BOTH themes → literal ink text */
.cr .cr-ira-callout {
  margin-bottom: 28px;
  padding: 20px 22px;
  border-left: 4px solid var(--cr-yellow);
  border-radius: 10px;
  background: var(--cr-yellow-soft);
}

.cr .cr-ira-callout-title {
  margin: 0 0 6px 0;
  color: var(--cr-ink);
  font-size: 17px;
  font-weight: 800;
}

.cr .cr-ira-callout-text {
  margin: 0;
  color: var(--cr-ink-60);
  font-size: 14.5px;
}

.cr .cr-ira-inline-link {
  color: var(--cr-blue-dark);
  font-weight: 700;
  text-decoration: underline;
}

.cr .cr-ira-actions {
  line-height: 2.4;
}

.cr .cr-ira-btn {
  display: inline-block;
  margin-right: 20px;
  padding: 15px 30px;
  border-radius: 6px;
  background: var(--cr-blue);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  transition: background 0.2s ease;
}

.cr .cr-ira-btn:hover {
  background: var(--cr-blue-dark);
  color: #ffffff;
}

.cr .cr-ira-learn {
  color: var(--cr-blue);
  font-size: 15px;
  font-weight: 700;
}

.cr .cr-ira-learn:hover {
  color: var(--cr-blue-dark);
}

.cr .cr-ira-arrow.fe {
  top: 0;
  margin-left: 5px;
  font-size: 17px;
  cursor: pointer;
  vertical-align: -3px;
  transition: transform 0.2s ease;
}

.cr .cr-ira-learn:hover .cr-ira-arrow {
  transform: translateX(4px);
}

/* ============================================================
   HOMEPAGE — 3. AUTOMATION ("take the stress out of investing")
   ============================================================ */

.cr .cr-automation {
  padding: 70px 0 90px 0;
  background: #ffffff;
}

.cr .cr-automation-row {
  margin-bottom: 0;
}

.cr .cr-automation-figure {
  text-align: center;
}

.cr .cr-automation-image {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
}

.cr .cr-automation-copy {
  padding: 40px 0 0 20px;
}

.cr .cr-automation-title {
  max-width: 560px;
  margin: 0 0 20px 0;
  color: var(--cr-ink);
  font-size: 38px;
  line-height: 1.2;
}

.cr .cr-automation-text {
  max-width: 540px;
  margin: 0 0 26px 0;
  color: var(--cr-ink-60);
  font-size: 16px;
  line-height: 1.6;
}

/* blue-ticked benefit list */
.cr .cr-automation-list {
  margin: 0 0 30px 0;
}

.cr .cr-automation-list li {
  position: relative;
  margin-bottom: 13px;
  padding-left: 30px;
  color: var(--cr-ink);
  font-size: 16px;
  line-height: 1.5;
}

.cr .cr-automation-check.fe {
  position: absolute;
  top: 1px;
  left: 0;
  color: var(--cr-blue);
  font-size: 19px;
  font-weight: 700;
  cursor: default;
}

.cr .cr-automation-actions {
  margin: 0;
}

.cr .cr-automation-cta {
  margin-right: 24px;
  padding: 15px 28px;
  font-size: 16px;
}

.cr a.cr-automation-more {
  color: var(--cr-blue);
  font-size: 16px;
  font-weight: 600;
}

.cr a.cr-automation-more:hover {
  color: var(--cr-blue-dark);
}

/* ============================================================
   HOMEPAGE — 7. STATS (white→yellow chevron seam)
   The three cards straddle the seam: the section is white, the
   chevron paints the yellow lower half with an upward point.
   ============================================================ */

.cr .cr-stats {
  overflow: hidden;
  padding: 78px 0 64px 0;
  /* permanently-light brand surface (see .cr-landing) */
  background: #ffffff;
}

.cr .cr-stats-chevron {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 58%;
  color: var(--cr-yellow);
}

/* the curved cap sits at the top of the band ... */
.cr .cr-stats-chevron svg {
  display: block;
  width: 100%;
  height: 64px;
}

/* ... and everything below it is solid yellow */
.cr .cr-stats-chevron::after {
  content: '';
  position: absolute;
  top: 63px;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--cr-yellow);
}

.cr .cr-stats .container {
  position: relative;
  z-index: 1;
}

.cr .cr-stats-row {
  margin-bottom: 26px;
}

.cr .cr-stat-card {
  display: flex;
  align-items: center;
  min-height: 118px;
  margin-bottom: 20px;
  padding: 22px 24px;
  border: 1px solid var(--cr-line);
  border-bottom: 3px solid var(--cr-line);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 18px 38px rgba(10, 26, 74, 0.1);
}

.cr .cr-stat-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  margin-right: 16px;
  object-fit: contain;
}

.cr .cr-stat-text {
  min-width: 0;
}

.cr .cr-stat-number {
  font-family: 'Manrope', 'Inter', sans-serif;
  color: var(--cr-ink);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.cr .cr-stat-label {
  color: var(--cr-ink-60);
  font-size: 13.5px;
  line-height: 1.35;
}

.cr .cr-stats-note {
  max-width: 760px;
  margin: 0 auto;
  color: var(--cr-ink-60);
  font-size: 11.5px;
  line-height: 1.6;
  text-align: center;
}

/* ============================================================
   HOMEPAGE — 8. REVIEWS (yellow band, white speech bubbles)
   ============================================================ */

.cr .cr-reviews {
  padding: 46px 0 92px 0;
  background: var(--cr-yellow);
}

.cr .cr-reviews-head {
  margin-bottom: 42px;
  text-align: center;
}

.cr .cr-reviews-title {
  max-width: 760px;
  margin: 0 auto 12px auto;
  color: var(--cr-ink);
  font-size: 42px;
}

.cr .cr-reviews-disclaimer {
  margin: 0;
  color: var(--cr-ink-60);
  font-size: 12px;
  text-align: center;
}

.cr .cr-reviews-row {
  margin-bottom: 34px;
}

.cr .cr-review-card {
  position: relative;
  min-height: 268px;
  margin-bottom: 34px;
  padding: 28px 26px 24px 26px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(22, 24, 29, 0.12);
}

.cr .cr-review-quote {
  display: inline-block;
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
}

.cr .cr-review-quote svg {
  display: block;
  width: 36px;
  height: 36px;
}

.cr .cr-review-quote .fe {
  top: 0;
  color: var(--cr-blue);
  font-size: 20px;
  line-height: 40px;
  cursor: default;
  vertical-align: middle;
}

.cr .cr-review-text {
  margin: 0 0 22px 0;
  color: var(--cr-ink);
  font-size: 15.5px;
  line-height: 1.66;
}

.cr .cr-review-name {
  display: block;
  margin-top: auto;
  color: var(--cr-ink);
  font-size: 14px;
  font-weight: 700;
}

/* the downward speech-bubble tail */
.cr .cr-review-tail {
  position: absolute;
  bottom: -13px;
  left: 34px;
  display: block;
  width: 26px;
  height: 14px;
  background: #ffffff;
  clip-path: polygon(0 0, 100% 0, 34% 100%);
}

/* ============================================================
   HOMEPAGE — 9. ACCOUNTS (grey band, three product cards)
   ============================================================ */

.cr .cr-accounts {
  padding: 92px 0;
  background: var(--cr-grey-bg);
}

.cr .cr-accounts-title {
  max-width: 720px;
  margin: 0 auto 46px auto;
  color: var(--cr-ink);
  font-size: 42px;
  text-align: center;
}

.cr .cr-accounts-row {
  margin-bottom: 30px;
}

.cr .cr-accounts-card {
  min-height: 528px;
  margin-bottom: 26px;
  overflow: hidden;
  border: 1px solid var(--cr-line);
  border-bottom: 4px solid var(--cr-line);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(10, 26, 74, 0.07);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cr .cr-accounts-card:hover {
  box-shadow: 0 22px 46px rgba(10, 26, 74, 0.13);
  transform: translateY(-3px);
}

.cr .cr-accounts-body {
  min-height: 302px;
  padding: 26px 26px 22px 26px;
}

.cr .cr-accounts-pill {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.cr .cr-accounts-pill-invest {
  background: var(--cr-teal);
  color: #ffffff;
}

.cr .cr-accounts-pill-save {
  background: var(--cr-navy);
  color: #ffffff;
}

.cr .cr-accounts-pill-retire {
  background: var(--cr-yellow);
  color: var(--cr-ink);
}

.cr .cr-accounts-name {
  margin: 0 0 12px 0;
  color: var(--cr-ink);
  font-size: 25px;
}

.cr .cr-accounts-text {
  margin: 0 0 18px 0;
  color: var(--cr-ink-60);
  font-size: 15px;
}

.cr .cr-accounts-link {
  color: var(--cr-blue);
  font-size: 15px;
  font-weight: 700;
}

.cr .cr-accounts-link:hover {
  color: var(--cr-blue-dark);
}

.cr .cr-accounts-arrow.fe {
  top: 0;
  margin-left: 6px;
  font-size: 17px;
  cursor: pointer;
  vertical-align: -3px;
  transition: transform 0.2s ease;
}

.cr .cr-accounts-link:hover .cr-accounts-arrow {
  transform: translateX(4px);
}

.cr .cr-accounts-figure {
  padding: 0;
  background: var(--cr-blue-10);
}

.cr .cr-accounts-image {
  display: block;
  width: 100%;
  height: auto;
}

.cr .cr-accounts-note {
  max-width: 800px;
  margin: 0 auto 8px auto;
  color: var(--cr-ink-45);
  font-size: 11.5px;
  line-height: 1.6;
  text-align: center;
}

/* ============================================================
   HOMEPAGE — 10. QUIZ (navy band, yellow chevron out)
   ============================================================ */

.cr .cr-quiz {
  overflow: hidden;
  padding: 92px 0 132px 0;
  background: var(--cr-navy);
}

.cr .cr-quiz-row {
  margin-bottom: 0;
  text-align: center;
}

.cr .cr-quiz-heading {
  max-width: 700px;
  margin: 0 auto 14px auto;
  color: #ffffff;
  font-size: 42px;
}

.cr .cr-quiz-sub {
  max-width: 560px;
  margin: 0 auto 34px auto;
  color: var(--cr-on-dark-70);
  font-size: 16.5px;
}

.cr .cr-quiz-options {
  max-width: 520px;
  margin: 0 auto 24px auto;
  padding: 0;
  text-align: left;
}

.cr .cr-quiz-option-item {
  margin-bottom: 12px;
}

.cr .cr-quiz-option {
  display: flex;
  align-items: center;
  padding: 15px 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #ffffff;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.cr .cr-quiz-option:hover {
  border-color: var(--cr-blue);
  transform: translateY(-2px);
}

.cr .cr-quiz-option-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin-right: 14px;
  border: 1px solid var(--cr-blue);
  border-radius: 50%;
  text-align: center;
}

.cr .cr-quiz-option-icon .fe {
  top: 0;
  color: var(--cr-blue);
  font-size: 20px;
  line-height: 38px;
  cursor: pointer;
  vertical-align: middle;
}

.cr .cr-quiz-option-label {
  flex: 1 1 auto;
  color: var(--cr-ink);
  font-size: 16px;
  font-weight: 700;
}

.cr .cr-quiz-option-arrow .fe {
  top: 0;
  color: var(--cr-blue);
  font-size: 22px;
  cursor: pointer;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.cr .cr-quiz-option:hover .cr-quiz-option-arrow .fe {
  transform: translateX(4px);
}

.cr .cr-quiz-note {
  max-width: 560px;
  margin: 0 auto;
  color: var(--cr-on-dark-50);
  font-size: 11.5px;
  line-height: 1.6;
}

/* the peak that caps the hustle band — same colour as .cr-hustle below it,
   otherwise the join between them shows as a hard edge */
.cr .cr-quiz-chevron {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 62px;
  background: #fee27d;
  clip-path: polygon(0 100%, 0 26%, 50% 100%, 100% 26%, 100% 100%);
}

/* ============================================================
   HOMEPAGE — 11. HUSTLE (closing yellow CTA band)
   ============================================================ */

.cr .cr-hustle {
  padding: 88px 0 96px 0;
  background: #fee27d;
}

.cr .cr-hustle-row {
  margin-bottom: 0;
  text-align: center;
}

.cr .cr-hustle-title {
  margin: 0 0 30px 0;
  color: var(--cr-ink);
  font-size: 52px;
  letter-spacing: -0.035em;
}

.cr .cr-hustle-cta {
  display: inline-block;
  margin-bottom: 0;
  padding: 17px 40px;
  border-radius: 6px;
  background: var(--cr-blue);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  transition: background 0.2s ease, transform 0.15s ease;
}

.cr .cr-hustle-cta:hover {
  background: var(--cr-blue-dark);
  color: #ffffff;
  transform: translateY(-1px);
}

/* ============================================================
   SHARED ADMIN-GATED SECTIONS (FAQs / news / staff / plans /
   payouts, rendered by the shared components inside .cr-tour)
   ============================================================ */

.cr .cr-tour {
  padding: 20px 0 40px 0;
}

.cr .cr-tour h2,
.cr .cr-tour h3 {
  letter-spacing: -0.02em;
}

.cr .cr-tour .card,
.cr .cr-tour .collapsible-header {
  border-radius: 12px;
}

/* ============================================================
   FOOTER (permanently navy → literal white/rgba text)
   ============================================================ */

.cr .cr-footer {
  padding: 70px 0 0 0;
  background: #050b50;
  color: var(--cr-on-dark-70);
}

.cr .cr-footer-row {
  margin-bottom: 34px;
}

.cr .cr-footer-title {
  margin: 0 0 14px 0;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
}

.cr .cr-footer-link {
  display: block;
  margin-bottom: 11px;
  color: var(--cr-on-dark-70);
  font-size: 14px;
  line-height: 1.4;
}

.cr .cr-footer-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* --- brand column --- */
.cr .cr-footer-brandcol {
  margin-bottom: 26px;
}

.cr .cr-footer-logo {
  display: inline-block;
}

/* width-driven so it fills its column instead of being capped by a height —
   the source art is 1280x452, so even the largest size here never upscales */
.cr .cr-footer-logo .cr-logo-img {
  width: 100%;
  max-width: 340px;
  height: auto;
}

.cr .cr-footer-brandcol {
  margin-bottom: 34px;
}

/* --- social + contact strip under the columns --- */
.cr .cr-footer-contactbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 10px;
}

.cr .cr-footer-contactlines {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}

/* --- rule + centred business links above the disclosures --- */
.cr .cr-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 40px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--cr-on-dark-line);
}

.cr .cr-footer-botlink {
  color: var(--cr-on-dark-70);
  font-size: 14px;
}

.cr .cr-footer-botlink:hover {
  color: #ffffff;
  text-decoration: underline;
}

@media (max-width: 991.98px) {
  .cr .cr-footer-links {
    gap: 10px 24px;
  }
}

.cr .cr-footer-link:hover {
  color: var(--cr-yellow);
}

.cr .cr-footer-social {
  margin-bottom: 18px;
}

.cr .cr-footer-social a {
  display: inline-block;
  width: 36px;
  height: 36px;
  margin: 0 8px 8px 0;
  border: 1px solid var(--cr-on-dark-line);
  border-radius: 50%;
  text-align: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.cr .cr-footer-social a:hover {
  border-color: var(--cr-yellow);
  background: rgba(255, 255, 255, 0.08);
}

.cr .cr-footer-social a .fe {
  top: 0;
  color: #ffffff;
  font-size: 18px;
  line-height: 34px;
  cursor: pointer;
  vertical-align: middle;
}

.cr .cr-footer-social a img {
  width: 18px;
  height: 18px;
  margin-top: 8px;
  object-fit: contain;
}

.cr .cr-footer-contact {
  margin: 0 0 7px 0;
  color: var(--cr-on-dark-70);
  font-size: 14px;
}

.cr .cr-footer-strong {
  color: #ffffff;
  font-weight: 700;
}

.cr .cr-footer-disclaimer {
  margin: 0;
  padding-bottom: 28px;
  border-top: 1px solid var(--cr-on-dark-line);
  padding-top: 24px;
  color: var(--cr-on-dark-50);
  font-size: 11.5px;
  line-height: 1.65;
}

.cr .cr-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 18px 20px;
  background: #050b50;
  border-top: 1px solid var(--cr-on-dark-line);
  color: var(--cr-on-dark-50);
  font-size: 12.5px;
  text-align: center;
}

.cr .cr-footer-bottom .fe {
  top: 0;
  color: var(--cr-yellow);
  font-size: 15px;
  cursor: default;
  vertical-align: -2px;
}

/* translator + theme changer relocated from the nav into the footer bar */
.cr .cr-footer-tools {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cr .cr-footer-tools .cr-nav-theme {
  margin: 0;
}

.cr .cr-footer-tools .cr-nav-theme .fe {
  color: var(--cr-on-dark-70);
  font-size: 18px;
}

.cr .cr-footer-tools .cr-nav-theme:hover .fe,
/* the translator sits at the very bottom of the page, so open its menu UPWARD */
/* ============================================================
   DYNAMIC PAGE  /pages/:slug
   ============================================================ */

.cr .cr-page-hero {
  overflow: hidden;
  padding: 70px 0 84px 0;
  /* same navy as .cr-nav so the band reads as one surface with the header */
  background: #000b50;
}

.cr .cr-page-kicker {
  margin: 0 0 12px 0;
  color: var(--cr-yellow);
  font-size: 12px;
}

.cr .cr-page-kicker .fe {
  top: 0;
  margin-right: 7px;
  color: var(--cr-yellow);
  font-size: 16px;
  cursor: default;
  vertical-align: -3px;
}

.cr .cr-page-kicker-text {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cr .cr-page-title {
  margin: 0;
  color: #ffffff;
  font-size: 50px;
}

.cr .cr-page-sub {
  max-width: 660px;
  margin: 14px 0 0 0;
  color: var(--cr-on-dark-70);
  font-size: 17px;
}

.cr .cr-page-chevron {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 60px;
  background: var(--background-colour);
  clip-path: polygon(0 100%, 0 40%, 50% 100%, 100% 40%, 100% 100%);
}

.cr .cr-page-body {
  padding: 0 0 88px 0;
  background: var(--background-colour);
}

/* Sticky footer. <main> used to carry an arbitrary minHeight:80vh, which on a
   tall viewport left a big empty band under a short page — and because <main>
   had no background of its own, that band rendered bare white against the grey
   section above it. Growing <main> to fill instead puts the footer exactly at
   the bottom of the viewport on short pages and nowhere special on long ones.
   The background is kept so the grown area matches the section above it. */
.cr {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.cr main {
  flex: 1 0 auto;
  background: var(--background-colour);
}

.cr .cr-footer {
  flex: 0 0 auto;
}

.cr .cr-page-card {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 1140px;
  margin: 44px auto 0 auto;
  padding: 46px 52px 42px 52px;
  border: 1px solid var(--border-colour);
  border-radius: 16px;
  background: var(--primary-background);
  box-shadow: 0 26px 60px rgba(10, 26, 74, 0.12);
}

.cr .cr-page-chip {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--cr-yellow);
  color: var(--cr-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.cr .cr-page-content {
  color: var(--background-font-colour);
  font-size: 16.5px;
  line-height: 1.75;
}

/* the shared content parser emits Tailwind-ish class names that do
   not exist in this codebase — define them locally so parsed media
   is centred instead of flush-left */
.cr .cr-page-content .flex {
  text-align: center;
}

.cr .cr-page-content .my-2 {
  margin: 1.4rem 0;
}

.cr .cr-page-content img,
.cr .cr-page-content video {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.4rem auto;
  border-radius: 12px;
}

.cr .cr-page-content b {
  color: var(--background-heading-colour);
}

/* ============================================================
   CONTACT
   ============================================================ */

.cr .cr-contact {
  padding: 0 0 88px 0;
  background: var(--background-colour);
}

.cr .cr-contact-row {
  margin-top: -46px;
}

.cr .cr-contact-card,
.cr .cr-contact-panel {
  position: relative;
  z-index: 1;
  min-height: 520px;
  margin-bottom: 26px;
  padding: 34px 32px;
  border: 1px solid var(--border-colour);
  border-radius: 16px;
  box-shadow: 0 20px 46px rgba(10, 26, 74, 0.09);
}

.cr .cr-contact-card {
  background: var(--primary-background);
}

.cr .cr-contact-panel {
  background: var(--cr-blue-10);
}

.cr .cr-contact-eyebrow {
  margin: 0 0 8px 0;
  color: var(--cr-teal);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cr .cr-contact-card-title {
  margin: 0 0 10px 0;
  color: var(--background-heading-colour);
  font-size: 32px;
}

.cr .cr-contact-card-sub {
  margin: 0 0 22px 0;
  color: var(--primary-font-colour);
  font-size: 15.5px;
}

.cr .cr-contact-panel-title {
  margin: 0 0 22px 0;
  color: var(--cr-ink);
  font-size: 24px;
}

/* --- boxed form inputs (beats the Materialize resets) --- */

.cr .cr-contact-form .input-field {
  margin-bottom: 1.6rem;
}

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

.cr .cr-contact-form .input-field input,
.cr .cr-contact-form .input-field textarea {
  box-sizing: border-box;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--border-colour);
  border-radius: 8px;
  background: var(--background-colour);
  color: var(--background-font-colour);
  box-shadow: none;
}

.cr .cr-contact-form .input-field textarea {
  width: 100%;
  height: auto;
  padding: 12px 14px !important;
  resize: vertical;
}

.cr .cr-contact-form .input-field input:focus,
.cr .cr-contact-form .input-field textarea:focus {
  border: 1px solid var(--cr-blue);
  box-shadow: 0 0 0 3px rgba(22, 103, 232, 0.16);
  outline: none;
}

.cr .cr-contact-form .btn {
  height: auto;
  padding: 15px 30px;
  border-radius: 6px;
  background: var(--cr-blue);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
  box-shadow: none;
}

.cr .cr-contact-form .btn:hover {
  background: var(--cr-blue-dark);
}

/* --- contact details panel --- */

.cr .cr-contact-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 18px;
}

.cr .cr-contact-icon.fe {
  top: 0;
  flex: 0 0 auto;
  margin-right: 13px;
  color: var(--cr-blue);
  font-size: 21px;
  cursor: default;
}

.cr .cr-contact-item-text {
  min-width: 0;
}

.cr .cr-contact-item-label {
  display: block;
  color: var(--cr-ink-45);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cr .cr-contact-item-value {
  display: block;
  color: var(--cr-ink);
  font-size: 15px;
  font-weight: 600;
}

.cr .cr-contact-item-value a {
  color: var(--cr-blue);
}

.cr .cr-contact-divider {
  height: 1px;
  margin: 22px 0 18px 0;
  background: rgba(10, 26, 74, 0.12);
}

.cr .cr-contact-social-label {
  margin: 0 0 12px 0;
  color: var(--cr-ink-45);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cr .cr-contact-social a {
  display: inline-block;
  width: 36px;
  height: 36px;
  margin: 0 8px 8px 0;
  border: 1px solid rgba(10, 26, 74, 0.14);
  border-radius: 50%;
  background: #ffffff;
  text-align: center;
  transition: border-color 0.2s ease;
}

.cr .cr-contact-social a:hover {
  border-color: var(--cr-blue);
}

.cr .cr-contact-social a .fe {
  top: 0;
  color: var(--cr-navy);
  font-size: 18px;
  line-height: 34px;
  cursor: pointer;
  vertical-align: middle;
}

.cr .cr-contact-social a img {
  width: 18px;
  height: 18px;
  margin-top: 8px;
  object-fit: contain;
}

/* address plaque — a painted panel, not an embedded map */
.cr .cr-contact-map {
  display: flex;
  align-items: flex-start;
  margin-top: 20px;
  padding: 18px;
  border: 1px solid rgba(10, 26, 74, 0.1);
  border-radius: 12px;
  background: #ffffff;
  background-image: repeating-linear-gradient(
      0deg,
      rgba(10, 26, 74, 0.05) 0 1px,
      transparent 1px 22px
    ),
    repeating-linear-gradient(90deg, rgba(10, 26, 74, 0.05) 0 1px, transparent 1px 22px);
}

.cr .cr-contact-map-pin.fe {
  top: 0;
  flex: 0 0 auto;
  margin-right: 11px;
  color: var(--cr-blue);
  font-size: 22px;
  cursor: default;
}

.cr .cr-contact-map-text {
  color: var(--cr-ink);
  font-size: 14.5px;
  font-weight: 600;
}

.cr .cr-contact-note {
  margin: 18px 0 0 0;
  color: var(--cr-ink-45);
  font-size: 11.5px;
  line-height: 1.6;
}

/* ============================================================
   ============================================================
   DASHBOARD — dark by DEFAULT, painted from the --cr-dash-*
   tokens with literal white/rgba text (never from
   --nav-primary-font-colour / --background-heading-colour).
   LIGHT theme: the layout adds `cr-light` to the .cr-dash root
   and the LIGHT CONSOLE section at the bottom of this file
   re-tokens/overrides these rules — keep new dashboard rules
   themeable there when they hardcode white.
   ============================================================
   ============================================================ */

.cr-dash {
  min-height: 100vh;
  background: var(--cr-dash-bg);
  color: var(--cr-on-dark-70);
  font-family: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
}

/* Pagination — the available-assets table footer (individually rounded pills,
   themed to the dashboard rather than Bootstrap's connected default). */
.cr-dash .pagination {
  gap: 4px;
}

.cr-dash .page-link {
  border: 1px solid var(--dash-line);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  padding: 4px 10px;
  font-size: 13px;
  line-height: 1.4;
}

.cr-dash .page-link:hover {
  background: var(--hover, rgba(127, 127, 127, 0.12));
}

.cr-dash .page-item.active .page-link {
  background: var(--primary-button, #1974e8);
  border-color: var(--primary-button, #1974e8);
  color: #ffffff;
}

.cr-dash .page-item.disabled .page-link {
  opacity: 0.45;
  pointer-events: none;
}

/* Account-balance figures — one consistent treatment for every balance amount
   (dashboard cards + savings/investment/stocks/crypto pages). Pinned to the
   dashboard's reference size so it never RFS-drifts, with tabular-nums so the
   digits align. Colour/margins stay on the utility classes (text-fixed-white
   on the gradient heroes). */
.cr-dash .cr-balance {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* Combined-balances donut card (dashboard hero). */
.cr-dash .cr-balance-pie-chart {
  max-width: 300px;
  margin: 0 auto;
}

/* One row per account: label left, amount + share right. The card sits in a
   narrow column on the dashboard, where the old 4-across grid squeezed each
   entry to ~50px and became unreadable. Stacking stays legible at any width. */
.cr-dash .cr-balance-pie-legend {
  list-style: none;
  margin: 0.5rem 0 0 0;
  padding: 0.75rem 0 0 0;
  border-top: 1px solid var(--dash-line);
}

.cr-dash .cr-pie-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--dash-line);
}

.cr-dash .cr-pie-stat:last-child {
  border-bottom: 0;
}

.cr-dash .cr-pie-stat-label {
  min-width: 0;
  color: var(--cr-dash-muted, #8f95b2);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cr-dash .cr-pie-stat-figures {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.cr-dash .cr-pie-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.cr-dash .cr-pie-stat-val {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cr-dash .cr-pie-stat-pct {
  color: var(--cr-dash-muted, #8f95b2);
  font-size: 11.5px;
}

/* shared default pages render THEMED surfaces (.bg cards, Materialize
   collections — background: var(--primary-background)) inside the dark
   console; re-anchor their text to the theme's font colour so it doesn't
   inherit the console's white */
.cr-dash .bg,
.cr-dash .card,
.cr-dash .card-panel,
.cr-dash .collection-item {
  color: var(--background-font-colour);
}

.cr-dash h1,
.cr-dash h2,
.cr-dash h3,
.cr-dash h4,
.cr-dash h5,
.cr-dash h6 {
  color: #ffffff;
}

/* the cr console chromes EVERY /user/* route, and the shared user pages render
   their content in `.bg` cards painted with --primary-background (#ffffff in
   LIGHT). Those headings must keep the theme heading colour, not the console's
   white — otherwise they are invisible on a white card. */
.cr-dash .bg h1,
.cr-dash .bg h2,
.cr-dash .bg h3,
.cr-dash .bg h4,
.cr-dash .bg h5,
.cr-dash .bg h6 {
  color: var(--primary-heading-colour);
}

/* mobile-only chrome, revealed in the media block */
.cr-dash .cr-topbar-burger,
.cr-dash .cr-side-close,
.cr-dash .cr-dash-backdrop {
  display: none;
}

/* --- top bar (visible at ALL widths) --- */

.cr-dash .cr-dash-topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 264px;
  z-index: 999;
  height: 66px;
  padding: 0 26px;
  background: var(--cr-dash-side);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  line-height: 66px;
}

.cr-dash .cr-topbar-brand {
  display: none;
}

.cr-dash .cr-topbar-right {
  float: right;
}

.cr-dash .cr-topbar-btn {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 38px;
  margin-left: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--cr-on-dark-70);
  line-height: 38px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.cr-dash .cr-topbar-btn:hover {
  background: rgba(123, 125, 245, 0.28);
  color: #ffffff;
}

.cr-dash .cr-topbar-btn .fe,
.cr-dash .cr-topbar-btn .fe {
  top: 0;
  color: inherit;
  font-size: 20px;
  line-height: 38px;
  vertical-align: middle;
}

.cr-dash .cr-topbar-dot {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--cr-dash-side);
  border-radius: 50%;
  background: var(--cr-yellow);
}

.cr-dash .cr-topbar-avatar {
  display: inline-block;
  width: 38px;
  height: 38px;
  margin-left: 10px;
  border-radius: 50%;
  background: var(--cr-indigo);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 38px;
  text-align: center;
  vertical-align: middle;
}

.cr-dash .cr-topbar-avatar .fe,
.cr-dash .cr-topbar-avatar .fe {
  top: 0;
  color: #ffffff;
  font-size: 20px;
  line-height: 38px;
  vertical-align: middle;
}

/* --- fixed sidebar --- */

.cr-dash .cr-side {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  width: 264px;
  padding: 22px 0 16px 0;
  overflow-y: auto;
  background: var(--cr-dash-side);
  color: var(--cr-on-dark-70);
}

.cr-dash .cr-side-brand {
  display: block;
  padding: 0 22px 22px 22px;
}

.cr-dash .cr-side-brand .cr-logo {
  color: #ffffff;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.cr-dash .cr-side-close {
  position: absolute;
  top: 14px;
  right: 14px;
  color: var(--cr-on-dark-70);
  cursor: pointer;
}

/* the sidebar is a <nav>, so the global `nav {}` / `nav ul a {}`
   rules would repaint it — override background, colour and margins */
.cr-dash .cr-side-nav,
.cr-dash nav.cr-side-nav {
  height: auto;
  background: transparent;
  box-shadow: none;
  line-height: normal;
}

.cr-dash .cr-side-nav ul li {
  /* the nav-ul float helpers (Materialize's and the compat block's
     `nav ul li { float: left }`) are for the horizontal guest nav — the
     sidebar stacks */
  float: none;
  display: block;
  width: 100%;
  margin-left: 0;
  line-height: normal;
}

.cr-dash .cr-side-group {
  margin-bottom: 18px;
}

.cr-dash .cr-side-group-label {
  margin: 0 0 6px 0;
  padding: 0 22px;
  color: rgba(255, 255, 255, 0.34);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cr-dash .cr-side-nav ul a.cr-side-link,
.cr-dash .cr-side-link {
  display: block;
  margin: 2px 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--cr-on-dark-70);
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.cr-dash .cr-side-nav ul a.cr-side-link:hover,
.cr-dash .cr-side-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.cr-dash .cr-side-nav ul a.cr-side-link.cr-side-active,
.cr-dash .cr-side-link.cr-side-active {
  background: rgba(123, 125, 245, 0.24);
  color: #ffffff;
}

.cr-dash .cr-side-link.cr-side-active .cr-side-icon .fe,
.cr-dash .cr-side-link.cr-side-active .cr-side-icon .fe {
  color: #ffffff;
}

.cr-dash .cr-side-icon {
  display: inline-block;
  width: 26px;
  vertical-align: middle;
}

.cr-dash .cr-side-icon .fe,
.cr-dash .cr-side-icon .fe {
  top: 0;
  color: inherit;
  font-size: 19px;
  vertical-align: -4px;
}

.cr-dash .cr-side-label {
  vertical-align: middle;
}

.cr-dash .cr-side-bottom {
  margin: 10px 12px 0 12px;
  padding: 14px 12px 4px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cr-dash .cr-side-user {
  margin: 0;
  color: var(--cr-dash-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.cr-dash .cr-side-user .fe,
.cr-dash .cr-side-user .fe {
  top: 0;
  margin-right: 7px;
  color: var(--cr-dash-muted);
  font-size: 17px;
  cursor: default;
  vertical-align: -4px;
}

/* --- main column --- */

.cr-dash .cr-dash-main {
  margin-left: 264px;
  min-height: 100vh;
  padding: 92px 30px 70px 30px;
}

/* KYC notice strip */
.cr-dash .cr-kyc {
  display: flex;
  align-items: flex-start;
  margin-bottom: 22px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 212, 94, 0.4);
  border-radius: 12px;
  background: rgba(255, 212, 94, 0.12);
}

.cr-dash .cr-kyc-icon {
  flex: 0 0 auto;
  margin-right: 12px;
}

.cr-dash .cr-kyc-icon .fe,
.cr-dash .cr-kyc-icon .fe {
  top: 0;
  color: var(--cr-yellow);
  font-size: 22px;
  cursor: default;
  vertical-align: -3px;
}

.cr-dash .cr-kyc-text {
  flex: 1 1 auto;
  color: #ffffff;
  font-size: 14px;
}

.cr-dash .cr-kyc-link {
  color: var(--cr-yellow);
  font-weight: 700;
  text-decoration: underline;
}

.cr-dash .cr-kyc-close {
  flex: 0 0 auto;
  margin-left: 12px;
  color: var(--cr-on-dark-50);
  cursor: pointer;
}

.cr-dash .cr-kyc-close .fe,
.cr-dash .cr-kyc-close .fe {
  top: 0;
  color: inherit;
  font-size: 19px;
  vertical-align: -3px;
}

.cr-dash .cr-kyc-close:hover {
  color: #ffffff;
}

/* page heading row */
.cr-dash .cr-dash-head {
  margin-bottom: 24px;
}

.cr-dash .cr-dash-title {
  margin: 0 0 4px 0;
  color: #ffffff;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.cr-dash .cr-dash-crumb {
  margin: 0;
  color: var(--cr-dash-muted);
  font-size: 12.5px;
}

.cr-dash .cr-dash-crumb a {
  color: var(--cr-indigo);
}

.cr-dash .cr-dash-crumb-sep .fe,
.cr-dash .cr-dash-crumb-sep .fe {
  top: 0;
  color: var(--cr-dash-muted);
  font-size: 15px;
  cursor: default;
  vertical-align: -3px;
}

.cr-dash .cr-dash-head-action {
  padding-top: 8px;
  text-align: right;
}

.cr-dash .cr-dash-cash {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 10px;
  background: var(--cr-indigo);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition: background 0.2s ease;
}

.cr-dash .cr-dash-cash:hover {
  background: var(--cr-indigo-dark);
  color: #ffffff;
}

.cr-dash .cr-dash-cash .fe,
.cr-dash .cr-dash-cash .fe {
  top: 0;
  margin-right: 5px;
  color: #ffffff;
  font-size: 17px;
  vertical-align: -4px;
}

.cr-dash .cr-dash-body {
  clear: both;
}

/* ============================================================
   DASHBOARD CARDS
   ============================================================ */

.cr-dash .cr-kpi-row,
.cr-dash .cr-dash-row,
.cr-dash .cr-tickers-row {
  margin-bottom: 22px;
}

/* --- KPI cards --- */

/* reference design stacks the tile: icon block on top, then value + delta,
   then the muted label */
.cr-dash .cr-kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 150px;
  margin-bottom: 20px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  background: var(--cr-dash-panel);
}

.cr-dash .cr-kpi-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  margin: 0 0 14px 0;
  border-radius: 12px;
  line-height: 42px;
  text-align: center;
}

.cr-dash .cr-kpi-icon .fe,
.cr-dash .cr-kpi-icon .fe {
  top: 0;
  color: #ffffff;
  font-size: 20px;
  cursor: default;
  line-height: 42px;
  vertical-align: middle;
}

.cr-dash .cr-kpi-icon-savings {
  background: rgba(123, 125, 245, 0.26);
}

.cr-dash .cr-kpi-icon-investment {
  background: rgba(22, 121, 127, 0.32);
}

.cr-dash .cr-kpi-icon-trading {
  background: rgba(22, 103, 232, 0.28);
}

.cr-dash .cr-kpi-body {
  min-width: 0;
}

.cr-dash .cr-kpi-figure {
  margin-bottom: 4px;
}

.cr-dash .cr-kpi-value {
  display: inline-block;
  margin: 0 10px 0 0;
  color: #ffffff;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.cr-dash .cr-kpi-delta {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  vertical-align: 3px;
}

.cr-dash .cr-kpi-delta .fe,
.cr-dash .cr-kpi-delta .fe {
  top: 0;
  color: inherit;
  font-size: 14px;
  cursor: default;
  vertical-align: -2px;
}

.cr-dash .cr-kpi-delta-up {
  background: rgba(22, 121, 127, 0.26);
  color: #7fd6c6;
}

.cr-dash .cr-kpi-delta-down {
  background: rgba(232, 76, 76, 0.2);
  color: #ff9d9d;
}

.cr-dash .cr-kpi-delta-flat {
  background: rgba(255, 255, 255, 0.08);
  color: var(--cr-dash-muted);
}

.cr-dash .cr-kpi-delta-value {
  margin-left: 2px;
}

.cr-dash .cr-kpi-delta-note {
  margin-left: 5px;
  font-weight: 500;
  opacity: 0.8;
}

.cr-dash .cr-kpi-label {
  margin: 0;
  color: var(--cr-dash-muted);
  font-size: 13px;
}

.cr-dash .cr-kpi-info {
  display: inline-block;
  margin-left: 5px;
}

.cr-dash .cr-kpi-info .fe,
.cr-dash .cr-kpi-info .fe {
  top: 0;
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
  cursor: default;
  vertical-align: -2px;
}

/* --- generic panel --- */

.cr-dash .cr-panel {
  min-height: 300px;
  margin-bottom: 22px;
  padding: 20px 22px 24px 22px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background: var(--cr-dash-panel);
}

.cr-dash .cr-panel-head {
  margin-bottom: 14px;
}

.cr-dash .cr-panel-title {
  margin: 0;
  color: #ffffff;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.cr-dash .cr-panel-sub {
  margin: 2px 0 0 0;
  color: var(--cr-dash-muted);
  font-size: 12px;
}

/* --- activity area chart --- */

/* the chart panel is the tallest card on the row — pin its height so
   the periwinkle portfolio card beside it lines up (floats, not flex) */
.cr-dash .cr-panel.cr-activity {
  min-height: 400px;
}

.cr-dash .cr-chart-legend {
  margin-bottom: 10px;
}

.cr-dash .cr-chart-key {
  display: inline-block;
  margin-right: 16px;
  color: var(--cr-dash-muted);
  font-size: 12px;
}

.cr-dash .cr-chart-key::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 3px;
  background: currentColor;
  vertical-align: 0;
}

.cr-dash .cr-chart-key-savings::before {
  background: var(--cr-indigo);
}

.cr-dash .cr-chart-key-investment::before {
  background: var(--cr-teal);
}

.cr-dash .cr-chart-key-trading::before {
  background: var(--cr-blue);
}

/* recharts' ResponsiveContainer is height:100% — it renders nothing
   without an explicit pixel height on the parent */
.cr-dash .cr-chart-canvas,
.cr-dash .cr-chart-empty {
  width: 100%;
  height: 270px;
}

.cr-dash .cr-chart-empty,
.cr-dash .cr-donut-empty {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.cr-dash .cr-chart-tip {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: var(--cr-dash-side);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
}

.cr-dash .cr-chart-tip-label {
  display: block;
  margin-bottom: 6px;
  color: var(--cr-dash-muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cr-dash .cr-chart-tip-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  line-height: 1.8;
}

.cr-dash .cr-chart-tip-name {
  margin-right: 18px;
  color: var(--cr-dash-muted);
}

.cr-dash .cr-chart-tip-value {
  color: #ffffff;
  font-weight: 700;
}

/* --- periwinkle portfolio card --- */

.cr-dash .cr-portfolio {
  position: relative;
  min-height: 300px;
  margin-bottom: 22px;
  overflow: hidden;
  padding: 24px 24px 30px 24px;
  border-radius: 16px;
  background: var(--cr-indigo);
  color: #ffffff;
}

.cr-dash .cr-portfolio-label {
  margin: 0 0 6px 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 600;
}

.cr-dash .cr-portfolio-info {
  display: inline-block;
  margin-left: 5px;
}

.cr-dash .cr-portfolio-info .fe,
.cr-dash .cr-portfolio-info .fe {
  top: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  cursor: default;
  vertical-align: -2px;
}

.cr-dash .cr-portfolio-value {
  margin: 0 0 20px 0;
  color: #ffffff;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.cr-dash .cr-portfolio-currency {
  margin-left: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  vertical-align: 6px;
}

.cr-dash .cr-portfolio-reserved {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
}

.cr-dash .cr-portfolio-reserved-icon {
  flex: 0 0 auto;
  margin-right: 10px;
}

.cr-dash .cr-portfolio-reserved-icon .fe,
.cr-dash .cr-portfolio-reserved-icon .fe {
  top: 0;
  color: #ffffff;
  font-size: 17px;
  cursor: default;
  vertical-align: -3px;
}

.cr-dash .cr-portfolio-reserved-label {
  flex: 1 1 auto;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
}

.cr-dash .cr-portfolio-reserved-value {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.cr-dash .cr-portfolio-spark {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 78px;
  color: #ffffff;
  opacity: 0.28;
  pointer-events: none;
}

/* --- accounts transaction donut --- */

.cr-dash .cr-panel.cr-transactions {
  min-height: 430px;
}

.cr-dash .cr-donut,
.cr-dash .cr-donut-empty {
  position: relative;
  width: 100%;
  height: 240px;
}

.cr-dash .cr-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.cr-dash .cr-donut-total {
  display: block;
  color: #ffffff;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.cr-dash .cr-donut-caption {
  display: block;
  color: var(--cr-dash-muted);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cr-dash .cr-transactions-row {
  margin-top: 14px;
  margin-bottom: 0;
}

.cr-dash .cr-transactions-item {
  margin-bottom: 10px;
  padding: 9px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.cr-dash .cr-transactions-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--cr-dash-muted);
  vertical-align: 1px;
}

.cr-dash .cr-transactions-savings .cr-transactions-dot {
  background: var(--cr-indigo);
}

.cr-dash .cr-transactions-investment .cr-transactions-dot {
  background: var(--cr-teal);
}

.cr-dash .cr-transactions-trading .cr-transactions-dot {
  background: var(--cr-blue);
}

.cr-dash .cr-transactions-name {
  color: var(--cr-dash-muted);
  font-size: 11px;
  white-space: nowrap;
}

/* the three tiles share a narrow rail — keep the figures on one line */
.cr-dash .cr-transactions-amount {
  display: block;
  margin-top: 4px;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cr-dash .cr-transactions-percent {
  display: block;
  color: var(--cr-dash-muted);
  font-size: 11.5px;
}

/* --- coloured ticker tiles --- */

.cr-dash .cr-ticker {
  min-height: 140px;
  margin-bottom: 20px;
  padding: 18px 20px;
  border-radius: 16px;
  color: #ffffff;
}

/* muted colour-washed tiles (reference: maroon / slate / olive / navy) */
.cr-dash .cr-ticker-rose {
  background: rgba(214, 78, 106, 0.16);
  border: 1px solid rgba(214, 78, 106, 0.34);
}

.cr-dash .cr-ticker-slate {
  background: rgba(148, 163, 184, 0.13);
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.cr-dash .cr-ticker-olive {
  background: rgba(196, 154, 74, 0.15);
  border: 1px solid rgba(196, 154, 74, 0.32);
}

.cr-dash .cr-ticker-navy {
  background: rgba(83, 108, 255, 0.16);
  border: 1px solid rgba(83, 108, 255, 0.34);
}

.cr-dash .cr-ticker-head {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}

.cr-dash .cr-ticker-logo {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin-right: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  object-fit: contain;
}

.cr-dash .cr-ticker-meta {
  min-width: 0;
}

.cr-dash .cr-ticker-symbol {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.cr-dash .cr-ticker-name {
  display: block;
  font-size: 11.5px;
  opacity: 0.78;
}

.cr-dash .cr-ticker-price {
  margin: 0 0 6px 0;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.cr-dash .cr-ticker-change {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
}

.cr-dash .cr-ticker-change .fe,
.cr-dash .cr-ticker-change .fe {
  top: 0;
  color: inherit;
  font-size: 15px;
  cursor: default;
  vertical-align: -3px;
}

.cr-dash .cr-ticker-percent {
  margin: 0 8px 0 3px;
}

.cr-dash .cr-ticker-absolute {
  font-weight: 500;
  opacity: 0.78;
}

.cr-dash .cr-ticker-up {
  color: #7fd6a8;
}

.cr-dash .cr-ticker-down {
  color: #ff9d9d;
}

/* --- TradingView panels (light widgets on the dark console) --- */

.cr-dash .cr-panel.cr-tv-panel {
  height: 560px;
  padding: 10px;
  overflow: hidden;
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.cr-dash .cr-tv-fill,
.cr-dash .cr-tv-fill > div,
.cr-dash .cr-tv-fill iframe {
  width: 100%;
  height: 100%;
}

/* --- recent transactions table --- */

.cr-dash .cr-panel.cr-recent {
  min-height: 0;
}

.cr-dash .cr-recent-empty {
  margin: 8px 0 0 0;
  color: var(--cr-dash-muted);
  font-size: 13.5px;
}

.cr-dash .cr-table-wrap {
  overflow-x: auto;
}

.cr-dash .cr-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.cr-dash .cr-table th {
  padding: 12px 14px;
  color: var(--cr-dash-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cr-dash .cr-table td {
  padding: 14px;
  color: #ffffff;
  font-size: 13.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cr-dash .cr-table tbody tr:last-child td {
  border-bottom: none;
}

.cr-dash .cr-table-amount {
  font-weight: 700;
}

.cr-dash .cr-table-desc {
  color: rgba(255, 255, 255, 0.88);
}

.cr-dash .cr-table-date {
  color: var(--cr-dash-muted);
  white-space: nowrap;
}

.cr-dash .cr-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: capitalize;
  white-space: nowrap;
}

.cr-dash .cr-badge .fe,
.cr-dash .cr-badge .fe {
  top: 0;
  color: inherit;
  font-size: 13px;
  cursor: default;
}

.cr-dash .cr-badge-account {
  background: rgba(123, 125, 245, 0.2);
  color: #b9baf9;
}

.cr-dash .cr-badge-good {
  background: rgba(53, 178, 123, 0.18);
  color: #7fd6a8;
}

.cr-dash .cr-badge-wait {
  background: rgba(255, 205, 94, 0.16);
  color: #ffd88f;
}

.cr-dash .cr-badge-bad {
  background: rgba(232, 76, 76, 0.16);
  color: #ff9d9d;
}

/* ============================================================
   RESPONSIVE — the ONE tablet/mobile block (Materialize `m` and
   below). The grid already stacks; this handles padding, type
   scale, the sidebar→drawer transformation and chevron heights.
   ============================================================ */

@media only screen and (max-width: 992px) {
  /* --- guest chrome --- */
  .cr .cr-nav {
    height: 64px;
    line-height: 64px;
  }

  .cr .cr-nav-menu {
    max-height: calc(100vh - 64px);
  }

  .cr .cr-hero-body {
    padding: 48px 0 56px 0;
  }

  .cr .cr-hero-body h1 {
    font-size: 34px;
  }

  .cr .cr-hero-body p {
    font-size: 16px;
  }

  .cr .cr-valuestrip-item {
    padding: 10px 4px;
  }

  /* --- homepage --- */
  .cr .cr-landing {
    padding: 52px 0 70px 0;
  }

  .cr .cr-promo {
    margin-bottom: 38px;
    padding: 16px 46px 16px 52px;
  }

  .cr .cr-promo-icon.fe {
    top: 18px;
    left: 16px;
    font-size: 21px;
  }

  .cr .cr-promo-copy {
    font-size: 14px;
  }

  /* centre the hero copy (title + paragraph + buttons) on mobile */
  .cr .cr-landing-copy {
    padding-top: 0;
    text-align: center;
  }

  .cr .cr-landing-title {
    font-size: 40px;
  }

  .cr .cr-landing-sub {
    font-size: 16px;
    margin-left: auto;
    margin-right: auto;
  }

  .cr .cr-landing-cta {
    margin-bottom: 10px;
    margin-right: 18px;
    padding: 14px 26px;
    font-size: 15px;
  }

  .cr .cr-landing-media {
    padding-top: 30px;
  }

  /* the audience bar is hidden on mobile — its Employers/Advisors links live in
     the burger menu's "See solutions for" section */
  .cr .cr-audiencebar {
    display: none;
  }

  /* footer copyright + relocated translator/theme stack centred on mobile */
  .cr .cr-footer-bottom {
    justify-content: center;
  }

  .cr .cr-nav {
    height: 66px;
    line-height: 66px;
  }

  .cr .cr-press {
    padding: 38px 0 34px 0;
  }

  .cr .cr-press-logo {
    max-height: 26px;
  }

  .cr .cr-help,
  .cr .cr-savings,
  .cr .cr-ira,
  .cr .cr-automation,
  .cr .cr-accounts {
    padding: 56px 0;
  }

  .cr .cr-help-heading,
  .cr .cr-savings-title,
  .cr .cr-ira-title,
  .cr .cr-automation-title,
  .cr .cr-reviews-title,
  .cr .cr-accounts-title,
  .cr .cr-quiz-heading {
    font-size: 30px;
  }

  .cr .cr-help-card {
    min-height: 0;
  }

  .cr .cr-savings-copy,
  .cr .cr-ira-copy,
  .cr .cr-automation-copy {
    padding: 0;
  }

  .cr .cr-savings-figure,
  .cr .cr-ira-figure {
    padding: 28px 0 0 0;
  }

  .cr .cr-savings-btn,
  .cr .cr-ira-btn {
    display: block;
    margin: 0 0 14px 0;
    text-align: center;
  }

  .cr .cr-automation-row {
    margin-bottom: 44px;
  }

  .cr .cr-automation-copy {
    padding-top: 24px;
  }

  .cr .cr-stats {
    padding: 52px 0 46px 0;
  }

  .cr .cr-stats-chevron {
    height: 62%;
  }

  .cr .cr-stats-chevron svg {
    height: 34px;
  }

  .cr .cr-stats-chevron::after {
    top: 33px;
  }

  .cr .cr-reviews {
    padding: 34px 0 60px 0;
  }

  .cr .cr-review-card {
    min-height: 0;
  }

  .cr .cr-accounts-card,
  .cr .cr-accounts-body {
    min-height: 0;
  }

  .cr .cr-quiz {
    padding: 56px 0 96px 0;
  }

  .cr .cr-quiz-chevron {
    height: 42px;
  }

  .cr .cr-hustle {
    padding: 56px 0 62px 0;
  }

  .cr .cr-hustle-title {
    font-size: 34px;
  }

  /* --- page + contact --- */
  .cr .cr-page-hero {
    padding: 46px 0 58px 0;
  }

  .cr .cr-page-title {
    font-size: 32px;
  }

  .cr .cr-page-chevron {
    height: 38px;
  }

  .cr .cr-page-card {
    margin-top: 26px;
    padding: 28px 22px;
  }

  .cr .cr-contact {
    padding-bottom: 56px;
  }

  .cr .cr-contact-row {
    margin-top: -30px;
  }

  .cr .cr-contact-card,
  .cr .cr-contact-panel {
    min-height: 0;
    padding: 26px 20px;
  }

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

  /* --- footer --- */
  .cr .cr-footer {
    padding-top: 48px;
  }

  /* --- dashboard: sidebar becomes a drawer --- */
  .cr-dash .cr-side {
    width: 282px;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    z-index: 1002;
  }

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

  .cr-dash .cr-side-close {
    display: block;
  }

  .cr-dash.cr-drawer-open .cr-dash-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    display: block;
    background: rgba(5, 10, 30, 0.6);
  }

  .cr-dash .cr-dash-topbar {
    left: 0;
    height: 58px;
    padding: 0 14px;
    line-height: 58px;
  }

  .cr-dash .cr-topbar-burger {
    display: inline-block;
    color: #ffffff;
    cursor: pointer;
    vertical-align: middle;
  }

  .cr-dash .cr-topbar-burger .fe,
  .cr-dash .cr-topbar-burger .fe {
    top: 0;
    color: #ffffff;
    font-size: 24px;
    vertical-align: middle;
  }

  .cr-dash .cr-topbar-brand {
    display: inline-block;
    margin-left: 12px;
    color: #ffffff;
    font-family: 'Manrope', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.03em;
    vertical-align: middle;
  }

  .cr-dash .cr-topbar-btn,
  .cr-dash .cr-topbar-avatar {
    width: 34px;
    height: 34px;
    margin-left: 5px;
    line-height: 34px;
  }

  .cr-dash .cr-topbar-btn .fe,
  .cr-dash .cr-topbar-btn .fe,
  .cr-dash .cr-topbar-avatar .fe,
  .cr-dash .cr-topbar-avatar .fe {
    line-height: 34px;
  }

  .cr-dash .cr-dash-main {
    margin-left: 0;
    padding: 78px 14px 70px 14px;
  }

  .cr-dash .cr-dash-head-action {
    padding-top: 14px;
    text-align: left;
  }

  .cr-dash .cr-panel,
  .cr-dash .cr-portfolio {
    min-height: 0;
  }

  .cr-dash .cr-chart-canvas,
  .cr-dash .cr-chart-empty {
    height: 230px;
  }
}

/* ============================================================
   PHONE-ONLY (below the Materialize `s` breakpoint)
   ============================================================ */

@media only screen and (max-width: 600px) {
  /* the value strip is a desktop/tablet affordance — the same
     links live in the always-available dropdown menu */
  .cr .cr-valuestrip {
    display: none;
  }

  .cr .cr-landing-title {
    font-size: 40px;
  }

  .cr .cr-help-heading,
  .cr .cr-savings-title,
  .cr .cr-ira-title,
  .cr .cr-automation-title,
  .cr .cr-reviews-title,
  .cr .cr-accounts-title,
  .cr .cr-quiz-heading,
  .cr .cr-hustle-title {
    font-size: 27px;
  }

  .cr .cr-stat-card {
    min-height: 0;
  }

  .cr .cr-stats-chevron {
    height: 48%;
  }

  .cr .cr-quiz-option {
    padding: 13px 14px;
  }

  .cr .cr-quiz-option-label {
    font-size: 15px;
  }

  .cr-dash .cr-kpi {
    min-height: 0;
  }

  .cr-dash .cr-transactions-item {
    margin-bottom: 8px;
  }

  .cr-dash .cr-panel.cr-tv-panel {
    height: 430px;
  }

  .cr-dash .cr-table th {
    padding: 10px 10px;
  }

  .cr-dash .cr-table td {
    padding: 11px 10px;
    font-size: 13px;
  }
}

/* ============================================================
   TEMPLATE SHELL — the reference dashboard's classes (its
   styles.css is not shipped), scoped under .cr-dash and painted
   with the --cr-dash-* console tokens. Serves the (user)
   _layout + index conversion of the provided HTML.
   ============================================================ */

.cr-dash {
  --primary-color: #8274ff;
  --primary03: rgba(130, 116, 255, 0.3);
  --primary05: rgba(130, 116, 255, 0.5);
  --dash-line: rgba(255, 255, 255, 0.07);
}

.cr-dash.page {
  min-height: 100vh;
}

/* --- app-header --- */

.cr-dash .app-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: 64px;
  margin-inline-start: 240px;
  background: var(--cr-dash-side);
  border-bottom: 1px solid var(--dash-line);
}

.cr-dash .main-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.cr-dash .cr-header-brand {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  margin-inline-start: 4px;
  color: var(--background-heading-colour);
}

.cr-dash .header-content-left,
.cr-dash .header-content-right {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cr-dash .header-element {
  position: relative;
  display: flex;
  align-items: center;
  float: none;
}

.cr-dash .header-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 10px;
  color: #aab0cb;
}

.cr-dash .header-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.cr-dash .header-link-icon {
  width: 22px;
  height: 22px;
}

.cr-dash .header-icon-pulse {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff6937;
}

.cr-dash .sidemenu-toggle {
  width: 38px;
  height: 38px;
}

.cr-dash .sidemenu-toggle span,
.cr-dash .sidemenu-toggle span::before,
.cr-dash .sidemenu-toggle span::after {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  position: relative;
}

.cr-dash .sidemenu-toggle span::before {
  top: -6px;
  width: 12px;
}

.cr-dash .sidemenu-toggle span::after {
  top: 4px;
}

.cr-dash .avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffffff;
}

.cr-dash .avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

.cr-dash .avatar-sm {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.65rem;
}

.cr-dash .avatar-md {
  width: 2.5rem;
  height: 2.5rem;
}

.cr-dash .avatar-xl {
  width: 4rem;
  height: 4rem;
}

.cr-dash .avatar-rounded {
  border-radius: 50%;
}

.cr-dash .svg-white svg {
  fill: #ffffff;
  width: 60%;
  height: 60%;
}

/* --- dropdowns (dark) --- */

.cr-dash .dropdown-menu {
  background: var(--cr-dash-panel);
  border: 1px solid var(--dash-line);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  color: #c5c9de;
}

.cr-dash .dropdown-item {
  color: #c5c9de;
  font-size: 0.85rem;
  padding: 0.55rem 1rem;
}

.cr-dash .dropdown-item:hover,
.cr-dash .dropdown-item:focus {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

.cr-dash .dropdown-divider {
  border-color: var(--dash-line);
}

.cr-dash .main-header-dropdown {
  width: 20rem;
}

.cr-dash .header-profile-dropdown {
  width: 11rem;
}

.cr-dash .main-header-dropdown .border-bottom,
.cr-dash .main-header-dropdown .border-top {
  border-color: var(--dash-line) !important;
}

.cr-dash #header-notification-scroll {
  max-height: 300px;
  overflow-y: auto;
}

.cr-dash .header-notification-text {
  max-width: 14rem;
  color: #8f95b2;
}

/* --- app-sidebar --- */

.cr-dash .app-sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1035;
  width: 240px;
  display: flex;
  flex-direction: column;
  background: var(--cr-dash-side);
  border-inline-end: 1px solid var(--dash-line);
  transition: transform 0.25s ease;
}

.cr-dash .main-sidebar-header {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 64px;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--dash-line);
}

.cr-dash .main-sidebar-header .header-logo {
  color: #ffffff;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.cr-dash .main-sidebar {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 60px;
}

/* the bundled resets paint bare <nav> like a Materialize navbar — neutralise
   inside the console */
.cr-dash nav {
  height: auto;
  line-height: inherit;
  background: transparent;
  box-shadow: none;
}

.cr-dash .main-menu {
  margin: 0;
  padding: 0 0.75rem;
  list-style: none;
}

.cr-dash .main-menu li {
  float: none;
  display: block;
  width: 100%;
}

.cr-dash .slide__category {
  padding: 0.9rem 0.75rem 0.3rem;
}

.cr-dash .category-name {
  color: #8f95b2;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cr-dash .side-menu__item {
  display: flex;
  align-items: center;
  padding: 0.55rem 0.5rem;
  margin: 2px 0;
  border-radius: 8px;
  color: #aab0cb;
  font-size: 13.5px;
  font-weight: 500;
}

.cr-dash .side-menu__item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}

.cr-dash .slide.active > .side-menu__item {
  background: rgba(130, 116, 255, 0.16);
  color: #d3d0ff;
}

.cr-dash .side-menu__item i {
  font-size: 16px;
  line-height: 1;
}

.cr-dash .side-menu__label {
  flex: 1;
}

.cr-dash .side-menu__angle {
  margin-inline-start: auto;
  transition: transform 0.2s ease;
}

.cr-dash .slide.has-sub.open > .side-menu__item .side-menu__angle {
  transform: rotate(90deg);
}

.cr-dash .slide-menu {
  display: none;
  margin: 0;
  padding: 2px 0 4px 34px;
  list-style: none;
}

.cr-dash .slide.has-sub.open > .slide-menu {
  display: block;
}

.cr-dash .slide-menu .side-menu__item {
  padding: 0.4rem 0.5rem;
  font-size: 13px;
}

.cr-dash .slide-menu .side-menu__label::before {
  content: '\2013';
  margin-inline-end: 8px;
  opacity: 0.55;
}

/* --- investment / savings plan cards --- */

.cr-dash .cr-plan-card {
  overflow: hidden;
}

.cr-dash .cr-plan-media {
  position: relative;
  overflow: hidden;
}

.cr-dash .cr-plan-media img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.cr-dash .cr-plan-ribbon {
  position: absolute;
  top: 0;
  left: 16px;
  z-index: 2;
  min-width: 34px;
  padding: 8px 7px 15px;
  background: var(--primary-button);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}

.cr-dash .cr-plan-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary-button);
}

.cr-dash .cr-savings-card .cr-savings-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(22, 119, 227, 0.08);
  color: var(--primary-button);
  font-size: 26px;
}

.cr-dash .cr-savings-card .cr-savings-icon img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

/* --- transfer modal --- */

.cr-dash .cr-transfer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 12, 24, 0.55);
}

.cr-dash .cr-transfer-modal {
  width: 100%;
  max-width: 460px;
  margin: 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

/* --- available assets table: stack into labelled cards on phones so
   everything is visible with no horizontal scroll --- */
@media (max-width: 767.98px) {
  .cr-dash .cr-assets-table,
  .cr-dash .cr-assets-table tbody {
    display: block;
    width: 100%;
  }

  .cr-dash .cr-assets-table {
    white-space: normal;
  }

  .cr-dash .cr-assets-table thead {
    display: none;
  }

  .cr-dash .cr-assets-table tbody tr {
    display: block;
    margin: 0 10px 10px;
    padding: 2px 0;
    border: 1px solid rgba(128, 128, 128, 0.22);
    border-radius: 10px;
  }

  .cr-dash .cr-assets-table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 14px;
    border: none;
  }

  .cr-dash .cr-assets-table tbody td[data-label='Name'] {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .cr-dash .cr-assets-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--cr-dash-muted, #8f95b2);
  }

  /* the Name cell heads the card — no label, full width */
  .cr-dash .cr-assets-table tbody td[data-label='Name'] {
    justify-content: flex-start;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
  }

  .cr-dash .cr-assets-table tbody td[data-label='Name']::before {
    display: none;
  }
}

#responsive-overlay {
  position: fixed;
  inset: 0;
  z-index: 1032;
  background: rgba(10, 12, 24, 0.6);
}

/* --- main content + footer --- */

.cr-dash .main-content.app-content {
  margin-inline-start: 240px;
  min-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

.cr-dash .main-content > .container-fluid {
  flex: 1;
}

/* page transition — the (user)/_layout keys the content wrapper on
   location.pathname, so this fade-slide replays on every route change (not on
   in-page ?query tab switches). Opacity/transform only, so it needs no light
   variant. */
.cr-dash .cr-page-fade {
  animation: cr-page-fade 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes cr-page-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.cr-dash .page-title {
  color: #ffffff;
}

.cr-dash .breadcrumb {
  padding-inline-start: 0;
  margin-inline-start: 0;
}

.cr-dash .breadcrumb-item a {
  color: var(--primary-color);
}

.cr-dash .breadcrumb-item.active {
  color: #8f95b2;
}

.cr-dash .breadcrumb-item + .breadcrumb-item::before {
  content: '\00bb';
  color: #8f95b2;
}

.cr-dash .footer {
  margin-inline-start: 0;
  background: var(--cr-dash-side);
  border-top: 1px solid var(--dash-line);
}

.cr-dash .footer a {
  color: #ffffff;
}

/* --- cards --- */

.cr-dash .card.custom-card {
  background: var(--cr-dash-panel);
  border: 1px solid var(--dash-line);
  border-radius: 8px;
  margin-block-end: 1.5rem;
  color: #b6bbd4;
}

.cr-dash .custom-card .card-header {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  background: transparent;
  border-bottom: 1px solid var(--dash-line);
}

.cr-dash .custom-card .card-title {
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
}

.cr-dash .custom-card .card-body {
  padding: 1.25rem;
}

.cr-dash .custom-card .card-footer {
  padding: 0.9rem 1.25rem;
  background: transparent;
  border-top: 1px solid var(--dash-line);
  color: #8f95b2;
  font-size: 0.85rem;
}

.cr-dash .custom-card h4,
.cr-dash .custom-card h6 {
  color: #ffffff;
}

.cr-dash .card-bg-primary {
  background: var(--primary-color) !important;
  border: 0 !important;
}

.cr-dash .crypto-card .audience-report {
  overflow: hidden;
  border-radius: 0 0 12px 12px;
}

/* --- colour utilities the template leans on --- */

.cr-dash .bg-primary {
  background-color: var(--primary-color) !important;
}

.cr-dash .text-primary {
  color: var(--primary-color) !important;
}

.cr-dash .text-muted {
  color: #8f95b2 !important;
}

.cr-dash .text-default {
  color: #e2e4f1;
}

.cr-dash .text-fixed-white {
  color: #ffffff !important;
}

.cr-dash .op-8 {
  opacity: 0.8;
}

.cr-dash .bg-white-transparent {
  background: rgba(255, 255, 255, 0.14);
}

.cr-dash .bg-light {
  background: rgba(255, 255, 255, 0.1) !important;
}

.cr-dash .bg-primary-transparent {
  background: rgba(130, 116, 255, 0.16);
  color: #b2a9ff;
}

.cr-dash .bg-success-transparent {
  background: rgba(38, 191, 148, 0.16);
  color: #58d3ae;
}

.cr-dash .bg-danger-transparent {
  background: rgba(230, 83, 60, 0.16);
  color: #f2917e;
}

.cr-dash .bg-warning-transparent {
  background: rgba(245, 184, 73, 0.16);
  color: #f7ce85;
}

.cr-dash .bg-info-transparent {
  background: rgba(73, 182, 245, 0.16);
  color: #86ccf5;
}

.cr-dash .bg-secondary-transparent {
  background: rgba(255, 105, 55, 0.16);
  color: #ff9d7b;
}

.cr-dash .bg-dark-transparent {
  background: rgba(255, 255, 255, 0.1);
  color: #d3d6e8;
}

.cr-dash .fs-9 {
  font-size: 9px;
}

.cr-dash .fs-10 {
  font-size: 10px;
}

.cr-dash .fs-11 {
  font-size: 11px;
}

.cr-dash .fs-12 {
  font-size: 12px;
}

.cr-dash .fs-14 {
  font-size: 14px;
}

.cr-dash .fs-16 {
  font-size: 16px;
}

.cr-dash .fs-18 {
  font-size: 18px;
}

.cr-dash .border-inline-end-dashed {
  border-inline-end-style: dashed !important;
  border-color: var(--dash-line) !important;
}

.cr-dash .border,
.cr-dash .border-end {
  border-color: var(--dash-line) !important;
}

/* --- buttons / alerts --- */

.cr-dash .btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.cr-dash .btn-primary:hover {
  background-color: #6f60f2;
  border-color: #6f60f2;
}

.cr-dash .btn-primary-light {
  background: rgba(130, 116, 255, 0.16);
  border: 0;
  color: #b2a9ff;
}

.cr-dash .btn-primary-light:hover {
  background: var(--primary-color);
  color: #ffffff;
}

.cr-dash .alert-info {
  background: rgba(73, 182, 245, 0.12);
  border: 0;
  color: #8ac6f8;
}

.cr-dash .alert-info .text-info {
  color: #8ac6f8 !important;
}

.cr-dash .btn-close {
  filter: invert(1) grayscale(1);
  background: none;
  font-size: 14px;
  line-height: 1;
  color: inherit;
  border: 0;
}

/* --- table --- */

.cr-dash .table {
  color: #d3d6e8;
  margin-bottom: 0;
}

.cr-dash .table thead th {
  color: #8f95b2;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid var(--dash-line);
  background: transparent;
  padding: 0.85rem 1.25rem;
}

.cr-dash .table tbody td {
  color: #d3d6e8;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.04);
  padding: 0.85rem 1.25rem;
  vertical-align: middle;
}

/* --- swiper ticker cards (rendered as a scroll row) --- */

.cr-dash .swiper {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 4px;
}

.cr-dash .swiper-wrapper {
  display: flex;
  gap: 20px;
}

.cr-dash .swiper-slide {
  flex: 0 0 271px;
}

.cr-dash .swiper-slide .card.custom-card {
  margin-block-end: 0.5rem;
}

.cr-dash .swiper-slide .card-body {
  padding: 0.75rem;
}

.cr-dash .swiper-slide .text-default {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- responsive --- */

@media (max-width: 991.98px) {
  .cr-dash .app-sidebar {
    transform: translateX(-100%);
  }

  .cr-dash.sidebar-open .app-sidebar {
    transform: translateX(0);
  }

  .cr-dash .app-header,
  .cr-dash .main-content.app-content {
    margin-inline-start: 0;
  }
}

/* --- template pages: profile / investment / forms ------------- */

.cr-dash .profile-card {
  overflow: hidden;
  max-width: 820px;
}

/* keep the whole profile/settings page (identity, settings tabs, KYC) to a
   consistent, non-full-width column */
.cr-dash .cr-account-page > .row > [class*='col'] > .card.custom-card {
  max-width: 820px;
}

.cr-dash .profile-banner {
  height: 130px;
  margin: 0 0 0;
  background: url(/assets/images/site/cr-gradient-purple-striped-background_23-2149583760.avif) center / cover no-repeat,
    linear-gradient(120deg, #4b1d8f 0%, #8b2fd1 45%, #b13be0 70%, #5c1e9e 100%);
}

.cr-dash .profile-avatar-row {
  margin-top: -38px;
}

.cr-dash .avatar-xxl {
  width: 4.75rem;
  height: 4.75rem;
  font-size: 1.5rem;
}

.cr-dash .profile-avatar {
  background: #e9ecf3;
  color: #7d859c;
  border: 3px solid var(--cr-dash-panel);
  position: relative;
}

.cr-dash .profile-avatar.online::after {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #26bf94;
  border: 2px solid var(--cr-dash-panel);
}

.cr-dash .profile-tabs .profile-tab {
  display: flex;
  align-items: center;
  padding: 0.65rem 0.9rem;
  margin-bottom: 4px;
  border-radius: 8px;
  color: #aab0cb;
  font-size: 13.5px;
  font-weight: 500;
}

.cr-dash .profile-tabs .profile-tab:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}

.cr-dash .profile-tabs .profile-tab.active {
  background: rgba(130, 116, 255, 0.16);
  color: #d3d0ff;
}

.cr-dash .border-block-end-dashed {
  border-block-end-style: dashed !important;
  border-color: var(--dash-line) !important;
}

.cr-dash .profit-card {
  background: #58c437 !important;
  border: 0 !important;
}

.cr-dash .btn-dark-transparent {
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  color: #d3d6e8;
}

.cr-dash .btn-dark-transparent:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

/* dark console form controls (beat the bundled material-resets) */
.cr-dash input.form-control,
.cr-dash select.form-control,
.cr-dash textarea.form-control,
.cr-dash .form-select {
  box-sizing: border-box !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0.5rem 0.85rem !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--dash-line) !important;
  border-radius: 0.35rem !important;
  box-shadow: none !important;
  color: #e2e4f1 !important;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.6;
}

.cr-dash input.form-control:focus,
.cr-dash textarea.form-control:focus,
.cr-dash .form-select:focus {
  outline: none;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(130, 116, 255, 0.15) !important;
}

.cr-dash input.form-control::placeholder {
  color: #8f95b2;
  opacity: 1;
}

.cr-dash input.form-control[readonly] {
  opacity: 0.75;
}

.cr-dash .form-label {
  color: #cdd1e4;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: none;
  margin-bottom: 0.45rem;
}

.cr-dash .form-check-input {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--dash-line);
}

.cr-dash .form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.cr-dash .input-group .form-control {
  width: 1% !important;
  min-width: 0;
}

.cr-dash .alert-success {
  background: rgba(38, 191, 148, 0.14);
  border: 0;
  color: #58d3ae;
}

.cr-dash .alert-danger {
  background: rgba(230, 83, 60, 0.14);
  border: 0;
  color: #f2917e;
}

/* the bundled material-resets repaint .btn with --primary-button — restore
   the template's green/red action buttons on the console */
.cr-dash .btn-success {
  background-color: #58c437 !important;
  border-color: #58c437 !important;
  color: #ffffff !important;
}

.cr-dash .btn-success:hover {
  background-color: #4cb02e !important;
  border-color: #4cb02e !important;
}

.cr-dash .btn-danger {
  background-color: #e6533c !important;
  border-color: #e6533c !important;
  color: #ffffff !important;
}

.cr-dash .btn-danger:hover {
  background-color: #d24531 !important;
  border-color: #d24531 !important;
}

/* --- list-group (fund method pickers, wallet token lists) --- */

.cr-dash .list-group {
  border-radius: 0;
}

.cr-dash .list-group-flush {
  border-radius: 0;
}

.cr-dash .list-group-item {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--dash-line);
  color: #d3d6e8;
}

.cr-dash .list-group-item:last-child {
  border-bottom: 0;
}

.cr-dash .list-group-item-action:hover,
.cr-dash .list-group-item-action:focus {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}

/* ============================================================
   LIGHT CONSOLE — the dashboard's light theme. The console is
   dark by DEFAULT (every rule above paints the dark look); the
   (user)/_layout adds `cr-light` to the .cr-dash root when
   state.theme is LIGHT, and this section re-tokens + overrides
   the literal-white text/chip rules for a white console. Keep
   every selector prefixed .cr-dash.cr-light so the dark design
   above stays byte-for-byte untouched.
   ============================================================ */

.cr-dash.cr-light {
  --cr-dash-bg: #edf1f7;
  --cr-dash-panel: #ffffff;
  --cr-dash-side: #ffffff;
  --cr-dash-grid: rgba(22, 24, 29, 0.08);
  --cr-dash-muted: #7a8095;
  --dash-line: #e4e6ea;
  color: #3b4048;
}

.cr-dash.cr-light h1,
.cr-dash.cr-light h2,
.cr-dash.cr-light h3,
.cr-dash.cr-light h4,
.cr-dash.cr-light h5,
.cr-dash.cr-light h6 {
  color: #16181d;
}

.cr-dash.cr-light .bg h1,
.cr-dash.cr-light .bg h2,
.cr-dash.cr-light .bg h3,
.cr-dash.cr-light .bg h4,
.cr-dash.cr-light .bg h5,
.cr-dash.cr-light .bg h6 {
  color: var(--primary-heading-colour);
}

/* --- header --- */

.cr-dash.cr-light .header-link {
  color: #5a6079;
}

.cr-dash.cr-light .header-link:hover {
  background: rgba(22, 24, 29, 0.05);
  color: #16181d;
}

/* --- dropdowns --- */

.cr-dash.cr-light .dropdown-menu {
  box-shadow: 0 20px 45px rgba(16, 24, 40, 0.12);
  color: #3b4048;
}

.cr-dash.cr-light .dropdown-item {
  color: #3b4048;
}

.cr-dash.cr-light .dropdown-item:hover,
.cr-dash.cr-light .dropdown-item:focus {
  background: rgba(22, 24, 29, 0.05);
  color: #16181d;
}

/* the notification bell tile: white icon on a soft chip needs ink in light */
.cr-dash.cr-light .avatar.bg-light {
  color: #3b4048;
}

/* --- sidebar: keep the DARK rail in light mode too (design choice — the
   console is light but the navigation rail stays dark). These direct-value
   overrides beat the cr-light re-tokening of --cr-dash-side. --- */

.cr-dash.cr-light .app-sidebar {
  background: #0f1729;
  border-inline-end-color: rgba(255, 255, 255, 0.06);
}

.cr-dash.cr-light .main-sidebar-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.cr-dash.cr-light .main-sidebar-header .header-logo {
  color: #ffffff;
}

.cr-dash.cr-light .category-name {
  color: #8f95b2;
}

.cr-dash.cr-light .side-menu__item {
  color: #aab0cb;
}

.cr-dash.cr-light .side-menu__item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}

.cr-dash.cr-light .slide.active > .side-menu__item {
  background: rgba(130, 116, 255, 0.16);
  color: #d3d0ff;
}

.cr-dash.cr-light .slide-menu .side-menu__item {
  color: #aab0cb;
}

/* --- page chrome --- */

.cr-dash.cr-light .page-title {
  color: #16181d;
}

.cr-dash.cr-light .footer a {
  color: #16181d;
}

/* --- cards --- */

.cr-dash.cr-light .card.custom-card {
  color: #5a6079;
}

.cr-dash.cr-light .custom-card .card-title {
  color: #16181d;
}

.cr-dash.cr-light .custom-card h4,
.cr-dash.cr-light .custom-card h6 {
  color: #16181d;
}

/* --- colour utilities --- */

.cr-dash.cr-light .text-default {
  color: #16181d;
}

.cr-dash.cr-light .bg-light {
  background: rgba(22, 24, 29, 0.06) !important;
}

.cr-dash.cr-light .bg-primary-transparent {
  color: #5b4cf0;
}

.cr-dash.cr-light .bg-success-transparent {
  color: #1e9e79;
}

.cr-dash.cr-light .bg-danger-transparent {
  color: #d24531;
}

.cr-dash.cr-light .bg-warning-transparent {
  color: #c8890e;
}

.cr-dash.cr-light .bg-info-transparent {
  color: #1f83c9;
}

.cr-dash.cr-light .bg-secondary-transparent {
  color: #e05a2b;
}

.cr-dash.cr-light .bg-dark-transparent {
  background: rgba(22, 24, 29, 0.08);
  color: #3b4048;
}

/* --- buttons / alerts --- */

.cr-dash.cr-light .btn-primary-light {
  color: #5b4cf0;
}

.cr-dash.cr-light .btn-dark-transparent {
  background: rgba(22, 24, 29, 0.06);
  color: #3b4048;
}

.cr-dash.cr-light .btn-dark-transparent:hover {
  background: rgba(22, 24, 29, 0.12);
  color: #16181d;
}

.cr-dash.cr-light .alert-info {
  color: #176fb0;
}

.cr-dash.cr-light .alert-info .text-info {
  color: #176fb0 !important;
}

.cr-dash.cr-light .alert-success {
  color: #1e9e79;
}

.cr-dash.cr-light .alert-danger {
  color: #d24531;
}

.cr-dash.cr-light .btn-close {
  filter: none;
}

/* --- table --- */

.cr-dash.cr-light .table {
  color: #3b4048;
}

.cr-dash.cr-light .table thead th {
  color: #7a8095;
}

.cr-dash.cr-light .table tbody td {
  color: #3b4048;
  border-color: rgba(22, 24, 29, 0.06);
}

/* --- profile tabs --- */

.cr-dash.cr-light .profile-tabs .profile-tab {
  color: #5a6079;
}

.cr-dash.cr-light .profile-tabs .profile-tab:hover {
  background: rgba(22, 24, 29, 0.04);
  color: #16181d;
}

.cr-dash.cr-light .profile-tabs .profile-tab.active {
  color: #5b4cf0;
}

/* --- forms --- */

.cr-dash.cr-light input.form-control,
.cr-dash.cr-light select.form-control,
.cr-dash.cr-light textarea.form-control,
.cr-dash.cr-light .form-select {
  background: #ffffff !important;
  color: #16181d !important;
}

.cr-dash.cr-light .form-label {
  color: #3b4048;
}

.cr-dash.cr-light .form-check-input {
  background-color: rgba(22, 24, 29, 0.08);
}

.cr-dash.cr-light .form-check-input:checked {
  background-color: var(--primary-color);
}

/* --- list-group --- */

.cr-dash.cr-light .list-group-item {
  color: #3b4048;
}

.cr-dash.cr-light .list-group-item-action:hover,
.cr-dash.cr-light .list-group-item-action:focus {
  background: rgba(22, 24, 29, 0.04);
  color: #16181d;
}

/* ============================================================
   cr trade modal — opened by BUY/SELL on the Stocks/Crypto pages
   (portaled into .cr-dash). Light by default (matches the design);
   dark override when the console is in dark mode.
   ============================================================ */

.cr-dash .cr-trade-overlay {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 12, 24, 0.55);
}

.cr-dash .cr-trade-modal {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 22px;
  background: #ffffff;
  color: var(--cr-ink);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(10, 26, 74, 0.3);
}

.cr-dash .cr-trade-modal input[type='number']::-webkit-outer-spin-button,
.cr-dash .cr-trade-modal input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cr-dash .cr-trade-modal input[type='number'] {
  -moz-appearance: textfield;
}

.cr-dash .cr-trade-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cr-ink-45);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.cr-dash .cr-trade-close:hover {
  background: var(--cr-grey-bg);
  color: var(--cr-ink);
}

/* --- header --- */
.cr-dash .cr-trade-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-right: 34px;
}

.cr-dash .cr-trade-logo {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  padding: 8px;
  border-radius: 50%;
  background: rgba(10, 26, 74, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cr-dash .cr-trade-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cr-dash .cr-trade-logo .fe {
  font-size: 24px;
  color: var(--cr-blue);
}

.cr-dash .cr-trade-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cr-dash .cr-trade-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--cr-navy);
}

.cr-dash .cr-trade-theme {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cr-blue-10);
  color: var(--cr-blue);
  font-size: 13px;
  cursor: pointer;
}

.cr-dash .cr-trade-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.cr-dash .cr-trade-price {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cr-ink);
}

.cr-dash .cr-trade-price small {
  margin-left: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--cr-ink-45);
  vertical-align: super;
}

.cr-dash .cr-trade-change {
  font-size: 14px;
  font-weight: 700;
}

.cr-dash .cr-trade-change.up {
  color: var(--cr-up);
}

.cr-dash .cr-trade-change.down {
  color: var(--cr-down);
}

.cr-dash .cr-trade-range-word {
  font-size: 13px;
  color: var(--cr-ink-45);
}

/* --- range tabs --- */
.cr-dash .cr-trade-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 6px;
}

.cr-dash .cr-trade-tab {
  padding: 6px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--cr-ink-60);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.cr-dash .cr-trade-tab:hover {
  color: var(--cr-ink);
}

.cr-dash .cr-trade-tab.active {
  background: var(--cr-grey-bg);
  color: var(--cr-ink);
}

/* --- chart --- */
.cr-dash .cr-trade-chart-wrap {
  height: 220px;
  margin: 8px 0 4px;
}

.cr-dash .cr-trade-chart,
.cr-dash .cr-trade-chart .tradingview-widget-container__widget {
  height: 100%;
  width: 100%;
}

/* --- amount / price summary --- */
.cr-dash .cr-trade-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 14px 0;
  border-top: 1px solid var(--cr-line);
  border-bottom: 1px solid var(--cr-line);
}

.cr-dash .cr-trade-summary-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cr-dash .cr-trade-summary-col.text-end {
  text-align: right;
  align-items: flex-end;
}

.cr-dash .cr-trade-summary-label {
  font-size: 12px;
  color: var(--cr-ink-45);
}

.cr-dash .cr-trade-summary-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--cr-ink);
}

.cr-dash .cr-trade-summary-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--cr-blue);
}

.cr-dash .cr-trade-summary-sub.up {
  color: var(--cr-up);
}

.cr-dash .cr-trade-summary-sub.down {
  color: var(--cr-down);
}

/* --- quantity + amount inputs --- */
.cr-dash .cr-trade-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 16px 0;
}

.cr-dash .cr-trade-field {
  flex: 1 1 0;
  min-width: 180px;
}

.cr-dash .cr-trade-field > label {
  display: block;
  margin-bottom: 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--cr-blue);
}

.cr-dash .cr-trade-stepper,
.cr-dash .cr-trade-amount {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--cr-line);
  border-radius: 10px;
  background: #ffffff;
}

.cr-dash .cr-trade-stepper button {
  width: 44px;
  border: 0;
  background: var(--cr-blue-10);
  color: var(--cr-blue);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}

.cr-dash .cr-trade-stepper button:hover {
  background: var(--cr-blue);
  color: #ffffff;
}

.cr-dash .cr-trade-stepper input,
.cr-dash .cr-trade-amount input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 8px;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: center;
  font-size: 15px;
  color: var(--cr-ink);
}

.cr-dash .cr-trade-amount-icon {
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cr-blue-10);
  color: var(--cr-blue);
  font-size: 16px;
  font-weight: 700;
}

.cr-dash .cr-trade-field > label small {
  font-weight: 500;
  opacity: 0.75;
}

/* --- timed / untimed picker (settings.trade_type == 'both') --- */
.cr-dash .cr-trade-modes {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
}

.cr-dash .cr-trade-mode {
  flex: 1 1 0;
  padding: 9px 12px;
  border: 1px solid var(--cr-line);
  border-radius: 10px;
  background: transparent;
  color: var(--cr-ink-60);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.cr-dash .cr-trade-mode.active {
  border-color: var(--cr-blue);
  background: var(--cr-blue-10);
  color: var(--cr-blue);
}

.cr-dash .cr-trade-leverage-note {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--cr-ink-60);
}

.cr-dash:not(.cr-light) .cr-trade-mode {
  border-color: var(--cr-on-dark-line);
  color: var(--cr-on-dark-70);
}

.cr-dash:not(.cr-light) .cr-trade-leverage-note {
  color: var(--cr-on-dark-50);
}

.cr-dash .cr-trade-note {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--cr-down-soft);
  color: var(--cr-down-dark);
  font-size: 13px;
  font-weight: 500;
}

.cr-dash:not(.cr-light) .cr-trade-note {
  color: var(--cr-down);
}

/* --- action --- */
.cr-dash .cr-trade-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 10px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cr-dash .cr-trade-cta.buy {
  background: var(--cr-up);
}

.cr-dash .cr-trade-cta.buy:hover {
  background: var(--cr-up-dark);
}

.cr-dash .cr-trade-cta.sell {
  background: var(--cr-down);
}

.cr-dash .cr-trade-cta.sell:hover {
  background: var(--cr-down-dark);
}

.cr-dash .cr-trade-cta:disabled {
  opacity: 0.7;
  cursor: default;
}

/* --- dark console override --- */
.cr-dash:not(.cr-light) .cr-trade-modal {
  background: var(--cr-dash-panel);
  color: var(--cr-on-dark-70);
}

.cr-dash:not(.cr-light) .cr-trade-name,
.cr-dash:not(.cr-light) .cr-trade-price,
.cr-dash:not(.cr-light) .cr-trade-summary-value {
  color: var(--cr-on-dark);
}

.cr-dash:not(.cr-light) .cr-trade-logo {
  background: var(--cr-on-dark-line);
}

.cr-dash:not(.cr-light) .cr-trade-summary {
  border-color: var(--cr-on-dark-line);
}

.cr-dash:not(.cr-light) .cr-trade-tab.active {
  background: var(--cr-on-dark-line);
  color: var(--cr-on-dark);
}

.cr-dash:not(.cr-light) .cr-trade-stepper,
.cr-dash:not(.cr-light) .cr-trade-amount {
  background: var(--cr-dash-side);
  border-color: var(--cr-on-dark-line);
}

.cr-dash:not(.cr-light) .cr-trade-stepper input,
.cr-dash:not(.cr-light) .cr-trade-amount input {
  color: var(--cr-on-dark);
}

.cr-dash:not(.cr-light) .cr-trade-close:hover {
  background: var(--cr-on-dark-line);
  color: var(--cr-on-dark);
}

@media (max-width: 575.98px) {
  .cr-dash .cr-trade-modal {
    padding: 16px;
  }

  .cr-dash .cr-trade-price {
    font-size: 22px;
  }

  .cr-dash .cr-trade-chart-wrap {
    height: 180px;
  }
}

/* ============================================================
   Stocks/Crypto extras — scroll-to-top button + pager loading
   ============================================================ */

.cr-dash .cr-scrolltop {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 1050;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--cr-blue);
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(10, 26, 74, 0.28);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  animation: cr-scrolltop-in 0.2s ease;
}

.cr-dash .cr-scrolltop:hover {
  background: var(--cr-blue-dark);
  transform: translateY(-2px);
}

.cr-dash .cr-scrolltop .fe {
  font-size: 22px;
}

@keyframes cr-scrolltop-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* while a page is being fetched, dim the pager and block pointer input */
.cr-dash .cr-pager-loading {
  opacity: 0.7;
  pointer-events: none;
}

.cr-dash .cr-pager-loading .spinner-border {
  width: 1rem;
  height: 1rem;
  color: var(--cr-blue);
}

.cr-dash .cr-asset-search {
  max-width: 220px;
}

/* --- guest footer regulatory disclosures --- */

.cr .cr-footer-legal {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--cr-on-dark-line);
}

.cr .cr-footer-legal p {
  margin: 0 0 14px 0;
  color: var(--cr-on-dark-50);
  font-size: 11.5px;
  line-height: 1.7;
}

.cr .cr-footer-legal p:last-child {
  margin-bottom: 0;
}

.cr .cr-footer-legal sup {
  font-size: 9px;
}

.cr .cr-footer-legal .cr-footer-legal-title {
  color: var(--cr-on-dark);
  font-size: 12.5px;
  font-weight: 700;
  margin-top: 20px;
}

.cr .cr-footer-legal .cr-footer-legal-rule {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--cr-on-dark-line);
}

/* ============================================================
   cr withdrawal modal — "Make a Withdrawal"
   ============================================================ */

.cr-dash .cr-wd-overlay {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 12, 24, 0.55);
}

.cr-dash .cr-wd-modal {
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  color: var(--cr-ink);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(10, 26, 74, 0.3);
}

.cr-dash .cr-wd-head {
  padding: 22px 24px 6px;
  text-align: center;
}

.cr-dash .cr-wd-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--cr-ink);
}

.cr-dash .cr-wd-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 24px 20px;
}

/* --- method picker --- */
.cr-dash .cr-wd-methods {
  margin-bottom: 18px;
}

.cr-dash .cr-wd-method {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  border: 1px solid var(--cr-line);
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cr-dash .cr-wd-method:hover {
  border-color: var(--cr-blue);
}

.cr-dash .cr-wd-method.active {
  border-color: var(--cr-blue);
  box-shadow: 0 0 0 1px var(--cr-blue);
}

.cr-dash .cr-wd-method-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--cr-blue-10);
  color: var(--cr-blue);
  font-size: 17px;
}

.cr-dash .cr-wd-method-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--cr-ink);
}

/* --- amount --- */
.cr-dash .cr-wd-amount {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--cr-line);
  border-radius: 8px;
}

.cr-dash .cr-wd-amount-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  border: 0;
  outline: 0;
  font-size: 14px;
  color: var(--cr-ink);
  background: transparent;
}

.cr-dash .cr-wd-amount-input::-webkit-outer-spin-button,
.cr-dash .cr-wd-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cr-dash .cr-wd-amount-input {
  -moz-appearance: textfield;
}

.cr-dash .cr-wd-amount-cur {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  background: var(--cr-grey-bg);
  border-left: 1px solid var(--cr-line);
  font-size: 13px;
  font-weight: 600;
  color: var(--cr-ink);
}

/* --- summary + details --- */
.cr-dash .cr-wd-summary {
  margin: 16px 0 18px;
  text-align: center;
  font-size: 13.5px;
  color: var(--cr-ink);
}

.cr-dash .cr-wd-rate {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--cr-ink-45);
}

.cr-dash .cr-wd-detail-intro {
  margin: 0 0 16px;
  text-align: center;
  font-size: 13px;
  color: var(--cr-ink);
}

.cr-dash .cr-wd-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--cr-blue);
}

.cr-dash .cr-wd-value {
  padding: 11px 14px;
  border-radius: 6px;
  background: var(--cr-grey-bg);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cr-ink);
  overflow-wrap: anywhere;
}

.cr-dash .cr-wd-value.is-empty {
  font-weight: 400;
  color: var(--cr-ink-45);
}

/* editable payout detail — entered per withdrawal */
.cr-dash .cr-wd-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--cr-line);
  border-radius: 6px;
  background: var(--cr-grey-bg);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cr-ink);
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.cr-dash .cr-wd-input::placeholder {
  font-weight: 400;
  color: var(--cr-ink-45);
}

.cr-dash .cr-wd-input:focus {
  border-color: var(--cr-blue);
  background: transparent;
}

.cr-dash .cr-wd-detail-hint {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--cr-ink-60);
}

.cr-dash .cr-wd-available {
  margin: 18px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--cr-ink-60);
}

.cr-dash .cr-wd-note {
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--cr-down-soft);
  color: var(--cr-down-dark);
  font-size: 13px;
}

/* --- footer actions --- */
.cr-dash .cr-wd-foot {
  flex: 0 0 auto;
  padding: 14px 24px 20px;
  border-top: 1px solid var(--cr-line);
}

.cr-dash .cr-wd-confirm,
.cr-dash .cr-wd-close {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cr-dash .cr-wd-confirm {
  margin-bottom: 10px;
  background: var(--cr-blue-10);
  color: var(--cr-blue);
}

.cr-dash .cr-wd-confirm:hover {
  background: var(--cr-blue);
  color: #ffffff;
}

.cr-dash .cr-wd-confirm:disabled {
  opacity: 0.7;
  cursor: default;
}

.cr-dash .cr-wd-close {
  background: var(--cr-down-soft);
  color: var(--cr-down-dark);
}

.cr-dash .cr-wd-close:hover {
  background: var(--cr-down);
  color: #ffffff;
}

/* dark console */
.cr-dash:not(.cr-light) .cr-wd-modal {
  background: var(--cr-dash-panel);
  color: var(--cr-on-dark-70);
}

.cr-dash:not(.cr-light) .cr-wd-title,
.cr-dash:not(.cr-light) .cr-wd-method-label,
.cr-dash:not(.cr-light) .cr-wd-value,
.cr-dash:not(.cr-light) .cr-wd-summary,
.cr-dash:not(.cr-light) .cr-wd-detail-intro {
  color: var(--cr-on-dark);
}

.cr-dash:not(.cr-light) .cr-wd-method,
.cr-dash:not(.cr-light) .cr-wd-amount {
  background: var(--cr-dash-side);
  border-color: var(--cr-on-dark-line);
}

.cr-dash:not(.cr-light) .cr-wd-amount-input,
.cr-dash:not(.cr-light) .cr-wd-amount-cur {
  color: var(--cr-on-dark);
  background: transparent;
}

.cr-dash:not(.cr-light) .cr-wd-value {
  background: var(--cr-dash-side);
}

.cr-dash:not(.cr-light) .cr-wd-input {
  background: var(--cr-dash-side);
  border-color: var(--cr-on-dark-line);
  color: var(--cr-on-dark);
}

.cr-dash:not(.cr-light) .cr-wd-input::placeholder {
  color: var(--cr-on-dark-50);
}

.cr-dash:not(.cr-light) .cr-wd-detail-hint,
.cr-dash:not(.cr-light) .cr-wd-available,
.cr-dash:not(.cr-light) .cr-wd-rate {
  color: var(--cr-on-dark-50);
}

.cr-dash:not(.cr-light) .cr-wd-foot {
  border-color: var(--cr-on-dark-line);
}

/* ============================================================
   cr deposit page — /user/deposits/new "Deposit Funds"
   ============================================================ */

.cr-dash .cr-dep-page .card-body {
  padding: 24px 28px 28px;
}

@media (max-width: 575.98px) {
  .cr-dash .cr-dep-page .card-body {
    padding: 18px 16px 22px;
  }
}

.cr-dash .cr-dep-head {
  text-align: center;
  margin-bottom: 22px;
}

.cr-dash .cr-dep-title {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 700;
  color: var(--cr-ink);
}

.cr-dash .cr-dep-sub {
  margin: 0;
  font-size: 12px;
  color: var(--cr-ink-45);
}

/* --- method cards --- */
.cr-dash .cr-dep-method {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 18px;
  border: 1px solid var(--cr-line);
  border-radius: 10px;
  background: #ffffff;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cr-dash .cr-dep-method:hover {
  border-color: var(--cr-blue);
}

.cr-dash .cr-dep-method-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: var(--cr-blue-10);
  color: var(--cr-blue);
  font-size: 20px;
}

.cr-dash .cr-dep-method-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--cr-ink);
}

.cr-dash .cr-dep-method-sub {
  font-size: 12px;
  color: var(--cr-ink-45);
}

.cr-dash .cr-dep-method-warn {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cr-down);
}

.cr-dash .cr-dep-method-warn a {
  color: var(--cr-blue);
  text-decoration: underline;
}

.cr-dash .cr-dep-bank {
  text-align: center;
  font-size: 13.5px;
  color: var(--cr-ink-60);
}

/* --- form --- */
.cr-dash .cr-dep-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--cr-ink);
}

.cr-dash .cr-dep-select {
  position: relative;
  display: flex;
  align-items: center;
}

.cr-dash .cr-dep-coin-icon {
  position: absolute;
  left: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  pointer-events: none;
}

.cr-dash .cr-dep-select .form-select {
  padding-left: 40px;
}

.cr-dash .cr-dep-amount {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--cr-line);
  border-radius: 8px;
}

.cr-dash .cr-dep-amount-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  border: 0;
  outline: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--cr-ink);
  background: transparent;
}

.cr-dash .cr-dep-amount-cur {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  background: var(--cr-grey-bg);
  border-left: 1px solid var(--cr-line);
  font-size: 13px;
  font-weight: 700;
}

.cr-dash .cr-dep-summary {
  margin: 14px 0 18px;
  text-align: center;
  font-size: 13.5px;
}

.cr-dash .cr-dep-rate {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--cr-ink-45);
}

/* --- address / qr (only after the whitelist check passes) --- */
.cr-dash .cr-dep-qr {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.cr-dash .cr-dep-instruction {
  margin: 0 0 14px;
  text-align: center;
  font-size: 12.5px;
  color: var(--cr-ink-60);
  line-height: 1.6;
}

.cr-dash .cr-dep-address {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--cr-line);
  border-radius: 8px;
  background: var(--cr-grey-bg);
}

.cr-dash .cr-dep-address-icon {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-right: 1px solid var(--cr-line);
  color: var(--cr-ink-45);
}

.cr-dash .cr-dep-address-value {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 12px;
  text-align: center;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.cr-dash .cr-dep-copy {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 0;
  border-left: 1px solid var(--cr-line);
  background: transparent;
  color: var(--cr-blue);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.cr-dash .cr-dep-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 12px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--cr-ink-45);
}

.cr-dash .cr-dep-blocked {
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: var(--cr-down-soft);
  color: var(--cr-down-dark);
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
}

/* --- note --- */
.cr-dash .cr-dep-note {
  padding: 16px 18px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: var(--cr-blue-10);
}

.cr-dash .cr-dep-note p,
.cr-dash .cr-dep-note li {
  color: var(--cr-blue);
  font-size: 12.5px;
  line-height: 1.7;
}

.cr-dash .cr-dep-note p {
  margin: 0 0 8px;
}

.cr-dash .cr-dep-note-title {
  color: var(--cr-down) !important;
  font-weight: 600;
}

.cr-dash .cr-dep-note ul {
  margin: 0;
  padding-left: 18px;
}

.cr-dash .cr-dep-confirm-hint {
  margin: 0 0 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--cr-ink-60);
  line-height: 1.6;
}

.cr-dash .cr-dep-msg {
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--cr-down-soft);
  color: var(--cr-down-dark);
  font-size: 13px;
}

.cr-dash .cr-dep-foot {
  padding-top: 16px;
  border-top: 1px solid var(--cr-line);
}

.cr-dash .cr-dep-submit {
  padding: 12px 26px;
  border: 0;
  border-radius: 8px;
  background: var(--cr-blue-10);
  color: var(--cr-blue);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cr-dash .cr-dep-submit:hover:not(:disabled) {
  background: var(--cr-blue);
  color: #ffffff;
}

.cr-dash .cr-dep-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* dark console */
/* the muted copy uses dark-ink tokens, which stay dark on the dark console —
   lift every one of them to the on-dark equivalents or they vanish */
.cr-dash:not(.cr-light) .cr-dep-sub,
.cr-dash:not(.cr-light) .cr-dep-method-sub,
.cr-dash:not(.cr-light) .cr-dep-rate,
.cr-dash:not(.cr-light) .cr-dep-placeholder {
  color: var(--cr-on-dark-50);
}

.cr-dash:not(.cr-light) .cr-dep-summary,
.cr-dash:not(.cr-light) .cr-dep-instruction,
.cr-dash:not(.cr-light) .cr-dep-confirm-hint {
  color: var(--cr-on-dark-70);
}

.cr-dash:not(.cr-light) .cr-dep-title,
.cr-dash:not(.cr-light) .cr-dep-method-title,
.cr-dash:not(.cr-light) .cr-dep-label,
.cr-dash:not(.cr-light) .cr-dep-amount-input,
.cr-dash:not(.cr-light) .cr-dep-address-value {
  color: var(--cr-on-dark);
}

.cr-dash:not(.cr-light) .cr-dep-method,
.cr-dash:not(.cr-light) .cr-dep-amount,
.cr-dash:not(.cr-light) .cr-dep-address {
  background: var(--cr-dash-side);
  border-color: var(--cr-on-dark-line);
}

/* the currency chip sits on the light grey token — dark it with the bar */
.cr-dash:not(.cr-light) .cr-dep-amount-cur {
  background: transparent;
  border-left-color: var(--cr-on-dark-line);
  color: var(--cr-on-dark-70);
}

.cr-dash:not(.cr-light) .cr-dep-amount-input::placeholder {
  color: var(--cr-on-dark-50);
}

.cr-dash:not(.cr-light) .cr-dep-foot {
  border-color: var(--cr-on-dark-line);
}

/* ============================================================
   cr portfolio panel — /user/stocks/trades + /user/crypto/trades
   Headline value, then one row per figure (icon tile, name + sub, figure).
   ============================================================ */

.cr-dash .cr-pf {
  overflow: hidden;
}

.cr-dash .cr-pf-head {
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--cr-line);
}

.cr-dash .cr-pf-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--cr-ink);
}

.cr-dash .cr-pf-title i,
.cr-dash .cr-pf-name i {
  font-size: 12.5px;
  color: var(--cr-ink-45);
  cursor: help;
}

.cr-dash .cr-pf-value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.cr-dash .cr-pf-amount {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--cr-ink);
}

.cr-dash .cr-pf-pct {
  font-size: 13px;
  font-weight: 600;
}

.cr-dash .cr-pf-pct.up,
.cr-dash .cr-pf-sub.up {
  color: var(--cr-up-dark);
}

.cr-dash .cr-pf-pct.down,
.cr-dash .cr-pf-sub.down {
  color: var(--cr-down-dark);
}

/* --- rows --- */
.cr-dash .cr-pf-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cr-dash .cr-pf-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--cr-line);
}

.cr-dash .cr-pf-row:last-child {
  border-bottom: 0;
}

.cr-dash .cr-pf-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--cr-grey-bg);
  color: var(--cr-blue);
  font-size: 16px;
}

.cr-dash .cr-pf-label {
  flex: 1 1 auto;
  min-width: 0;
}

.cr-dash .cr-pf-name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cr-ink);
}

.cr-dash .cr-pf-sub {
  display: block;
  font-size: 12px;
  color: var(--cr-ink-45);
}

.cr-dash .cr-pf-figure {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--cr-ink-60);
}

/* dark console */
.cr-dash:not(.cr-light) .cr-pf-head,
.cr-dash:not(.cr-light) .cr-pf-row {
  border-color: var(--cr-on-dark-line);
}

.cr-dash:not(.cr-light) .cr-pf-title,
.cr-dash:not(.cr-light) .cr-pf-amount,
.cr-dash:not(.cr-light) .cr-pf-name {
  color: var(--cr-on-dark);
}

.cr-dash:not(.cr-light) .cr-pf-sub,
.cr-dash:not(.cr-light) .cr-pf-title i,
.cr-dash:not(.cr-light) .cr-pf-name i {
  color: var(--cr-on-dark-50);
}

.cr-dash:not(.cr-light) .cr-pf-figure {
  color: var(--cr-on-dark-70);
}

.cr-dash:not(.cr-light) .cr-pf-icon {
  background: var(--cr-dash-side);
}

/* --- brand logos (guest nav, user sidebar, mobile user header) --- */

.cr .cr-logo-img,
.cr-dash .cr-logo-img {
  display: block;
  height: 42px;
  width: auto;
  max-width: 250px;
  object-fit: contain;
}

/* the guest nav line-height would otherwise stretch the anchor around the img */
.cr .cr-nav .cr-logo {
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.cr .cr-nav-panel-head .cr-logo-img {
  height: 38px;
}

.cr-dash .main-sidebar-header .cr-logo-img {
  height: 38px;
  max-width: 200px;
}

.cr-dash .cr-header-brand .cr-logo-img {
  height: 34px;
  max-width: 190px;
}

@media (max-width: 575.98px) {
  .cr .cr-logo-img,
  .cr-dash .cr-logo-img {
    height: 32px;
    max-width: 180px;
  }
}

/* watchlist star toggle (asset tables + dashboard watchlist) */
.cr-dash .cr-watch-star {
  padding-left: 8px;
  padding-right: 8px;
  line-height: 1;
}

/* ============================================================
   cr trades tables — /user/stocks/trades + /user/crypto/trades
   ============================================================ */

/* countdown badge on a TIMED open position */
.cr-dash .cr-trade-timer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--cr-blue-10);
  color: var(--cr-blue);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}

.cr-dash .cr-trade-timer .fe {
  font-size: 11px;
}

.cr-dash .cr-trade-timer.is-done {
  background: var(--cr-down-soft);
  color: var(--cr-down-dark);
}

/* stack each row into a labelled card on phones, so all five figures are
   readable with no horizontal scroll (same treatment as .cr-assets-table) */
@media (max-width: 767.98px) {
  .cr-dash .cr-trades-table,
  .cr-dash .cr-trades-table tbody {
    display: block;
    width: 100%;
  }

  .cr-dash .cr-trades-table {
    white-space: normal;
  }

  .cr-dash .cr-trades-table thead {
    display: none;
  }

  .cr-dash .cr-trades-table tbody tr {
    display: block;
    margin: 0 10px 10px;
    padding: 2px 0;
    border: 1px solid rgba(128, 128, 128, 0.22);
    border-radius: 10px;
  }

  .cr-dash .cr-trades-table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 14px;
    border: none;
  }

  .cr-dash .cr-trades-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--cr-dash-muted, #8f95b2);
  }

  /* the asset cell heads the card — no label, full width */
  .cr-dash .cr-trades-table tbody td[data-label='Asset'] {
    justify-content: flex-start;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
  }

  .cr-dash .cr-trades-table tbody td[data-label='Asset']::before {
    display: none;
  }

  /* the "no assets" row is a single centred cell, not a label/value pair */
  .cr-dash .cr-trades-table tbody td[colspan] {
    justify-content: center;
    border: none;
  }

  .cr-dash .cr-trades-table tbody td[colspan]::before {
    display: none;
  }

  .cr-dash .cr-trades-table tbody tr:has(td[colspan]) {
    border: none;
  }

  /* the portfolio panel stops being a sidebar and reads as a normal card */
  .cr-dash .cr-pf-head {
    padding: 16px 16px 14px;
  }

  .cr-dash .cr-pf-row {
    padding: 12px 16px;
  }
}

/* TradingView single-quote cards (dashboard + stocks/crypto pages) */
.cr-dash .cr-tv-quote .card-body,
.cr-dash .cr-tv-quote {
  overflow: hidden;
}

.cr-dash .cr-tv-quote .tradingview-widget-container {
  padding: 2px 4px;
}

/* the embeds bring their own copyright strip we do not need */
.cr-dash .tradingview-widget-copyright {
  display: none;
}

/* --- Activity Stats / Portfolio Value: equal-height pair --- */
/* h-100 stretches the card; the body must then grow so the plot sits centred
   in the space rather than leaving a gap under it. */
.cr-dash .card.custom-card.h-100 {
  display: flex;
  flex-direction: column;
}

.cr-dash .card.custom-card.h-100 > .card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- recent transactions --- */
.cr-dash .cr-txn-desc {
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 767.98px) {
  .cr-dash .cr-txn-table,
  .cr-dash .cr-txn-table tbody {
    display: block;
    width: 100%;
  }

  .cr-dash .cr-txn-table {
    white-space: normal;
  }

  .cr-dash .cr-txn-table thead {
    display: none;
  }

  .cr-dash .cr-txn-table tbody tr {
    display: block;
    margin: 0 10px 10px;
    padding: 2px 0;
    border: 1px solid rgba(128, 128, 128, 0.22);
    border-radius: 10px;
  }

  .cr-dash .cr-txn-table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 14px;
    border: none;
  }

  .cr-dash .cr-txn-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--cr-dash-muted, #8f95b2);
  }

  .cr-dash .cr-txn-desc {
    max-width: none;
    white-space: normal;
    text-align: right;
  }

  .cr-dash .cr-txn-table tbody td[colspan] {
    justify-content: center;
  }

  .cr-dash .cr-txn-table tbody td[colspan]::before {
    display: none;
  }
}

/* ============================================================
   cr portfolio value widget — available / locked / total
   'wide' = purple banner (user home) · 'stacked' = green column (cash page)
   ============================================================ */

.cr-dash .card.custom-card.cr-pv {
  position: relative;
  overflow: hidden;
  border: 0;
  color: #ffffff;
}

.cr-dash .card.custom-card.cr-pv-wide {
  background: #7b7ff0;
  min-height: 190px;
}

.cr-dash .card.custom-card.cr-pv-stacked {
  background: #6cc972;
}

.cr-dash .cr-pv-body {
  position: relative;
  z-index: 1;
  padding: 18px 20px 20px;
}

.cr-dash .cr-pv-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12.5px;
}

.cr-dash .cr-pv-info {
  top: 0;
  font-size: 12px;
  opacity: 0.75;
  cursor: help;
}

.cr-dash .cr-pv-amount {
  display: block;
  margin-top: 3px;
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.cr-dash .cr-pv-amount small {
  margin-left: 5px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.85;
}

/* the lighter panel(s) sitting on the tint */
.cr-dash .cr-pv-inset {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
}

.cr-dash .cr-pv-inset .cr-pv-amount {
  font-size: 19px;
}

/* --- stacked (green) header --- */
.cr-dash .cr-pv-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

.cr-dash .cr-pv-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.24);
  font-size: 18px;
}

.cr-dash .cr-pv-icon .fe {
  top: 0;
  color: #ffffff;
}

.cr-dash .cr-pv-head-label {
  display: block;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12.5px;
}

.cr-dash .cr-pv-head-value {
  display: block;
  font-size: 15px;
  font-weight: 700;
}

/* --- decorative sparkline behind the wide variant --- */
.cr-dash .cr-pv-spark {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 56%;
}

.cr-dash .cr-pv-spark-fill {
  fill: rgba(255, 255, 255, 0.14);
}

.cr-dash .cr-pv-spark-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}

/* plan cards on /user/fund/step1 pick the amount for the form above them */
.cr-dash .cr-plan-card {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cr-dash .cr-plan-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(10, 26, 74, 0.12);
}

/* leverage note under the portfolio headline */
.cr-dash .cr-pf-note {
  display: block;
  margin-top: 6px;
  color: var(--cr-ink-60);
  font-size: 11.5px;
  line-height: 1.5;
}

.cr-dash:not(.cr-light) .cr-pf-note {
  color: var(--cr-on-dark-50);
}

/* recap of the amount/account chosen in step 1 of the deposit flow */
.cr-dash .cr-dep-recap {
  margin-bottom: 14px;
  padding: 11px 14px;
  border-radius: 8px;
  background: var(--cr-grey-bg);
  color: var(--cr-ink-60);
  font-size: 13px;
}

.cr-dash:not(.cr-light) .cr-dep-recap {
  background: var(--cr-dash-side);
  color: var(--cr-on-dark-70);
}

@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 {
  --primary-button: #766fb2;

  --secondary-link-colour: #766fb2;

  --primary-border-colour: silver;
}

#goog-gt-vt {
  display: none;
}

iframe.VIpgJd-ZVi9od-ORHb-OEVmcd {
  display: none;
}

/* 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;
}

.background-one {
  background-image: url(/assets/images/site/Background1.png);
}

.background-two {
  background: url(/assets/images/site/Background2.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.dashboard-trading {
  background: url(/assets/images/site/DashboardTrading.png);
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}

.dashboard-mining {
  background: url(/assets/images/site/DashboardMining.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero1,
.hero-currencies {
  background: url(/assets/images/site/Hero1.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero2,
.hero-bitcoin {
  background: url(/assets/images/site/Hero2.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero3,
.hero-mixed {
  background: url(/assets/images/site/Hero3.jpg);
  background-position: center;
  background-repeat: no-repeat;
}

.hero4,
.hero-stocks {
  background: url(/assets/images/site/Hero4.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero5,
.hero-numbers {
  background: url(/assets/images/site/Hero5.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero6,
.hero-trader {
  background: url(/assets/images/site/Hero6.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}