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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  h2 {
    font-size: 32px;
  }

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

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

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

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

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

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

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

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

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

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

.ap-reviews {
  max-width: 48rem;
  margin: 3rem auto 0;
  padding: 0 1rem;
}

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

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

.ap-reviews-stars svg {
  display: block;
  color: #06b6d4;
}

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

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

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

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

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

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

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

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

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

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

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



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

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


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

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

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

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

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

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

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

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

.db-down {
  color: #e5484d;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* ---- withdrawal view ----
   The label/value lines in the transaction summary. Materialize rows carry a
   20px bottom margin, which stacked four of them into a very tall card. */
.wv-line {
  margin-bottom: 0 !important;
}

.wv-line .col {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* ─── Crypto cards (/user/cards) ─────────────────────────────────────────────
   Every rule is scoped under .cc. Colours come from the shared theme tokens
   (app/skin.js and each skin's skin.js set them), with the card artwork's own
   --cc-art-* tokens; the accent is --primary-button. */

.cc {
  /* This page renders inside every skin, and only app/skin.js sets the card
     artwork tokens — a skin that leaves them unset gets these, the values
     app/skin.js uses. */
  --cc-from: var(--cc-art-from, #1c7a4d);
  --cc-to: var(--cc-art-to, #0b3b26);
  --cc-chip: var(--cc-art-chip, #e9c46a);
  --cc-ink: var(--cc-art-ink, #ffffff);

  --cc-accent: var(--primary-button);
  --cc-accent-soft: color-mix(in srgb, var(--primary-button) 13%, transparent);
  --cc-heading: var(--background-heading-colour);
  --cc-text: var(--primary-font-colour);
  --cc-line: var(--primary-border-colour);
  --cc-surface: var(--primary-background);
  --cc-muted-surface: color-mix(in srgb, var(--primary-border-colour) 28%, var(--primary-background));

  padding: 8px 0 24px;
}

.cc h1,
.cc h2,
.cc h3,
.cc h4 {
  color: var(--cc-heading);
}

.cc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.cc-head h1 {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.15;
}

.cc-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--cc-text);
  font-size: 14px;
}

.cc-crumbs a {
  color: var(--cc-text);
}

.cc-crumbs a:hover {
  color: var(--cc-accent);
}

.cc-panel {
  margin-bottom: 20px;
  padding: 28px;
  border: 1px solid var(--cc-line);
  border-radius: 18px;
  background: var(--cc-surface);
}

.cc-panel .row {
  margin-bottom: 0;
}

.cc-btn,
.cc-btn:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 10px;
  background: var(--cc-accent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary-button) 30%, transparent);
  color: var(--nav-secondary-font-colour);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
}

.cc-btn:hover {
  background: color-mix(in srgb, var(--primary-button) 88%, var(--secondary-background));
  color: var(--nav-secondary-font-colour);
}

.cc-btn-light,
.cc-btn-light:focus {
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--cc-line);
  background: var(--cc-surface);
  box-shadow: none;
  color: var(--cc-heading);
  font-size: 14px;
}

.cc-btn-light:hover {
  background: var(--cc-muted-surface);
  color: var(--cc-heading);
}

.cc-btn-block,
.cc-btn-block:focus {
  display: flex;
  width: 100%;
}

.cc-link,
.cc-link:focus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cc-accent);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.cc-link .material-icons {
  font-size: 18px;
}

.cc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
}

.cc-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 12px;
  background: var(--cc-accent-soft);
  color: var(--cc-accent);
}

.cc-icon .material-icons {
  font-size: 22px;
}

.cc-icon-sm {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.cc-icon-sm .material-icons {
  font-size: 18px;
}

/* Hero */

.cc-hero {
  overflow: hidden;
  padding: 0;
}

.cc-hero > .row {
  display: flex;
  flex-wrap: wrap;
}

.cc-hero > .row > .col {
  margin-left: 0;
}

.cc-hero > .row > .col.cc-hero-copy {
  padding: 44px 40px;
}

.cc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--cc-accent-soft);
  color: var(--cc-accent);
  font-size: 13.5px;
  font-weight: 700;
}

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

