@charset "UTF-8";
body.page-template-page-home-v2 {
  background: #000;
  margin: 0;
  /* px-based compositions (orbit stage, hero video) intentionally exceed
     the viewport on small screens; never let them widen the page */
  overflow-x: hidden;
}

#v2-home > section + section {
  border-top: 1px solid #181818;
}

/* ---- "Lumexo Products" stacked block (old landing "fan-wings" behavior):
   one .v2-stack-row per card, like the old per-section blocks — the 361px
   mini is natively sticky beside its 568px panel(s), so it rides in, pins
   and leaves glued to the scroll; page-home-v2.php only lowers its `top`
   and opacity for the old 1/3-speed drift + fade. Resting state = the
   products 3-card row (wallet mini + row 1's toprow cards 2+3). ---- */
.v2-stacksec {
  background: #000;
  padding: 82px 0 41px;
}

.v2-stack-head {
  text-align: center;
}

.v2-stack-flex {
  display: flex;
  flex-direction: column;
  gap: 82px;
}

.v2-stack-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  /* (0,2,0): must beat .v2-card's position:relative, compiled later */
}
.v2-stack-row > .v2-stack-mini {
  position: sticky;
  top: 100px; /* old landing's pin line: 81px header + 19 */
  flex: 0 0 361px;
  width: 361px;
  height: 405px;
}

.v2-stack-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 82px;
}
.v2-stack-main > .v2-card--wide {
  flex: 0 0 auto;
  height: 568px;
}

.v2-stack-toprow {
  display: flex;
  gap: 16px;
}
.v2-stack-toprow > .v2-card {
  flex: 0 0 361px;
  width: 361px;
  height: 405px;
  /* above the wallet mini while the deck is fanned, matching the old
     stacking order (middle card on top of card 1) */
  position: relative;
  z-index: 2;
}
.v2-stack-toprow {
  /* old card-3 had no z-index: only the middle card covers both wings */
}
.v2-stack-toprow > .v2-card:last-child {
  z-index: auto;
}

/* 992-1163: not enough room for the full-size mini+panels row — scale the
   whole composition down proportionally (zoom affects layout, so sticky
   and the fan/drift scripts keep working). */
@media (max-width: 1163px) and (min-width: 992px) {
  .v2-stack-flex {
    zoom: 0.84;
    max-width: 1115px;
    margin: 0 auto;
  }
  /* the header isn't zoomed: 119 x .84 = the same 100px pin line */
  .v2-stack-row > .v2-stack-mini {
    top: 119px;
  }
}
/* <=991: the rows flatten into one column, each mini followed by its
   panel (wallet, account, DEX, swap, grow, earn — the toprow copies are
   desktop-only). page-home-v2.php makes each card sticky and
   drifts/fades it while the next card scrolls up over it (DOM order
   paints later cards on top). */
@media (max-width: 991px) {
  .v2-stack-flex {
    align-items: center;
    gap: 24px;
  }
  .v2-stack-row,
  .v2-stack-main {
    display: contents;
  }
  .v2-stack-toprow {
    display: none;
  }
  .v2-stack-row > .v2-stack-mini {
    /* relative (NOT static): the wallet card's phone/balance/buttons
       are position:absolute and need the card as containing block */
    position: relative;
    top: auto;
    flex: 0 0 auto;
    max-width: 100%;
    transform: none !important;
  }
  .v2-stack-main > .v2-card--wide {
    align-self: stretch;
    height: auto;
    min-height: 480px;
  }
}
/* ---- mobile (<=767px): 1:1 rebuild of the stacked block per the Figma
   mobile design. Single column, 6 full-width cards (wallet, account, dex,
   swap, grow, earn), ~14px section side margin, fluid cards (361px at
   the 390 design width, column capped at 430 so the collage art never
   blows up), 20px gaps between cards, 24px card padding (vs desktop's
   32px). Card heights are auto — collage-style cards (wallet/dex/grow/
   earn-panel-art) keep their desktop absolute-position art, re-centred
   below for other widths; account/dex's full-bleed images and the
   earn-panel cluster get mobile-specific rules in their own partials. ---- */
