/* Mirrorpip: Mobile & responsive overrides (Final, deduplicated)
   Include this AFTER your existing styles.css
   File: styles.mobile.final.css
*/

/* ---------- Universal responsive setup ---------- */
html { scroll-behavior: smooth; }
img, video { max-width: 100%; height: auto; }
section, div { box-sizing: border-box; }

/* Page containers (long-form & content pages) */
.container,
.eula-container,
.help-container,
.help-center-container,
.apis-container,
.conflict-policy-container,
.privacy-policy-container,
.declaration-consent-container {
  padding: 2rem 4rem;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}
@media (max-width: 1024px) {
  .container,
  .eula-container,
  .help-container,
  .help-center-container,
  .apis-container,
  .conflict-policy-container,
  .privacy-policy-container,
  .declaration-consent-container { padding: 1.5rem 2rem; }
}
@media (max-width: 768px) {
  .container,
  .eula-container,
  .help-container,
  .help-center-container,
  .apis-container,
  .conflict-policy-container,
  .privacy-policy-container,
  .declaration-consent-container { padding: 1rem; }
  h1 { font-size: 1.8rem; line-height: 2.2rem; }
  h2 { font-size: 1.4rem; line-height: 2rem; }
  p, li { font-size: 1rem; line-height: 1.55rem; }
  ul { padding-left: 1.25rem; }
}