.cc-hero h2 {
  margin: 22px 0 18px;
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -1.4px;
  line-height: 1.08;
}

.cc-hero p {
  max-width: 440px;
  margin: 0 0 22px;
  color: var(--cc-text);
  font-size: 16px;
  line-height: 1.65;
}

.row.cc-highlights {
  margin: 0 -6px 26px;
}

.row.cc-highlights > .col {
  padding: 6px;
}

.cc-highlight {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cc-heading);
  font-size: 14.5px;
  font-weight: 600;
  word-break: normal;
}

.cc-hero > .row > .col.cc-hero-art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  background: radial-gradient(420px 260px at 70% 30%, var(--cc-accent-soft), transparent 70%), var(--cc-muted-surface);
}

/* The card. It is a size container, so every offset and font below is in
   cqw (1% of the card's own width) and the card scales as one piece — the
   numbers match a 400px-wide card. */

.cc-art {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1.586;
  overflow: hidden;
  border-radius: 4cqw;
  background: radial-gradient(circle at 18% -10%, color-mix(in srgb, var(--cc-ink) 16%, transparent) 0 42%, transparent 42.5%),
    radial-gradient(circle at 105% 115%, color-mix(in srgb, var(--cc-ink) 14%, transparent) 0 34%, transparent 34.5%),
    linear-gradient(135deg, var(--cc-from), var(--cc-to));
  box-shadow: 0 28px 60px color-mix(in srgb, var(--cc-to) 45%, transparent);
  color: var(--cc-ink);
}

.cc-art-logo {
  position: absolute;
  top: 3.5cqw;
  left: 6.5cqw;
  font-size: 16cqw;
  font-weight: 800;
  line-height: 1;
}

.cc-art-chip {
  position: absolute;
  top: 26%;
  right: 7.5cqw;
  width: 11.5cqw;
  height: 9cqw;
  border-radius: 2cqw;
  background: linear-gradient(135deg, var(--cc-chip), color-mix(in srgb, var(--cc-chip) 65%, var(--cc-to)));
}

.cc-art-number {
  position: absolute;
  top: 58%;
  left: 6.5cqw;
  font-size: 3.75cqw;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.cc-art-holder,
.cc-art-expiry {
  position: absolute;
  bottom: 5.5cqw;
  font-size: 3.25cqw;
  font-weight: 700;
  text-transform: uppercase;
}

.cc-art-holder {
  left: 6.5cqw;
  max-width: 48%;
}

.cc-art-holder b {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cc-art-expiry {
  left: 56%;
}

.cc-art small {
  display: block;
  margin-bottom: 0.75cqw;
  font-size: 2.25cqw;
  font-weight: 600;
  letter-spacing: 0.1em;
  opacity: 0.85;
}

.cc-art-brand {
  position: absolute;
  right: 6cqw;
  bottom: 4.5cqw;
  text-align: right;
}

.cc-art-brand b {
  font-size: 7.5cqw;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* Why choose */

.cc-why {
  background: var(--cc-muted-surface);
  text-align: center;
}

.cc-why h3 {
  margin: 8px 0 8px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.6px;
}

.cc-sub {
  margin: 0 0 28px;
  color: var(--cc-text);
  font-size: 16px;
}

.row.cc-reasons {
  display: flex;
  flex-wrap: wrap;
}

.row.cc-reasons > .col {
  display: flex;
  margin-left: 0;
  margin-bottom: 16px;
}

.cc-reason {
  flex: 1;
  padding: 24px 22px;
  border: 1px solid var(--cc-line);
  border-radius: 14px;
  background: var(--cc-surface);
  text-align: left;
}

.cc-reason h4 {
  margin: 18px 0 10px;
  font-size: 18px;
  font-weight: 700;
}

.cc-reason p {
  margin: 0;
  color: var(--cc-text);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Secure banner */

.cc-secure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 22px;
  padding: 22px 28px;
}

.cc-secure-text {
  flex: 1;
  min-width: 220px;
}

.cc-secure h4 {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 800;
}

.cc-secure p {
  margin: 0;
  color: var(--cc-text);
  font-size: 14.5px;
}

/* Request form */

.cc-panel-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
}

.cc-request .form-top-label {
  text-transform: capitalize;
}

.cc-request-side {
  display: grid;
  justify-items: center;
  gap: 20px;
}

.cc-tiers {
  width: 100%;
  margin: 0;
}

.cc-tiers li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cc-line);
  color: var(--cc-text);
  font-size: 14px;
}