@media (max-width: 767px) {
  .v2-stacksec {
    padding: 48px 0 40px;
  }
  .v2-stacksec .v2-col {
    padding: 0 14px;
  }
  .v2-stack-head .v2-products-pill {
    margin-bottom: 40px;
  }
  .v2-stack-flex {
    gap: 20px;
    max-width: 430px;
    margin: 0 auto;
  }
  .v2-stack-row > .v2-stack-mini {
    width: 100%;
  }
  /* collage art is px-positioned for the 361px card (359px padding box):
     shift it by half the width difference so it stays centred (0 at 361) */
  .v2-stacksec .v2-card-wallet > :is(.v2-phone, .v2-card-balance, .v2-card-actions),
  .v2-stacksec .v2-card-grow > .v2-earn-chips {
    margin-left: calc(50% - 179.5px);
  }
  /* the 295px glass is wider than a 320px phone's card: centre + clamp */
  .v2-stacksec .v2-card-grow > .v2-earn-grow {
    left: 50%;
    translate: -50% 0;
    width: min(295px, 100% - 16px);
  }
  /* at other widths the DEX art's frame edge showed as a seam across
     the text; cover the card instead */
  .v2-stacksec .v2-card-dex .v2-card-dex-bg {
    height: calc(100% + 4px);
    object-fit: cover;
    object-position: top;
  }
  .v2-stack-main > .v2-card--wide {
    min-height: 0;
  }
}
.v2-hero {
  position: relative;
  max-width: 1440px;
  height: 540px;
  margin: 0 auto;
  overflow: hidden;
  background: #000;
}
.v2-hero .v2-hero-inner {
  position: relative;
  height: 100%;
  padding: 0 82px;
}
.v2-hero .v2-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 64px;
  text-align: center;
}
.v2-hero .v2-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.v2-hero .v2-hero-badge-dot {
  display: flex;
  padding: 2px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
.v2-hero .v2-hero-badge-dot span {
  display: block;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 2px;
}
.v2-hero .v2-hero-badge-text {
  font-family: var(--font-medium);
  font-size: 16px;
  color: #7e7e7e;
}
.v2-hero .v2-hero-title {
  margin-top: 20px;
  font-family: var(--font-regular);
  font-weight: normal;
  font-size: 52px;
  line-height: 1.15;
  color: #fff;
}
.v2-hero .v2-hero-title span {
  display: block;
}
.v2-hero .v2-hero-art {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 380px;
  z-index: 1;
  pointer-events: none;
}
.v2-hero .v2-hero-ground {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 480px;
  height: auto;
  display: block;
  transform: translateX(-50%);
}
.v2-hero .v2-hero-coin {
  position: absolute;
  left: 50%;
  bottom: -80px;
  width: 820px;
  max-width: none;
  height: auto;
  display: block;
  pointer-events: none;
  --coin-x: -90px;
  transform: translateX(calc(-50% + var(--coin-x)));
  animation: hero-coin-fade-out 0.6s ease 3.2s forwards;
}
.v2-hero .v2-hero-cards {
  position: absolute;
  left: 50%;
  top: 110px;
  display: flex;
  gap: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: auto;
  transform: translate(-50%, 12px);
  animation: hero-cards-fade-in 0.6s ease 3.6s forwards;
}
.v2-hero .v2-hero-card {
  display: flex;
  flex-direction: column;
  width: 240px;
  height: 166px;
  border: 1px solid #1f1f1f;
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(100% 100% at 50% 50%, #2e2e2e 0%, #1e1e1e 50%, #0e0e0e 100%);
  text-decoration: none;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.v2-hero .v2-hero-card:visited {
  text-decoration: none;
}
.v2-hero .v2-hero-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}
.v2-hero .v2-hero-card-top {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px 0;
}
.v2-hero .v2-hero-card-title {
  font-family: var(--font-bold);
  font-size: 16px;
  color: #fff;
}
.v2-hero .v2-hero-card-arrow {
  font-size: 18px;
  line-height: 1;
  color: #fff;
}
.v2-hero .v2-hero-card-art {
  position: relative;
  flex: 1 1 auto;
  margin-top: 8px;
  overflow: hidden;
}
.v2-hero .v2-hero-card-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v2-hero .v2-hero-card-app .v2-hero-card-art img {
  object-position: center top;
}
.v2-hero .v2-hero-card-trade {
  background: radial-gradient(40% 120% at 60% 0, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.07) 50%, transparent), #000;
}
.v2-hero .v2-hero-card-trade .v2-hero-card-art img {
  object-position: center top;
  transform: translateY(12px);
  mix-blend-mode: lighten;
}
@keyframes hero-coin-fade-out {
  from {
    opacity: 1;
    transform: translateX(calc(-50% + var(--coin-x))) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(calc(-50% + var(--coin-x))) scale(0.94);
  }
}
@keyframes hero-cards-fade-in {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .v2-hero .v2-hero-coin {
    animation: none;
    opacity: 0;
  }
  .v2-hero .v2-hero-cards {
    animation: none;
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
}
@media (max-width: 991px) {
  .v2-hero {
    height: auto;
    min-height: 560px;
    padding-bottom: 60px;
  }
  .v2-hero .v2-hero-inner {
    padding: 0 40px;
  }
  .v2-hero .v2-hero-content {
    padding-top: 48px;
  }
  .v2-hero .v2-hero-title {
    font-size: 38px;
  }
  .v2-hero .v2-hero-art {
    position: relative;
    left: auto;
    right: auto;
    height: 260px;
    margin-top: 40px;
  }
  .v2-hero .v2-hero-ground {
    width: 360px;
  }
  .v2-hero .v2-hero-coin {
    --coin-x: 0px;
    width: 560px;
    bottom: 40px;
  }
}
@media (max-width: 767px) {
  .v2-hero {
    min-height: 500px;
  }
  .v2-hero .v2-hero-inner {
    padding: 0 20px;
  }
  .v2-hero .v2-hero-content {
    padding-top: 144px;
  }
  .v2-hero .v2-hero-title {
    font-size: 31px;
  }
  .v2-hero .v2-hero-art {
    margin-top: 0;
    height: 240px;
  }
  .v2-hero .v2-hero-ground {
    width: 280px;
  }
  .v2-hero .v2-hero-coin {
    width: 440px;
    bottom: 25px;
  }
  .v2-hero {
    /* figma 545:54010: two cards side by side under the title,
       ~170px each, 130px tall, 12px gap, 16px side margins.
       top is relative to .v2-hero-art (the band right below the title). */
  }
  .v2-hero .v2-hero-cards {
    top: 48px;
    width: calc(100% - 32px);
    gap: 12px;
  }
  .v2-hero .v2-hero-card {
    flex: 1 1 0;
    width: auto;
    height: 130px;
  }
}

.v2-hero video.v2-hero-coin {
  /* the page bg is #000 to match the video's own black bg, so no blend
     is needed; the mask just softens the frame edges */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent), linear-gradient(to bottom, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent), linear-gradient(to bottom, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.v2-hero .v2-hero-card-app .v2-hero-card-art img {
  inset: auto;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 104px;
  height: auto;
  object-fit: unset;
  /* the png bakes the design card's bg into its square corners: clip them
     along the outer edge of the phone's own baked rim (a 14px circle) */
  border-radius: 14px 14px 0 0;
}

.v2-orbit {
  position: relative;
  max-width: 1440px;
  height: 519px;
  margin: 0 auto;
  overflow: hidden;
  background: #000;
}
.v2-orbit .v2-orbit-inner {
  position: relative;
  height: 100%;
  padding: 0 162px;
}
.v2-orbit .v2-orbit-heading {
  position: absolute;
  left: 161px;
  top: 62px;
  width: 580px;
  font-family: var(--font-regular);
  font-weight: normal;
  font-size: 50px;
  line-height: 1.2;
  color: #bbb;
}
.v2-orbit .v2-orbit-heading > span {
  display: block;
}
.v2-orbit .v2-orbit-heading-strong {
  font-family: var(--font-medium);
  color: #fff;
}
.v2-orbit .v2-orbit-desc {
  position: absolute;
  left: 161px;
  top: 374px;
  width: 444px;
  font-family: var(--font-regular);
  font-size: 18px;
  line-height: 1.5;
  color: #7e7e7e;
}
.v2-orbit .v2-orbit-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.v2-orbit .v2-orbit-streak {
  position: absolute;
  left: -199px;
  top: -743px;
  width: 1885px;
  height: 1754px;
  transform: rotate(-50deg);
  z-index: 1;
}
.v2-orbit .v2-orbit-stage {
  position: absolute;
  right: 80px;
  top: 0;
  width: 745px;
  height: 519px;
  z-index: 2;
}
.v2-orbit .v2-orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.22);
}
.v2-orbit .v2-orbit-ring-1 {
  left: 427px;
  top: 260px;
  transform: translate(-50%, -50%);
  width: 190px;
  height: 190px;
}
.v2-orbit .v2-orbit-ring-2 {
  left: 427px;
  top: 260px;
  transform: translate(-50%, -50%);
  width: 340px;
  height: 340px;
}
.v2-orbit .v2-orbit-ring-3 {
  left: 427px;
  top: 260px;
  transform: translate(-50%, -50%);
  width: 460px;
  height: 460px;
}
.v2-orbit .v2-orbit-rot-dot1 {
  animation-duration: 60s;
  animation-delay: -9s;
  animation-direction: reverse;
}
.v2-orbit .v2-orbit-anchor-dot1 {
  transform: translate(-50%, -50%) translateX(95px);
}
.v2-orbit .v2-orbit-rot-dot5 {
  animation-duration: 60s;
  animation-delay: -39s;
  animation-direction: reverse;
}
.v2-orbit .v2-orbit-anchor-dot5 {
  transform: translate(-50%, -50%) translateX(95px);
}
.v2-orbit .v2-orbit-rot-dot2 {
  animation-duration: 60s;
  animation-delay: -5s;
  animation-direction: reverse;
}
.v2-orbit .v2-orbit-anchor-dot2 {
  transform: translate(-50%, -50%) translateX(170px);
}
.v2-orbit .v2-orbit-rot-dot6 {
  animation-duration: 60s;
  animation-delay: -45s; /* 90deg: -15s parked it under the wallet tile */
  animation-direction: reverse;
}
.v2-orbit .v2-orbit-anchor-dot6 {
  transform: translate(-50%, -50%) translateX(170px);
}
.v2-orbit .v2-orbit-rot-dot7 {
  animation-duration: 60s;
  animation-delay: -55s;
  animation-direction: reverse;
}
.v2-orbit .v2-orbit-anchor-dot7 {
  transform: translate(-50%, -50%) translateX(170px);
}
.v2-orbit .v2-orbit-rot-dot3 {
  animation-duration: 75s;
  animation-delay: -29.2s;
  animation-direction: normal;
}
.v2-orbit .v2-orbit-anchor-dot3 {
  transform: translate(-50%, -50%) translateX(230px);
}
.v2-orbit .v2-orbit-rot-dot4 {
  animation-duration: 75s;
  animation-delay: -45.8s;
  animation-direction: normal;
}
.v2-orbit .v2-orbit-anchor-dot4 {
  transform: translate(-50%, -50%) translateX(230px);
}
.v2-orbit .v2-orbit-rot-dot8 {
  animation-duration: 75s;
  animation-delay: -62.5s;
  animation-direction: normal;
}
.v2-orbit .v2-orbit-anchor-dot8 {
  transform: translate(-50%, -50%) translateX(230px);
}
.v2-orbit .v2-orbit-anchor .v2-orbit-dot {
  position: static;
  display: block;
}
.v2-orbit .v2-orbit-dot-5, .v2-orbit .v2-orbit-dot-7 {
  width: 3px;
  height: 3px;
}
.v2-orbit .v2-orbit-dot-6, .v2-orbit .v2-orbit-dot-8 {
  width: 4px;
  height: 4px;
}
.v2-orbit .v2-orbit-dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}
.v2-orbit .v2-orbit-dot-1 {
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.35);
}
.v2-orbit .v2-orbit-dot-2 {
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
}
.v2-orbit .v2-orbit-dot-3 {
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
}
.v2-orbit .v2-orbit-dot-4 {
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
}
.v2-orbit .v2-orbit-center {
  position: absolute;
  left: 427px;
  top: 260px;
  width: 150px;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.v2-orbit .v2-orbit-rot {
  position: absolute;
  left: 427px;
  top: 260px;
  width: 0;
  height: 0;
  animation-name: v2-orbit-spin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.v2-orbit .v2-orbit-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
}
.v2-orbit .v2-orbit-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  animation-name: v2-orbit-spin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}
.v2-orbit .v2-orbit-icon-glyph {
  width: 17px;
  height: 17px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.v2-orbit .v2-orbit-rot-wallet {
  animation-duration: 60s;
  animation-delay: -15.35s;
  animation-direction: reverse;
}
.v2-orbit .v2-orbit-anchor-wallet {
  transform: translate(-50%, -50%) translateX(170px);
}
.v2-orbit .v2-orbit-icon-wallet {
  animation-duration: 60s;
  animation-delay: -15.35s;
  animation-direction: normal;
  background: linear-gradient(135deg, #3a1668, #9b3ce0);
  box-shadow: 0 6px 18px rgba(155, 60, 224, 0.45);
}
.v2-orbit .v2-orbit-rot-swap {
  animation-duration: 60s;
  animation-delay: -24.4s;
  animation-direction: reverse;
}
.v2-orbit .v2-orbit-anchor-swap {
  transform: translate(-50%, -50%) translateX(170px);
}
.v2-orbit .v2-orbit-icon-swap {
  animation-duration: 60s;
  animation-delay: -24.4s;
  animation-direction: normal;
  background: linear-gradient(135deg, #1a1f6b, #3b4bff);
  box-shadow: 0 6px 18px rgba(59, 75, 255, 0.45);
}
.v2-orbit .v2-orbit-rot-up {
  animation-duration: 60s;
  animation-delay: -35.97s;
  animation-direction: reverse;
}
.v2-orbit .v2-orbit-anchor-up {
  transform: translate(-50%, -50%) translateX(170px);
}
.v2-orbit .v2-orbit-icon-up {
  animation-duration: 60s;
  animation-delay: -35.97s;
  animation-direction: normal;
  background: linear-gradient(135deg, #123a5c, #2f9bff);
  box-shadow: 0 6px 18px rgba(47, 155, 255, 0.4);
}
.v2-orbit .v2-orbit-rot-chart {
  animation-duration: 75s;
  animation-delay: -0.23s;
  animation-direction: normal;
}
.v2-orbit .v2-orbit-anchor-chart {
  transform: translate(-50%, -50%) translateX(230px);
}
.v2-orbit .v2-orbit-icon-chart {
  animation-duration: 75s;
  animation-delay: -0.23s;
  animation-direction: reverse;
  background: linear-gradient(135deg, #0b3d2c, #12c489);
  box-shadow: 0 6px 18px rgba(18, 196, 137, 0.4);
}
.v2-orbit .v2-orbit-rot-cart {
  animation-duration: 75s;
  animation-delay: -12.73s;
  animation-direction: normal;
}
.v2-orbit .v2-orbit-anchor-cart {
  transform: translate(-50%, -50%) translateX(230px);
}
.v2-orbit .v2-orbit-icon-cart {
  animation-duration: 75s;
  animation-delay: -12.73s;
  animation-direction: reverse;
  background: linear-gradient(135deg, #7a3d0c, #ff9d33);
  box-shadow: 0 6px 18px rgba(255, 157, 51, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .v2-orbit .v2-orbit-rot,
  .v2-orbit .v2-orbit-icon {
    animation-play-state: paused;
  }
}
@media (max-width: 1279px) {
  .v2-orbit {
    height: auto;
  }
  .v2-orbit .v2-orbit-inner {
    padding: 48px 40px 40px;
  }
  .v2-orbit .v2-orbit-heading,
  .v2-orbit .v2-orbit-desc {
    position: static;
    width: 100%;
  }
  .v2-orbit .v2-orbit-heading {
    font-size: 36px;
  }
  .v2-orbit .v2-orbit-desc {
    margin-top: 16px;
  }
  .v2-orbit .v2-orbit-art {
    position: relative;
    inset: auto;
    height: 320px;
    margin-top: 24px;
  }
  .v2-orbit .v2-orbit-streak {
    left: -80px;
    top: -420px;
    width: 1100px;
    height: 1023px;
  }
  .v2-orbit .v2-orbit-stage {
    right: auto;
    left: 50%;
    top: 0;
    transform: translateX(-50%) scale(0.564);
    transform-origin: top center;
  }
  .v2-orbit .v2-orbit-ring {
    border-width: 1.7730496454px;
  }
}
@media (max-width: 767px) {
  .v2-orbit .v2-orbit-inner {
    padding: 40px 20px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .v2-orbit .v2-orbit-heading {
    order: 1;
    font-size: 29px;
    text-align: center;
  }
  .v2-orbit .v2-orbit-desc {
    order: 3;
    font-size: 16px;
    margin-top: 31px;
    text-align: center;
  }
  .v2-orbit .v2-orbit-art {
    order: 2;
    width: 100%;
    margin-top: 0;
    height: 256px;
  }
  .v2-orbit .v2-orbit-streak {
    left: calc(50% - 80px);
  }
  .v2-orbit .v2-orbit-stage {
    left: 50%;
    top: -112px;
    margin-left: -427px;
    transform: scale(0.47);
    transform-origin: 427px 260px;
  }
  .v2-orbit .v2-orbit-ring {
    border-width: 2.1276595745px;
  }
}

@keyframes v2-orbit-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.v2-orbit [class*=v2-orbit-anchor-dot] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.v2-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 32px;
  padding: 32px;
  overflow: hidden;
  background: linear-gradient(to bottom, #0f0f0f, #050505);
  border: 1px solid #181818;
  border-radius: 20px;
}
.v2-card .v2-card-title {
  font-family: var(--font-medium);
  font-size: 20px;
  color: #fff;
}
.v2-card .v2-card-desc {
  font-family: var(--font-regular);
  font-size: 16px;
  line-height: 1.4;
  color: #595959;
}

.v2-card > .v2-card-desc {
  margin-top: -20px; /* .v2-card gap is 32px; design wants ~12 between title and desc */
}

.v2-phone {
  position: relative;
  width: 226px;
  height: 349px;
  border: 1px solid #2c2c2c;
  border-radius: 32px 32px 0 0;
  overflow: hidden;
}

.v2-phone-notch {
  position: absolute;
  left: 50%;
  top: 15px;
  width: 58px;
  height: 17px;
  background: #131313;
  border-radius: 100px;
  transform: translateX(-50%);
}

.v2-glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 19px;
  padding: 19px;
  backdrop-filter: blur(2.4px);
  -webkit-backdrop-filter: blur(2.4px);
}

.v2-products {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  background: #000;
}
.v2-products .v2-products-inner {
  padding: 82px 162px 41px;
  text-align: center;
}
.v2-products-pill {
  display: inline-block;
  margin-bottom: 62px;
  padding: 6px 10px;
  border: 1px solid #181818;
  border-radius: 100px;
  font-family: var(--font-regular);
  font-weight: normal;
  font-size: 16px;
  color: #7e7e7e;
}

.v2-products .v2-products-grid {
  display: flex;
  gap: 16px;
  text-align: left;
}
.v2-products .v2-products-grid .v2-card {
  flex-shrink: 0;
  width: 361px;
  height: 405px;
}
.v2-card-wallet .v2-phone {
  position: absolute;
  left: 68px;
  top: 56px;
}
.v2-card-wallet .v2-card-balance {
  position: absolute;
  left: 35px;
  top: 125px;
  width: 289px;
}
.v2-card-wallet .v2-card-balance-amount {
  font-family: var(--font-bold);
  font-size: 23px;
  color: #fff;
}
.v2-card-wallet .v2-card-balance-trend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.v2-card-wallet .v2-card-balance-change {
  font-family: var(--font-regular);
  font-size: 13px;
  color: #a5a5a5;
}
.v2-card-wallet .v2-card-trend-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  background: rgba(0, 183, 110, 0.1);
  border-radius: 100px;
  font-family: var(--font-medium);
  font-size: 11.5px;
  color: #00d17d;
}
.v2-card-wallet .v2-card-trend-pill img {
  width: 9px;
  height: auto;
}
.v2-card-wallet .v2-card-actions {
  position: absolute;
  left: 79px;
  top: 226px;
  display: flex;
  gap: 4px;
}
.v2-card-wallet .v2-card-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 47.5px;
  height: 47.5px;
  background: rgba(129, 129, 129, 0.08);
  border-radius: 16px;
}
.v2-card-wallet .v2-card-action img {
  width: 10px;
  height: auto;
}
.v2-card-wallet .v2-card-action span {
  font-family: var(--font-bold);
  font-size: 7px;
  color: #fff;
}

.v2-card-dex .v2-card-dex-bg {
  position: absolute;
  left: -2px;
  top: -2px;
  display: block;
  width: calc(100% + 4px);
  height: auto;
}
.v2-card-dex .v2-card-title,
.v2-card-dex .v2-card-desc {
  position: relative;
  z-index: 1;
}

.v2-card-grow {
  flex: 0 0 361px;
  width: 361px;
  height: 405px;
  box-sizing: border-box;
}
.v2-card-grow .v2-card-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v2-card-grow .v2-earn-chips {
  position: absolute;
  left: 47px;
  top: 57px;
  width: 266px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 5px;
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, 0.01);
  border-radius: 17px 17px 0 0;
  backdrop-filter: blur(11.7px);
  -webkit-backdrop-filter: blur(11.7px);
}
.v2-card-grow .v2-earn-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  padding: 5.4px 7.2px;
  border: 0.9px solid #202020;
  border-radius: 95px;
}
.v2-card-grow .v2-earn-chip img {
  width: 16px;
  height: 16px;
  display: block;
}
.v2-card-grow .v2-earn-chip span {
  font-family: var(--font-medium);
  font-weight: 510;
  font-size: 13.3px;
  color: #727272;
  white-space: nowrap;
}
.v2-card-grow .v2-earn-grow {
  position: absolute;
  left: 32px;
  top: 143px;
  width: 295px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
}
.v2-card-grow .v2-earn-grow-title {
  font-family: var(--font-bold);
  font-weight: 590;
  font-size: 16.5px;
  color: #fff;
}
.v2-card-grow .v2-earn-grow-apy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 4px 8px 4px 4px;
  border-radius: 106px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.08));
}
.v2-card-grow .v2-earn-grow-logos {
  display: flex;
  align-items: center;
}
.v2-card-grow .v2-earn-grow-logos img {
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border-radius: 50%;
  object-fit: cover;
  margin-right: -7px;
  display: block;
}
.v2-card-grow .v2-earn-grow-logos img:last-child {
  margin-right: 0;
}
.v2-card-grow .v2-earn-grow-value {
  font-family: var(--font-bold);
  font-weight: 590;
  font-size: 14.8px;
  color: #fff;
  white-space: nowrap;
}
.v2-card-grow .v2-earn-grow-value span {
  font-family: var(--font-medium);
  font-weight: 510;
  color: #595959;
}