/* ---------- Header / Nav ---------- */
.header {
  position: sticky; top: 0; width: 100%; z-index: 1000;
  background: var(--bg-primary-dark, #000);
}
.header-container {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
}
.left-icons { display: flex; align-items: center; gap: 8px; }

/* Logo sizes: desktop 60x60, mobile 40x40 */
.left-icons img, .header-logo, .logo { width: 60px; height: 60px; object-fit: contain; }
@media (max-width: 768px) {
  .left-icons img, .header-logo, .logo { width: 40px; height: 40px; }
}

/* Hide right buttons on mobile (Login, Signup, Theme) */
.header-right-buttons { display: flex; align-items: center; gap: 12px; }
@media (max-width: 768px) { .header-right-buttons { display: none !important; } }

/* Tabs (desktop) */
.header-tabs { display: flex; gap: 1.5rem; align-items: center; }
.header-tabs a { font-size: 15px; text-decoration: none; color: #fff; opacity: .9; transition: opacity .3s; }
.header-tabs a:hover, .header-tabs a.active { opacity: 1; }

/* Mobile: inline menu button (40x40), perfect vertical centering */

.mobile-menu-btn:hover { opacity: .85; }

@media (max-width: 1024px) { .header { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 768px) {
  .header-container { position: relative; padding: 8px 16px; }
  .mobile-menu-btn:hover {
    opacity: 0.85;
  }
  /* Keep inline spacing with logo */
  .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  /* Collapsed dropdown menu */
  .header-tabs {
    display: none; flex-direction: column;
    background: var(--bg-primary-dark, #0b0d12);
    position: absolute; top: 60px; right: 10px;
    padding: 1rem; border-radius: 12px;
    border: 1px solid rgba(255,255,255,.1);
    z-index: 1001; box-shadow: 0 6px 12px rgba(0,0,0,.25);
  }
  body:not(.dark) .header-tabs {
    background: var(--bg-primary-light,#fff);
    border: 1px solid var(--border-primary-light,#d5d7da);
  }
  .header-tabs.show { display: flex; }
}

/* --- Marquee below header (full width, no horizontal padding/margin) --- */
.crypto-marquee.sticky-marquee {
  position: sticky;
  top: 56px;
  z-index: 999;
  border-top: 1px solid var(--border-primary-dark, rgba(255,255,255,.1));
  border-bottom: 1px solid var(--border-primary-dark, rgba(255,255,255,.1));
  width: 100%;
  margin: 0;
  padding: 0;
}

@media (max-width: 768px) {
  .crypto-marquee.sticky-marquee {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: 13px;
    width: 100%;
    height: 38px;
  }

  .crypto-item {
    font-size: 12px !important;
    margin-right: 30 !important;   /* removes horizontal gaps */
  }
}


/* ---------- Banner / Hero ---------- */
.banner-carousel {
  position: relative; overflow: hidden; width: 100%; height: 100vh; background: #000;
}
.carousel-wrapper { width: 100%; height: 100%; position: relative; }
.carousel-track { display: flex; width: 200%; transition: transform .8s ease-in-out; }
/* .carousel-slide {
  flex: 0 0 100%; background-size: cover; background-position: center;
  position: relative; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 16px;
} */
.page-section { max-width: 640px; margin: 0 auto; z-index: 2; text-align: center; }
.page-title { font-weight: 800; font-size: clamp(28px, 5vw, 64px); line-height: 1.15; letter-spacing: -0.5px; margin: 28px 0 8px; text-align: left; }
.page-sub-title { font-size: clamp(14px, 2.4vw, 20px); line-height: 1.6; color: rgba(255,255,255,.85); margin: 0 0 18px;  margin-inline: auto;  text-align: left;}
.mirroring-btn {
  background: var(--bg-brand-solid,#9de600); color: #0b0d12; border: none; border-radius: 16px;
  padding: 12px,18px,12px, 18px; font-weight: 700; font-size: 1rem;
  box-shadow: 0 6px 20px rgba(157,230,0,.25);
  width: auto; min-width: 240px; margin: 6px auto 14px; z-index: 2; cursor: pointer;
}
.download-app-section { display:flex; gap: 14px; justify-content:center; align-items:center; margin-top: 6px; z-index: 2; }
.download-app-section img { height: 40px; width:auto; }
.banner-bottom-image { position: relative; width: 100%; left:0; transform:none; bottom:0; margin-top: 16px; z-index: 1; }
.banner-bottom-image img { display:block; width:100%; height:auto; }
@media (max-width: 1024px) { .banner-carousel { height: 80vh; } }
@media (max-width: 768px)  { .banner-carousel { height: 66vh; } }
@media (max-width: 480px)  {
  .banner-carousel { height: 60vh; }
  .page-title { font-size: 22px; }
  .page-sub-title { font-size: 14px; }
  .mirroring-btn { padding: .75rem 1.5rem; font-size: .9rem; }
}

/* ---------- Stats (single column on mobile) ---------- */
@media (max-width: 1200px) { .stats-container { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .stats-container { display:block; max-width: 640px; margin: 0 auto; padding-inline: 20px; }
  .stat-card {
    display:flex; align-items:center; gap:14px;
    min-height:auto; padding:16px 0;
    background: transparent; border:none;
    border-top: 1px solid var(--border-secondary-dark, #22262f);
  }
  .stat-hover-top-line{ display:none; }
  .stat-icon img{ width:28px; height:28px; }
  .stat-title{ font-size:13px; color: rgba(255,255,255,.7); margin-bottom:2px; }
  .stat-value{ font-size:24px; line-height:28px; color:#A6F900; }
}

/* ---------- How it Works / Features ---------- */
.how-steps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 768px) {
  .how-steps-grid { grid-template-columns: 1fr; }
  .how-title { font-size: 40px; line-height: 46px; }
}
.features-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 1024px) { .features-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .features-row { grid-template-columns: 1fr; } }

/* ---------- Planetary circle / image wrapper ---------- */
@media (max-width: 1024px) { .image-wrapper { height: 70vh; padding-left: 24px; padding-right: 24px; } }
@media (max-width: 768px) {
  .image-wrapper { height: 42vh; padding-left: 12px; padding-right: 12px; }
  .blur-image-part { width: 92%; }
}

/* ---------- Leaders (cards, filters, video) ---------- */
.card-scroll { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px; scroll-behavior: smooth; }
.card-scroll::-webkit-scrollbar { display: none; }
@media (max-width: 1024px) { .leaders-header p { max-width: 100%; } }
@media (max-width: 768px) {
  .leaders-section { padding-left: 12px; padding-right: 12px; }
  .leaders-header { flex-direction: column; gap: 12px; margin-right: 0; }
  .leaders-heading { font-size: 32px; line-height: 36px; margin: 0; }
  .filters { position: static; margin-top: 8px; gap: 12px; }
  .normal-filter span { padding: 6px 10px; font-size: 13px; }
  .become-leader-container { flex-direction: column; gap: 16px; padding: 24px; text-align: center; }
  .sign-up-button { width: 90%; max-width: 320px; }
  .video-container video { height: auto; }
}

/* ---------- Footer ---------- */
.footer-top, .footer-links { display: flex; gap: 24px; }
.footer-col { flex: 1 1 0; }
@media (max-width: 1024px) { .footer-top, .footer-links { gap: 16px; } }
@media (max-width: 768px)  {
  .footer-top, .footer-links { flex-direction: column; text-align: center; }
  .footer-col { width: 100%; }
  .footer-app-row { flex-direction: column; align-items: center; gap: 16px; }
  .footer { padding-left: 16px; padding-right: 16px; }
}

/* ---------- Utilities ---------- */
.hide-on-mobile { display: initial; }
@media (max-width: 768px) { .hide-on-mobile { display: none !important; } }
.show-on-mobile { display: none; }
@media (max-width: 768px) { .show-on-mobile { display: initial; } }
/* ---------- FINAL OVERRIDE: Mobile logo & menu sizing ---------- */
@media (max-width: 768px) {
  .left-icons img.logo,
  .left-icons img,
  .header-logo,
  .logo {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain;
  }

  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;   /* bigger, touch-friendly */
    height: 48px;
    background: url('/assets/images/mobile-menu.svg') no-repeat center / 30px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    z-index: 1101;
  }
}
/* ---------- Global horizontal padding removal ---------- */
@media (max-width: 768px) {
  /* Remove horizontal padding from main containers */
  .container,
  .eula-container,
  .help-container,
  .help-center-container,
  .apis-container,
  .conflict-policy-container,
  .privacy-policy-container,
  .declaration-consent-container,
  .features-section,
  .stats-container,
  .footer,
  section,
  main,
  body {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Ensure banner/hero also uses full width */
  .banner-carousel,
  .carousel-slide,
  .banner-bottom-image,
  .page-section {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Remove gaps around footer and header */
  .header-container,
  .footer-top,
  .footer-links,
  .footer-app-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* ---------- Text logo sizing fix ---------- */

/* Desktop */
.left-icons img.logo-text {
  height: 48px;        /* readable and proportional next to 60x60 logo */
  width: auto;
  object-fit: contain;
}

/* Mobile */
@media (max-width: 768px) {
  .left-icons img.logo-text {
    height: 48px !important;   /* proportional to 40x40 main logo */
    width: auto !important;
    object-fit: contain;
  }

  /* Keep logos + menu perfectly aligned */
  .left-icons {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
/* ---------- Keep text logo same size on all screens ---------- */
.left-icons img.logo-text {
  height: 48px !important;   /* keep desktop height */
  width: auto !important;
  object-fit: contain;
}

@media (max-width: 768px) {
  .left-icons img.logo-text {
    height: 48px !important;  /* same as desktop */
    width: auto !important;
  }

  /* ensure alignment stays perfect */
  .left-icons {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
/* ---------- Keep text logo same as desktop on mobile ---------- */
@media (max-width: 768px) {
  .left-icons img:last-child {
    width: 108px !important;
    height: 64px !important;
    margin-left: 8px !important;
    object-fit: contain;
  }
}
/* ===== Fix banner overlap on mobile: stack + auto height ===== */
@media (max-width: 768px) {

  /* let the whole section grow; kill 100vh */
  .banner-carousel,
  .carousel-wrapper {
    height: auto !important;
  }

  /* stop horizontal slider layout on mobile */
  .carousel-track {
    display: block !important;
    width: 100% !important;
    transform: none !important;
  }

  /* slides become normal blocks */
  .carousel-slide {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
   
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: visible !important;
  }

  /* text block should not be absolutely positioned */
  .page-section {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    max-width: 640px;
    width: 100%;
    margin: 0 auto 16px !important;
    text-align: center;
    z-index: auto !important;
  }

  /* heading + subheading sizes */
  .page-title {
    font-size: 36px;
    line-height: 44px;
    margin: 0 0 10px;
    letter-spacing: -2%;
     text-align: left;
  }

  /* CTA should be in normal flow */
  .mirroring-btn {
    position: static !important;
    margin: 0 auto 18px !important;
    width: 80%;
    height: 50px;
    max-width: 191px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 40px !important; 
  }

  /* download buttons in normal flow, centered */
  .download-app-section {
    position: static !important;
    display: flex !important;
    justify-content: space-evenly;
    align-items: center;
    gap: 16px;
    margin: 0 auto 20px !important;
    padding: 0 !important;
  }
  .download-app-section img {
    width: 130px;
    height: auto;
  }

  /* banner illustration LAST, full width, not absolute */
  .banner-bottom-image {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    z-index: auto !important;
  }
  .banner-bottom-image img {
    display: block;
    width: 100%;
    height: auto;
  }
}
/* ---------- Hide "Automate Your Trades" slide on mobile ---------- */
@media (max-width: 768px) {
  /* Assuming it's the second .carousel-slide in the banner */
  .banner-carousel .carousel-slide:nth-child(2) {
    display: none !important;
  }
}

/* ---------- Fix: Remove unwanted padding/margin in banner bottom image ---------- */
@media (max-width: 768px) {
  /* Remove any padding/margin from the slide and wrapper */
  .carousel-slide,
  .banner-carousel,
  .carousel-wrapper,
  .carousel-track {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Tighten the banner bottom image itself */
  .banner-bottom-image {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .banner-bottom-image img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ---------- Mobile: stack vertically but still left-aligned ---------- */
/* ---------- Stats section: left-aligned for mobile ---------- */
@media (max-width: 768px) {
  .stats-section {
    text-align: left !important;
    padding: 0 20px !important;
    border-bottom: 1px solid var(--border-secondary-dark, #22262f);
    border-top: 1px solid var(--border-secondary-dark, #22262f);
  }

  .stats-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important; /* left-align items */
    justify-content: flex-start;
    padding: 0 !important;
    margin: 0 auto;
    width: 100%;
    
  }

  .stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    justify-content: flex-start;
    width: 100%;
    border-top: 1px solid var(--border-secondary-dark, #22262f);
    padding: 20px 0;
    padding-left: 20px;
  }

  .stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    flex-shrink: 0;
  }

  .stat-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .stat-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
  }

}
/* --- WHY CHOOSE: responsive tweaks --- */

/* Tablet tweaks */
@media (max-width: 1024px) {
  .section-title {
    font-size: 44px;
    line-height: 56px;
  }
  .section-subtitle {
    font-size: 16px;
    line-height: 24px;
  }
  .why-cards-grid {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Mobile layout */
@media (max-width: 768px) {
  .why-choose-section {
    padding: 32px 20px;      /* reduce big vertical + remove wide gutters */
    text-align: center;      /* keep centered; change to left if you prefer */
  }

  .section-title {
    font-size: 36px;   
    font-weight: 400;      /* was 60px */
    line-height: 44px;       /* was 72px */
    letter-spacing: -2px; 
    padding-left: 20px;
    padding-right: 20px;
  }

  .section-subtitle {
    font-size: 16px;         /* was 18px */
    line-height: 24px;       /* was 28px */
    margin-bottom: 60px;
     padding-left: 20px;
    padding-right: 20px;
  }

  .why-cards-grid {
    grid-template-columns: 1fr;      /* stack cards in one column */
    gap: 16px;                        /* comfy spacing between cards */
    max-width: 100%;
    padding: 0 0;                     /* kill inner grid padding */
    padding-left: 0 !important;       /* override the 120px desktop padding */
    padding-right: 0 !important;
    margin: 0;                        /* flush with edges (you asked for no horiz padding) */
    justify-content: stretch;
  }

  .full-row {
    grid-column: auto;                /* no need to span; single column now */
  }

  .why-card-img {
    justify-content: center;
  }

  .why-card-img img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* Optional: ultra-small phones */
@media (max-width: 380px) {
  .section-title { font-size: 28px; line-height: 36px; }
  .section-subtitle { font-size: 13px; line-height: 20px; }
}
/* --- TOP LEADERS: Mobile view --- */
@media (max-width: 768px) {
  /* Heading */
  .leaders-heading {
    font-size: 36px;
    line-height: 44px;
    font-weight: 400;
    letter-spacing: -0.2px;
    margin: 0 0 12px 0;      /* remove desktop right offset */
    text-align: center;   
    padding-left: 20px;   /* change to left if you prefer */
  }
   .leaders-heading p {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: 0;
    text-align: center;   
    padding-left: 20px;   /* change to left if you prefer */
  }

  /* Scrollable card row */
  .card-scroll {
    display: flex !important;         /* was none */
    gap: 12px;
    overflow-x: auto;
    padding-left: 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .card-scroll::-webkit-scrollbar { height: 3px; }
  .card-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 2px; }

  /* Cards */
  .leader-card {
    width: 86vw;                      /* readable width on phones */
    max-width: 360px;
    padding: 16px;
    gap: 10px;
    scroll-snap-align: start;
    flex-shrink: 0;
    border-radius: 20px;
  }

  /* Header & avatar */
  .leader-header { gap: 10px; }
  .leader-avatar { width: 48px; height: 48px; }
  .leader-status { left: 30px; bottom: 2px; } /* adjust for smaller avatar */

  .leader-info { margin-left: 10px; }
  .leader-name  { font-size: 15px; line-height: 22px; }
  .leader-followers { font-size: 12px; line-height: 18px; }

  /* Card menu icon (pull inside the card) */
  .menu-icon {
    right: 0;
    top: 0;
    position: absolute;
    width: 20px; height: 20px;
  }

  /* Dividers */
  .section-divider { width: 100%; margin: 8px 0; }

  /* Profit section */
  .profit-section {
    gap: 12px;
    margin-top: 8px;
    justify-content: space-between;
    align-items: center;
  }
  .profit-chart img { width: 64px; height: 64px; }
  .profit-text h2 { font-size: 16px; line-height: 24px; margin: 0; }
  .profit-change { margin-top: 8px; font-size: 13px; line-height: 18px; }

  /* Stats row inside card */
  .stats-row {
    gap: 12px;
    align-items: center;
    justify-content: space-between;
  }
  .stat-header { gap: 8px; }
  .stat h3 { font-size: 14px; line-height: 20px; margin-top: 8px; text-align: left; }
  .leader-stat-value { font-size: 16px; line-height: 22px; margin-left: 8px; color: var(--text-primary-dark); }
  .aum { padding-left: 0; }

  /* Progress bars */
  .progress-bar { width: 120px; height: 6px; margin-bottom: 8px; }
  .winrate p { margin-bottom: 12px; }
}

/* ---- If you prefer stacked cards (no horizontal scroll), uncomment:
@media (max-width: 768px) {
  .card-scroll {
    display: flex !important;
    flex-direction: column;
    overflow: visible;
    gap: 12px;
    padding: 0 16px 12px;
  }
  .leader-card { width: 100%; max-width: none; }
}
*/
/* ========== Mobile Drawer ========== */
@media (max-width: 768px) {
  /* Prevent page scroll when drawer is open */
  body.drawer-open { overflow: hidden; }

  .mobile-drawer {
    position: fixed;
    inset: 0;                  /* top/right/bottom/left: 0 */
    z-index: 1500;
    pointer-events: none;      /* blocked until open */
  }

  .drawer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5);
    opacity: 0;
    transition: opacity .25s ease;
  }

  .drawer-panel {
    position: absolute;
    top: 0; right: 0;
    height: 100%;
    width: min(86vw, 340px);
    background: var(--bg-primary-dark, #0b0d12);
    border-left: 1px solid rgba(255,255,255,.08);
    transform: translateX(100%);
    transition: transform .28s ease;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .drawer-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  justify-content: flex-start;
}

  body:not(.dark) .drawer-panel {
    background: var(--bg-primary-light, #fff);
    border-left: 1px solid var(--border-primary-light, #e5e7eb);
  }

  .drawer-close {
    align-self: flex-end;
    background: none; border: 0; color: var(--text-primary-dark, #fff);
    font-size: 20px; line-height: 1; cursor: pointer;
  }
  body:not(.dark) .drawer-close { color: var(--text-primary-light, #0b0d12); }

  .drawer-nav { list-style: none; margin: 8px 0 0; padding: 0; }
  .drawer-nav a {
    display: block;
    padding: 12px 8px;
    text-decoration: none;
    color: var(--text-primary-dark, #fff);
    border-radius: 10px;
  }
  .drawer-nav a:hover { background: rgba(255,255,255,.08); }
  body:not(.dark) .drawer-nav a { color: var(--text-primary-light, #0b0d12); }
  body:not(.dark) .drawer-nav a:hover { background: rgba(2,6,23,.05); }

  /* Open state */
  .mobile-drawer.is-open { pointer-events: auto; }
  .mobile-drawer.is-open .drawer-overlay { opacity: 1; }
  .mobile-drawer.is-open .drawer-panel { transform: translateX(0); }
}
@media (max-width: 768px) {
  .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .drawer-close {
    background: none;
    border: none;
    color: var(--text-primary-dark, #fff);
    font-size: 22px;
    cursor: pointer;
  }
  body:not(.dark) .drawer-close {
    color: var(--text-primary-light, #0b0d12);
  }

  .drawer-theme-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .drawer-theme-btn img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }
}

/* Ensure the menu button is visible on mobile (you already have this) */
@media (max-width: 768px) {
  .mobile-menu-btn {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 48px; height: 48px;
    background: url('/assets/images/mobile-menu.svg') no-repeat center / 30px 30px;
    border: none; border-radius: 8px; cursor: pointer;
  }
}
@media (max-width: 768px) {
  .mobile-menu-btn { position: relative; z-index: 2001; pointer-events: auto; }
  .header { z-index: 2000; }                 /* header below button but above page */
  .mobile-drawer { z-index: 1500; }          /* overlay/panel appear when open */
}
@media (max-width: 768px) {
  /* Panel layout */
  .drawer-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 20px 24px;
    background: #0b0d12;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px 0 0 16px;
  }

  body:not(.dark) .drawer-panel {
    background: #ffffff;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
  }

  /* Header (theme + close) */
  .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .drawer-theme-btn, .drawer-close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: background 0.25s;
  }

  .drawer-theme-btn:hover, .drawer-close:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  .drawer-theme-btn img {
    width: 22px;
    height: 22px;
  }

  /* Navigation */
  .drawer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
  }

 

  .drawer-nav a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    font-weight: 400;
    position: relative;
    padding-bottom: 6px;
    transition: color 0.3s;
  }

  .drawer-nav a:hover {
    color: #9de600;
  }



  /* Footer with app badges */
  .drawer-footer {
    text-align: center;
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 20px;
    padding: 20px 10px;
  }

  .drawer-footer p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-bottom: 16px;
  }

  .drawer-apps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .drawer-apps img {
    width: 150px;
    height: auto;
  }

  /* Light theme adjustments */
  body:not(.dark) .drawer-nav a {
    color: #0b0d12;
  }

  body:not(.dark) .drawer-footer {
    background: rgba(0, 0, 0, 0.04);
  }

  body:not(.dark) .drawer-footer p {
    color: #0b0d12;
  }
}

/* Desktop: completely hide the mobile menu button */
.mobile-menu-btn{
  display:none;              /* no dot on desktop */
  border:0;
  background:none;
  padding:0;
  line-height:0;
  font-size:0;
  appearance:none;
}

/* === Drawer: final stacking + layout overrides (paste at end) === */
@media (max-width:768px){

  /* Header stays above page, below drawer */
  .header{ z-index:1500; }
  .mobile-menu-btn{ z-index:1600; }   /* keeps the icon tappable before open */

  /* Drawer sits above everything */
  .mobile-drawer{
    position:fixed; inset:0; z-index:4000;
    pointer-events:none;          /* disabled until open */
  }
  .mobile-drawer.is-open{ pointer-events:auto; }

  .mobile-drawer .drawer-overlay{
    position:absolute; inset:0;
    background:rgba(0,0,0,.55);
    opacity:0; transition:opacity .25s ease;
    z-index:4001;
  }
  .mobile-drawer.is-open .drawer-overlay{ opacity:1; }

  .mobile-drawer .drawer-panel{
    position:absolute; top:0; right:0; height:100%;
    width:min(86vw,360px);
    transform:translateX(100%);
    transition:transform .28s ease;
    z-index:4002;

    /* visual */
    background:#0b0d12;
    border-left:1px solid rgba(255,255,255,.08);
    border-radius:24px 0 0 24px;
    padding:20px 22px;

    display:flex; flex-direction:column; justify-content:space-between;
  }
  body:not(.dark) .mobile-drawer .drawer-panel{
    background:#fff; border-left:1px solid rgba(0,0,0,.08);
  }
  .mobile-drawer.is-open .drawer-panel{ transform:translateX(0); }

  /* Header row inside drawer */
  .drawer-header{
    display:flex; 
    align-items:center; 
    justify-content:space-between;
    padding-top: 54px;
    margin-bottom:28px;
  }
  body:not(.dark) .drawer-header{ border-bottom:1px solid rgba(11,13,18,.1); }

  .drawer-theme-btn,.drawer-close{
    width:40px;
    height:40px;
    display:flex;
    align-items:center; 
    justify-content:center;
    border: 1px solid var(--border-primary-dark);
    border-radius:16px; cursor:pointer;
    background:var(--bg-primary-dark);
    transition:background .2s;
  }
  .drawer-theme-btn:hover,.drawer-close:hover{ background:rgba(255,255,255,.15);border: 1px solid var(--bg-brand-solid); }
  body:not(.dark) .drawer-theme-btn,
  body:not(.dark) .drawer-close{ background:rgba(0,0,0,.06); }
  .drawer-theme-btn img{ width:22px; height:22px; }

  /* Links + active lime underline */
  .drawer-nav{ 
    list-style:none;
     margin:0;
      padding:0;
       display:flex;
        flex-direction:column;
        align-items: flex-end;   /* push items to the right */
    text-align: right; 
         gap:18px; }
         .drawer-nav li { width: 100%; }       /* full row tap area */
  .drawer-nav a {
    display: inline-block;              /* so text-align works cleanly */
    padding: 10px 2px 10px 0;           /* a little right padding */
  }
  .drawer-nav a{
    color:rgba(255,255,255,.9); text-decoration:none; font-size:16px;
    padding:10px 2px; position:relative; transition:color .2s;
  }
  .drawer-nav a:hover{ color:#9de600; }
  body:not(.dark) .drawer-nav a{ color:#0b0d12; }

  /* App card */
  .drawer-footer{
    background:var(--bg-primary-dark);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    padding:20px 16px; text-align:center;
  }
  .drawer-footer p{ 
    color:rgba(255,255,255,.85); 
    font-size:16px; 
    margin:0 0 14px;
    line-height: 24px;
    font-weight: 500;
   }
  .drawer-apps{ display:flex; flex-direction:column; gap:20px; align-items:center; }
  .drawer-apps img{ width:135px; height:auto; }
  body:not(.dark) .drawer-footer{ background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.08); }

  /* Keep the hamburger inline after the text logo */
  .mobile-menu-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:48px; height:48px; border-radius:10px; border:0; cursor:pointer;
    background:url('/assets/images/mobile-menu.svg') no-repeat center / 28px 28px;
    position:static;     /* inline — not absolute */
  }
}

/* === Single green separator between Mirror Strategy and Help === */
@media (max-width: 768px) {
  /* Target the <li> that comes right before Help */
  .drawer-nav li:nth-child(2) {
    border-bottom: 2px solid var(--bg-brand-solid);
    margin-bottom: 6px;
    padding-bottom: 6px;
  }



  .drawer-nav a {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    text-decoration: none;
  }

  .drawer-nav a:hover {
    color: #9de600;
  }

  /* Light theme variant */
  body:not(.dark) .drawer-nav li:nth-child(2) {
    border-bottom: 2px solid var(--bg-brand-solid)
  }
}
/* =========================
   NAV: right align + separator
   ========================= */
.header-tabs {
  justify-content: center; /* align right on desktop */
}

/* green separator after Strategy */
.header-tabs .tab[data-page="strategy"] {
  position: relative;
  padding-right: 20px;   /* space before the separator */
  margin-right: 12px;    /* space after the separator */
}
.header-tabs .tab[data-page="strategy"]::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: var(--bg-brand-solid); /* your green token */
  border-radius: 1px;
  opacity: 0.9;
}

/* =========================
   MIRROR LEADERS: Mobile layout
   ========================= */
@media (max-width: 768px) {
  .mirror-leaders-section {
    padding-left: 20px !important; 
  }

  /* Headings stop using absolute positioning */
  .top-rated-leaders-text,
  .most-trusted-leaders-text {
    position: static;
    margin: 16px 0 10px;
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
    color: var(--text-tertiary-dark);
  }

  /* Filters row reflows nicely */
  .filters {
    position: static;
    margin: 6px 0 14px;
    display: flex;
    align-items: center;
    gap: 10px 12px;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .normal-filter {
    display: flex;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--border-primary-dark);
    order: 1;
    flex: 1 1 auto;
  }
  .normal-filter span {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 12px;
  }

  .dropdown {
    order: 2;
    margin-left: auto;
  }
  .dropbtn {
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 10px;
  }

  /* Card rows: comfy horizontal scroll */
  .card-scroll {
    display: flex !important;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin: 0 -16px;       /* full-bleed feel */
    padding-left: 20px !important;    /* align to content */
    padding-bottom: 12px;
  }
  .card-scroll::-webkit-scrollbar { height: 3px; }
  .card-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.25);
    border-radius: 2px;
  }

  /* Individual cards inside scroller */
  .top-rated-leaders-container .leader-card,
  .most-trusted-leaders-container .leader-card {
    scroll-snap-align: start;
    flex: 0 0 84vw;
    max-width: 360px;
    min-width: 280px;
    padding: 16px;
    border-radius: 20px;
  }

  /* Spacing fixes around sections */
  .top-rated-leaders-container { margin-top: 8px; }
  .most-trusted-leaders-text   { margin-top: 20px; }
  .most-trusted-leaders-container { margin-top: 10px; }

  /* Tighter internals for smaller screens */
  .menu-icon { right: 0; top: 8px; }  /* avoid overflow from right:-96px */
  .profit-section { gap: 12px; }
  .profit-chart img { width: 64px; height: 64px; }
  .stats-row { gap: 12px; }
  .progress-bar { width: 120px; }

  /* CTA block stacks */
  .become-leader-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 20px;
    margin-top: 24px;
  }
  .sign-up-button {
    width: 100%;
    max-width: 320px;
  }

  /* Video section */
  .video-section {
    margin-top: 24px;
    padding: 16px;
  }
  .video-section-header {
    gap: 12px;
    margin-bottom: 12px;
  }
  .video-title {
    font-size: 18px;
    line-height: 24px;
    margin: 0;
  }
  .video-section .learn-more { font-size: 14px; }
  .video-container video { height: auto; border-radius: 16px; }

  /* FAQ */
  .faq-section {
    margin-top: 28px;
    padding: 0;
    text-align: left;
  }
  .faq-title { font-size: 22px; line-height: 28px; }
  .faq-subtitle {
    font-size: 14px; line-height: 20px; margin: 6px 0 14px;
  }
  .faq-accordions {
    margin-top: 12px;
    padding-left: 0;
    padding-right: 0;
  }
  .accordion-btn {
    padding: 14px 12px;
    font-size: 15px;
    line-height: 22px;
    border-radius: 12px;
  }
  .accordion-content {
    font-size: 14px;
    line-height: 20px;
  }
}

/* Optional: if you also want the nav aligned right on tablet widths */
@media (max-width: 1024px) {
  .header-tabs { justify-content: flex-end; }
}
/* Timeframe dropdown (pill) */
.filter-dd { position: relative; }
.filter-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:16px;
  background:transparent;
  border:2px solid #9de600;  /* neon green like screenshot */
  color: var(--text-primary-dark); cursor:pointer;
}
body:not(.dark) .filter-btn{ color:#0b0d12; }

.filter-btn .chev{ width:16px; height:16px; opacity:.9; }

.filter-menu{
  position:absolute; top:110%; left:0;
  min-width:180px; padding:8px 0; margin:6px 0 0;
  background:#0f1319; border:1px solid rgba(255,255,255,.12);
  border-radius:12px; list-style:none; display:none; z-index:10;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
body:not(.dark) .filter-menu{ background:#fff; border-color:rgba(0,0,0,.12); }

.filter-menu li{
  padding:10px 14px; color:#e5e7eb; cursor:pointer; white-space:nowrap;
}
body:not(.dark) .filter-menu li{ color:#0b0d12; }

.filter-menu li:hover,
.filter-menu li[aria-selected="true"]{
  background: rgba(157,230,0,.12);
  color:#9de600;
}

.filter-dd.open .filter-menu{ display:block; }
.filter-dd.open .chev{ transform:rotate(180deg); transition:transform .2s; }

/* Small screens alignment keeps your 20px left padding */
@media (max-width:768px){
  .filters{ gap:12px; }
}
/* ===== Help (web) ===== */
.help-hero--web {
  padding: 48px 20px 24px;                 /* left padding 20px */
  background: var(--bg-primary-dark, #0b0d12);
  color: var(--text-primary-dark, #fff);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
body:not(.dark) .help-hero--web {
  background: var(--bg-primary-light, #fff);
  color: var(--text-primary-light, #0b0d12);
  border-bottom: 1px solid var(--border-primary-light, #e5e7eb);
}

.help-wrap {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.help-hero--web .eyebrow { opacity:.85; font-size:13px; margin-bottom:10px; }
.help-hero--web .help-title { font-size:42px; line-height:50px; font-weight:800; letter-spacing:-.3px; }
.help-hero--web .help-sub {
  max-width: 680px; margin: 12px auto 28px;
  font-size: 15px; line-height: 24px;
  color: var(--text-tertiary-dark, #94979C);
}
body:not(.dark) .help-hero--web .help-sub { color: var(--text-tertiary-light, #5b6168); }

/* Cards row */
.help-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 28px;
  margin-top: 12px;
  padding-left: 20px; padding-right: 20px;
}

.help-card {
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 24px 18px;
}
body:not(.dark) .help-card { border-color: var(--border-primary-light, #e5e7eb); }

.help-icon {
  width: 48px; height: 48px; margin: 0 auto 10px;
  border-radius: 9999px; display:grid; place-items:center;
  background: var(--bg-brand-solid);
  border: 1px solid var(--bg-brand-solid);
}
.help-icon img { width: 22px; height: 22px; }

.help-card h3 {
  font-size: 16px; line-height: 24px; font-weight: 600; margin-bottom: 6px;
}
.help-card h3 .sub { font-weight: 600; }

.help-card p {
  font-size: 14px; line-height: 22px; margin: 0 auto 10px; max-width: 320px;
  color: var(--text-tertiary-dark, #94979C);
}
body:not(.dark) .help-card p { color: var(--text-tertiary-light, #5b6168); }

.pill {
  display:inline-block; padding:10px 14px; border-radius:9999px;
  text-decoration:none; font-weight:500; font-size:16px;
  background: var(--bg-brand-section-dark);
  color: var(--text-primary-dark, #fff);
  transition: background .2s ease, transform .06s ease;
}
.pill:hover { background: rgba(255,255,255,.12); }
.pill:active { transform: scale(.98); }
body:not(.dark) .pill {
  background:#1f29370f; color: var(--text-primary-light, #0b0d12);
  border-color: var(--border-primary-light, #d5d7da);
}
body:not(.dark) .pill:hover { background:#f3f4f6; }

.tiny-note {
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 50px;
   font-size: 16px;
   opacity: .85;
}
.bug-link {
  margin-left: 8px; color: #9de600; text-decoration: none; font-weight: 600;
  font-size: 16px;
  display: inline-flex; gap: 6px; align-items: center;
}
.bug-link img { width: 24px; height: 24px; }

/* ===== Business enquiries ===== */
.biz-section {
  background: var(--bg-primary-dark, #0b0d12);
  padding: 40px 20px 80px;               /* left padding 20px */
}
body:not(.dark) .biz-section { background: var(--bg-primary-light, #fff); }

.biz-wrap { max-width: 820px; margin: 0 auto; }
.biz-title { text-align:center; font-size: 36px; line-height: 44px; font-weight: 500; }
.biz-sub {
  text-align:center; margin: 10px auto 28px; max-width: 720px;
  font-size: 20px; line-height: 30px; color: var(--text-tertiary-dark, #94979C);
}
body:not(.dark) .biz-sub { color: var(--text-tertiary-light, #5b6168); }

.biz-form { display:grid; gap: 16px; }
.grid.two { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field { display: grid; gap: 8px; }
.field > span { font-size: 13px; opacity: .9; }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border-secondary-dark, #22262f);
  background: var(--bg-brand-section-dark, #14181e);
  color: var(--text-primary-dark, #fff);
}
body:not(.dark) .field input,
body:not(.dark) .field textarea,
body:not(.dark) .field select {
  background: #fff; color: #0b0d12; border: 1px solid #d5d7da;
}

.field input::placeholder, .field textarea::placeholder { opacity: .6; }

.field .phone { display:flex; gap: 8px; }
.field .phone select { max-width: 120px; }

.biz-submit {
  margin-top: 6px;
  padding: 12px 18px;
  border-radius: 16px;
  border: none;
  background: var(--bg-brand-solid, #9de600);
  color: var(--gray-dark-mode, #0b0d12);
  font-weight: 600;
  cursor: pointer;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .help-hero--web .help-title { font-size: 36px; line-height: 44px; }
  .help-grid { gap: 20px; }
}
@media (max-width: 768px) {
  .help-grid { grid-template-columns: 1fr; }
  .grid.two { grid-template-columns: 1fr; }
  .biz-title { font-size: 28px; line-height: 36px; }
}
/* ---------- Help: Business Form ---------- */
.help-form-wrap {
  margin-top: 56px;
  padding: 32px 20px;
  background: transparent;
  border-radius: 16px;
}

.help-form-title {
  text-align: center;
  color: var(--text-primary-dark);
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
}

body:not(.dark) .help-form-title { color: var(--text-primary-light); }

.help-form-sub {
  text-align: center;
  margin: 10px 28px;
  color: var(--text-tertiary-dark);
  line-height: 24px;
}

body:not(.dark) .help-form-sub { color: var(--text-tertiary-light); }

/* grid rows */
.help-form { max-width: 760px; margin: 0 auto; margin: 64px auto; }
.form-row { display: grid; gap: 16px; margin-bottom: 18px; }
.form-row.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr; /* side by side */
  gap: 16px;
}

@media (max-width: 768px) {
  .form-row.two-col { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .form-row.two-col {
    grid-template-columns: 1fr 1fr; /* keep 2 columns even on phones */
    gap: 12px;
  }

  .form-field input {
    font-size: 15px;
    padding: 14px 16px;
  }
}
/* fields */
.form-field label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-primary-dark);
  font-weight: 600;
  font-size: 14px;
}
.form-field label span { color: #9de600; }

body:not(.dark) .form-field label { color: var(--text-primary-light); }

.help-form input,
.help-form select,
.help-form textarea {
  width: 100%;
  background: transparent;
  color: var(--text-primary-dark);
  border: 1px solid var(--border-secondary-dark);
  border-radius: 999px;          /* pill */
  padding: 16px 20px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

body:not(.dark) .help-form input,
body:not(.dark) .help-form select,
body:not(.dark) .help-form textarea {
  color: var(--text-primary-light);
  border: 1px solid var(--border-secondary-light);
}

/* textarea should not be a full pill */
.help-form textarea {
  border-radius: 16px;
  resize: vertical;
  min-height: 140px;
  line-height: 1.5;
  padding: 16px;
}

.help-form input::placeholder,
.help-form textarea::placeholder { color: #8a8f98; }

/* focus state */
.help-form input:focus,
.help-form select:focus,
.help-form textarea:focus {
  border-color: #9de600;
  box-shadow: 0 0 0 2px rgba(157,230,0,.12);
}

/* phone combo */
.phone-input {
  display: flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--border-secondary-dark);
  border-radius: 999px;
  overflow: hidden;
}
.phone-input select {
  border-radius: 16px;
  padding: 0 16px;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23949aa3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* submit button */
.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  min-width: 160px;
  border: none;
  border-radius: 16px;
  background: var(--bg-brand-solid, #9de600);
  color: #0b0d12;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .2s ease;
}
.btn-submit:hover { box-shadow: 0 8px 24px rgba(157,230,0,.25); }
.btn-submit:active { transform: translateY(1px); }

.form-note {
  margin-top: 8px;
  text-align: center;
  color: var(--fg-tertiary-dark);
  font-size: 13px;
}
body:not(.dark) .form-note { color: var(--fg-tertiary-light); }
@media (max-width: 480px) {
  .help-form {
    padding: 0 20px;
  }
}


body:not(.dark) .phone-input {
  border: 1px solid var(--border-secondary-light);
}

/* fixed country prefix */
.country-code {
  display: inline-block;
  padding: 0 16px;
  color: var(--text-primary-dark);
  font-weight: 600;
  font-size: 15px;
  border-right: 1px solid var(--border-secondary-dark);
  white-space: nowrap;
  user-select: none;
}

body:not(.dark) .country-code {
  color: var(--text-primary-light);
  background: rgba(0,0,0,0.03);
  border-right: 1px solid var(--border-secondary-light);
}

/* phone input merges visually with prefix */
.phone-input input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary-dark);
  padding: 16px 20px;
  font-size: 16px;
  outline: none;
}

body:not(.dark) .phone-input input {
  color: var(--text-primary-light);
}

.phone-input input::placeholder {
  color: #8a8f98;
}
/* Social follow card */
.social-card {
  margin-top: 28px;
  padding: 28px 32px;
  background: var(--bg-brand-section-dark, #161A22);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

body:not(.dark) .social-card {
  background: #f6f7f9;
  border: 1px solid var(--border-secondary-light, #e5e7eb);
}

.social-card h3 {
  margin: 0 0 18px;
  color: rgba(255,255,255,.75);
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  text-align: left;
}

body:not(.dark) .social-card h3 {
  color: #2b2f36;
}

/* icon row */
.social-row {
  display: flex;
  align-items: center;
  gap: 22px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, filter .2s ease;
}

.social-link svg {
  fill: rgba(255,255,255,.55);
}

.social-link:hover,
.social-link:focus-visible {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-2px);
  outline: none;
}
.social-link:hover svg,
.social-link:focus-visible svg {
  fill: #9de600; /* brand green on hover */
}

/* Light theme tweaks */
body:not(.dark) .social-link {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.06);
}
body:not(.dark) .social-link svg {
  fill: #5a606a;
}
body:not(.dark) .social-link:hover svg,
body:not(.dark) .social-link:focus-visible svg {
  fill: #7fb800; /* slightly darker green for light mode */
}

/* Mobile: center content */
@media (max-width: 768px) {
  .social-card {
    margin-left: 20px !important;
    margin-right: 20px !important;
    border-radius: 20px;
  }
  .social-card h3 {
    text-align: center;
    font-size: 20px;
    margin-bottom: 16px;
  }
  .social-row {
    justify-content: center;
    gap: 18px;
  }
}
/* ---------- Academy Coming Soon ---------- */
.academy-comingsoon-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary-dark, #0d0f12);
  color: var(--text-primary-dark, #f5f5f5);
  padding: 60px 20px;
  text-align: center;
}

body:not(.dark) .academy-comingsoon-section {
  background: var(--bg-primary-light, #ffffff);
  color: var(--text-primary-light, #111);
}

.academy-comingsoon-container {
  max-width: 720px;
  margin: 0 auto;
}

.academy-title {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
}

.academy-subtitle {
  font-size: 20px;
  color: #a3a3a3;
  margin-bottom: 50px;
}

/* Coming Soon main card */
.comingsoon-box {
  background: rgba(0, 0, 0, 0.72);     /* 👈 solid dark backdrop */
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 40px 32px;
  border-radius: 24px;
  backdrop-filter: blur(8px);          /* subtle inner blur */
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 40px;
}


body:not(.dark) .comingsoon-box {
  background: #f8fafc;
  border-color: #e5e7eb;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.comingsoon-text {
  font-size: 32px;
  font-weight: 600;
  color: #a6ff00;
  margin-bottom: 16px;
}

.comingsoon-desc {
  font-size: 17px;
  color: #c9c9c9;
  line-height: 1.6;
  margin-bottom: 32px;
}

body:not(.dark) .comingsoon-desc {
  color: #444;
}

.notify-btn {
  background: #a6ff00;
  color: #0d0f12;
  border: none;
  border-radius: 999px;
  padding: 14px 36px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.notify-btn:hover {
  background: #c4ff4d;
  transform: translateY(-2px);
}

.academy-footer-note {
  margin-top: 50px;
  font-size: 15px;
  color: #9ca3af;
}

.academy-footer-note a {
  color: #a6ff00;
  text-decoration: none;
}

.academy-footer-note a:hover {
  text-decoration: underline;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .academy-title {
    font-size: 36px;
  }

 /* Coming Soon main card */
.comingsoon-box {
  background: rgba(0, 0, 0, 0.72);     /* 👈 solid dark backdrop */
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 40px 32px;
  border-radius: 24px;
  backdrop-filter: blur(8px);          /* subtle inner blur */
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 40px;
}


  .comingsoon-text {
    font-size: 26px;
  }

  .comingsoon-desc {
    font-size: 15px;
  }

  .notify-btn {
    padding: 12px 30px;
    font-size: 15px;
  }
}
/* --- Mobile Drawer (base: hidden) --- */
.mobile-drawer{
  position: fixed;          /* take it out of the flow */
  inset: 0;                 /* full-screen overlay area */
  display: grid;            /* panel + overlay */
  grid-template-columns: auto 1fr; /* panel then overlay */
  pointer-events: none;     /* don't block clicks when closed */
  visibility: hidden;       /* keep it invisible when closed */
  z-index: 9999;
}

/* The sliding panel */
.mobile-drawer .drawer-panel{
  width: 88vw;
  max-width: 360px;
  height: 100vh;
  background: var(--bg-primary-dark);
  transform: translateX(-100%);  /* off canvas to the left */
  transition: transform .25s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

/* The dark overlay */
.mobile-drawer .drawer-overlay{
  background: rgba(0,0,0,.4);
  opacity: 0;
  transition: opacity .2s ease;
}

/* When open */
.mobile-drawer.is-open{
  pointer-events: auto;
  visibility: visible;
}
.mobile-drawer.is-open .drawer-panel{
  transform: translateX(0);
}
.mobile-drawer.is-open .drawer-overlay{
  opacity: 1;
}

/* Prevent body scroll when drawer open (optional) */
body.drawer-open{
  overflow: hidden;
}

/* Hide drawer entirely on desktop */
@media (min-width: 1024px){
  .mobile-drawer{ display:none; }
}
/* --- Risk Disclaimer Page --- */
.risk-disclaimer-container {
  max-width: 900px;
  margin: 4rem auto;
  padding: 0 2rem;
  line-height: 1.7;
  color: var(--text-primary-light, #eaeaea);
  font-family: 'Inter', sans-serif;
}

body:not(.dark) .risk-disclaimer-container {
  color: #222;
}

.risk-disclaimer-container h1 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 1rem;
}

.risk-disclaimer-container .last-updated {
  text-align: center;
  font-size: 0.9rem;
  color: #888;
  margin-bottom: 2rem;
}

.disclaimer-section {
  margin-bottom: 1.8rem;
}

.disclaimer-section h2 {
  font-size: 1.2rem;
  color: var(--accent, var(--bg-brand-solid));
  margin-bottom: 0.6rem;
}

.disclaimer-section ul {
  list-style: disc;
  margin-left: 1.5rem;
}

.disclaimer-section ul ul {
  list-style: circle;
  margin-left: 1.5rem;
}

.accept-risk {
  text-align: center;
  margin-top: 3rem;
}

.accept-btn {
  background: var(--accent, var(--bg-brand-solid));
  color: #fff;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.accept-btn:hover {
  background: var(--bg-brand-solid);
}

/* Responsive */
@media (max-width: 768px) {
  .risk-disclaimer-container {
    padding: 0 1rem;
    margin: 2rem auto;
  }

  .risk-disclaimer-container h1 {
    font-size: 1.5rem;
  }

  .accept-btn {
    width: 100%;
  }
}

/* Mobile-first refinements */
.risk-disclaimer-container {
  max-width: 920px;
  margin: 32px auto;
  padding: 0 20px;                /* ✅ comfy mobile padding */
  line-height: 1.7;
}

.risk-disclaimer-container h1 {
  font-size: 1.75rem;
  line-height: 2.1rem;
  text-align: center;
  margin-bottom: 8px;
  color: var(--text-primary-dark, #eaeaea);
}
.risk-disclaimer-container p {
  color: var(--text-tertiary-dark);
  margin: 0 20px;
}
.risk-disclaimer-container .last-updated {
  text-align: center;
  font-size: 0.95rem;
  opacity: .8;
  margin-bottom: 20px;
}

.disclaimer-section { margin: 18px 20px; }

.disclaimer-section h2 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--text-primary-dark, #eaeaea);
}
body:not(.dark) .disclaimer-section h2 { color: var(--text-primary-dark, #0b0d12); }

.disclaimer-section ul {
  margin-left: 18px;              /* tighter bullets on mobile */
  color: var(--text-tertiary-dark);
}
.disclaimer-section li { margin: 6px 0; }

/* Larger screens */
@media (min-width: 768px) {
  .risk-disclaimer-container {
    padding: 0 32px;
    margin: 48px 30;
  }
  .risk-disclaimer-container h1 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  .disclaimer-section h2 { font-size: 1.2rem; }
  .disclaimer-section ul { margin-left: 22px; }
}
/* ---------- Conflict Policy: mobile-first + dark/light ---------- */
.conflict-policy-container {
  max-width: 920px;
  margin: 32px auto;
  padding: 0 20px;
  line-height: 1.7;
}

.conflict-policy-container h1 {
  font-size: 1.75rem;
  line-height: 2.1rem;
  text-align: center;
  margin-bottom: 8px;
  color: var(--text-primary-dark, #eaeaea);
}
body:not(.dark) .conflict-policy-container h1 { color: var(--text-primary-light, #0b0d12); }

.conflict-policy-container .last-updated {
  text-align: center;
  font-size: 0.95rem;
  opacity: 0.8;
  margin-bottom: 20px;
  color: var(--text-tertiary-dark, #a9b0bc);
}
body:not(.dark) .conflict-policy-container .last-updated { color: var(--text-tertiary-light, #4a5365); }

.conflict-policy-container .intro,
.conflict-policy-container p,
.conflict-policy-container li {
  color: var(--text-tertiary-dark, #c9cdd6);
}
body:not(.dark) .conflict-policy-container .intro,
body:not(.dark) .conflict-policy-container p,
body:not(.dark) .conflict-policy-container li {
  color: var(--text-tertiary-light, #2d3342);
}

.policy-section { margin: 18px 0; }
.policy-section h2 {
  font-size: 1.1rem;
  margin: 12px 0 8px;
  color: var(--text-primary-dark, #eaeaea);
}
body:not(.dark) .policy-section h2 { color: var(--text-primary-light, #0b0d12); }

.policy-section ul { margin-left: 18px; }

/* ---------- Responsive “Examples & Measures” grid ---------- */
.conflict-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

.conflict-card {
  border: 1px solid var(--border-secondary-dark, #2a2f3a);
  background: var(--bg-elev-1-dark, #12151b);
  border-radius: 12px;
  padding: 14px 16px;
}
body:not(.dark) .conflict-card {
  border-color: var(--border-secondary-light, #e6e8ee);
  background: var(--bg-elev-1-light, #ffffff);
}

.conflict-card h3 {
  font-size: 0.95rem;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--text-primary-dark, #eaeaea);
}
body:not(.dark) .conflict-card h3 { color: var(--text-primary-light, #0b0d12); }

.conflict-card h4 {
  font-size: 0.9rem;
  margin: 10px 0 6px;
  opacity: 0.9;
  color: var(--text-primary-dark, #eaeaea);
}
body:not(.dark) .conflict-card h4 { color: var(--text-primary-light, #0b0d12); }

.conflict-card p { margin: 0; }
.conflict-card ul { margin: 0 0 0 18px; }

.contact-block { font-style: normal; }

/* ---------- Larger screens ---------- */
@media (min-width: 768px) {
  .conflict-policy-container {
    padding: 0 32px;
    margin: 48px auto;
  }
  .conflict-policy-container h1 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  .policy-section h2 { font-size: 1.2rem; }
  .policy-section ul { margin-left: 22px; }

  .conflict-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Optional: align with your existing disclaimer spacing ---------- */
.conflict-policy-container .intro { margin: 0 0 8px; }
/* ---------- Green link styling ---------- */
.conflict-policy-container a {
  color: var(--bg-brand-solid);                 /* ✅ Mirrorpip green tone */
  text-decoration: none;
  font-weight: 500;
}

.conflict-policy-container a:hover {
  text-decoration: underline;     /* Optional hover underline */
}
/* ---------- Better horizontal spacing on mobile ---------- */
@media (max-width: 768px) {
  .conflict-policy-container {
    padding-left: 1.25rem !important;   /* ~20px left space */
    padding-right: 1.25rem !important;  /* ~20px right space */
    margin: 2rem auto;
  }

  .conflict-policy-container h1 {
    font-size: 1.5rem;
    line-height: 1.9rem;
  }

  .policy-section {
    margin: 1.25rem 0;
  }

  .conflict-card {
    padding: 1rem 1.1rem; /* slightly tighter for small screens */
  }
}
/* ---------- Declaration of Consent: base + responsive ---------- */
.declaration-consent-container {
  max-width: 920px;
  margin: 32px auto;
  padding: 0 20px;
  line-height: 1.7;
}

.declaration-consent-container h1 {
  font-size: 1.75rem;
  line-height: 2.1rem;
  text-align: center;
  margin-bottom: 8px;
  color: var(--text-primary-dark, #eaeaea);
}
body:not(.dark) .declaration-consent-container h1 { color: var(--text-primary-light, #0b0d12); }

.declaration-consent-container .last-updated {
  text-align: center;
  font-size: 0.95rem;
  opacity: 0.8;
  margin-bottom: 20px;
  color: var(--text-tertiary-dark, #a9b0bc);
}
body:not(.dark) .declaration-consent-container .last-updated { color: var(--text-tertiary-light, #4a5365); }

.declaration-consent-container p,
.declaration-consent-container li {
  color: var(--text-tertiary-dark, #c9cdd6);
}
body:not(.dark) .declaration-consent-container p,
body:not(.dark) .declaration-consent-container li {
  color: var(--text-tertiary-light, #2d3342);
}

/* green links */
.declaration-consent-container a {
  color: var(--bg-brand-solid);
  text-decoration: none;
  font-weight: 500;
}
.declaration-consent-container a:hover { text-decoration: underline; }

.policy-list {
  margin: 12px 0 18px 24px;
  list-style: disc;
}

.consent-section { margin: 20px 0; }
.consent-section h2 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--text-primary-dark, #eaeaea);
}
body:not(.dark) .consent-section h2 { color: var(--text-primary-light, #0b0d12); }

.consent-section ul { margin-left: 22px; }

.final-text {
  margin-top: 20px;
  font-weight: 500;
  text-align: justify;
}

/* ---------- Mobile spacing ---------- */
@media (max-width: 768px) {
  .declaration-consent-container {
    padding-left: 1.25rem !important;   /* 20px left */
    padding-right: 1.25rem !important;  /* 20px right */
    margin: 2rem auto;
  }
  .declaration-consent-container h1 {
    font-size: 1.5rem;
    line-height: 1.9rem;
  }
  .consent-section {
    margin: 1.25rem 0;
  }
}

/* ---------- Larger screens ---------- */
@media (min-width: 768px) {
  .declaration-consent-container {
    padding: 0 32px ;
    margin: 48px auto;
  }
  .declaration-consent-container h1 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  .consent-section h2 { font-size: 1.2rem; }
}
/* ---------- EULA: mobile-first + dark/light ---------- */
.eula-container{
  max-width: 920px;
  margin: 32px auto;
  padding: 0 20px;               /* comfy mobile L/R spacing */
  line-height: 1.7;
}

.eula-container h1{
  font-size: 1.75rem;
  line-height: 2.1rem;
  text-align: center;
  margin-bottom: 8px;
  color: var(--text-primary-dark,#eaeaea);
}
body:not(.dark) .eula-container h1{ color: var(--text-primary-light,#0b0d12); }

.eula-container .last-updated{
  text-align: center;
  font-size: .95rem;
  opacity: .8;
  margin-bottom: 20px;
  color: var(--text-tertiary-dark,#a9b0bc);
}
body:not(.dark) .eula-container .last-updated{ color: var(--text-tertiary-light,#4a5365); }

.eula-container .intro,
.eula-container p,
.eula-container li{
  color: var(--text-tertiary-dark,#c9cdd6);
}
body:not(.dark) .eula-container .intro,
body:not(.dark) .eula-container p,
body:not(.dark) .eula-container li{
  color: var(--text-tertiary-light,#2d3342);
}

.eula-section{ margin: 18px 0; }
.eula-section h2{
  font-size: 1.1rem;
  margin: 12px 0 8px;
  color: var(--text-primary-dark,#eaeaea);
}
body:not(.dark) .eula-section h2{ color: var(--text-primary-light,#0b0d12); }

.eula-section ul{ margin-left: 22px; }

/* Green links (brand) */
.eula-container a{
  color:var(--bg-brand-solid);
  text-decoration:none;
  font-weight:500;
}
.eula-container a:hover{ text-decoration:underline; }

.contact-block{ font-style: normal; }

/* ---------- Mobile tweaks ---------- */
@media (max-width:768px){
  .eula-container{
    padding-left:1.25rem !important;   /* ~20px */
    padding-right:1.25rem !important;  /* ~20px */
    margin:2rem auto;
  }
  .eula-container h1{
    font-size:1.5rem;
    line-height:1.9rem;
  }
  .eula-section{ margin:1.25rem 0; }
}

/* ---------- Larger screens ---------- */
@media (min-width:768px){
  .eula-container{
    padding:0 32px;
    margin:48px auto;
  }
  .eula-container h1{
    font-size:2rem;
    line-height:2.4rem;
  }
  .eula-section h2{ font-size:1.2rem; }
}
/* ---------- Privacy Policy: base styling ---------- */
.privacy-policy-container {
  max-width: 920px;
  margin: 32px auto;
  padding: 0 20px;
  line-height: 1.7;
}

.privacy-policy-container h1 {
  font-size: 1.75rem;
  line-height: 2.1rem;
  text-align: center;
  margin-bottom: 8px;
  color: var(--text-primary-dark, #eaeaea);
}
body:not(.dark) .privacy-policy-container h1 {
  color: var(--text-primary-light, #0b0d12);
}

.privacy-policy-container .last-updated {
  text-align: center;
  font-size: 0.95rem;
  opacity: 0.8;
  margin-bottom: 20px;
  color: var(--text-tertiary-dark, #a9b0bc);
}
body:not(.dark) .privacy-policy-container .last-updated {
  color: var(--text-tertiary-light, #4a5365);
}

.privacy-policy-container p,
.privacy-policy-container li {
  color: var(--text-tertiary-dark, #c9cdd6);
}
body:not(.dark) .privacy-policy-container p,
body:not(.dark) .privacy-policy-container li {
  color: var(--text-tertiary-light, #2d3342);
}

/* Section headers */
.policy-section {
  margin: 18px 0;
}
.policy-section h2 {
  font-size: 1.1rem;
  margin: 12px 0 8px;
  color: var(--text-primary-dark, #eaeaea);
}
body:not(.dark) .policy-section h2 {
  color: var(--text-primary-light, #0b0d12);
}
.policy-section ul {
  margin-left: 22px;
}

/* Green links (brand color) */
.privacy-policy-container a {
  color: var(--bg-brand-solid);
  text-decoration: none;
  font-weight: 500;
}
.privacy-policy-container a:hover {
  text-decoration: underline;
}

.contact-block {
  font-style: normal;
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 768px) {
  .privacy-policy-container {
    padding-left: 1.25rem !important;   /* ~20px */
    padding-right: 1.25rem !important;  /* ~20px */
    margin: 2rem auto;
  }
  .privacy-policy-container h1 {
    font-size: 1.5rem;
    line-height: 1.9rem;
  }
  .policy-section {
    margin: 1.25rem 0;
  }
}

/* ---------- Larger screens ---------- */
@media (min-width: 768px) {
  .privacy-policy-container {
    padding: 0 32px;
    margin: 48px auto;
  }
  .privacy-policy-container h1 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  .policy-section h2 {
    font-size: 1.2rem;
  }
}
/* ---------- Refund Policy: mobile-first + dark/light ---------- */
.refund-policy-container {
  max-width: 920px;
  margin: 32px auto;
  padding: 0 20px; /* comfy mobile L/R spacing */
  line-height: 1.7;
}

.refund-policy-container h1 {
  font-size: 1.75rem;
  line-height: 2.1rem;
  text-align: center;
  margin-bottom: 8px;
  color: var(--text-primary-dark, #eaeaea);
}
body:not(.dark) .refund-policy-container h1 {
  color: var(--text-primary-light, #0b0d12);
}

.refund-policy-container .last-updated {
  text-align: center;
  font-size: 0.95rem;
  opacity: 0.8;
  margin-bottom: 20px;
  color: var(--text-tertiary-dark, #a9b0bc);
}
body:not(.dark) .refund-policy-container .last-updated {
  color: var(--text-tertiary-light, #4a5365);
}

.refund-policy-container .intro,
.refund-policy-container p,
.refund-policy-container li {
  color: var(--text-tertiary-dark, #c9cdd6);
}
body:not(.dark) .refund-policy-container .intro,
body:not(.dark) .refund-policy-container p,
body:not(.dark) .refund-policy-container li {
  color: var(--text-tertiary-light, #2d3342);
}

.policy-section { margin: 18px 0; }
.policy-section h2 {
  font-size: 1.1rem;
  margin: 12px 0 8px;
  color: var(--text-primary-dark, #eaeaea);
}
body:not(.dark) .policy-section h2 {
  color: var(--text-primary-light, #0b0d12);
}
.policy-section ul { margin-left: 22px; }

/* Brand-green links */
.refund-policy-container a {
  color: var(--bg-brand-solid);
  text-decoration: none;
  font-weight: 500;
}
.refund-policy-container a:hover { text-decoration: underline; }

.contact-block { font-style: normal; }

/* ---------- Mobile tweaks ---------- */
@media (max-width: 768px) {
  .refund-policy-container {
    padding-left: 1.25rem !important;  /* ~20px left */
    padding-right: 1.25rem !important; /* ~20px right */
    margin: 2rem auto;
  }
  .refund-policy-container h1 {
    font-size: 1.5rem;
    line-height: 1.9rem;
  }
  .policy-section { margin: 1.25rem 0; }
}

/* ---------- Larger screens ---------- */
@media (min-width: 768px) {
  .refund-policy-container {
    padding: 0 32px;
    margin: 48px auto;
  }
  .refund-policy-container h1 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  .policy-section h2 { font-size: 1.2rem; }
}
/* ---------- Cookies Policy: mobile-first + dark/light ---------- */
.cookies-policy-container {
  max-width: 920px;
  margin: 32px auto;
  padding: 0 20px;
  line-height: 1.7;
}

.cookies-policy-container h1 {
  font-size: 1.75rem;
  line-height: 2.1rem;
  text-align: center;
  margin-bottom: 8px;
  color: var(--text-primary-dark, #eaeaea);
}
body:not(.dark) .cookies-policy-container h1 {
  color: var(--text-primary-light, #0b0d12);
}

.cookies-policy-container .last-updated {
  text-align: center;
  font-size: 0.95rem;
  opacity: 0.8;
  margin-bottom: 20px;
  color: var(--text-tertiary-dark, #a9b0bc);
}
body:not(.dark) .cookies-policy-container .last-updated {
  color: var(--text-tertiary-light, #4a5365);
}

.cookies-policy-container p,
.cookies-policy-container li {
  color: var(--text-tertiary-dark, #c9cdd6);
}
body:not(.dark) .cookies-policy-container p,
body:not(.dark) .cookies-policy-container li {
  color: var(--text-tertiary-light, #2d3342);
}

.policy-section { margin: 18px 0; }

.policy-section h2 {
  font-size: 1.1rem;
  margin: 12px 0 8px;
  color: var(--text-primary-dark, #eaeaea);
}
body:not(.dark) .policy-section h2 {
  color: var(--text-primary-light, #0b0d12);
}

.policy-section ul { margin-left: 22px; }

/* Mirrorpip Green Links */
.cookies-policy-container a {
  color: var(--bg-brand-solid);
  text-decoration: none;
  font-weight: 500;
}
.cookies-policy-container a:hover {
  text-decoration: underline;
}

.contact-block { font-style: normal; }

/* ---------- Mobile adjustments ---------- */
@media (max-width: 768px) {
  .cookies-policy-container {
    padding-left: 1.25rem !important;   /* ~20px */
    padding-right: 1.25rem !important;  /* ~20px */
    margin: 2rem auto;
  }
  .cookies-policy-container h1 {
    font-size: 1.5rem;
    line-height: 1.9rem;
  }
  .policy-section {
    margin: 1.25rem 0;
  }
}

/* ---------- Larger screens ---------- */
@media (min-width: 768px) {
  .cookies-policy-container {
    padding: 0 32px;
    margin: 48px auto;
  }
  .cookies-policy-container h1 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  .policy-section h2 {
    font-size: 1.2rem;
  }
}
/* Why Choose: enforce uniform card sizes */
.why-choose-section .images-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* Make all PNG cards same visual size */
.why-choose-section .images-grid img {
  display: block;
  width: 100%;
      /* or 4 / 3 depending on your design */
  height: auto;
  object-fit: cover;        /* crop a bit but keeps uniform size */
  border-radius: 16px;
}

/* Last one spans full width on desktop */
.why-choose-section .images-grid img.full-width {
  grid-column: 1 / -1;
}

/* Mobile: stack all in single column */
@media (max-width: 768px) {
  .why-choose-section .images-grid {
    grid-template-columns: 1fr;
  }

  .why-choose-section .images-grid img.full-width {
    grid-column: auto;
  }
}

/* desktop shown by default, mobile hidden */
.desktop-view { display: block; }
.mobile-view  { display: none; }

/* switch on tablets/phones */
@media (max-width: 1024px) {
  .desktop-view { display: none; }
  .mobile-view  { display: block; }
}

/* ===== Planetary (mobile) — final, conflict-free ===== */


/* Tweak these custom props to fine-tune zoom & crop */
.mobile-planetary {
  --h: 48vh;     /* visible height (trim bottom by lowering this) */
  --zoom: 1.85;  /* >1 zooms in → crops left & right */
  --x: -42%;     /* horizontal offset after zoom (negative = shift left) */
}

.mobile-planetary-wrap {
  position: relative;
  width: 100%;
  height: var(--h);
  overflow: hidden;                 /* crop outside area */
  margin: 0;
  padding: 0;
}

.mobile-planetary-img {
  display: block;
  width: calc(100% * var(--zoom));  /* zoom */
  height: auto;
  min-height: 100%;                 /* ensure vertical coverage */
  object-fit: cover;                /* fill & crop */
  object-position: center top;      /* focus the top */
  transform: translateX(var(--x));  /* re-center after zoom */
  image-rendering: -webkit-optimize-contrast;
}

/* Small phones: a touch more zoom + a bit more height */
@media (max-width: 600px) {
  .mobile-planetary { --h: 52vh; --zoom: 2.0; --x: -50%; }
}

/* Kill container gutters on mobile for full-bleed look */
@media (max-width: 768px) {
  .planetary-circle-section,
  .mobile-planetary-wrap {
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* ===============================
   BANNER CAROUSEL (desktop baseline)
   =============================== */
.banner-carousel{
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 100vh;                   /* safer on tall screens */
  background: #000;
  /* account for safe areas */
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.carousel-wrapper{ position: relative; width:100%; height:100%; overflow:hidden; }

/* Track uses CSS var for slide count (set from JS) */
.carousel-track{
  display:flex;
  height:100%;
  transition: transform .8s ease-in-out;
  will-change: transform;
}

.carousel-slide{
  flex: 0 0 100%;
  position: relative;
  height: 100%;
  background-repeat: no-repeat;
  color:#fff;
}

/* Foreground content */
.page-section{
  position: absolute;
  top: 15%;
  left: 7%;
  z-index: 2;
  color: var(--text-primary-dark, #fff);
  max-width: 800px;
}
.page-title{
  font-weight: 800;
  font-size: clamp(32px, 6vw, 72px);
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0 0 8px;
  color: var(--text-primary-dark, #fff);
   text-align: left;
}
.page-sub-title{
  width: min(70%, 720px);
  margin-top: 16px;
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.6;
  color: var(--text-tertiary-dark, #94979C);
   text-align: left;
}

/* CTA — fixed padding bug (commas → spaces) */
.mirroring-btn{
  position: absolute;
  top: 50%;
  left: 7%;
  z-index: 2;
  cursor: pointer;
  background: var(--bg-brand-solid, #9de600);
  color: var(--gray-dark-mode, #0b0d12);
  border-radius: 16px;
  font-weight: 400;
  font-size: 16px;
  padding: 12px 18px;                 /* ✅ fixed */
  height: 60px;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 6px 20px rgba(157,230,0,.25);
  transition: transform .08s ease, box-shadow .2s ease, background-color .2s;
}
.mirroring-btn:hover{ box-shadow: 0 8px 24px rgba(157,230,0,.35); }
.mirroring-btn:active{ transform: translateY(1px); }

/* Store badges */
.download-app-section{
  position: absolute;
  top: 65%;
  left: 7%;
  z-index: 2;
  display:flex; gap: 24px;
}
.download-app-section img{ height: 40px; width:auto; }

/* Decorative bottom art — hidden on desktop by default */
.banner-bottom-image{ display:none; }

/* Nav arrows */
.hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  color:#fff;
  background: rgba(0,0,0,.4);
  font-size: 28px; line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}
.hero-nav:hover{ background: rgba(0,0,0,.65); }
.hero-prev{ left: 12px; }
.hero-next{ right: 12px; }

/* Dots */
.hero-dots{
  position:absolute; left:50%; bottom: 14px; transform: translateX(-50%);
  z-index:3; display:flex; gap:8px;
}
.hero-dots button{
  width:10px; height:10px; border:0; border-radius:50%;
  background: rgba(255,255,255,.45); cursor:pointer;
}
.hero-dots button[aria-selected="true"]{ background: #00ffff; }

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .carousel-track{ transition: none; }
}

/* ===============================
   MOBILE STACK (no overlap, no bg-crop)
   =============================== */
@media (max-width: 768px){
  /* Let section grow; disable full-viewport lock */
  .banner-carousel,.carousel-wrapper{ height:auto; min-height: auto; }

  /* Stop horizontal slider layout; stack slides vertically */
  .carousel-track{ display:block; height:auto; transform:none !important; }
  .carousel-slide{
    position: relative;
    height: auto;
    min-height: 0;
    display:flex; flex-direction:column; align-items:center; text-align:center;
    overflow: visible;
    padding: 0 16px;
  }

  .page-section{
    position: static; top:auto; left:auto; transform:none;
    width: 100%; max-width: 640px; margin: 16px auto 8px;
    z-index: auto;
  }

  .page-title {
  /* margin-top: 144px; */
  color: var(--text-primary-dark);
  font-weight: 600;
  font-style: Semi Bold;
  font-size: 72px;
  line-height: 90px;
  letter-spacing: -1.44px;
  text-align: center;
}
  .mirroring-btn{
    position: static;
    width: 80%; max-width: 220px;
    height: 48px; font-size: 15px; font-weight: 400;
    margin: 8px auto 16px;
  }

  .download-app-section{
    position: static; gap: 14px; margin: 6px 0 12px;
    justify-content: center; align-items: center;
  }
  .download-app-section img{ height: 36px; }

  /* Decorative banner visible on mobile only */
  .banner-bottom-image{
    display:block; position:relative; left:auto; bottom:auto; transform:none;
    width:100%; margin: 8px 0 0; z-index:auto;
  }
  .banner-bottom-image img{ width:100%; height:auto; display:block; }

  /* Hide 2nd hero on phones (if desired) */
  .banner-carousel .carousel-slide:nth-child(2){ display:none !important; }

  /* Hide arrows on mobile stack; dots optional */
  .hero-nav{ display:none; }
}

/* ===============================
   Desktop bg containment (no spill)
   =============================== */


/* --- Carousel width fixes (put at the end of your CSS) --- */

/* 1) Never hardcode track width; let flex handle it */
.banner-carousel .carousel-track {
  width: auto !important;         /* kills any width:200% */
  display: flex;
  height: 100%;
  transition: transform .8s ease-in-out;
  will-change: transform;
}
.banner-carousel .carousel-slide {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.banner-carousel .carousel-slide img,
.banner-bottom-image img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* 4) Prevent visual bleed between slides on desktop */
@media (min-width: 769px) {
  .banner-carousel .carousel-slide {
    background-size: cover !important;        /* or keep 'cover' if you truly need full-bleed */
    background-position: 7% center !important;  /* was 'center center' */
    background-repeat: no-repeat !important;
    overflow: hidden;                            /* clip any wide child */
  }
}

/* 5) If you use body/containers with margins, neutralize them for the hero */
.banner-carousel,
.banner-carousel * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
:root { scrollbar-gutter: stable both-edges; }


/* ===============================
   BANNER CAROUSEL: desktop baseline
   (extra safety rules at end)
   =============================== */

.banner-carousel{
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
  background: #000;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.carousel-wrapper{ position: relative; width:100%; height:100%; overflow:hidden; }

.carousel-track{
  display:flex;
  height:100%;
  transition: transform .8s ease-in-out;
  will-change: transform;
}

.carousel-slide{
  flex: 0 0 100%;
  position: relative;
  height: 100%;
  background-repeat: no-repeat;
  color:#fff;
}

.page-section{
  position: absolute;
  top: 15%;
  left: 7%;
  z-index: 2;
  color: var(--text-primary-dark, #fff);
  max-width: 800px;
}
.page-title{
  font-weight: 600;
  font-size: clamp(32px, 6vw, 72px);
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0 0 8px;
  color: var(--text-primary-dark, #fff);
  text-align: left;
}
.page-sub-title{
  width: min(70%, 720px);
  margin-top: 16px;
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.6;
  color: var(--text-tertiary-dark, #94979C);
  text-align: left;
}

.mirroring-btn{
  position: absolute;
  top: 50%;
  left: 7%;
  z-index: 2;
  cursor: pointer;
  background: var(--bg-brand-solid, #9de600);
  color: var(--gray-dark-mode, #0b0d12);
  border-radius: 16px;
  font-weight: 400;
  font-size: 16px;
  padding: 12px 18px;
  height: 60px;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 6px 20px rgba(157,230,0,.25);
  transition: transform .08s ease, box-shadow .2s ease, background-color .2s;
}
.mirroring-btn:hover{ box-shadow: 0 8px 24px rgba(157,230,0,.35); }
.mirroring-btn:active{ transform: translateY(1px); }

.download-app-section{
  position: absolute;
  top: 65%;
  left: 7%;
  z-index: 2;
  display:flex; gap: 24px;
}
.download-app-section img{ height: 40px; width:auto; }

.banner-bottom-image{ display:none; }

.hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  color:#fff;
  background: rgba(0,0,0,.4);
  font-size: 28px; line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}
.hero-nav:hover{ background: rgba(0,0,0,.65); }
.hero-prev{ left: 12px; }
.hero-next{ right: 12px; }

.hero-dots{
  position:absolute; left:50%; bottom: 14px; transform: translateX(-50%);
  z-index:3; display:flex; gap:8px;
}
.hero-dots button{
  width:10px; height:10px; border:0; border-radius:50%;
  background: rgba(255,255,255,.45); cursor:pointer;
}
.hero-dots button[aria-selected="true"]{ background: #00ffff; }

@media (prefers-reduced-motion: reduce){
  .carousel-track{ transition: none; }
}

/* MOBILE stack version */
@media (max-width: 768px){
  .banner-carousel,.carousel-wrapper{ height:auto; min-height: auto; }

  .carousel-track{ display:block; height:auto; transform:none !important; }
  .carousel-slide{
    position: relative;
    height: auto;
    min-height: 0;
    display:flex; flex-direction:column; align-items:center; text-align:center;
    overflow: visible;
    padding: 0 16px;
  }

  .page-section{
    position: static; top:auto; left:auto; transform:none;
    width: 100%; max-width: 640px; margin: 16px auto 8px;
    z-index: auto;
  }

  .page-title {
    color: var(--text-primary-dark);
    font-weight: 600;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -1.44px;
    text-align: center;
  }
  .page-sub-title{
    font-size: 16px; line-height: 24px;  width: 92%; text-align: center;font-weight: 400;
  }

  .mirroring-btn{
    position: static;
    width: 80%; max-width: 220px;
    height: 48px; font-size: 15px; font-weight: 400;
    margin: 8px auto 16px;
  }

  .download-app-section{
    position: static; gap: 14px; margin: 6px 0 12px;
    justify-content: center; align-items: center;
  }
  .download-app-section img{ height: 36px; }

  .banner-bottom-image{
    display:block; position:relative; left:auto; bottom:auto; transform:none;
    width:100%; margin: 8px 0 0; z-index:auto;
  }
  .banner-bottom-image img{ width:100%; height:auto; display:block; }

  .banner-carousel .carousel-slide:nth-child(2){ display:none !important; }
  .hero-nav{ display:none; }
}

/* Track: don't force 200% width */
.banner-carousel .carousel-track {
  width: auto !important;
  display: flex;
  height: 100%;
  transition: transform .8s ease-in-out;
  will-change: transform;
}
.banner-carousel .carousel-slide {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.banner-carousel .carousel-slide img,
.banner-bottom-image img {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (min-width: 769px) {
  .banner-carousel .carousel-slide {
    background-size: cover !important;
    background-position: 7% center !important;
    background-repeat: no-repeat !important;
    overflow: hidden;
  }
}

.banner-carousel,
.banner-carousel * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

:root { scrollbar-gutter: stable both-edges; }
@media (max-width: 768px) {
  .banner-carousel .page-sub-title {
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 90%;
    max-width: 320px;
    line-height: 24px;
  }
}
/* .why-choose-section .images-grid {
  display: grid;
  grid-template-columns: repeat(2, 500px);  /* 2 columns, fixed width 
  justify-content: center;
  gap: 24px;                                /* spacing between cards 
}

/* fixed card dimensions 
.why-choose-section .images-grid img {
  width: 500px;
  height: 770px;
  object-fit: cover;                         /* prevents distortion 
  border-radius: 16px;
  display: block;
}

/* last card full width (if needed) 
.why-choose-section .images-grid img.full-width {
  grid-column: 1 / -1;
  width: 100%;
  height: 1195px;
  object-fit: cover;
} */
/* Desktop: make both columns same visual height */
@media (min-width: 769px) {
  .why-choose-section .images-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .why-choose-section .images-grid img {
    width: 100%;
    aspect-ratio: 4 / 6;   /* 👈 pick your desired card shape */
    height: auto;
    object-fit: cover;     /* will crop a bit but keep size uniform */
    border-radius: 16px;
  }

  /* If your last card spans full width and you want it taller */
  .why-choose-section .images-grid img.full-width {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 19;  /* or any ratio you like */
  }
}

/* === Why Choose: clean mobile layout (no cropping) === */
@media (max-width: 768px) {
  .why-choose-section {
    padding: 32px 16px;
  }

  .why-choose-section .container {
    padding: 0;
  }

  .why-choose-section .images-grid {
    display: flex;
    flex-direction: column;   /* stack images */
    gap: 16px;
    align-items: stretch;
  }

  .why-choose-section .images-grid img {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;      /* ✅ let image decide height */
    object-fit: contain;          /* ✅ no sides cut */
    border-radius: 16px;
  }

  .why-choose-section .images-grid img.full-width {
    width: 100% !important;
    height: auto !important;
  }
}
.coming-soon-box {
  width: 100%;
  padding: 60px 20px;
  background: #0d0f12;
  border-radius: 20px;
  text-align: center;
  margin: 40px 0;
  border: 1px solid #22262F;
}

.coming-soon-box h2 {
  font-size: 32px;
  margin-bottom: 12px;
}

.coming-soon-box p {
  font-size: 18px;
  opacity: 0.7;
}


/* ===== Mirror Leaders: Blur "Coming Soon" Overlay ===== */
.mirror-leaders-section {
  position: relative;          /* so overlay can sit on top */
}

/* Full-screen overlay on top of leaders */
.mirrorleaders-comingsoon-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.55);         /* darken a bit */
  backdrop-filter: blur(2px);             /* blur background */
  -webkit-backdrop-filter: blur(10px);     /* Safari */
}

/* Inner content card */
.mirrorleaders-comingsoon-inner {
  max-width: 720px;
  padding: 32px 24px;
  text-align: center;
}

/* Heading + subtitle */
.mirrorleaders-title {
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #f9fafb;
}

.mirrorleaders-subtitle {
  font-size: 18px;
  line-height: 26px;
  margin: 0 0 28px;
  color: rgba(249, 250, 251, 0.75);
}

/* Footer note */
.mirrorleaders-footer-note {
  margin-top: 18px;
  font-size: 14px;
  line-height: 22px;
  color: rgba(249, 250, 251, 0.75);
}

.mirrorleaders-footer-note a {
  color: var(--bg-brand-solid, #9de600);
  text-decoration: none;
  font-weight: 500;
}
.mirrorleaders-footer-note a:hover {
  text-decoration: underline;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .mirrorleaders-comingsoon-inner {
    padding: 24px 18px;
  }
  .mirrorleaders-title {
    font-size: 32px;
    line-height: 40px;
  }
  .mirrorleaders-subtitle {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 20px;
  }
}
/* Make the section the positioning context for the overlay */
.mirror-leaders-section {
  position: relative;
}

/* Full-section dark overlay */
.mirrorleaders-comingsoon-overlay {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  z-index: 20;
  background: rgba(0, 0, 0, 0.78);      /* darken everything behind */
  backdrop-filter: blur(8px);           /* soft blur of leaders behind */
  display: flex;
  justify-content: center;
  align-items: flex-start;              /* ✅ top, not middle */
  padding-top: 80px;                    /* push card a bit down from top */
  pointer-events: none;                 /* so background can't be clicked */
}

/* Inner card container */
.mirrorleaders-comingsoon-inner {
  max-width: 640px;
  width: 90%;
  text-align: center;
  pointer-events: auto;                 /* card itself can receive clicks if needed */
}

/* Title + subtitle */
.mirrorleaders-title {
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #ffffff;
}

.mirrorleaders-subtitle {
  font-size: 18px;
  line-height: 26px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 18px;
}

/* Dark card for "Coming Soon" */
.mirrorleaders-comingsoon-inner .comingsoon-box {
  background: rgba(11, 13, 18, 0.94);   /* ✅ solid dark background */
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 24px 20px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}

.mirrorleaders-comingsoon-inner .comingsoon-text {
  color: #a6ff00;
  font-size: 24px;
  margin-bottom: 10px;
}

.mirrorleaders-comingsoon-inner .comingsoon-desc {
  color: rgba(255,255,255,0.82);
  font-size: 15px;
  line-height: 1.6;
}

/* Footer note */
.mirrorleaders-footer-note {
  margin-top: 20px;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
}

.mirrorleaders-footer-note a {
  color: #a6ff00;
  text-decoration: none;
  font-weight: 500;
}
.mirrorleaders-footer-note a:hover {
  text-decoration: underline;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .mirrorleaders-comingsoon-overlay {
    padding-top: 60px;
  }
  .mirrorleaders-title {
    font-size: 26px;
    line-height: 32px;
  }
  .mirrorleaders-comingsoon-inner .comingsoon-box {
    padding: 20px 16px;
  }
}
.carousel-slide {
  position: relative;
  overflow: hidden;
  /* Fallback color/gradient while image is loading */
  background: #000;
}

/* The banner-bg picture behaves like a full-bleed background */
.banner-bg {
  position: absolute;
  inset: 0;            /* top:0; right:0; bottom:0; left:0; */
  z-index: 0;
  display: block;
}

.banner-bg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.banner-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hide background banner image on mobile */
@media (max-width: 768px) {
  .banner-bg {
    opacity: 0;
    visibility: hidden;
  }
  .banner-bg img,
  .banner-bg source {
    display: none;
  }
}

/* FINAL FIX FOR MOBILE HERO */
@media (max-width: 768px) {

  /* 1. Fix wrong huge title */
  .page-title {
    font-size: 28px !important;
    line-height: 34px !important;
    text-align: center !important;
    margin-top: 40px !important;
    font-weight: 700 !important;
  }

  /* 2. Subtitle visible + centered */
  .page-sub-title {
    font-size: 14px !important;
    line-height: 20px !important;
    margin: 12px auto !important;
    text-align: center !important;
    width: 90% !important;
    max-width: 320px !important;
  }

  /* 3. Button visible below subtitle */
  .mirroring-btn {
    position: static !important;
    margin: 12px auto 20px !important;
    width: 75% !important;
    max-width: 220px !important;
    height: 48px !important;
    font-size: 15px !important;
  }

  /* 4. Expand hero height so content is not cropped */
  .banner-carousel,
  .carousel-slide {
    min-height: auto !important;
    height: auto !important;
    padding-bottom: 20px !important;
  }
}