.cc-tiers li:last-child {
  border-bottom: 0;
}

.cc-tiers b {
  color: var(--cc-heading);
}

.cc-fine {
  margin: 0;
  color: var(--cc-text);
  font-size: 13px;
  text-align: center;
}

.cc-note {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cc-heading);
}

.cc-note .material-icons {
  color: var(--cc-accent);
}

/* Applications */

.cc-apps .collection .collection-item.cc-app {
  margin-bottom: 16px;
  padding: 22px 24px;
  border: 1px solid var(--cc-line);
  border-radius: 16px;
  background: var(--cc-surface);
}

.cc-app-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cc-app-head b {
  display: block;
  color: var(--cc-heading);
  font-size: 18px;
}

.cc-app-head small {
  color: var(--cc-text);
  font-size: 13px;
}

.cc-status {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.cc-status-pending,
.cc-status-active {
  background: var(--cc-accent-soft);
  color: var(--cc-accent);
}

.cc-status-done {
  background: var(--cc-accent);
  color: var(--nav-secondary-font-colour);
}

.cc-status-declined {
  background: var(--cc-muted-surface);
  color: var(--cc-heading);
}

.cc-steps {
  display: flex;
  gap: 6px;
  margin: 20px 0 18px;
  padding: 0;
  list-style: none;
}

.cc-steps li {
  flex: 1;
  padding: 0;
  color: var(--cc-text);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}

.cc-step-dot {
  display: block;
  height: 6px;
  margin-bottom: 8px;
  border-radius: 6px;
  background: var(--cc-muted-surface);
}

.cc-steps li.done {
  color: var(--cc-heading);
}

.cc-steps li.done .cc-step-dot {
  background: var(--cc-accent);
}

.cc-declined {
  margin: 16px 0;
  color: var(--cc-heading);
  font-weight: 600;
}

.cc-app-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 20px;
  margin: 0;
}

.cc-app-details dt {
  color: var(--cc-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cc-app-details dd {
  margin: 4px 0 0;
  color: var(--cc-heading);
  font-size: 14.5px;
}

.cc-app-note {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--cc-muted-surface);
  color: var(--cc-heading);
  font-size: 14px;
}

.cc-apps-cta {
  justify-content: center;
  margin-top: 8px;
}

@media (max-width: 600px) {
  .cc-head h1 {
    font-size: 26px;
  }

  .cc-panel {
    padding: 20px;
  }

  .cc-hero > .row > .col.cc-hero-copy {
    padding: 28px 22px;
  }

  .cc-hero h2 {
    font-size: 34px;
  }

  .cc-highlight {
    gap: 8px;
    font-size: 13px;
  }

  .cc-hero > .row > .col.cc-hero-art {
    padding: 28px 20px;
  }

  .cc-why h3 {
    font-size: 24px;
  }

  .cc-steps li {
    font-size: 10.5px;
  }
}

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

   Three surfaces live in this one file (it is the ONLY stylesheet
   the skin ships — skins/<name>/skin.css is auto-bundled by the skin
   registry, and it is the only stylesheet a skin may have):

     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;
}

/* the footer wordmark — same type as the nav mark, sized up for the dark band */
.cr .cr-footer-logo {
  display: inline-block;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #ffffff;
}