@media (max-width: 991px) {
  .v2-products .v2-products-inner {
    padding: 56px 40px 60px;
  }
  .v2-products .v2-products-grid {
    flex-direction: column;
    align-items: center;
  }
  .v2-products .v2-products-grid .v2-card {
    width: 100%;
    max-width: 361px;
  }
}
@media (max-width: 767px) {
  .v2-products .v2-products-inner {
    padding: 40px 20px 48px;
  }
}

@media (max-width: 767px) {
  .v2-card {
    padding: 24px;
  }
}
/* ==========================================================
   SHARED ROW / COLUMN PRIMITIVES
   Reused as-is by swap, earn and cta partials. Defined once
   here since account.scss loads first in home-v2.scss.
   ========================================================== */
.v2-col {
  max-width: 1440px;
  margin-inline: auto;
  box-sizing: border-box;
  padding: 0 clamp(24px, (100vw - 1116px) / 2, 162px);
}
@media (max-width: 991px) {
  .v2-col {
    padding: 0 40px;
  }
}
@media (max-width: 767px) {
  .v2-col {
    padding: 0 20px;
  }
}

.v2-row {
  display: flex;
  align-items: stretch;
  gap: 16px;
  height: 568px;
}
@media (max-width: 991px) {
  .v2-row {
    flex-direction: column;
    height: auto;
  }
}

.v2-card--mini {
  flex: 0 0 361px;
  width: 361px;
  height: 568px;
  overflow: hidden;
}
@media (max-width: 991px) {
  .v2-card--mini {
    flex: 1 1 auto;
    width: 100%;
  }
}

.v2-card--wide {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

/* ==========================================================
   ACCOUNT SECTION
   ========================================================== */
.v2-account {
  background: #000;
  padding: 41px 0;
}
@media (max-width: 767px) {
  .v2-account {
    padding: 40px 0;
  }
}

/* ---- mini wallet card — exact duplicate of the products-row
   "Stellar Wallet" card pattern (see _products.scss .v2-card-wallet):
   .v2-phone / .v2-glass balance / actions are direct absolutely-
   positioned children of .v2-card, title+desc are the only in-flow
   children (base .v2-card gap:32 applies between them). Their card is
   361x405; ours is 361x568 for the two-card row, so every top offset
   below is their value +163 (the extra height) to keep the phone's
   bottom edge flush with the card's bottom edge, exactly as in the
   361x405 original. ---- */
.v2-account-wallet .v2-phone {
  position: absolute;
  left: 50%;
  top: 219px;
  transform: translateX(-50%);
}
.v2-account-wallet .v2-account-balance {
  position: absolute;
  left: 35px;
  right: 35px;
  top: 288px;
}
.v2-account-wallet .v2-account-balance-amount {
  font-family: var(--font-bold);
  font-weight: 590;
  font-size: 23px;
  color: #fff;
}
.v2-account-wallet .v2-account-balance-trend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.v2-account-wallet .v2-account-balance-change {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: 13px;
  color: #a5a5a5;
}
.v2-account-wallet .v2-account-trend-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  background: rgba(0, 183, 110, 0.1);
  border-radius: 100px;
  font-family: var(--font-medium);
  font-weight: 510;
  font-size: 11.5px;
  color: #00d17d;
}
.v2-account-wallet .v2-account-trend-pill img {
  width: 9px;
  height: auto;
  display: block;
}
.v2-account-wallet .v2-account-actions {
  position: absolute;
  left: 50%;
  top: 389px;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
}
.v2-account-wallet .v2-account-action {
  width: 47.5px;
  height: 47.5px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(129, 129, 129, 0.08);
  border: none;
  border-radius: 16px;
  cursor: pointer;
}
.v2-account-wallet .v2-account-action img {
  width: 10px;
  height: auto;
  display: block;
}
.v2-account-wallet .v2-account-action span {
  font-family: var(--font-bold);
  font-weight: 590;
  font-size: 7px;
  color: #fff;
}

