@charset "UTF-8";

/* ---------- Base Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; background: var(--bg); color: var(--text-1); }
img { max-width: 100%; height: auto; display: block; }

/* ---------- Tokens from Dev Mode ---------- */
:root{
  --Accent: #00FFFF; /* alias */

  --Secondary_Text: #AAAAAA; /* alias for figma token naming */

  --primary: #7F00FF;
  --link-blue: #5D57F9;

  --accent: #00FFFF;
  --secondary-text: #AAAAAA;
  --text: #F5F5F5;

  --vp-purple-900: #0F001F; /* bar-1 bg */
  --vp-purple-800: #26004D; /* bar-2 bg */
  --vp-gray-500:  #747474;
  --vp-gray-300:  #D9D9D9;
  --vp-white:     #FFFFFF;
  --vp-text-50:   rgba(255,255,255,.5);

  /* Status-dot gradients */
  --vp-dot-green: radial-gradient(circle at 50% 50%, #00FF00 0%, #008000 100%);
  --vp-dot-red:   radial-gradient(circle at 50% 50%, #FF0000 0%, #800000 100%);
  --vp-dot-amber: radial-gradient(circle at 50% 50%, #FFAA00 0%, #805900 100%);

  --bg: #0D0712;
  --text-1: #FFFFFF;
  --text-2: #EDECF3;

  --vp-container: 1440px;   /* matches your frame width for now */
  --vp-pad-x:     32px;
}

/* ---------- Layout helpers ---------- */
.vp-container{
  max-width: var(--vp-container);
  margin-inline: auto;
  padding-inline: var(--vp-pad-x);
  width: 100%;
}
.vp-flex-between{ display: flex; align-items: center; justify-content: space-between; }

/* ---------- Top bars ---------- */
.vp-bar{ width: 100%; color: var(--vp-white); }
.vp-bar--primary{
  background: var(--vp-purple-900);
  height: 64px; display: flex; align-items: center;
}
.vp-bar--status{
  background: var(--vp-purple-800);
  height: 40px; display: flex; align-items: center;
}

/* Brand: logo + name */
.vp-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;                 /* space between logo and text */
  text-decoration: none;     /* remove link underline */
  color: inherit;            /* keep existing bar text color */
}

.vp-brand__logo{
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.vp-brand__name{
  font-weight: 700;          /* match your headline weight if needed */
  letter-spacing: 0.2px;
}

/* Tweak sizes responsively */
@media (min-width: 768px){
  .vp-brand__logo{ width: 48px; height: 48px; }
}


/* Brand (Arial Rounded MT Bold 24) */
.vp-brand{
  font-family: "Arial Rounded MT Bold","Arial Rounded MT", Arial, Helvetica, sans-serif;
  font-size: 24px; font-weight: 400; line-height: 1;
}

/* Balances + avatar */
.vp-right{ display: flex; align-items: center; gap: 32px; }
.vp-balances{ display: flex; align-items: center; gap: 16px; }
.vp-stack{ display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.vp-cap{ font-size: 12px; font-weight: 400; color: var(--vp-white); line-height: 1; }

.vp-avatar{ width: 40px; height: 40px; position: relative; border-radius: 9999px; overflow: hidden; background: var(--vp-gray-500); }
.vp-avatar::before{ content:""; position: absolute; inset: 2.5px; border-radius: 9999px; background: var(--vp-gray-300); }
.vp-avatar img{ position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: cover; border-radius: 9999px; }

/* Status row */
.vp-status{ display: flex; align-items: center; gap: 16px; font-size: 16px; }
.vp-status__label{ font-weight: 700; }

/* keep UI identical */
.vp-status__item {
  display: inline-flex;          /* same flow as your spans */
  align-items: center;
  gap: 6px;
  text-decoration: none;         /* no underline */
  color: inherit;                /* same color */
  cursor: pointer;
}
.vp-status__item.disabled {
  /* allow hover/focus so tooltip appears */
  pointer-events: auto;
  cursor: default;
  color: #888;
  text-decoration: none;
  opacity: 0.8;
}

/* put this alongside your other tooltip rules (adapt sizes/colors as needed) */
.vp-footer2__link.disabled { position: relative; cursor: default; color: #888; pointer-events: auto; }

/* tooltip */
.vp-footer2__link.disabled::after {
  content: attr(data-hint);
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  bottom: 100%;
  margin-bottom: 8px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 6px 8px;
  font-size: 12px;
  white-space: nowrap;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease;
  z-index: 9999;
  pointer-events: none;
}
.vp-footer2__link.disabled::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% - 2px);
  border: 6px solid transparent;
  border-top-color: rgba(0,0,0,0.85);
  opacity: 0;
  transition: opacity 120ms ease;
  z-index: 9998;
}
.vp-footer2__link.disabled:hover::after,
.vp-footer2__link.disabled:focus::after,
.vp-footer2__link.disabled:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.vp-footer2__link.disabled:hover::before,
.vp-footer2__link.disabled:focus::before,
.vp-footer2__link.disabled:focus-visible::before {
  opacity: 1;
}

.vp-status__item:focus-visible {
  outline: 2px solid currentColor; outline-offset: 2px; /* accessible focus, minimal */
}

.vp-dot{ width: 12px; height: 12px; border-radius: 9999px; display: inline-block; }
.vp-dot--green{ background: var(--vp-dot-green); }
.vp-dot--red{   background: var(--vp-dot-red); }
.vp-dot--amber{ background: var(--vp-dot-amber); }

/* Ticker */
.vp-ticker{ display: flex; align-items: center; gap: 16px; font-size: 16px; }
.vp-coin__circle{
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--vp-white); border-radius: 510px; overflow: hidden;
}
.vp-coin__circle img{ width: 24px; height: 24px; display: block; }
.vp-price{ font-weight: 700; color: var(--vp-white); }
.vp-change{ color: var(--vp-text-50); font-weight: 400; }

/* ---------- Hero (placeholder) ---------- */
.hero{ padding: 48px 0; background: radial-gradient(1000px 520px at 10% -10%, #8a2be233, transparent); }
.hero h1{ margin: 0 0 8px; font-size: clamp(2rem, 3vw, 3rem); }
.hero .lead{ margin: 0; opacity: .9; }

/* ---------- Main placeholders ---------- */
.vp-main{ display: grid; gap: 24px; padding: 24px 0 48px; }
.placeholder{ background: #140a1e; border: 1px solid #2c1f3b; border-radius: 12px; padding: 16px; }

/* ---------- Footer ---------- */
.vp-footer{ padding: 24px 0; border-top: 1px solid #2c1f3b; color: var(--text-2); }

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .vp-right{ gap: 20px; }
}
@media (max-width: 720px){
  .vp-container{ padding-inline: 16px; }
  .vp-status{ display: grid; grid-template-columns: auto auto; row-gap: 6px; }
  .vp-brand{ font-size: 20px; }
}

/* Hero mobile */
@media (max-width: 480px){
  .hero{ padding: 48px 0; }
  .hero__title{ font-size: 26px; }
  .hero__subtitle{ font-size: 18px; }
}

/* ---------- Chart (per Dev Mode) ---------- */
.chart{ padding-top:16px; padding-bottom:16px; }
.chart__wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.chart__img{ width:1184px; max-width:100%; height:auto; display:block; }

/* ---------- KPI Cards (per Dev Mode) ---------- */
.kpis .kpis__row{
  padding-left: 128px;
  padding-right: 128px;
  display: flex;
  gap: 32px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.kpi-card{
  flex: 1 1 0;
  display: flex; align-items: center; gap: 16px;
  padding: 8px 16px;
  background: #26004D;
  border-radius: 8px;
  overflow: hidden;
}
.kpi-card__icon{ display:flex; align-items:center; justify-content:center; height: 128px; }
.kpi-card__icon img{ width:128px; height:128px; }
.kpi-card__stack{ display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; flex: 1 1 0; }

.kpi-card__label{
  color: var(--secondary-text, #AAAAAA);
  font-size: 16px; font-weight: 400; line-height: 30px;
}
.kpi-card__value{
  color: var(--text, #F5F5F5);
  font-size: 24px; font-weight: 700; line-height: 36px;
}
.kpi-card__delta{
  color: var(--accent, #00FFFF);
  font-size: 16px; font-weight: 400; line-height: 30px;
}

/* Responsive adjustments */
@media (max-width: 1200px){
  .kpis .kpis__row{ padding-left: 32px; padding-right: 32px; }
}

@media (max-width: 400px){
  .kpis .kpis__row{ padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 800px){
  .kpi-card{ flex: 1 1 100%; }
}

/* ---------- Intro + Feature Tiles (per Dev Mode) ---------- */
.intro{
  padding-top: 128px;
  padding-bottom: 128px;
  overflow: hidden;
}
.intro__stack{
  display: flex; flex-direction: column; gap: 64px;
}
/* Row: logo + copy with container-like side padding 128px */
.intro__row{
  padding-left: 128px;
  padding-right: 128px;
  display: inline-flex; align-items: center; gap: 64px; width: 100%;
}
.intro__logo{ display: inline-flex; }
.intro__logo-circle{
  width: 192px; height: 192px; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  background: #FFFFFF; border-radius: 510px; padding: 32px; overflow: hidden;
}
.intro__logo-circle img{ width: 162.64px; height: 162.64px; object-fit: cover; }

.intro__copy{ display: inline-flex; flex-direction: column; gap: 32px; flex: 1 1 0; }
/* Title: Accent 24/700, lh 36px; Text: 20/400, lh 30px */
.intro__title{
  color: var(--accent, #00FFFF);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 24px; font-weight: 700; line-height: 36px; margin: 0;
}
.intro__text{
  color: var(--text, #F5F5F5);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 20px; font-weight: 400; line-height: 30px; margin: 0;
}

/* Feature tiles row: side padding 128px, gap 32px */
.features4{
  padding-left: 128px; padding-right: 128px;
  display: inline-flex; align-items: flex-start; gap: 32px; width: 100%;
  flex-wrap: wrap;
}
.feature{
  flex: 1 1 0;
  padding-left: 32px; padding-right: 32px;
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px; justify-content: center;
  min-width: 240px;
}
.feature__title-wrap{ height: 56px; display: inline-flex; align-items: flex-start; justify-content: center; width: 100%; }
.feature__title{
  flex: 1 1 0; text-align: center;
  color: var(--text, #F5F5F5);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 20px; font-weight: 700; margin: 0;
}
.feature__img{ width: 256px; height: 256px; object-fit: cover; }

/* Responsiveness */
@media (max-width: 1200px){
  .intro__row, .features4{ padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 900px){
  .intro__row{ flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px){
  .feature{ flex: 1 1 100%; }
}

/* ---------- Ecosystem Table (per Dev Mode) ---------- */
.eco{
  padding: 32px;
  background: #1A1A1A;
  display: inline-flex; flex-direction: column; gap: 128px; width: 100%;
  box-sizing: border-box;
}
.eco__wrap{ width: 100%; display: flex; flex-direction: column; gap: 64px; }
.eco__head{ display: flex; justify-content: center; }
.eco__title{
  color: var(--accent, #00FFFF);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 24px; font-weight: 700; line-height: 36px; margin: 0;
}
.eco__table{ width: 100%; display: flex; flex-direction: column; }

.eco__row{
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 32px;
  padding: 32px 16px;
  border-bottom: 1px solid var(--primary, #7F00FF);
}
.eco__row--head{
  background: #26004D;
  border-radius: 8px 8px 0 0;
  padding: 24px 16px;
  gap: 32px;
  border-bottom: none;
  align-items: center;
}
.eco__col{ flex: 1 1 0; display: inline-flex; align-items: center; }
.eco__col--platform{ width: 320px; flex: 0 0 320px; gap: 8px; }
.eco__col--link{ width: 192px; flex: 0 0 192px; }

.eco__logo{ width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.eco__platform{
  color: var(--accent, #00FFFF);
  font-size: 20px; font-weight: 400; line-height: 30px;
}
.eco__text{
  color: #FFFFFF;
  font-size: 20px; font-weight: 400; line-height: 30px;
}
.eco__row--head span{
  color: #FFFFFF;
  font-size: 20px; font-weight: 400; line-height: 24px;
}
.eco__a{
  color: var(--link-blue, #5D57F9);
  font-size: 20px; font-weight: 400; line-height: 30px; text-decoration: none;
}
.eco__a:hover{ text-decoration: underline; }

/* Responsive */
@media (max-width: 1200px){
  .eco{ padding: 32px 24px; }
}
@media (max-width: 900px){
  .eco__row{ flex-wrap: wrap; gap: 16px; }
  .eco__col--platform, .eco__col--link{ flex: 1 1 100%; width: 100%; }
}

/* ---------- Brands + Videos (per Dev Mode) ---------- */
.brands2{
  padding-left: 64px; padding-right: 64px;
  padding-top: 96px; padding-bottom: 96px;
  background: #1A1A1A;
  display: inline-flex; flex-direction: column; gap: 128px; width: 100%;
  box-sizing: border-box;
}
.brandrow{
  width: 100%;
  display: inline-flex; align-items: center; gap: 32px; overflow: hidden;
}
.brandrow__img-box{
  width: 256px; height: 256px;
  display: inline-flex; align-items: center; justify-content: center;
}
.brandrow__copy{
  flex: 1 1 0;
  display: inline-flex; flex-direction: column; gap: 16px; justify-content: center; align-items: flex-start;
}
.brandrow__title{
  color: var(--accent, var(--Accent, #00FFFF));
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 24px; font-weight: 700; line-height: 36px; margin: 0;
}
.brandrow__text{
  color: #FFFFFF;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 20px; font-weight: 400; line-height: 30px; margin: 0;
}
.brandrow__text strong{ font-weight: 700; }

.brandrow__video{
  width: 384px; height: 288px; background: #000000;
  display: inline-flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 96px; overflow: hidden;
}
/* Responsive <video> inside brand blocks */
.brandrow__player{
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;          /* desktop feel */
  background: #000;             /* matches container */
  border-radius: 8px;
  display: block;
}

/* Give phones a wider, cinematic look */
@media (max-width: 600px){
  .brandrow__player{ aspect-ratio: 16 / 9; }
}

.brandrow__video-label{
  width: 134px; display:flex; flex-direction: column; align-items: center;
  color: var(--secondary-text, var(--Secondary_Text, #AAAAAA));
  font-size: 16px; font-weight: 400; line-height: 24px; text-align: center;
}
.brandrow__controls{
  align-self: stretch; display: inline-flex; align-items: center; gap: 10px;
  padding: 8px; background: #262626;
}
.brandrow__play{
  width: 32px; height: 32px; background: var(--accent, var(--Accent, #00FFFF));
}
.brandrow__progress{
  flex: 1 1 0; height: 8px; background: var(--secondary-text, var(--Secondary_Text, #AAAAAA)); border-radius: 4px;
}

/* Responsive */
@media (max-width: 1100px){
  .brands2{ gap: 128px; padding-left: 24px; padding-right: 24px; }
  .brandrow{ flex-wrap: wrap; }
  .brandrow__video{ width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; }
}

/* ---------- Milestones (per Dev Mode) ---------- */
 .miles{
  padding-left: 64px;
  padding-right: 64px;
  padding-top: 32px;
  padding-bottom: 32px;                 /* a bit more than before */
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  box-sizing: border-box;
}

.miles__head{ width: 100%; display: flex; justify-content: center; }
.miles__title{
  color: var(--Accent, var(--accent, #00FFFF));
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 24px; font-weight: 700; line-height: 36px; margin: 0;
}
 /* Milestones layout */
.miles__row{
  width: 100%;
  display: grid;                         /* was inline-flex */
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 32px;
  align-items: stretch;                  /* make each card same height as tallest */
}
 .mile-card{
  flex: 1 1 0;                           /* harmless with grid */
  height: auto;                          /* was 384px (causing clipping) */
  padding: 16px 32px;
  border-radius: 8px;
  display: flex;                         /* keep vertical layout */
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;                     /* show all text */
}
.mile-card--purple{ background: #26004D; }
.mile-card--teal{    background: #004D4D; }
.mile-card--brown{   background: #4D3600; }

.mile-card__icon{ display: inline-flex; align-items: center; justify-content: center; }
.mile-card__stack{ display: flex; flex-direction: column; gap: 32px; align-items: flex-start; justify-content: center; width: 100%; }
.mile-card__title{
  width: 100%; text-align: center;
  color: var(--Text, var(--text, #F5F5F5));
  font-size: 24px; font-weight: 700; line-height: 36px; margin: 0;
}
.mile-card__text{
  color: var(--Text, var(--text, #F5F5F5));
  font-size: 20px; font-weight: 400; line-height: 30px; margin: 0;
}

/* Responsive */
@media (max-width: 1100px){
  .mile-card{ flex: 1 1 100%; height: auto; }
}

/* ---------- CTA (per Dev Mode) ---------- */
.cta{
  padding-left: 64px; padding-right: 64px;
  padding-top: 32px; padding-bottom: 32px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 64px; width: 100%;
  box-sizing: border-box;
}
.cta__head{ width: 100%; display: flex; justify-content: center; }
.cta__title{
  color: #FFFFFF;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 24px; font-weight: 700; line-height: 36px; margin: 0; text-align: center;
}
.cta__btn{
  width: 256px;
  padding: 20px 27px;
  background: #6600CC;
  border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #FFFFFF;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 24px; font-weight: 700; line-height: 24px;
  text-decoration: none;
}
.cta__btn:hover{ filter: brightness(1.05); }

/* ---------- Footer v2 (per Dev Mode) ---------- */

.vp-footer2{
  padding-top: 48px; padding-bottom: 48px;
  background: #130026;
  border-top: 1px solid var(--primary, #7F00FF);
  display: inline-flex; width: 100%; justify-content: center;
}
.vp-footer2__wrap{
  width: 100%; max-width: var(--vp-container, 1440px);
  padding: 0 var(--vp-pad-x, 32px);
  display: inline-flex; align-items: flex-start; justify-content: center; gap: 128px; height: 124px;
}
.vp-footer2__col{ display: inline-flex; flex-direction: column; gap: 16px; align-items: flex-start; justify-content: flex-start; }
.vp-footer2__col--right{ align-items: center; justify-content: space-between; gap: 48px; height: 100%; }
.vp-footer2__link{ color: #FFFFFF; font-size: 16px; font-weight: 400; font-family: Verdana, Geneva, Tahoma, sans-serif; text-decoration: none; }
.vp-footer2__link:hover{ text-decoration: underline; }


.vp-footer2__brand{ display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vp-footer2__logo{ color: #FFFFFF; font-size: 16px; font-weight: 400; font-family: "Arial Rounded MT Bold","Arial Rounded MT", Arial, Helvetica, sans-serif; }
.vp-footer2__fine{ color: #737B80; font-size: 10px; font-weight: 400; font-family: Inter, Verdana, Arial, sans-serif; }

@media (max-width: 900px){
  .vp-footer2__wrap{ gap: 48px; height: auto; flex-wrap: wrap; justify-content: space-between; }
  .vp-footer2__col--right{ gap: 24px; }
}


/* ---------- Footer icons (image-based) ---------- */
.vp-footer2__icons{ display:inline-flex; align-items:center; gap:32px; }
.ico{ width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; }
.ico img{ width:32px; height:32px; display:block; }
.ico:hover{ opacity:.9; }


/* Live Dexscreener chart (responsive, polished) */
#dexscreener-embed{
  width: 100%;
  /* desktop-ish default */
  aspect-ratio: 1184 / 468; /* ≈2.53:1 */
  min-height: 360px;
}
#dexscreener-embed iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #0b0b0b; /* avoids white flash while loading */
}

/* Tablet: give the chart more vertical room */
@media (max-width: 1024px){
  #dexscreener-embed{ aspect-ratio: 16 / 9; min-height: 320px; }
}

/* Phone: even taller so the toolbar/labels aren’t cramped */
@media (max-width: 600px){
  #dexscreener-embed{ aspect-ratio: 4 / 3; min-height: 300px; }
}

/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  #dexscreener-embed{ position: relative; padding-bottom: 40%; min-height: 360px; }
  @media (max-width: 1024px){ #dexscreener-embed{ padding-bottom: 56.25%; } } /* 16:9 */
  @media (max-width: 600px){  #dexscreener-embed{ padding-bottom: 75%; } }      /* 4:3  */
  #dexscreener-embed iframe{ position: absolute; inset: 0; }
}



/* --- Sticky header wrapper --- */
.vp-top{
  position: sticky;     /* keeps it in normal flow, then sticks */
  top: 0;
  z-index: 1000;        /* above iframes/charts */
}

/* Optional: subtle shadow once you scroll */
.vp-top.is-stuck{
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}



/* ---------- Minimal "no-squeeze" fixes ---------- */

/* Bar 1 (brand + balances + avatar) */
.vp-bar--primary .vp-container{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;       /* never wrap; we manage overflow below */
}
.vp-brand{
  flex:1 1 auto;          /* takes leftover space */
  min-width:0;            /* allow ellipsis instead of growing */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.vp-right{ flex:0 0 auto; }

/* Bar 2 (status + price) */
.vp-bar--status .vp-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
}
.vp-status{
  flex:1 1 auto;          /* grows/shrinks */
  min-width:0;            /* key: enables overflow-x */
  overflow-x:auto;        /* scroll if too many pills */
  -webkit-overflow-scrolling:touch;
}
.vp-ticker{
  flex:0 0 auto;          /* keep price block intact */
  margin-left:12px;
}

/* Make the chart taller only on very small screens (readable toolbar) */
@media (max-width: 500px){
  #dexscreener-embed{ aspect-ratio: 4 / 3; min-height: 300px; }
}


/* Footer: allow gentle wrap under 500px without shrinking contents */
@media (max-width: 500px){
  .vp-footer2__wrap{
    flex-wrap:wrap;
    row-gap:24px;
    column-gap:32px;
    height:auto;          /* avoid fixed heights */
  }
  .vp-footer2__col{ flex:1 1 240px; }
  .vp-footer2__icons{ flex-wrap:wrap; gap:20px; }
}

@media (max-width: 360px){
  .vp-brand{ font-size: 18px; }
}

/* ===== Fix: sticky header bars must stay full width on any viewport ===== */

/* Make sure page itself can't create a horizontal scroll from full-bleed bars */
html, body { margin: 0; overflow-x: hidden; }

/* Your sticky wrapper is fine; we keep it sticky and let children be full-bleed */
.vp-top{
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Force each top bar (primary and status) to be full-bleed */
.vp-bar{
  position: relative;
  width: 100vw;                 /* span the viewport, not just the container */
  left: 50%;
  right: auto;
  transform: translateX(-50%);  /* center the full-bleed bar */
  box-sizing: border-box;
}

/* Keep your content centered and constrained inside the bar */
.vp-bar > .vp-container{
  width: 100%;
  max-width: var(--vp-container, 1440px);
  margin: 0 auto;
  padding-left: var(--vp-pad-x, 32px);
  padding-right: var(--vp-pad-x, 32px);
}

/* Optional: prevent the status line from breaking into multiple lines */
.vp-status{
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;               /* horizontal scroll on ultra-narrow screens */
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  scrollbar-width: thin;          /* Firefox */
}
.vp-status__item{ flex: 0 0 auto; }

/* ===== Compact type for small phones ===== */
@media (max-width: 400px){

  /* Global spacing tighten */
  .vp-container{ padding-inline: 16px; }

  /* Header */
  .vp-brand{ font-size: 18px; }
  .vp-status__item{ font-size: 14px; }
  .vp-price{ font-size: 16px; }
  .vp-change{ font-size: 14px; }

  /* Hero */
  .hero__title{ font-size: 28px; line-height: 1.12; }
  .hero__subtitle{ font-size: 14px; line-height: 1.4; }

  /* Chart already resized by your aspect-ratio rule; keep labels readable */
  #dexscreener-embed{ min-height: 300px; }

  /* KPI cards */
  .kpi-card__value{ font-size: 28px; line-height: 1.1; }
  .kpi-card__label,
  .kpi-card__delta{ font-size: 14px; }

  /* Intro + features */
  .intro__title,
  .feature__title{ font-size: 20px; }
  .intro__text{ font-size: 14px; line-height: 1.55; }

  /* Ecosystem table */
  .eco__title{ font-size: 20px; }
  .eco__row .eco__col span,
  .eco__text,
  .eco__platform,
  .eco__a{ font-size: 14px; }

  /* Brand rows */
  .brandrow__title{ font-size: 20px; }
  .brandrow__text{ font-size: 14px; line-height: 1.55; }

  /* Milestones */
  .miles__title{ font-size: 20px; }
  .mile-card__title{ font-size: 18px; }
  .mile-card__text{ font-size: 14px; line-height: 1.5; }

  /* CTA */
  .cta__title{ font-size: 18px; line-height: 1.4; text-align: center; }
  .cta__btn{ font-size: 16px; padding: 14px 18px; }

  /* Footer */
  .vp-footer2__link{ font-size: 14px; }
  .vp-footer2__logo{ font-size: 16px; }
  .vp-footer2__fine{ font-size: 10px; }
}

/* Ultra-narrow safety (old 320–360px devices) */
@media (max-width: 360px){
  .hero__title{ font-size: 24px; }
  .kpi-card__value{ font-size: 24px; }
  .intro__title,
  .feature__title,
  .brandrow__title,
  .eco__title,
  .miles__title{ font-size: 18px; }
}

/* ===== Compact spacing for small phones ===== */
@media (max-width: 400px){
  /* global container padding */
  .vp-container{ padding-inline: 16px; }

  /* header bars (keep full-bleed, but tighten vertical padding) */
  .vp-bar > .vp-container{ padding-block: 8px; }

  /* hero */
  .hero{ padding: 24px 0 20px; }
  .hero__stack{ gap: 8px; }

  /* chart section */
  .chart .vp-container{ padding-block: 12px; }

  /* KPI cards */
  .kpis__row{ gap: 12px; }
  .kpi-card{ padding: 12px; }
  .kpi-card__icon img{ width: 96px; height: auto; }

  /* intro + features */
  .intro{ padding: 32px 0; }
  .intro__row{ gap: 16px; }
  .intro__copy{ gap: 10px; }
  .features4{ gap: 16px; }
  .feature{ padding: 8px 0; }

  /* ecosystem table */
  .eco{ padding: 32px 0; }
  .eco__wrap{ gap: 16px; }
  .eco__row{ padding: 16px 8px; gap: 12px; }
  .eco__row--head{ padding: 16px 8px; }

  /* brand rows (logos + copy + video) */
  .brands2{ gap: 24px; }
  .brandrow{ gap: 16px; padding-block: 16px; }
  .brandrow__video{ width: 100%; }
  .brandrow__player{ width: 100%; height: auto; max-height: 240px; }

  /* milestones */
  .miles{ padding: 32px 0; }
  .miles__row{ gap: 12px; }
  .mile-card{ padding: 16px; }

  /* CTA */
  .cta{ padding: 32px 0; gap: 16px; }

  /* footer */
  .vp-footer2{ padding: 24px 0; }
  .vp-footer2__wrap{ padding-inline: 16px; }
  .vp-footer2__icons .ico img{ width: 28px; height: 28px; }
}

/* ultra-narrow safety */
@media (max-width: 360px){
  .vp-container{ padding-inline: 12px; }
  .kpi-card{ padding: 10px; }
  .brandrow__player{ max-height: 200px; }
}

/* ---------- Brand rows: mobile layout ---------- */
@media (max-width: 480px){
  /* Stack each brand row vertically */
  .brandrow{
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-block: 16px;
  }

  /* Make images responsive and centered */
  .brandrow__img-box{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .brandrow__img-box img{
    max-width: 220px;     /* cap so it doesn't dominate */
    width: 70vw;          /* scale with viewport */
    height: auto;
  }

  /* Let copy take full width with smaller type/spacing */
  .brandrow__copy{
    width: 100%;
    padding: 0;
  }
  .brandrow__title{ font-size: 20px; }
  .brandrow__text{
    font-size: 14px;
    line-height: 1.55;
    word-break: break-word;     /* prevent overflow on long tokens/domains */
  }

  /* Video goes full width under the copy */
  .brandrow__video{
    width: 100%;
  }
  .brandrow__player{
    width: 100%;
    height: auto;
    max-height: 220px;          /* keep aspect reasonable on very small screens */
  }
}

/* Safety: never let images overflow any container */
img{ max-width: 100%; height: auto; }


/* Footer links look + column layout (only if missing) */
.vp-footer2__col{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vp-footer2__link{
  color: #fff;
  font-size: 16px;
  text-decoration: none;
}
.vp-footer2__link:hover{ text-decoration: underline; }

/* Mobile wrap so 3 columns don’t squeeze */
@media (max-width: 600px){
  .vp-footer2__wrap{
    flex-wrap: wrap;
    row-gap: 20px;
    column-gap: 28px;
    height: auto;
  }
  .vp-footer2__col{ flex: 1 1 200px; align-items: center; }
}


/* --- FINAL sticky header override --- */
.vp-top{
  position: sticky !important; /* ensure this wins over earlier 'relative' */
  top: 0;
  z-index: 1000;               /* above iframes/charts */
}

/* Keep each top bar full-bleed without layout shifts */
.vp-bar{
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
}

/* Make sure the container inside the bar stays centered and padded */
.vp-bar > .vp-container{
  width: 100%;
  max-width: var(--vp-container, 1440px);
  margin: 0 auto;
  padding-left: var(--vp-pad-x, 32px);
  padding-right: var(--vp-pad-x, 32px);
}

/* Prevent the status line from wrapping weirdly and allow scroll on tiny phones */
.vp-status{
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}
.vp-status__item{ flex: 0 0 auto; }

/* Ensure the chart iframe never sits above the sticky bar */
.chart{ position: relative; z-index: 0; }

.vp-top.is-stuck{ box-shadow: 0 10px 24px rgba(0,0,0,.25); }

.vp-brand__link {
  color: inherit;
  text-decoration: none;
}
.vp-brand__link:hover {
  text-decoration: underline; /* optional */
}

.vp-fine__link {
  color: inherit;
  text-decoration: none;
}
.vp-fine__link:hover {
  text-decoration: underline; /* optional */
}

/* ===== Brand + footer link look (normal + visited) ===== */
.vp-brand__link,
.vp-fine__link,
.vp-footer2__link {
  color: inherit;
  text-decoration: none;
}
.vp-brand__link:hover,
.vp-fine__link:hover,
.vp-footer2__link:hover {
  text-decoration: underline;
}
.vp-brand__link:visited,
.vp-fine__link:visited,
.vp-footer2__link:visited {
  color: inherit;
}

/* ===== Contact page (single source of truth) ===== */
.contact{
  background: #0b0f10;
  border: 1px solid rgba(0,255,255,.35);
  border-radius: 12px;
  padding: 32px;
  max-width: 900px;     /* wider on desktop */
  width: 100%;
  margin: 0 auto;
}
.contact__title{
  text-align: center;
  margin: 8px 0 24px;
  color: #fff;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: .2px;
}
.contact__form{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.contact__label{ color: #d9d9d9; font-size: 14px; }
.contact__input,
.contact__textarea{
  width: 100%;
  border: 2px solid rgba(0,255,255,.35);
  background: #1f1f1f;
  color: #fff;
  border-radius: 8px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  font-size: 16px;
}
.contact__input:focus,
.contact__textarea:focus{
  border-color: var(--accent, #00FFFF);
  box-shadow: 0 0 0 3px rgba(0,255,255,.15);
}
.contact__btn{
  margin-top: 6px;
  background: #9be3ea;
  color: #000;
  border: none;
  border-radius: 10px;
  padding: 16px;
  font-weight: 700;
  cursor: pointer;
}
.contact__btn:hover{ filter: brightness(1.05); }
.contact__note{ min-height: 20px; font-size: 14px; margin-top: 6px; color: #9be3ea; }
.contact__note[data-status="error"]{ color: #ffb4b4; }

/* Desktop: two-column layout (name/email side by side) */
/* Desktop: two-column layout (name/email side by side) */
@media (min-width: 960px){
  .contact__form{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 12px;
    grid-template-areas:
      "name-label    email-label"
      "name          email"
      "subject-label subject-label"
      "subject       subject"
      "message-label message-label"
      "message       message"
      ".             button";
  }

  /* map labels to areas */
  .contact__label[for="name"]    { grid-area: name-label; }
  .contact__label[for="email"]   { grid-area: email-label; }
  .contact__label[for="subject"] { grid-area: subject-label; }
  .contact__label[for="message"] { grid-area: message-label; }

  /* map inputs/textarea to areas (you already had these) */
  #name    { grid-area: name; }
  #email   { grid-area: email; }
  #subject { grid-area: subject; }
  #message { grid-area: message; }

  .contact__btn { grid-area: button; justify-self: end; width: 220px; }
}

.contact__note[hidden]{ display:none; }
.contact__note{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
}
.contact__note[data-status="ok"]{
  background: #063; color: #d4ffe3; border: 1px solid #1aa36b;
}
.contact__note[data-status="error"]{
  background: #3a0a0a; color: #ffd7d7; border: 1px solid #cc5b5b;
}


/* Mobile tightening */
@media (max-width: 600px){
  .contact{ padding: 16px; border-radius: 8px; }
  .contact__btn{ padding: 14px; }
}


/* PROMOTIONS */
.vp-promotions { padding: 40px 0; }
.vp-promotions__title {
  text-align: center;
  font-size: 24px; font-weight: 700; color: var(--Text, #F5F5F5);
  margin: 0 0 24px;
}

/* Card */
.vp-promo {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 24px;
  align-items: center;
  margin: 16px 0;
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(180deg, #5900B2 0%, #26004D 100%);
}

.vp-promo__art img { width: 96px; height: 96px; object-fit: contain; }

.vp-promo__copy { min-width: 0; }
.vp-promo__headline {
  margin: 0 0 12px;
  color: var(--Gold, #FFB200);
  font: 700 30px/36px Verdana, sans-serif;
}
.vp-promo__winrow { display: flex; gap: 32px; align-items: baseline; margin-bottom: 10px; }
.vp-promo__win { color: var(--Text, #F5F5F5); font: 700 40px/30px Verdana, sans-serif; }
.vp-promo__prizes { color: var(--Text, #F5F5F5); font: italic 400 30px/30px Verdana, sans-serif; }

.vp-promo__bullets {
  margin: 12px 0 0; padding-left: 18px;
  color: var(--Secondary_Text, #AAAAAA);
  font: 400 24px/36px Verdana, sans-serif;
}

/* Right column (timer + buttons) */
.vp-promo__cta { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.vp-promo__timer { display: flex; gap: 12px; justify-content: flex-end; }
.vp-promo__timer span,
.vp-promo__timer strong {
  color: var(--Accent, #00FFFF);
  font: 400 24px/30px Verdana, sans-serif;
}
.vp-promo__timer strong { font-weight: 700; }

/* Buttons */
.vp-btn {
  border: 0; border-radius: 16px; padding: 16px 20px; font-weight: 700;
  cursor: pointer; transition: transform .06s ease;
}
.vp-btn:active { transform: translateY(1px); }

.vp-btn--primary {
  background: var(--Primary, #7F00FF);
  color: var(--Text, #F5F5F5);
  height: 64px;
}
.vp-btn--ghost {
  background: #400080; color: #B266FF; height: 40px;
}

/* Responsive */
@media (max-width: 900px) {
  .vp-promo { grid-template-columns: 72px 1fr; }
  .vp-promo__cta { grid-column: 1 / -1; align-items: center; }
  .vp-promo__timer { justify-content: center; }
  .vp-promo__art img { width: 72px; height: 72px; }
  .vp-promo__win { font-size: 32px; }
  .vp-promo__prizes { font-size: 22px; }
  .vp-promo__bullets { font-size: 18px; line-height: 28px; }
}


/* ---------- Mobile layout for promo cards ---------- */
@media (max-width: 560px) {
  /* comfy page gutters */
  .vp-promotions .vp-container { padding-inline: 12px; }

  /* card becomes a vertical stack */
  .vp-promo {
    flex-direction: column;         /* was row */
    align-items: center;
    gap: 14px;
    padding: 16px;                  /* tighter padding */
    border-radius: 16px;            /* keep the rounded look */
  }

  .vp-promo__art img {
    width: 64px; height: 64px;      /* smaller gift */
    object-fit: contain;
  }

  /* copy block centers; headline shrinks */
  .vp-promo__copy {
    text-align: center;
    width: 100%;
  }
  .vp-promo__headline {
    font-size: 22px;
    line-height: 28px;
    margin: 0 0 6px;
  }

  /* "Win" row stacks instead of side-by-side */
  .vp-promo__winrow {
    display: flex;
    flex-direction: column;         /* was row */
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
  }
  .vp-promo__win    { font-size: 24px; line-height: 28px; }
  .vp-promo__prizes { font-size: 16px; line-height: 22px; font-style: italic; }

  /* bullets: left-align, smaller, tighter */
  .vp-promo__bullets {
    text-align: left;
    padding-left: 18px;             /* keep disc bullets */
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 22px;
  }

  /* CTA column centers; timer + buttons stack */
  .vp-promo__cta {
    width: 100%;
    align-items: center;
    text-align: center;
    gap: 10px;
  }
  .vp-promo__timer {
    justify-content: center;
    gap: 8px;
  }
  .vp-promo__timer span,
  .vp-promo__timer strong {
    font-size: 16px; line-height: 22px;
  }

  /* full-width, thumb-friendly buttons */
  .vp-btn--primary,
  .vp-btn--ghost {
    width: 100%;
    max-width: 260px;
    height: 44px;
    border-radius: 12px;
    font-size: 16px;
    line-height: 22px;
  }
}

@media (max-width: 360px) {
  .vp-promo { border-radius: 12px; }
}

/* Ultra-small screens: 380↓ */
@media (max-width: 380px) {
  .vp-promotions .vp-container { padding-inline: 8px; }

  .vp-promo {
    padding: 12px;
    border-radius: 14px;
    gap: 10px;
  }

  .vp-promo__art img { width: 52px; height: 52px; }

  .vp-promo__copy { text-align: center; max-width: 100%; }
  .vp-promo__headline {
    font-size: 20px;       /* was larger */
    line-height: 24px;
    margin: 0 0 6px;
    word-break: break-word;
    hyphens: auto;
  }

  .vp-promo__winrow {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
  }
  .vp-promo__win    { font-size: 22px; line-height: 24px; }
  .vp-promo__prizes {
    font-size: 15px; line-height: 20px;
    white-space: normal;    /* ensure wrap */
  }

  .vp-promo__bullets {
    font-size: 13px; line-height: 20px;
    padding-left: 16px;     /* smaller indent */
    margin: 6px 0 2px;
    text-align: left;
  }

  .vp-promo__cta { gap: 8px; }
  .vp-promo__timer { gap: 6px; justify-content: center; }
  .vp-promo__timer span,
  .vp-promo__timer strong { font-size: 14px; line-height: 20px; }

  .vp-btn--primary,
  .vp-btn--ghost {
    width: 100%;
    max-width: 240px;
    height: 40px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 20px;
  }
}

/* Super-narrow: 330↓ — one more nudge */
@media (max-width: 330px) {
  .vp-promo__headline { font-size: 18px; line-height: 22px; }
  .vp-promo__win      { font-size: 20px; line-height: 22px; }
  .vp-promo__prizes   { font-size: 14px; line-height: 18px; }
  .vp-promo__bullets  { font-size: 12.5px; line-height: 18px; }
}


/* --- Promo Slider --- */
.vp-promo-slider { margin: 24px 0; }


/* Make each promo card comfy on small screens */
@media (max-width: 480px) {
  .vp-promo { padding: 12px; }
  .vp-promo__copy .vp-promo__headline { font-size: 1.1rem; }
  .vp-promo__bullets { margin: 8px 0; }
  .vp-promo__cta { margin-top: 8px; }
}

/* Elegant countdown pill */
.vp-countdown{
  --bg: rgba(0,0,0,0.55);
  --fg: #fff;
  --ring: rgba(255,255,255,0.18);
  --pct: 0;                 /* updated by JS: 0..100 */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
  position: relative;
  line-height: 1;
  user-select: none;
}

/* Clock glyph */
.vp-countdown::before{
  content: "\23F1";;
  font-size: 14px;
  opacity: 0.9;
}

/* Progress bar (subtle) */
.vp-countdown::after{
  content: "";
  position: absolute;
  left: 4px; right: 4px; bottom: 4px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, #fff, #fff);
  transform-origin: left center;
  transform: scaleX(calc(var(--pct) / 100));
  opacity: 0.65;
}

/* If finished, style down */
.vp-countdown.is-done{
  opacity: 0.75;
}


/* ===== Promo slider controls (clean) ===== */

/* Bottom-center group:  prev • dots • next  */
.vp-promo-controls{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 14px;                 /* constant arrow↔dots spacing */
  z-index: 6;
  pointer-events: none;      /* wrapper never blocks slide */
}
.vp-promo-controls > *{ pointer-events: auto; }

/* Arrows (flanking the dots) */
.vp-promo-controls .vp-promo-nav{
  /* hard reset any older absolute/side styles */
  position: static !important;
  left: auto !important; right: auto !important; top: auto !important;
  transform: none !important;

  background: transparent;
  border: 0;
  color: #cfcfd6;           /* light grey on purple */
  width: 28px; height: 28px;/* comfy hit area */
  display: grid; place-items: center;
  line-height: 1;
  cursor: pointer; user-select: none;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
  transition: opacity .16s ease, transform .16s ease;
}
.vp-promo-controls .vp-promo-nav:hover,
.vp-promo-controls .vp-promo-nav:focus-visible{
  opacity: 1; transform: scale(1.06); outline: none;
}

/* Dots (centered row) */
.vp-promo-controls .vp-promo-dots{
  display: inline-flex; align-items: center; gap: 10px;
}
.vp-promo-controls .vp-promo-dots button{
  width: 8px; height: 8px;
  border: 0; border-radius: 999px;
  background: rgba(255,255,255,.36);
  padding: 0; cursor: pointer;
  /* no size change on active → group width stays stable */
  transition: background .16s ease, opacity .16s ease, box-shadow .16s ease;
}
.vp-promo-controls .vp-promo-dots button[aria-selected="true"]{
  background: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,.25);
}

/* Responsive tweaks */
@media (max-width: 768px){
  .vp-promo-controls{ bottom: 10px; gap: 12px; }
  .vp-promo-controls .vp-promo-nav{ width: 26px; height: 26px; }
  .vp-promo-controls .vp-promo-dots{ gap: 8px; }
  .vp-promo-controls .vp-promo-dots button{ width: 7px; height: 7px; }
}
@media (max-width: 420px){
  .vp-promo-controls{ bottom: 8px; gap: 10px; }
  .vp-promo-controls .vp-promo-nav{ width: 24px; height: 24px; }
}

/* Show exactly one slide; hide the rest */
.vp-promo-viewport {
  position: relative;
  overflow: hidden;   /* <-- this is the key */
  touch-action: pan-y;
}

.vp-promo-track {
  display: flex;
  will-change: transform;
  transition: transform 360ms ease-in-out;
}

.vp-promo-track > .vp-promo {
  flex: 0 0 100%;     /* each slide = full viewport width */
  max-width: 100%;
}


.disabled-link {
  pointer-events: none; /* prevents clicking */
  opacity: 0.5;         /* visual feedback */
  cursor: not-allowed;
}


.mile-card__stack{
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  flex: 1;                               /* let content define height */
}

.mile-card__list{
  margin: 0;
  padding-left: 20px;
  color: var(--Text, var(--text, #F5F5F5));
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}


@media (max-width: 400px){
  .mile-card__list{
    font-size: 14px;
    line-height: 1.5;
    gap: 6px;
  }
}
@media (max-width: 1100px){
  .miles__row{
    grid-template-columns: 1fr;          /* one per row */
    gap: 12px;
  }
  .mile-card{ padding: 16px; }           /* you already use this scale on small phones */
}

/* Remove side padding on small phones */
@media (max-width: 450px){
  .vp-container{ padding-inline: 0 !important; }
}

.cta { display:grid; place-items:center; gap:12px; padding:16px; }
.cta__head { display:flex; flex-direction:column; align-items:center; gap:4px; }
.cta__subtitle{
  color:#fff; opacity:.85; margin:0; text-align:center;
  font: 16px/24px Verdana, Geneva, Tahoma, sans-serif;
}


/* Responsive tweak */
@media (max-width:600px){
  .cta__title{ font-size:20px; line-height:28px; }
  .cta__subtitle{ font-size:14px; line-height:20px; }
}