.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;
}

/* The three dashboard balance cards sit three-to-a-row at every width (col-4),
   which on a 430px phone leaves roughly 120px of card. A fixed 22px figure
   overflows that and breaks mid-number ("$170,2 / 88.00"), so the amount is
   sized against the VIEWPORT instead: clamp() lets it shrink to fit the card
   and stop at a readable floor, and the tighter gutters/padding buy back the
   width it needs. Scoped to .cr-balance-card so the same .cr-balance figure on
   the account pages keeps its full reference size. */
.cr-dash .cr-balance-card .card-body {
  padding: 14px 12px;
}

.cr-dash .cr-balance-card .cr-balance {
  font-size: clamp(12px, 3.1vw, 22px);
  margin-top: 10px !important;
  /* never split a number across two lines — better to shrink than to break */
  white-space: nowrap;
}

@media only screen and (max-width: 767px) {
  /* tighter gutters so three cards keep as much inner width as possible */
  .cr-dash .cr-balance-card {
    margin-bottom: 12px;
  }

  .cr-dash .cr-balance-card .card-body {
    padding: 10px 8px;
    text-align: center;
  }

  /* icon centred above the figure rather than inline, which frees the full
     card width for the number */
  .cr-dash .cr-balance-card .avatar {
    margin-right: 0 !important;
  }

  .cr-dash .cr-balance-card .avatar-md {
    width: 30px;
    height: 30px;
  }

  .cr-dash .cr-balance-card .avatar-sm {
    width: 17px;
    height: 17px;
    font-size: 12px;
  }

  .cr-dash .cr-balance-card .cr-balance {
    margin-top: 6px !important;
    margin-bottom: 2px !important;
    letter-spacing: -0.03em;
  }

  .cr-dash .cr-balance-card .fs-12 {
    font-size: 10px !important;
  }
}

/* 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);
}

/* Copy Trading page — let the content fill the space between the header and the
   sticky footer so the agreement note (.cr-agreement-row, mt-auto) is pushed to
   the very bottom, sitting just above the footer even when few traders load. */
.cr-dash .cr-page-fade.cr-traders-page {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 180px);
}

.cr-dash .cr-page-fade.cr-traders-page .cr-agreement-row {
  margin-top: auto;
  padding-top: 1rem;
}