/* ---- wide dashboard card ---- */
.v2-account-dashboard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.v2-account-dashboard .v2-card-title,
.v2-account-dashboard .v2-card-desc {
  position: relative;
  z-index: 1;
}
.v2-account-dashboard .v2-account-dashboard-img {
  position: absolute;
  left: 32px;
  top: 150px;
  width: calc(100% - 32px);
  height: auto;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  display: block;
}
.v2-account-dashboard .v2-account-dashboard-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0) 0%, #050505 90%);
  pointer-events: none;
}
@media (max-width: 991px) {
  .v2-account-dashboard .v2-account-dashboard-img {
    position: relative;
    left: 0;
    top: 24px;
    width: 100%;
  }
}
.v2-account-dashboard {
  /* mobile: desktop's layout in miniature (client) — copy on top, the
     screenshot under it running off the card's right and bottom edges.
     The bottom is cropped (fixed height, cover from the top) so the
     card stays wider than tall; the base bottom fade still applies. */
}
@media (max-width: 767px) {
  .v2-account-dashboard .v2-account-dashboard-img {
    top: 0;
    margin: -8px -24px -24px 0; /* 32px card gap -> 24 */
    width: calc(100% + 24px);
    max-width: none;
    height: min(42vw, 180px);
    object-fit: cover;
    object-position: left top;
  }
  .v2-account-dashboard .v2-account-dashboard-fade {
    height: 64px;
  }
}
.v2-account-dashboard {
  /* <360: title + desc wrap to 2+3 lines; a shorter crop keeps the card wider than tall */
}
@media (max-width: 359px) {
  .v2-account-dashboard .v2-account-dashboard-img {
    height: 32vw;
  }
}

/* ==========================================================
   SWAP SECTION
   ========================================================== */
.v2-swap {
  background: #000;
  padding: 41px 0;
}
@media (max-width: 767px) {
  .v2-swap {
    padding: 40px 0;
  }
}

/* ---- mini "Stellar's DEX" card — same pattern as _products.scss
   .v2-card-dex: full-width image pinned to the top-left, title/desc
   lifted above it with z-index in case they ever overlap. ---- */
.v2-swap-dex .v2-swap-dex-bg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: auto;
}
.v2-swap-dex .v2-card-title,
.v2-swap-dex .v2-card-desc {
  position: relative;
  z-index: 1;
}

/* ---- wide swap widget panel ---- */
.v2-swap-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.v2-swap-panel .v2-swap-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v2-swap-panel {
  /* title + desc, 12px apart like a bare .v2-card pair; above the
     widget at every width (same as the account dashboard card) */
}
.v2-swap-panel .v2-swap-heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: flex-start;
  position: relative;
  z-index: 1;
}

.v2-swap-widget {
  width: 392px;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 24px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 1;
  margin-top: auto;
  margin-bottom: auto;
}

.v2-swap-label {
  display: block;
  font-family: var(--font-bold);
  font-weight: 590;
  font-size: 18.5px;
  color: #a5a5a5;
}

.v2-swap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.v2-swap-row--main {
  margin-top: 12px;
}
.v2-swap-row--sub {
  margin-top: 10px;
}

.v2-swap-asset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(129, 129, 129, 0.08);
  border-radius: 132px;
  padding: 5px 10px 5px 5px;
}

.v2-swap-asset-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: block;
}
.v2-swap-asset-icon--bordered {
  border: 1px solid rgba(129, 129, 129, 0.18);
  box-sizing: border-box;
}

.v2-swap-asset-symbol {
  font-family: var(--font-bold);
  font-weight: 590;
  font-size: 18.5px;
  color: #fff;
}

.v2-swap-asset-chevron {
  width: 21px;
  height: auto;
  display: block;
}

.v2-swap-amount {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-medium);
  font-weight: 510;
  font-size: 37px;
  color: #fff;
}
.v2-swap-amount--muted {
  color: #757575;
}

.v2-swap-caret {
  width: 1.3px;
  height: 42px;
  background: #fff;
  display: inline-block;
  flex-shrink: 0;
}

.v2-swap-balance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-medium);
  font-weight: 510;
  font-size: 18.5px;
  color: #757575;
}
.v2-swap-balance img {
  width: 18px;
  height: 18px;
  display: block;
}

.v2-swap-usd {
  font-family: var(--font-medium);
  font-weight: 510;
  font-size: 18.5px;
  color: #757575;
}

.v2-swap-divider {
  display: flex;
  align-items: center;
  gap: 0;
}

.v2-swap-divider-line {
  flex: 1 1 auto;
  height: 1.3px;
  background: rgba(129, 129, 129, 0.08);
}

.v2-swap-divider-btn {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 132px;
  background: #2f2f2f;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v2-swap-divider-btn img {
  width: 24px;
  height: 24px;
}

@media (max-width: 767px) {
  .v2-swap-widget {
    width: 100%;
  }
}
/* <390: the 37px amount and 18.5px sub-rows overran the widget padding
   and wrapped */
@media (max-width: 389px) {
  .v2-swap-widget {
    padding: 16px;
  }
  .v2-swap-row {
    gap: 8px;
  }
  .v2-swap-amount {
    font-size: 32px;
  }
  .v2-swap-balance,
  .v2-swap-usd {
    font-size: 15px;
    white-space: nowrap;
  }
}
@media (max-width: 359px) {
  .v2-swap-amount {
    font-size: 24px;
  }
  .v2-swap-asset-icon {
    width: 26px;
    height: 26px;
  }
  .v2-swap-asset-symbol {
    font-size: 16px;
  }
  .v2-swap-balance,
  .v2-swap-usd {
    font-size: 13px;
  }
}
/* ==========================================================
   EARN SECTION
   The mini "Earn, effortlessly" card is the same markup/class
   (.v2-card-grow) as the third Lumexo Products card and is styled
   once in _products.scss — nothing card-specific lives here for it.
   ========================================================== */
.v2-earn {
  background: #000;
  padding: 41px 0;
}
@media (max-width: 767px) {
  .v2-earn {
    padding: 40px 0;
  }
}

/* ---- wide "Earn more from your wallet" panel — height comes from
   .v2-row (568px, align-items:stretch), width from .v2-card--wide
   (flex:1). Title/desc are the only in-flow content; everything else
   sits on an .v2-earn-art canvas authored at the card's native
   739x568 desktop size and scaled as a unit at narrower widths,
   same technique used elsewhere in home-v2 for fixed-canvas art. ---- */
.v2-earn-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.v2-earn-head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.v2-earn-art {
  position: absolute;
  inset: 0;
}

/* phone silhouette behind the lifetime/balance cards — reuses the
   shared .v2-phone/.v2-phone-notch primitives, just resized. */
.v2-earn-phone {
  position: absolute;
  left: 72px;
  top: 141px;
  width: 244px;
  height: 504px;
}

.v2-earn-lifetime {
  position: absolute;
  left: 85px;
  top: 218px;
  width: 218px;
  height: 66px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  border-radius: 16px;
  opacity: 0.73;
  backdrop-filter: blur(4.7px);
  -webkit-backdrop-filter: blur(4.7px);
}

.v2-earn-lifetime-label {
  font-family: var(--font-regular);
  font-size: 10.2px;
  color: #757575;
}

.v2-earn-lifetime-amount {
  font-family: var(--font-bold);
  font-weight: 590;
  font-size: 17.6px;
  color: #fff;
}

.v2-earn-lifetime-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: block;
}

.v2-earn-balance {
  position: absolute;
  left: 45px;
  top: 300px;
  width: 297px;
  height: 166px;
  box-sizing: border-box;
  padding: 15px;
  border-radius: 22.5px;
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.v2-earn-balance-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.v2-earn-balance-label {
  font-family: var(--font-regular);
  font-size: 13.1px;
  color: #757575;
}

.v2-earn-balance-badge {
  box-sizing: border-box;
  padding: 2.8px 5.6px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 5.6px;
  font-family: var(--font-medium);
  font-weight: 510;
  font-size: 11.5px;
  color: #10b981;
}

.v2-earn-balance-amount {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 6px;
  font-family: var(--font-bold);
  font-weight: 590;
  font-size: 22.5px;
  color: #fff;
}

.v2-earn-balance-graph {
  position: absolute;
  left: -35.6px;
  top: 0;
  width: 380.4px;
  max-width: none;
  height: 177px;
  z-index: 0;
  display: block;
}

.v2-earn-balance-caption {
  position: absolute;
  left: 16px;
  top: 115px;
  font-family: var(--font-medium);
  font-weight: 510;
  font-size: 9.8px;
  color: #757575;
  white-space: nowrap;
}
.v2-earn-balance-caption strong {
  font-family: var(--font-medium);
  font-weight: 510;
  color: #10b981;
}

.v2-earn-balance-track {
  position: absolute;
  left: 16px;
  top: 142px;
  width: 160px;
  height: 4.7px;
  box-sizing: border-box;
  display: block;
  background: #292929;
  border-radius: 94px;
  overflow: hidden;
}

.v2-earn-balance-fill {
  display: block;
  width: 38%;
  height: 100%;
  background: #00d17d;
  border-radius: inherit;
}

.v2-earn-balance-next {
  position: absolute;
  left: 190px;
  top: 138px;
  font-family: var(--font-medium);
  font-weight: 510;
  font-size: 9.8px;
  color: #757575;
  white-space: nowrap;
}

.v2-earn-pills {
  position: absolute;
  left: 390px;
  top: 154px;
  width: 304px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12.8px;
}

.v2-earn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 4px 8.5px 4px 4px;
  background: linear-gradient(to right, rgba(16, 185, 129, 0.01), rgba(16, 185, 129, 0.08));
  border-radius: 106px;
  white-space: nowrap;
}
.v2-earn-pill img {
  width: 25.4px;
  height: 25.4px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.v2-earn-pill-symbol {
  font-family: var(--font-bold);
  font-weight: 590;
  font-size: 14.8px;
  color: #fff;
}

.v2-earn-pill-apy {
  margin-left: auto;
  font-family: var(--font-bold);
  font-weight: 590;
  font-size: 14.8px;
  color: #00b76e;
}

.v2-earn-actions {
  position: absolute;
  left: 390px;
  top: 300px;
  width: 304px;
  height: 166px;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  backdrop-filter: blur(6.5px);
  -webkit-backdrop-filter: blur(6.5px);
}

.v2-earn-action {
  display: flex;
  align-items: center;
  gap: 12px;
}

.v2-earn-action-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v2-earn-action-icon img {
  width: 32px;
  height: 32px;
  display: block;
}
.v2-earn-action-icon--tile {
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}
.v2-earn-action-icon--tile img {
  width: 18px;
  height: 18px;
}

.v2-earn-action-label {
  font-family: var(--font-medium);
  font-weight: 510;
  font-size: 16px;
  color: #fff;
}

/* ---- responsive: the desktop art is authored on the card's native
   739x568 canvas; scale the whole cluster down as a unit rather than
   fighting each absolute offset individually (same approach as the
   other v2 sections' fixed-canvas art). ---- */
@media (max-width: 991px) {
  .v2-earn-panel {
    min-height: 460px;
    overflow: hidden;
  }
  .v2-earn-art {
    inset: auto;
    left: 50%;
    top: 0;
    width: 739px;
    height: 568px;
    /* .84 fills the 768 card (621px) with readable text; .62 gave 6-10px */
    transform: translateX(-50%) scale(0.84);
    transform-origin: top center;
  }
}
/* ---- mobile (<=767px): the desktop/tablet approach (scale the whole
   739x568 desktop canvas down as a unit) can't reproduce the mobile
   design — mobile moves the pills BELOW the phone/lifetime/balance
   cluster (a real reflow, not a uniform scale) and drops the actions
   block entirely. Rebuild .v2-earn-art as its own small canvas: phone +
   the two overlapping glass cards stay absolute (art-directed collage,
   same technique as desktop just re-anchored), pills become a plain
   row after them, everything sized to content instead of the fixed
   568-tall desktop canvas. The heading stays above the art, as in
   markup (same as the account dashboard card). ---- */
@media (max-width: 767px) {
  .v2-earn-panel {
    min-height: 0;
  }
  .v2-earn-art {
    position: relative;
    inset: auto;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    /* collage is absolute above; the pills flow under it, so however
       many rows they wrap to, the art grows to fit them */
    padding-top: 250px;
    box-sizing: border-box;
    transform: none;
    /* clip vertically only (the 390-tall phone outline used to run
       through the heading); sides may use the card padding */
    clip-path: inset(0 -24px);
  }
  /* collage is px-positioned for the 312px art box at the 390 design
     width: shift it so it stays centred at other widths (0 at 312) */
  .v2-earn-phone,
  .v2-earn-lifetime,
  .v2-earn-balance {
    margin-left: calc(50% - 156px);
  }
  .v2-earn-phone {
    left: 60px;
    top: 0;
    width: 190px;
    height: 390px;
  }
  .v2-earn-lifetime {
    left: 64px;
    top: 54px;
    width: 245px;
    max-width: calc(100% - 48px);
    height: 56px;
  }
  .v2-earn-balance {
    left: 32px;
    top: 94px;
    width: 250px;
    height: 120px;
  }
  /* the 120px-tall mobile balance has no room for the desktop footer rows
     (they sat at top 115-142 and got clipped to a sliver) */
  .v2-earn-balance-caption,
  .v2-earn-balance-track,
  .v2-earn-balance-next {
    display: none;
  }
  /* three pills are ~386px: wrap (centred) instead of clipping USDC */
  .v2-earn-pills {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 14px;
  }
  .v2-earn-pill {
    background: rgba(255, 255, 255, 0.08);
  }
  .v2-earn-pill-apy-word {
    display: none;
  }
  .v2-earn-actions {
    display: none;
  }
}
/* ==========================================================
   CTA SECTION — "Get the Lumexo App"
   ========================================================== */
.v2-cta {
  background: linear-gradient(180deg, #131313 0%, #000 100%);
  padding: 80px 0 0;
}
@media (max-width: 767px) {
  .v2-cta {
    padding: 56px 0 0;
  }
}

.v2-cta-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.v2-cta-heading {
  margin: 0 0 32px;
  font-size: 50px;
  line-height: 1.2;
  font-family: var(--font-regular);
  font-weight: 400;
}
@media (max-width: 767px) {
  .v2-cta-heading {
    font-size: 30px;
  }
}

.v2-cta-heading-light {
  color: #bbb;
}

.v2-cta-heading-strong {
  color: #fff;
  font-family: var(--font-medium);
  font-weight: 510;
}

.v2-cta-buttons {
  display: flex;
  width: 348px;
  max-width: 100%;
  gap: 11px;
}
@media (max-width: 767px) {
  .v2-cta-buttons {
    width: 313px;
  }
}

.v2-cta-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #131313;
  border: 1px solid #1f1f1f;
  border-radius: 10px;
  padding: 12px 16px;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.v2-cta-btn:hover {
  background: #1f1f1f;
  border-color: #333;
}
.v2-cta-btn {
  font-family: var(--font-medium);
  font-weight: 510;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.v2-cta-btn img {
  display: block;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .v2-cta-btn {
    padding: 9px 16px;
  }
}

.v2-cta-btn-google img {
  width: 16px;
  height: auto;
}

.v2-cta-btn-apple img {
  width: 13px;
  height: 16px;
}

/* App Store listing isn't live yet: a <span>, not a link — same box as
   Google Play, muted icon/label, no hover, and the "Coming Soon" tag
   (.v2-soon-pill, app.css) pinned on the top edge so the size is unchanged */
.v2-cta-btn--soon {
  position: relative;
  cursor: default;
  color: #7e7e7e;
}
.v2-cta-btn--soon:hover {
  background: #131313;
  border-color: #1f1f1f;
}
.v2-cta-btn--soon img {
  opacity: 0.5;
}
.v2-cta-btn--soon .v2-soon-pill {
  position: absolute;
  top: 0;
  right: 10px;
  translate: 0 -50%;
}

.v2-cta-phone {
  display: block;
  width: 445px;
  max-width: 100%;
  height: auto;
  margin-top: 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
}
@media (max-width: 767px) {
  .v2-cta-phone {
    margin-top: 31px;
  }
}

/* ==========================================================
   DOWNLOAD APP V2 — page background.
   Own template, own rule (see home-v2.scss for the home
   template's equivalent — each v2 page owns its body rule).
   ========================================================== */
body.page-template-page-download-v2 {
  background: #000;
  margin: 0;
}

/* full-width clip for the phones' light (.v2-dl-art::before): it fades
   past the 1440 box on wide screens instead of ending in a straight edge */
#v2-download {
  overflow: hidden;
}

/* ==========================================================
   DOWNLOAD SECTION — "Your Wallet, Anywhere"
   Same frame as the other v2 pages: section padding 82/56/48 and
   the shared .v2-col gutters (162px at 1440, 40px, 20px).
   ========================================================== */
.v2-dl {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 82px 0;
  background: #000;
}
@media (max-width: 991px) {
  .v2-dl {
    padding: 56px 0;
  }
}
@media (max-width: 767px) {
  .v2-dl {
    padding: 48px 0;
  }
}

/* >=992: copy left, art right, vertically centred (the ecosystem hero row) */
.v2-dl-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
@media (max-width: 991px) {
  .v2-dl-inner {
    display: block;
  }
}

.v2-dl-content {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (max-width: 991px) {
  .v2-dl-content {
    align-items: center;
    text-align: center;
  }
}

.v2-dl-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 6px 10px;
  border: 1px solid #181818;
  border-radius: 100px;
}

.v2-dl-badge-dot {
  display: block;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #00d17d;
  box-shadow: 0 0 6px #00d17d;
}

.v2-dl-badge-text {
  font-family: var(--font-medium);
  font-weight: 510;
  font-size: 16px;
  color: #7e7e7e;
  white-space: nowrap;
}

.v2-dl-title {
  margin: 0 0 17px;
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.15;
  color: #fff;
}
@media (max-width: 767px) {
  .v2-dl-title {
    font-size: 34px;
  }
}

.v2-dl-desc {
  margin: 0 0 24px;
  max-width: 444px;
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: #7e7e7e;
}

/* ---- phone illustration — flat exports of the Figma "Explore"
   (back) and "Dashboard/Wallet" (front) mask groups, positioned
   with the same relative offsets as the design (percentages of
   this 666x690 box so mobile scaling needs no recalculation). ---- */
.v2-dl-art {
  position: relative;
  z-index: 1;
  /* takes what the copy leaves (666px from ~1163 up), same ratio */
  flex: 0 1 666px;
  min-width: 0;
  aspect-ratio: 666/690;
  /* >=992 the art spans the section padding too: 690px tall at 1440,
     like the Figma frame, without adding 164px of black around it */
  margin-block: -82px;
  /* runs into the right gutter, like the ecosystem hero art */
}
@media (min-width: 1280px) {
  .v2-dl-art {
    margin-right: -82px;
  }
}
@media (max-width: 991px) {
  .v2-dl-art {
    width: 100%;
    max-width: 460px;
    margin: 40px auto 0;
  }
}
.v2-dl-art {
  /* the phones only fill x 24-90% of the box: widen it so they span the
     column, centred (the overflow is clipped by #v2-download). They fade
     out well above the box bottom, so pull the footer up under them. */
}
@media (max-width: 767px) {
  .v2-dl-art {
    max-width: none;
    width: 150%;
    margin: 0 0 -18% -36%;
  }
}

/* soft light from the top right — the Figma light that used to be baked
   into the PNGs (and cut off at their bounds); a 220x400px ellipse
   centred at (576, 140) of the 666x690 box, fitted to the Figma frame */
.v2-dl-art::before {
  content: "";
  position: absolute;
  left: 53.5%;
  top: -37.7%;
  width: 66.1%;
  height: 115.9%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04) 50%, transparent);
}

.v2-dl-phone {
  position: absolute;
  display: block;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 82%, transparent 98%);
}

.v2-dl-phone-back {
  left: 11.9%;
  top: 8.6%;
  width: 65.6%;
  height: 79.7%;
  z-index: 1;
}

.v2-dl-phone-front {
  left: 49.9%;
  top: 10.9%;
  width: 41.4%;
  height: 80.4%;
  z-index: 2;
}

/* ==========================================================
   ECOSYSTEM V2 — page background.
   Own template, own rule (see home-v2.scss for the home
   template's equivalent — each v2 page owns its body rule).
   ========================================================== */
body.page-template-page-ecosystem-v2 {
  background: #000;
  margin: 0;
}

/* Same hairline separator between sections as the v2 home page. */
#v2-ecosystem > section + section {
  border-top: 1px solid #181818;
}

#v2-ecosystem > section {
  background: #000;
  padding: 82px 0;
}
@media (max-width: 991px) {
  #v2-ecosystem > section {
    padding: 56px 0;
  }
}
@media (max-width: 767px) {
  #v2-ecosystem > section {
    padding: 48px 0;
  }
}

/* ==========================================================
   SHARED PAGE PRIMITIVES — section head, two-tone heading,
   segmented tab control (products parents + roadmap years).
   ========================================================== */
.v2-ecos-head {
  text-align: center;
  margin-bottom: 62px;
  /* pill sits right above its heading here, not above a grid */
}
.v2-ecos-head .v2-products-pill {
  margin-bottom: 24px;
}
@media (max-width: 767px) {
  .v2-ecos-head {
    margin-bottom: 40px;
  }
}

.v2-ecos-head--left {
  text-align: left;
}

.v2-ecos-heading {
  margin: 0;
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: 50px;
  line-height: 1.2;
  color: #bbb;
}
.v2-ecos-heading span {
  display: block;
}
@media (max-width: 991px) {
  .v2-ecos-heading {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  .v2-ecos-heading {
    font-size: 30px;
  }
}

.v2-ecos-heading-strong {
  color: #fff;
  font-family: var(--font-medium);
  font-weight: 510;
}

/* ---- segmented control ---- */
.v2-ecos-seg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid #181818;
  border-radius: 100px;
}