.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%);
  }

  /* The dashboard starts directly with its actions on mobile; its desktop
     title and breadcrumb stay available at larger breakpoints. */
  .cr-dash .cr-hide-page-header-mobile {
    display: none;
  }

  /* All three actions share one row. They were 2-up with Transfer spanning a
     second row; three equal columns keeps them on one line, and the label
     shrinks rather than wrapping. */
  .cr-dash .cr-dashboard-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .cr-dash .cr-dashboard-actions .btn {
    width: 100%;
    padding-inline: 6px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* the leading icon is decoration here; at three-up the label needs the room */
  .cr-dash .cr-dashboard-actions .btn i {
    margin-right: 4px !important;
  }

  .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/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
   ============================================================ */

/* Two buttons stacked at the same anchor the single one used. The BUTTONS
   stop being fixed inside it — the stack is what is pinned — so the pair
   cannot overlap each other. */
.cr-dash .cr-scrollnav {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cr-dash .cr-scrollnav .cr-scrolltop {
  position: static;
  right: auto;
  bottom: auto;
}

.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;
}

/* paired scroll up / down nav (Assets browser) — stacked bottom-right */
.cr-dash .cr-scrollnav {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cr-dash .cr-scrollnav-btn {
  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-scrollnav-btn:hover {
  background: var(--cr-blue-dark);
  transform: translateY(-2px);
}

.cr-dash .cr-scrollnav-btn .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 wordmarks (guest nav, user sidebar, mobile user header) ---
   The brand is set in type, not art: every mark below renders NODE_NAME. */

.cr .cr-nav .cr-logo {
  display: inline-flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
}

.cr .cr-nav-panel-head .cr-logo {
  font-size: 20px;
  white-space: nowrap;
}

.cr-dash .main-sidebar-header .header-logo,
.cr-dash .cr-header-brand {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cr-dash .main-sidebar-header .header-logo {
  font-size: 17px;
  letter-spacing: -0.03em;
}

@media (max-width: 575.98px) {
  .cr .cr-nav-panel-head .cr-logo {
    font-size: 18px;
  }

  .cr-dash .cr-header-brand {
    font-size: 14px;
    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);
}


/* ─── Real estate (cr) ────────────────────────────────────────────────────
   The buildings list and property page are cr's own tabs, not the default
   Materialize ones. Grid columns do the layout (col-12 / col-md-6 / col-xl-4 —
   one per row on a phone, three across on desktop); these rules only cover the
   things a grid class cannot express: fixed media heights so a row of cards
   stays level, and the description clamp that keeps every card the same height
   whatever the admin typed. */

.cr-building-img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}

/* Clamped to three lines. Without it a long description makes one card in the
   row twice the height of its neighbours, and mt-auto on the button can only
   even up the ones that are already the same height. */
.cr-building-blurb {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1rem;
}

.cr-building-hero {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
}

.cr-building-thumb {
  width: 74px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  opacity: 0.65;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.cr-building-thumb.is-active,
.cr-building-thumb:hover {
  opacity: 1;
  border-color: var(--primary-color, #6c5ffc);
}

.cr-building-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* A held position in the My Investments card. */
.cr-holding {
  border: 1px solid var(--default-border, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  color: inherit;
}

.cr-holding:hover {
  border-color: var(--primary-color, #6c5ffc);
}

.cr-asset-type {
  width: auto;
  min-width: 110px;
}

/* The shared trade lists render a Materialize <ul class="collection">. cr does
   not load Materialize, so that list fell back to browser defaults and showed
   disc bullets with a 32px indent inside cr's cards. */
.card-body .collection {
  list-style: none;
  padding-left: 0;
  margin: 0;
  border: 0;
}


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

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

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

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

@charset "UTF-8";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

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

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

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

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

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

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

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

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

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

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

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

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

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

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

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

.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

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

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

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

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

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

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

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

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

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

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

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

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

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

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

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

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

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

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

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

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

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

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

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

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

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

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

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

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

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

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

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

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

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

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

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

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

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

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

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

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

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

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

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

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

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

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

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

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

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

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

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

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

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

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

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

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

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

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

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

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

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

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

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

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

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

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

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

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

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

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

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

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

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

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

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

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

@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

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

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

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

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

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

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

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

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

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

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

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

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

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

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

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

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

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

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

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

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

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

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

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

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

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

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

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

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

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

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

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

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

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

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

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

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

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

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

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

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

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

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

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media (print), (prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}

:root {
  /* Last-resort value only — skin.js writes --primary-button on :root from
     NODE_PRIMARY (or the active skin's entry in SKIN_PRIMARY), and an inline
     style out-ranks this. */
  --primary-button: #766fb2;

  /* material-resets-public.css styles .btn-alt-secondary, .btn-trans-secondary
     and .btn-alt-secondary:hover out of this token, but nothing in the repo has
     ever DEFINED it — those three rules have always resolved var() to nothing,
     which makes the whole declaration invalid at computed-value time, so the
     border and text colour silently fell back to inherited values. A mid slate
     reads against both the light and the dark themes. */
  --secondary-button: #6078a9;

  --secondary-link-colour: #766fb2;

  --primary-border-colour: silver;

  /* The "included" tick on the plan cards. Was hardcoded inline in three
     separate copies of the plan card; defined here so it is themeable in one
     place. The value is the teal those cards already used. */
  --plan-check-colour: #30bca6;
}

iframe[src*='embed-widget'] {
  pointer-events: none;
}

#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;
}

.goog-te-banner-frame.skiptranslate {
  display: none !important;
}