.v2-ecos-seg-item {
  display: inline-block;
  padding: 8px 18px;
  border: none;
  border-radius: 100px;
  background: transparent;
  font-family: var(--font-medium);
  font-weight: 510;
  font-size: 16px;
  color: #7e7e7e;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.v2-ecos-seg-item:hover {
  color: #fff;
}
.v2-ecos-seg-item {
  /* !important: core.css kills outlines on a (the roadmap year tabs are
     anchors) with its own !important */
}
.v2-ecos-seg-item:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.45) !important;
  outline-offset: 2px;
}
.v2-ecos-seg-item.is-active {
  background: #181818;
  color: #fff;
}
@media (max-width: 767px) {
  .v2-ecos-seg-item {
    padding: 7px 14px;
    font-size: 14px;
  }
}

/* ==========================================================
   HERO — "One platform. Every tool / for the onchain economy."
   ========================================================== */
.v2-ecos-hero-inner {
  display: flex;
  align-items: center;
  gap: 64px;
}
@media (max-width: 991px) {
  .v2-ecos-hero-inner {
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }
}

.v2-ecos-hero-content {
  flex: 1 1 50%;
  min-width: 0;
}

.v2-ecos-hero-title {
  margin: 0 0 20px;
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.15;
  color: #fff;
}
@media (max-width: 991px) {
  .v2-ecos-hero-title {
    font-size: 38px;
  }
}
@media (max-width: 767px) {
  .v2-ecos-hero-title {
    font-size: 31px;
  }
}

.v2-ecos-hero-desc {
  margin: 0;
  max-width: 480px;
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: #7e7e7e;
}
@media (max-width: 991px) {
  .v2-ecos-hero-desc {
    margin-inline: auto;
  }
}
@media (max-width: 767px) {
  .v2-ecos-hero-desc {
    font-size: 16px;
  }
}

/* figma eco hero: two-tone h1 (strong white line + muted #bbb line,
   the .v2-ecos-heading span pattern), 16/21 copy that breaks after
   "and", then a 168.5x45 dark button 24px under it. Scoped to this
   section — the token hero shares the base classes above. */
.v2-ecos-hero .v2-ecos-hero-title {
  color: #bbb;
  text-wrap: balance;
}
.v2-ecos-hero .v2-ecos-hero-title span {
  display: block;
}
.v2-ecos-hero .v2-ecos-hero-title {
  /* one row per line, as in figma: the second line runs ~70px past
     the 512px column into the art's empty black left edge, so it is
     positioned to paint above the (opaque) art image */
}
@media (min-width: 1280px) {
  .v2-ecos-hero .v2-ecos-hero-title {
    position: relative;
    line-height: 55px;
    white-space: nowrap;
  }
}
.v2-ecos-hero .v2-ecos-hero-title {
  /* 992–1279 the column is 440–526px (0.5vw - 56px), narrower than
     the 582px second line at 52px: scale the type to the column so
     each span stays one row (nowrap only guards rounding; the 64px
     gap to the art absorbs it) */
}
@media (min-width: 992px) and (max-width: 1279px) {
  .v2-ecos-hero .v2-ecos-hero-title {
    font-size: min(46px, 4.4vw - 5px);
    white-space: nowrap;
  }
}

.v2-ecos-hero .v2-ecos-hero-desc {
  max-width: 380px;
  font-size: 16px;
  line-height: 1.3;
}

/* .v2-cta-btn is display:flex (full-width in block flow) */
.v2-ecos-hero-cta {
  display: inline-flex;
  width: 168.5px;
  height: 45px;
  padding: 0;
  margin-top: 24px;
}

.v2-ecos-hero-art {
  flex: 1 1 50%;
  min-width: 0;
}
.v2-ecos-hero-art img {
  display: block;
  width: 100%;
  height: auto;
}
.v2-ecos-hero-art {
  /* figma 2001:19830: art at its natural 686px, running into the
     right padding (its black edges hide the overlap) */
}
@media (min-width: 1280px) {
  .v2-ecos-hero-art {
    flex: 0 0 686px;
    margin: 0 -82px 0 -64px;
  }
}
@media (max-width: 991px) {
  .v2-ecos-hero-art {
    width: 100%;
    max-width: 520px;
  }
}

/* stacked and centred <=991: the export draws its icon orbit 46px (of
   1372) right of centre; nudge it so the Lumexo tile sits mid-screen
   (the image bg is #000, so the shifted edges don't show) */
@media (max-width: 991px) {
  #v2-ecosystem .v2-ecos-hero-art img {
    transform: translateX(-3.35%);
  }
}
/* ==========================================================
   DISCOVER OUR TOOLS — parent tabs (Wallet / DEX), each pane
   is a screenshot card + a 4-up row of feature tab items.
   ========================================================== */
.v2-ecos-tools .v2-col {
  text-align: center; /* centers the seg control */
}

.v2-ecos-tools-seg {
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  .v2-ecos-tools-seg {
    margin-bottom: 24px;
  }
}

.v2-ecos-toolpane {
  display: none;
  text-align: left;
}
.v2-ecos-toolpane.is-active {
  display: block;
}

/* ---- screenshot frame: the shots are 2560x1036 desktop exports
   (720x800 mobile variants below 768px, matching the <picture>
   sources), crossfaded absolutely inside a fixed-ratio card. ---- */
.v2-ecos-shotbox {
  position: relative;
  aspect-ratio: 2560/1036;
  overflow: hidden;
  background: linear-gradient(to bottom, #0f0f0f, #050505);
  border: 1px solid #181818;
  border-radius: 20px;
}
@media (max-width: 767px) {
  .v2-ecos-shotbox {
    aspect-ratio: 720/800;
    border-radius: 16px;
  }
}

.v2-ecos-shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.v2-ecos-shot.is-active {
  opacity: 1;
  pointer-events: auto;
}
.v2-ecos-shot picture,
.v2-ecos-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- feature tab items ---- */
.v2-ecos-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 991px) {
  .v2-ecos-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

.v2-ecos-feature {
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid transparent;
  border-radius: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.v2-ecos-feature:hover {
  background: rgba(255, 255, 255, 0.03);
}
.v2-ecos-feature.is-active {
  background: linear-gradient(to bottom, #0f0f0f, #050505);
  border-color: #181818;
}

.v2-ecos-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
.v2-ecos-feature-icon svg {
  display: block;
}

.v2-ecos-feature-title {
  margin: 16px 0 8px;
  font-family: var(--font-medium);
  font-weight: 510;
  font-size: 18px;
  color: #fff;
}

.v2-ecos-feature-desc {
  margin: 0;
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: #7e7e7e;
}

/* ==========================================================
   WHY LUMEXO — heading + 2x2 icon badge grid (shared with the
   token page). A badge is a nav dropdown row in a v2 card:
   icon tile, title line, muted description line(s). 1fr rows
   give every card the tallest card's height.
   ========================================================== */
.v2-ecos-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 16px;
}
@media (max-width: 767px) {
  .v2-ecos-badges {
    grid-template-columns: 1fr;
    grid-auto-rows: auto; /* one column: nothing beside a card to match */
  }
}

.v2-ecos-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  padding: 24px;
  background: linear-gradient(to bottom, #0f0f0f, #050505);
  border: 1px solid #181818;
  border-radius: 20px;
}

.v2-ecos-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
.v2-ecos-badge-icon svg {
  display: block;
}

.v2-ecos-badge-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* type = the tool cards' title/desc below */
.v2-ecos-badge-title {
  margin: 0;
  font-family: var(--font-medium);
  font-weight: 510;
  font-size: 18px;
  line-height: 1.3;
  color: #fff;
}
@media (max-width: 767px) {
  .v2-ecos-badge-title {
    font-size: 16px;
  }
}

.v2-ecos-badge-desc {
  margin: 0;
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: #7e7e7e;
  text-wrap: pretty; /* no one-word last line ("for / you" at 320) */
}
@media (max-width: 767px) {
  .v2-ecos-badge-desc {
    font-size: 14px;
  }
}

/* ==========================================================
   TOOLS & FEATURES — 8-card grid (4-up desktop, 2-up below).
   Cards reuse .v2-card fills; content is top-anchored here.
   ========================================================== */
.v2-ecos-grid-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 991px) {
  .v2-ecos-grid-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.v2-ecos-tool {
  justify-content: flex-start;
  gap: 0;
  padding: 24px;
}
@media (max-width: 767px) {
  .v2-ecos-tool {
    padding: 16px;
  }
}

.v2-ecos-tool-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
.v2-ecos-tool-icon svg {
  display: block;
}

.v2-ecos-tool-title {
  margin: 16px 0 10px;
  font-family: var(--font-medium);
  font-weight: 510;
  font-size: 18px;
  line-height: 1.3;
  color: #fff;
}
@media (max-width: 767px) {
  .v2-ecos-tool-title {
    font-size: 16px;
  }
}

.v2-ecos-status {
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 3px 10px;
  border: 1px solid #181818;
  border-radius: 100px;
  font-family: var(--font-medium);
  font-weight: 510;
  font-size: 12px;
  color: #7e7e7e;
  white-space: nowrap;
}

.v2-ecos-status--live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-color: transparent;
  background: rgba(0, 183, 110, 0.1);
  color: #00d17d;
  /* glowing status dot, same as the download page badge */
}
.v2-ecos-status--live::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00d17d;
  box-shadow: 0 0 6px #00d17d;
}

.v2-ecos-tool-desc {
  margin: 0;
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  /* #7e7e7e, not the dimmer #595959 tier: 15px body copy needs the
     AA-passing grey on #050505 */
  color: #7e7e7e;
}
@media (max-width: 767px) {
  .v2-ecos-tool-desc {
    font-size: 14px;
  }
}

/* ==========================================================
   ROADMAP — year tabs + quarter milestone timeline, with the
   decorative graphic on the right (hidden below 992px, same
   as the old page).
   ========================================================== */
.v2-ecos-roadmap-inner {
  display: flex;
  align-items: flex-start;
  gap: 64px;
}

.v2-ecos-roadmap-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* the head is followed by running copy here, not straight by content */
.v2-ecos-roadmap .v2-ecos-head {
  margin-bottom: 24px;
}

.v2-ecos-roadmap-desc {
  margin: 0 0 32px;
  max-width: 560px;
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: #7e7e7e;
}
@media (max-width: 767px) {
  .v2-ecos-roadmap-desc {
    font-size: 16px;
  }
}

.v2-ecos-roadmap-seg {
  margin-bottom: 40px;
}

/* the art hangs below the text (see .v2-ecos-roadmap-art), past the 82px
   bottom padding: clip it at the section edge, off the footer hairline.
   clip, not hidden: hidden would make the section the sticky scroller */
.v2-ecos-roadmap {
  overflow: clip;
}

.v2-ecos-roadmap-art {
  flex: 0 0 380px;
  width: 380px;
  /* rides the viewport bottom on the way down and comes to rest at the
     end of the list. The export's bottom ~24% (100px at 380 wide) is
     empty glow, so the box hangs that far below the row: the rings
     finish on the last line of text. */
  align-self: flex-end;
  position: sticky;
  bottom: 0;
  margin-bottom: -100px;
  /* the export's #0c0c0c box would show on the #000 page: fade it out
     radially so the jellyfish and rings float on the page */
}
.v2-ecos-roadmap-art img {
  display: block;
  width: 100%;
  height: auto;
  mask-image: radial-gradient(ellipse 60% 55% at 50% 55%, #000 55%, transparent 100%);
}
@media (max-width: 991px) {
  .v2-ecos-roadmap-art {
    display: none;
  }
}

/* ---- quarter panes ---- */
.v2-ecos-quarters {
  display: none;
}
.v2-ecos-quarters.is-active {
  display: block;
}

.v2-ecos-quarter {
  position: relative;
  padding-left: 28px;
  padding-bottom: 40px;
  /* timeline rail */
}
.v2-ecos-quarter::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 14px;
  bottom: 0;
  width: 1px;
  background: #181818;
}
.v2-ecos-quarter {
  /* timeline dot */
}
.v2-ecos-quarter::after {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00d17d;
  box-shadow: 0 0 6px #00d17d;
}
.v2-ecos-quarter:last-child {
  padding-bottom: 0;
}
.v2-ecos-quarter:last-child::before {
  display: none;
}

.v2-ecos-quarter-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.v2-ecos-quarter-q {
  padding: 3px 10px;
  border: 1px solid #181818;
  border-radius: 100px;
  font-family: var(--font-bold);
  font-weight: 590;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7e7e7e;
}

.v2-ecos-quarter-title {
  margin: 0;
  font-family: var(--font-medium);
  font-weight: 510;
  font-size: 20px;
  color: #fff;
}
@media (max-width: 767px) {
  .v2-ecos-quarter-title {
    font-size: 18px;
  }
}

.v2-ecos-quarter-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.v2-ecos-quarter-list li {
  position: relative;
  padding-left: 16px;
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: #7e7e7e;
}
.v2-ecos-quarter-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #595959;
}
.v2-ecos-quarter-list li + li {
  margin-top: 8px;
}

/* ==========================================================
   REDUCED MOTION — crossfades land on their end state.
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .v2-ecos-shot,
  .v2-ecos-feature,
  .v2-ecos-seg-item {
    transition: none;
  }
}
/* ==========================================================
   LMX TOKEN V2 — page background.
   Own template, own rule (see home-v2.scss for the home
   template's equivalent — each v2 page owns its body rule).
   ========================================================== */
body.page-template-page-token-v2 {
  background: #000;
  margin: 0;
}

/* Same hairline separator between sections as the v2 home page. */
#v2-token > section + section {
  border-top: 1px solid #181818;
}

#v2-token > section {
  background: #000;
  padding: 82px 0;
}
@media (max-width: 991px) {
  #v2-token > section {
    padding: 56px 0;
  }
}
@media (max-width: 767px) {
  #v2-token > section {
    padding: 48px 0;
  }
}

/* ==========================================================
   SHARED PRIMITIVES — this page reuses the ecosystem page's
   section head (.v2-ecos-head), two-tone heading
   (.v2-ecos-heading / -strong), hero split (.v2-ecos-hero-*)
   and badge grid (.v2-ecos-badge*) from _ecosystem.scss, plus
   .v2-col / .v2-card / .v2-products-pill / .v2-cta-btn. Only
   token-specific pieces live below.
   ========================================================== */
/* Running copy under a section heading (contract intro, wallets
   intro, DEX intro) — same voice as .v2-ecos-hero-desc. */
.v2-token-section-desc {
  margin: 20px auto 0;
  max-width: 660px;
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: #7e7e7e;
}
@media (max-width: 767px) {
  .v2-token-section-desc {
    font-size: 16px;
  }
}

/* ==========================================================
   HERO — "One Ecosystem. Everything Stellar."
   ========================================================== */
/* .v2-products-pill supplies border/typography; here it is an
   eyebrow above the h1, not a grid heading (contact idiom). */
.v2-token-hero-eyebrow.v2-products-pill {
  margin: 0 0 24px;
}

/* .v2-cta-btn is display:flex (full-width in block flow) — shrink
   it to content as an inline CTA. */
.v2-token-hero-cta {
  flex: none;
  display: inline-flex;
  margin-top: 32px;
  padding: 12px 24px;
}

/* LMX coin art (xtoken export): its edges are already #000, so it sits on
   the page as is. >=1280 the slot keeps the export's 714px frame (the copy
   column gives up 28px vs the shared 686px hero art, same wrapping). */
@media (min-width: 1280px) {
  .v2-ecos-hero-art.v2-token-hero-art {
    flex-basis: 714px;
  }
}
/* side by side (>=992) the coin + tiles cluster is shown at 73%, centred
   in the slot; the row centres the image on the copy, but the cluster sits
   ~4.5% high inside the export, so nudge it down onto the copy's middle */
@media (min-width: 992px) {
  .v2-ecos-hero-art.v2-token-hero-art img {
    width: 73%;
    margin: 0 auto;
    transform: translateY(4.5%);
  }
}
/* ==========================================================
   CONTRACT ADDRESS — "Know Before You Swap"
   Centered .v2-card: chain row, then the address copy button.
   ========================================================== */
.v2-token-contract-card {
  width: 100%;
  max-width: 740px;
  margin: 0 auto;
  box-sizing: border-box;
  justify-content: flex-start; /* .v2-card bottom-anchors; this reads top-down */
  gap: 24px;
}

.v2-token-contract-chain {
  display: flex;
  align-items: center;
  gap: 10px;
}
.v2-token-contract-chain img {
  display: block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.v2-token-contract-chain-name {
  margin: 0;
  font-family: var(--font-medium);
  font-weight: 510;
  font-size: 18px;
  color: #fff;
}

.v2-token-address-label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-bold);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7e7e7e;
}

.v2-token-address-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  background: rgba(129, 129, 129, 0.08);
  border: 1px solid #181818;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.v2-token-address-btn:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

/* Full 56-char Stellar address; ellipsized when the card is
   narrower than the string (mobile). */
.v2-token-address-code {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: 15px;
  color: #fff;
}

.v2-token-address-copy {
  display: block;
  flex-shrink: 0;
}

/* "Copied!" confirmation pill, revealed by .is-copied (set by the
   inline clipboard script in page-token-v2.php). */
.v2-token-address-copied {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 8px;
  background: rgba(0, 183, 110, 0.1);
  border-radius: 100px;
  font-family: var(--font-medium);
  font-weight: 510;
  font-size: 12px;
  color: #00d17d;
  white-space: nowrap;
  opacity: 0;
  /* visibility too: opacity alone leaves "Copied!" in the a11y tree as a
     permanent part of the button's name */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.v2-token-address-btn.is-copied .v2-token-address-copied {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================
   WHY LUMEXO — .v2-ecos-badges grid + docs button.
   ========================================================== */
.v2-token-docs-btn {
  flex: none;
  display: inline-flex;
  margin-top: 40px;
  padding: 12px 24px;
}

/* ==========================================================
   WALLETS SUPPORTING LMX — intro left, wallet rows right.
   ========================================================== */
.v2-token-wallets-inner {
  display: flex;
  align-items: center;
  gap: 64px;
}
@media (max-width: 991px) {
  .v2-token-wallets-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }
}

.v2-token-wallets-intro {
  flex: 1 1 auto;
  min-width: 0;
  /* the head is this column's only content — no trailing gap */
}
.v2-token-wallets-intro .v2-ecos-head {
  margin-bottom: 0;
}
.v2-token-wallets-intro {
  /* recenter at the stack collapse, like the other v2 intros */
}
@media (max-width: 991px) {
  .v2-token-wallets-intro .v2-ecos-head {
    text-align: center;
  }
}

.v2-token-wallet-list {
  flex: 0 0 480px;
  width: 480px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 991px) {
  .v2-token-wallet-list {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* ---- shared link row (wallets + DEXs): logo + name left,
   action/chevron right, standard card fill. ---- */
.v2-token-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  padding: 14px 20px;
  background: linear-gradient(to bottom, #0f0f0f, #050505);
  border: 1px solid #181818;
  border-radius: 16px;
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.v2-token-link-row:hover {
  border-color: rgba(255, 255, 255, 0.22);
}
.v2-token-link-row:hover .v2-token-link-row-action svg {
  transform: translateX(2px);
}

.v2-token-link-row-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.v2-token-link-row-id img {
  display: block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.v2-token-link-row-name {
  font-family: var(--font-medium);
  font-weight: 510;
  font-size: 16px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v2-token-link-row-action {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: 14px;
  color: #7e7e7e;
}
.v2-token-link-row-action svg {
  display: block;
  transition: transform 0.2s ease;
}

/* ==========================================================
   TRADE LMX ON STELLAR — centered head + 4-up DEX grid.
   ========================================================== */
.v2-token-dex-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 991px) {
  .v2-token-dex-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .v2-token-dex-list {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   REDUCED MOTION — micro-transitions land on their end state.
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .v2-token-link-row,
  .v2-token-link-row-action svg,
  .v2-token-address-btn,
  .v2-token-address-copied {
    transition: none;
  }
}
/* ==========================================================
   CONTACT V2 — page background.
   Own template, own rule (see home-v2.scss for the home
   template's equivalent — each v2 page owns its body rule).
   ========================================================== */
body.page-template-page-contact-v2 {
  background: #000;
  margin: 0;
}

/* ==========================================================
   CONTACT SECTION — "Get in touch with us"
   Left: eyebrow pill + title + chat channels (sprite icons).
   Right: WPForms 185 inside a standard .v2-card, restyled dark.
   ========================================================== */
.v2-cont {
  background: #000;
  padding: 82px 0;
}
@media (max-width: 991px) {
  .v2-cont {
    padding: 56px 0;
  }
}
@media (max-width: 767px) {
  .v2-cont {
    padding: 48px 0; /* same mobile rhythm as the ecosystem/token pages */
  }
}

.v2-cont-grid {
  display: flex;
  align-items: flex-start;
  gap: 64px;
}
@media (max-width: 991px) {
  .v2-cont-grid {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }
}

/* Mirrors .v2-dl-content: flex column so the pill, headings and
   chat links all recenter with one rule at the tablet collapse. */
.v2-cont-intro {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (max-width: 991px) {
  .v2-cont-intro {
    align-items: center;
    text-align: center;
  }
}

/* .v2-products-pill supplies the border/typography; only the
   heading margins differ in this context. */
.v2-cont-eyebrow.v2-products-pill {
  margin: 0 0 24px;
}

.v2-cont-title {
  margin: 0 0 40px;
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.15;
  color: #fff;
}
@media (max-width: 991px) {
  .v2-cont-title {
    font-size: 38px;
  }
}
@media (max-width: 767px) {
  .v2-cont-title {
    margin-bottom: 32px;
    font-size: 34px;
  }
}

/* ---- chat channels ---- */
/* Shrink-to-fit around the 348px links, so their max-width:100% had
   nothing to clamp to and the wrapper overflowed a <348px column. */
.v2-cont-chat {
  max-width: 100%;
}

.v2-cont-chat-label {
  margin: 0 0 16px;
  font-family: var(--font-bold);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7e7e7e;
}

/* Same footprint as .v2-cta-buttons (the store-button pair). */
.v2-cont-chat-links {
  display: flex;
  gap: 11px;
  width: 348px;
  max-width: 100%;
}

.v2-cont-chat-link svg {
  display: block;
  flex-shrink: 0;
}

/* Hidden on the old page too (wrapper had .lm-none). */
.v2-cont-help {
  display: none;
}

/* ---- form card ---- */
.v2-cont-form-card {
  flex: 0 0 545px;
  width: 545px;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: flex-start; /* .v2-card bottom-anchors; a form reads top-down */
  gap: 0;
}
@media (max-width: 991px) {
  .v2-cont-form-card {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* ---- WPForms 185, restyled dark.
   The plugin stylesheet targets `div.wpforms-container-full
   .wpforms-form ...`, and home.css carries a global blue
   `.lm-button-primary` (the submit button has that class) —
   every override below nests under the card + that chain so it
   out-specifies both regardless of stylesheet order. The
   modern-markup color vars are set too, for whatever the direct
   rules don't reach. ---- */
.v2-cont-form-card div.wpforms-container-full {
  /* The plugin's `margin: 24px auto` wins the order tie; auto cross-axis
     margins on a flex item also block stretching, shrinking the form to
     content width. width:100% leaves those auto margins nothing to absorb. */
  width: 100%;
  margin: 0;
  --wpforms-field-background-color: #050505;
  --wpforms-field-border-color: #181818;
  --wpforms-field-text-color: #fff;
  --wpforms-field-border-radius: 10px;
  --wpforms-label-color: #fff;
  --wpforms-label-sublabel-color: #7e7e7e;
  --wpforms-label-error-color: #ff4b37;
  --wpforms-button-background-color: #181818;
  --wpforms-button-text-color: #fff;
  --wpforms-button-border-radius: 10px;
}
.v2-cont-form-card div.wpforms-container-full .wpforms-form .wpforms-field {
  padding: 0;
  margin: 0 0 20px;
  max-width: none; /* .wpforms-field-medium caps fields at 60% */
}
.v2-cont-form-card div.wpforms-container-full .wpforms-form .wpforms-field-label {
  display: block;
  margin: 0 0 8px;
  font-family: var(--font-medium);
  font-weight: 510;
  font-size: 14px;
  line-height: normal;
  color: #fff;
}
.v2-cont-form-card div.wpforms-container-full .wpforms-form .wpforms-required-label {
  color: #ff4b37;
}
.v2-cont-form-card div.wpforms-container-full .wpforms-form input[type=text],
.v2-cont-form-card div.wpforms-container-full .wpforms-form input[type=email],
.v2-cont-form-card div.wpforms-container-full .wpforms-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 16px;
  background: #050505;
  border: 1px solid #181818;
  border-radius: 10px;
  font-family: var(--font-regular);
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  transition: border-color 0.2s ease;
}
.v2-cont-form-card div.wpforms-container-full .wpforms-form input[type=text]::placeholder,
.v2-cont-form-card div.wpforms-container-full .wpforms-form input[type=email]::placeholder,
.v2-cont-form-card div.wpforms-container-full .wpforms-form textarea::placeholder {
  color: #595959;
  opacity: 1;
}
.v2-cont-form-card div.wpforms-container-full .wpforms-form input[type=text]:focus,
.v2-cont-form-card div.wpforms-container-full .wpforms-form input[type=email]:focus,
.v2-cont-form-card div.wpforms-container-full .wpforms-form textarea:focus {
  /* .45, not .22: keyboard focus needs a >=3:1 indicator on #050505 */
  border-color: rgba(255, 255, 255, 0.45);
  outline: none;
  box-shadow: none;
}
.v2-cont-form-card div.wpforms-container-full .wpforms-form input[type=text].wpforms-error,
.v2-cont-form-card div.wpforms-container-full .wpforms-form input[type=email].wpforms-error,
.v2-cont-form-card div.wpforms-container-full .wpforms-form textarea.wpforms-error {
  border-color: #ff4b37;
}
.v2-cont-form-card div.wpforms-container-full .wpforms-form textarea {
  min-height: 150px;
  resize: vertical;
}
.v2-cont-form-card div.wpforms-container-full .wpforms-form {
  /* validation messages */
}
.v2-cont-form-card div.wpforms-container-full .wpforms-form em.wpforms-error,
.v2-cont-form-card div.wpforms-container-full .wpforms-form label.wpforms-error {
  display: block;
  margin: 6px 0 0;
  font-family: var(--font-regular);
  font-size: 13px;
  font-style: normal;
  color: #ff4b37;
}
.v2-cont-form-card div.wpforms-container-full .wpforms-form .wpforms-submit-container {
  padding: 0;
  margin-top: 28px;
}
.v2-cont-form-card div.wpforms-container-full .wpforms-form button.wpforms-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: auto; /* .lm-button-primary forces 46px */
  margin: 0;
  padding: 12px 16px;
  box-sizing: border-box;
  background: #181818;
  border: 1px solid #1f1f1f;
  border-radius: 10px;
  filter: none; /* .lm-button-primary drop-shadow */
  font-family: var(--font-medium);
  font-weight: 510;
  font-size: 16px;
  line-height: normal;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.v2-cont-form-card div.wpforms-container-full .wpforms-form button.wpforms-submit:hover {
  background: #232323;
  border-color: #333;
  box-shadow: none;
}
.v2-cont-form-card div.wpforms-container-full .wpforms-form button.wpforms-submit:disabled {
  opacity: 0.6;
  cursor: default;
}
.v2-cont-form-card div.wpforms-container-full .wpforms-form .wpforms-submit-spinner {
  margin-left: 8px;
}
.v2-cont-form-card div.wpforms-container-full {
  /* AJAX success message — !important matches home.css's own
     !important reset of this container. */
}
.v2-cont-form-card div.wpforms-container-full .wpforms-confirmation-container-full {
  margin: 0 !important;
  padding: 16px !important;
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  border-radius: 10px;
}
.v2-cont-form-card div.wpforms-container-full .wpforms-confirmation-container-full p {
  margin: 0;
  font-family: var(--font-regular) !important;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
}

/* ==========================================================
   LEGAL V2 — default template (page.php: privacy, terms and
   any other plain WP page). No DB template assignment, so the
   default template itself is restyled. Also neutralizes the
   legacy body.privacy-policy / body.page-id-120 block in
   home.scss (dotted bg, body padding, fixed header).
   ========================================================== */
body.page-template-default {
  background: #000;
  margin: 0;
  padding-top: 0;
}

/* Legacy made the header fixed (+ a navy bg once core.js adds
   .fixed on scroll); restore the v2 sticky header as-is. */
body.page-template-default header.v2-header {
  position: sticky;
  background: rgba(0, 0, 0, 0.9);
}

/* ==========================================================
   CONTENT COLUMN — h1 + the_content()
   ========================================================== */
body.page-template-default #lm-content {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 82px 24px;
  font-family: var(--font-regular);
  font-size: 16px;
  line-height: 1.7;
  color: #7e7e7e; /* 5.2:1 on #000 — AA for body text */
}
@media (max-width: 991px) {
  body.page-template-default #lm-content {
    padding: 56px 24px;
  }
}
@media (max-width: 767px) {
  body.page-template-default #lm-content {
    padding: 48px 20px;
  }
}
body.page-template-default #lm-content h1 {
  margin: 0 0 40px;
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.15;
  color: #fff;
}
@media (max-width: 991px) {
  body.page-template-default #lm-content h1 {
    font-size: 38px;
  }
}
@media (max-width: 767px) {
  body.page-template-default #lm-content h1 {
    margin-bottom: 32px;
    font-size: 34px;
  }
}
body.page-template-default #lm-content h2,
body.page-template-default #lm-content h3 {
  font-family: var(--font-medium);
  line-height: 1.3;
  color: #fff;
}
body.page-template-default #lm-content h2 strong,
body.page-template-default #lm-content h3 strong {
  color: inherit; /* privacy h3s are wrapped in <strong> */
}
body.page-template-default #lm-content h2 {
  margin: 48px 0 16px;
  font-size: 24px;
}
@media (max-width: 767px) {
  body.page-template-default #lm-content h2 {
    margin-top: 40px;
    font-size: 20px;
  }
}
body.page-template-default #lm-content h3 {
  margin: 32px 0 12px;
  font-size: 18px;
}
body.page-template-default #lm-content p,
body.page-template-default #lm-content ul,
body.page-template-default #lm-content ol,
body.page-template-default #lm-content blockquote,
body.page-template-default #lm-content figure {
  margin: 0 0 16px;
}
body.page-template-default #lm-content p {
  font-size: inherit; /* legacy body.privacy-policy p is 14px on mobile */
}
body.page-template-default #lm-content ul,
body.page-template-default #lm-content ol {
  padding-left: 24px;
}
body.page-template-default #lm-content ul > li {
  list-style: disc;
}
body.page-template-default #lm-content ol > li {
  list-style: decimal;
}
body.page-template-default #lm-content li + li {
  margin-top: 8px;
}
body.page-template-default #lm-content strong,
body.page-template-default #lm-content b {
  font-family: var(--font-medium);
  color: #bbb;
}
body.page-template-default #lm-content a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: #595959;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
body.page-template-default #lm-content a:hover {
  color: #00d17d;
  text-decoration-color: currentColor;
}
body.page-template-default #lm-content blockquote {
  padding-left: 20px;
  border-left: 2px solid #181818;
}
body.page-template-default #lm-content table {
  width: 100%;
  font-size: 14px;
}
body.page-template-default #lm-content th,
body.page-template-default #lm-content td {
  padding: 10px 12px;
  border: 1px solid #181818;
  text-align: left;
  vertical-align: top;
}
body.page-template-default #lm-content th {
  font-family: var(--font-medium);
  color: #fff;
}