/* ============================================================================
   howto.css — exact mobile mockup styles
   ============================================================================ */

/* 1) Load Open Sans once (skip if already imported) */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

/* inherit resets + tokens (including partnerprogram.css footer styles) */
@import url('/css/partnerprogram.css');

:root {
  --header-height: 80px; /* adjust to your real header height */
}

/* push the hero down by the header’s height + a little breathing-room */
body.howto-page .hero-section {
  margin-top: calc(var(--header-height) + 16px) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Footer styling pulled from partnerprogram.css, applied in howto context
─────────────────────────────────────────────────────────────────────────── */
body.howto-page footer {
  font-family: var(--font-heading) !important;
}

/* ============================================================================
   GLOBAL LAYOUT
   ============================================================================ */
body.howto-page {
  display: flex;
  justify-content: center;
  background: linear-gradient(135deg,#dfe9ff,#e5f1ff);
  min-height: 100vh;
  padding: clamp(1rem,5vw,4rem) 0;
  font-family: 'Inter', sans-serif;
}

/* ============================================================================
   PHONE SHELL
   ============================================================================ */
.howto-mobile-shell {
  width: min(100%,480px);
  background: #f3f7ff;
  border-radius: 40px;
  padding: 64px 20px 32px;
  box-shadow: 0 10px 40px rgba(0,0,0,.12);
  position: relative;
  overflow: visible !important;
  margin-inline: auto;
}
.howto-mobile-shell::before {
  content: '';
  position: absolute;
  top: 30px; left: 50%;
  transform: translateX(-50%);
  width: 120px; height: 4px; border-radius: 2px;
  background: rgba(15,23,42,0.08);
}

/* ============================================================================
   TOP BAR
   ============================================================================ */
.howto-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.howto-logo {
  height: 24px;
  width: auto;
}
.howto-menu {
  background: none;
  border: 0;
  font-size: 1.8rem;
  color: #0f172a;
  cursor: pointer;
}

/* ============================================================================
   UNIVERSAL FROSTED-GLASS CARD
   — reuse this on every module via the “glass-card” class
   ============================================================================ */
.glass-card {
  position: relative;
  z-index: 0;
  background: rgba(255,255,255,0.45);
  border-radius: 24px;
  overflow: hidden;
}
.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.66) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.18) 100%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.32);
  box-shadow: 0 12px 48px rgba(0,0,0,0.12);
  z-index: -1;
  pointer-events: none;
}

/* ============================================================================
   PROFIT GRAPH
   — use .glass-card for backdrop
   ============================================================================ */
.profit-graph {
  overflow: visible;
  margin-top: 16px;
  margin-bottom: 24px;
}
.profit-graph svg {
  display: block;
  margin: 0 -1.125rem;
  width: calc(100% + 2.25rem);
}
.spark-line { stroke: none !important; stroke-width: 2; fill: none; }
.spark-axis { display: none; }
.spark-val { font: 600 .55rem/1 "Inter",sans-serif; fill: #6b7280 !important; paint-order: stroke; stroke: #fff; stroke-width: 0; }
.spark-mon { font: 500 .4rem/1 "Inter",sans-serif; fill: #94a3b8; }
.profit-badge {
  position: absolute;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .25em;
  padding-right: 1rem;
  font: 700 1.55rem/1.1 "Inter",sans-serif;
  color: #fff !important;
  pointer-events: none;
  text-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.profit-badge small { font: 600 .8rem/1 "Inter",sans-serif; color: rgba(255,255,255,0.8) !important; display: inline-block; white-space: nowrap; margin-left: .35rem; position: relative; top: -8px; }

/* ============================================================================
   STEP CARD
   — use .glass-card backdrop
   ============================================================================ */
.step-card {
  margin-top: 32px;
  border-radius: clamp(20px,6vw,24px);
  padding: clamp(20px,6vw,28px) clamp(16px,5vw,24px);
  position: relative;
  z-index: 10;
}
.step-card h2 { font-size: clamp(1.4rem,4.5vw,1.8rem); font-weight: 700; margin: 0 0 6px; color: #0f172a; }
.step-badge { color: var(--primary); }
.setup-fee { font-size: .9rem; color: #475569; margin: 0 0 18px; }

#investSlider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background:
    linear-gradient(
      90deg,
      var(--primary) var(--fill, 0%),
      #e2e8f0    var(--fill, 0%)
    );
  cursor: pointer;
  margin-bottom: 22px;
  transition: background 0.1s;
}
#investSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--primary);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  position: relative;
  z-index: 1;
}
#investSlider:active::-webkit-slider-thumb {
  transform: scale(1.1);
}

#investSlider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
#investSlider:active::-webkit-slider-thumb { transform: scale(1.1); }
.figures { font-size: 1rem; color: #0f172a; line-height: 1.45; }
.figures strong { font-weight: 700; }

/* ============================================================================
   FEATURE LIST
   — each li uses .glass-card
   ============================================================================ */
.howto-list { list-style: none; padding: 0; margin-top: clamp(24px,6vw,48px); display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 600px; margin-inline: auto; }
.howto-list li { display: flex; align-items: center; gap: 14px; padding: 18px 16px; position: relative; z-index: 10; }
.howto-list .ico { flex: 0 0 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--primary); }
.feature.handle .ico { background: rgba(251,146,60,.12); color: #F59E0B; }
.feature.payout .ico, .feature.track .ico { background: rgba(85,99,255,.12); color: var(--primary); }
.howto-list h3 { margin: 0; font-size: 1.05rem; font-weight: 600; color: #0f172a; }
.howto-list .sub { margin: 0; font-size: .85rem; color: #64748b; }

/* ============================================================================
   WIPE OUT OLD MODULE BACKGROUNDS & SHADOWS
   ============================================================================ */
.profit-graph,
.step-card {
   background: none !important;
   box-shadow: none !important;
}

/* ============================================================================
   ULTRA-SMALL DEVICES
   ============================================================================ */
@media (max-width: 340px) {
  .howto-mobile-shell { padding: 56px 14px 28px; }
  .step-card { padding: 20px 14px; }
  .howto-list { gap: 12px; }
  .howto-list h3 { font-size: .95rem; }
  .howto-list .ico { flex-basis: 38px; height: 38px; font-size: 20px; }
}

/* ============================================================================
   FORCE MOBILE LAYOUT ON DESKTOP
   ============================================================================ */
@media (min-width: 600px) {
  .howto-mobile-shell,
  .step-card,
  .howto-list,
  .howto-bar {
    /* keep mobile-shell look */
  }
}

/* ============================================================================
   PREVENT HEADER OVERLAP
   ============================================================================ */
/* push shell down so content isn't under fixed header */
body.howto-page > main.howto-mobile-shell {
  position: relative !important;
  margin-top: var(--header-height) !important;
}

/* allow scroll & keep shell below header */
body.howto-page {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  height: auto !important;
  min-height: auto !important;
}

main.howto-mobile-shell {
  position: relative !important;
  margin: var(--header-height) auto 0 auto !important;
}

/* ─── Remove pull-down handle ───────────────────────────────────────────── */
.howto-mobile-shell::before {
  display: none !important;
}

/* ─── Translucent background gradient on shell ───────────────────────────── */
.howto-mobile-shell {
  background: linear-gradient(
    to bottom,
    /* pure white for the top 20% of the shell */
    #ffffff 0%,
    #ffffff 20%,
    /* then start fading into your old overlay colors */
    rgba(243,247,255,0.8) 25%,
    rgba(243,247,255,0.3) 100%
  ) !important;
}

/* ─── Extend profit-graph bleed further on right ─────────────────────────── */
.profit-graph svg {
  margin-left: -1rem !important;
  margin-right: -2rem !important;
  width: calc(100% + 3rem) !important;
}
/* ─── Remove any backdrop behind the profit graph ──────────────────────── */
.profit-graph::before,
.profit-graph::after,
.profit-graph.glass-card::before {
  display: none !important;
  background: none !important;
}

/* ─── Extend profit-graph bleed on left and right ──────────────────────── */
.profit-graph svg {
  margin: 0 -2.0rem !important;   /* extend bleed 24px on each side */
  width: calc(100% + 4rem) !important;
}

/* ============================================================================
   FOOTER
   ============================================================================ */
footer {
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  padding: var(--spacing-lg) var(--spacing-md);
  width: 100%;
  font-family: var(--font-heading) !important;
  color: var(--gray-900);
}

footer .footer-columns {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xl);
  max-width: 1200px;
  margin: 0 auto var(--spacing-md);
}

footer .footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

footer .footer-column h4 {
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
  color: var(--gray-900);
}

footer .footer-column a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
footer .footer-column a:hover {
  color: var(--primary-hover);
}

footer .footer-bottom {
  text-align: center;
  margin-top: var(--spacing-lg);
  font-size: 0.875rem;
  color: var(--gray-700);
}


/* ────────────────────────────────────────────────────────────────
   Remove extra space below the footer
───────────────────────────────────────────────────────────────── */
body.howto-page {
  padding-bottom: 0 !important;
}

footer .footer-columns {
  margin-bottom: 0 !important;
}

/* ============================================================================
   ICON STYLING
   — remove square bg, enlarge icons
   ============================================================================ */
.howto-list .ico {
  background: none !important;   /* kill the pale rounded‐rect */
  font-size: 28px;               /* bump up icon size */
  width: auto;                   /* let icon size to its font-size */
  height: auto;
  padding: 0;
  color: var(--primary);         /* or whatever you like */
  margin-right: 0.75rem;         /* space between icon & text */
}

/* ============================================================================
   MODULE SPACING
   — make all cards evenly spaced
   ============================================================================ */
.profit-graph {
  margin-bottom: 32px;   /* space between graph and step-card */
}
.step-card {
  margin-bottom: 32px;   /* now matches .profit-graph */
}
.howto-list li {
  margin-bottom: 32px;   /* same gap between each feature */
}
.howto-list li:last-child {
  margin-bottom: 0;      /* no extra after the last one */
}

/* ============================================================================
   STEP CARD ICON REPLACEMENT
   — hide the “1.” and show an icon instead
   ============================================================================ */
.step-badge {
  display: none;         /* hide the old “1.” */
}

/* we’ll inject a custom icon before the heading */
.step-card h2 {
  position: relative;
  padding-left: 2.5rem;  /* make room for the new icon */
}
.step-card h2::before {
  content: "\e903";               /* your Boxicons “rocket” glyph codepoint */
  font-family: 'boxicons' !important;
  font-size: 1.75rem;
  color: var(--primary);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* ============================================================================
   ICONS: make them ~2× larger
   ============================================================================ */
.howto-list .ico {
  font-size: 48px;       /* from 24px → 48px */
  width: auto;           /* let them size naturally */
  height: auto;
  padding: 0;
  margin-right: 1rem;    /* a bit of breathing room */
  background: none !important;
}

/* also enlarge the step-card icon */
.step-card h2::before {
  font-size: 2rem;       /* from 1.75rem → 2rem */
}

/* ============================================================================
   REDUCE VERTICAL GAPS BETWEEN MODULES
   ============================================================================ */
.profit-graph {
  margin-bottom: 16px;   /* was 32px */
}
.step-card {
  margin-bottom: 16px;   /* was 32px */
}
.howto-list li {
  margin-bottom: 16px;   /* was 32px */
}
.howto-list li:last-child {
  margin-bottom: 0;
}


/* ────────────────────────────────────────────────────────────────
   UNIFORM MODULE SPACING
   Make the gap below .step-card exactly match the gap between list-items
───────────────────────────────────────────────────────────────── */

/* kill any bottom margin on list-items and on the step-card */
.step-card,
.howto-list li {
  margin-bottom: 0 !important;
}

/* give the same top-margin of 16px to every “module” that follows something */
.profit-graph + .step-card,
.step-card + .howto-list,
.howto-list li + .howto-list li {
  margin-top: 16px !important;
}

/* also ensure the first feature row sits 16px below the step-card */
.step-card + .howto-list li {
  margin-top: 16px !important;
}

/* ────────────────────────────────────────────────────────────────
   SHADOW FOR STEP CARD + FEATURE ROWS
───────────────────────────────────────────────────────────────── */
.step-card,
.howto-list li {
  /* light, soft shadow */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* ensure the background remains white */
.step-card,
.howto-list li {
  background: #fff !important;
}

/* ============================================================================
   STEP-CARD CUSTOM GRADIENT
   — from ivory at top to pale yellow at bottom
   ============================================================================ */
.step-card {
  background: linear-gradient(
    180deg,
    #fffdf7 0%,    /* top ivory */
    #fef7e7 100%   /* bottom pale yellow */
  ) !important;
}

/* ensure the step-card icon matches feature sizes */
.step-card h2 .ico {
  font-size: 48px;     /* same as .howto-list .ico */
  display: inline-flex;
  align-items: center;
  margin-right: 0.75rem;
  color: var(--primary);
  background: none;
}






/* ====== DROP-IN: Force the two-column layout for figures ====== */
/* ====== OVERRIDE: force each row to split label/value ====== */
.step-card .figures-grid {
  /* ensure full width */
  width: 100% !important;
  margin-top: 1rem !important;
}

.step-card .figure-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 0.75rem !important;
}

/* subtle down-tone on the fixed fee */
.step-card .figure-row.fixed .value {
  color: #6b7280 !important;
  font-weight: 600 !important;
}

/* make adjustable & profit bold */
.step-card .figure-row .value {
  font-weight: 700 !important;
  color: #0f172a !important;
}

.step-card .figure-row.profit .value {
  color: #16A34A !important;  /* tailwind’s emerald-600, less neon */
  font-weight: 700 !important;
}


/* ─── Make the step-card icon & title mirror the modules below ─── */
.step-card h2 {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 1.05rem !important;   /* same as .howto-list h3 */
  font-weight: 600 !important;     /* same weight as modules */
}

/* remove any old pseudo-icon */
.step-card h2::before {
  content: none !important;
}

/* size/color the span.ico exactly like modules */
.step-card .ico {
  font-size: 48px !important;      /* same as .howto-list .ico */
  margin-right: 1rem !important;
  color: var(--primary) !important;
  background: none !important;
  width: auto; height: auto;
}

/* ensure the inner <i> scales with its container */
.step-card .ico i {
  font-size: inherit !important;
}


/* ─── Step-card header & icon match module cards ─── */
.step-card h2 {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  font-size: 1.05rem !important;   /* same as .howto-list h3 */
  font-weight: 600 !important;     /* same weight as modules */
  margin-bottom: 1rem !important;  /* small breathing room below */
}

.step-card .ico {
  font-size: 48px !important;      /* same as .howto-list .ico */
  width: 48px !important;
  height: 48px !important;
  margin-right: 0.75rem !important;
  color: var(--primary) !important;
  background: none !important;
}

.step-card .ico i {
  font-size: inherit !important;   /* ensure the inner <i> fills the container */
}

/* ====== FORCE Boxicons font on step-card icon ====== */
.step-card .ico i {
  font-family: 'boxicons' !important;
  display: inline-block !important;
  line-height: 1 !important;
  font-size: inherit !important;
}

/* size & color the inline SVG just like the feature icons */
/* ─── STEP CARD ICON & TITLE ─── */
.step-icon-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #0f172a; /* same as your module headings */
  margin-bottom: 1rem;
}

.step-card-icon {
  width: 48px;
  height: 48px;
  color: var(--primary);
  flex-shrink: 0;
}


/* Allow Font Awesome in the step-card */
.step-card .ico i.fa-solid,
.step-card .ico i.fas {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900                   !important; /* solid weight */
}


.step-icon-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.step-icon-title .ico {
  flex: 0 0 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  background: none;
}

.step-icon-title .ico i {
  font-size: 2rem; /* matches the 48px container */
}


/* ─── Align step-card to match feature cards ───────────────── */
.step-card {
  width: 100% !important;           /* span the full shell width */
  padding: 18px 16px !important;    /* same padding as .howto-list li */
  margin: 0 auto !important;        /* ensure no stray margins */
}

/* zero out any inner margins so everything lines up */
.step-card > .step-icon-title,
.step-card > .setup-fee,
.step-card > #investSlider,
.step-card > .figures-grid {
  margin-left: 0 !important;
  margin-right: 0 !important;
}



/* ─── align step‐card content with .howto‐list items ───────────────── */
.step-card {
  /* match the same left/right inset as your feature cards (16px) */
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* zero out any extra shift on the H2 wrapper */
.step-card .step-icon-title {
  margin: 0 !important;
  padding: 0 !important;
}


/* in howto.css, at the bottom */
.step-cta {
  margin-top: 1.5rem;
  text-align: center;
}
.step-cta .btn-apply {
  /* match your existing .btn-apply from #applyNowBar */
  padding: 0.75rem 2rem;
  font: 600 1rem/1 'Inter', sans-serif;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}




/* 1) Overlay covers the entire viewport and is above the footer */
.partnerform-overlay {
  position: fixed;      /* stick to viewport */
  inset: 0;             /* top:0; right:0; bottom:0; left:0; */
  z-index: 9999;        /* higher than your footer/header */
  background: rgba(0,0,0,0.4);
  display: none;        /* hidden by default via hidden attribute */
  align-items: flex-end; /* so sheet sits at bottom */
  justify-content: center;
}

/* When you remove [hidden] and add .open, show the overlay */
.partnerform-overlay.open {
  display: flex;
}

/* 2) The sheet starts off-screen and slides up */
.partnerform-sheet {
  width: 100%;
  max-width: 480px;           /* or whatever your shell width is */
  background: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  transform: translateY(100%); /* off-screen */
  transition: transform 0.3s ease;
  /* optional: limit height to 80% so you can scroll inside */
  max-height: 80vh;
  overflow-y: auto;
}

/* When overlay has .open, bring the sheet up */
.partnerform-overlay.open .partnerform-sheet {
  transform: translateY(0);
}

/* ───── PARTNER FORM BOTTOM-SHEET STYLES ───── */
.partnerform-overlay {
  position: fixed;
  inset: 0;
  padding-top: var(--header-height);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
}
.partnerform-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.partnerform-sheet {
  width: 100%;
  max-width: 480px;               /* or whatever your max */
  border-radius: 20px 20px 0 0;
  background: #fff;
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-height: calc(100vh - var(--header-height) - 1rem);
  overflow-y: auto;
  z-index: 1001;
}
.partnerform-sheet.open {
  transform: translateY(0);
}

/* little “grab” bar and close button styling */
.partnerform-grab {
  width: 44px;
  height: 4px;
  background: #CBD5E1;
  border-radius: 2px;
  margin: 0.75rem auto 0.25rem;
}
.partnerform-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  font-size: 1.75rem;
  color: #64748B;
  cursor: pointer;
}

/* ─── Reduce that extra white space above the graph ───────────────── */
.howto-mobile-shell {
  /* was 64px; bring it in tighter */
  padding: 32px 20px 32px !important;
}

.profit-graph {
  /* kill the built-in margin so it hugs the top of the shell */
  margin-top: 0 !important;
}

/* ─── Make the Apply Now button pop in the card ───────────────────────── */
.step-cta {
  text-align: center;
  margin-top: 1.5rem;
}
/* ─── STEP CTA: updated, softer look ───────────────────────────── */
.step-cta .btn-apply {
  /* center & size */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;

  /* typography */
  font: 600 1rem/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;

  /* background & border */
  background: linear-gradient(90deg, #5F3CE7 0%, #8A4FFE 100%);
  border: none;
  border-radius: 999px;

  /* softer shadow */
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.1s ease;
  cursor: pointer;
  gap: 0.5rem; /* for icon spacing */
}

.step-cta .btn-apply i {
  /* use any Boxicon or Font-Awesome arrow */
  font-size: 1.2em;
  line-height: 1;
}

/* hover = lift + brighter */
.step-cta .btn-apply:hover {
  background: linear-gradient(90deg, #6A49EA 0%, #9A5FFF 100%);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

/* active/pressed = gentle “push” */
.step-cta .btn-apply:active {
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.step-cta .btn-apply {
  /* verbatim from before, plus… */
  background: linear-gradient(90deg, #5F3CE7 0%, #7A4CE0 100%);   /* slightly darker purple */
  padding: 0.85rem 1.5rem;                                       /* a touch taller */
}

.step-cta .btn-apply i {
  font-size: 1.3em;                                              /* slightly bigger arrow */
}


/* ─── sticky bottom bar styling ───────────────────────────────────── */
#applyNowBar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 480px;
  display: none;              /* hidden by default */
  z-index: 10000;
}

#applyNowBar .btn-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.85rem 1.5rem;
  font: 600 1rem/1 "Inter", sans-serif;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, #5F3CE7 0%, #8A4FFE 100%);
  border: none;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform .1s ease, box-shadow .2s ease;
  gap: 0.5rem;
}

#applyNowBar .btn-apply i {
  font-size: 1.3em;
}

#applyNowBar .btn-apply:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.2);
}

#applyNowBar .btn-apply:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* helper class to toggle visibility */
#applyNowBar.visible {
  display: block;
}

/* ─── push sticky Apply-Now behind the overlay ─────────────────── */
#applyNowBar {
  z-index: 500 !important;  /* anywhere below 1000 will hide it behind the overlay */
}

.howto‐sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (min-width: 600px) {
  .howto‐sections {
    grid-template-columns: 1fr 1fr;
  }
}

.howto‐section {
  background: #fff;
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.howto‐section h4 {
  margin: 0 0 .5rem;
  font-size: 1.1rem;
  color: #1F2937;
}

.howto‐stat {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .5rem;
}
.howto‐stat strong {
  font-size: 1.5rem;
  color: var(--primary);
}
.howto‐stat span {
  font-size: .9rem;
  color: #6B7280;
}

.howto‐section p {
  margin: 0;
  color: #4B5563;
  font-size: . nine; /* adjust as you like */
  line-height: 1.4;
}

/* in howto.css (or partnerprogram.css) */

/* container */
.howto-module {
  padding: 2rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  max-width: 800px;
  margin: 2rem auto;
}
.howto-module__title {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: #1e476c;
  text-align: center;
}

/* list as 2×2 grid on desktop, 1-col on mobile */
.howto-module__list {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

/* each item */
.howto-module__item {
  padding: 1rem;
  border-radius: 8px;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.item-heading {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0f172a;
}
.item-stats {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: #3d46ff;
}
.stat-label {
  font-size: 0.9rem;
  color: #334155;
}
.item-desc {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #475569;
  margin-top: auto; /* push description to bottom if you want even spacing */
}

.howto-module {
  padding: 2rem;
  margin-bottom: 2rem;
}

.howto-module__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .howto-module__items {
    grid-template-columns: repeat(2, 1fr);
  }
}

.howto-module__item {
  background: #f8fafc;       /* light card background */
  border-radius: 0.75rem;
  padding: 1.25rem;
}

.howto-module__item .item-heading {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.howto-module__item .item-stats {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.howto-module__item .stat-value {
  color: var(--primary);     /* your brand blue */
  font-size: 1.5rem;
  font-weight: 700;
}

.howto-module__item .stat-label {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.howto-module__item .item-desc {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* ── Container & heading ── */
.howto-module {
  margin: 2rem 0;
  padding: 1.5rem;
}
.howto-module .step-icon-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}
/* gear icon is already styled by .ico in your shared CSS */

/* ── Grid of items ── */
.howto-module__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .howto-module__items {
    grid-template-columns: repeat(2,1fr);
  }
}

/* ── Individual item cards ── */
.howto-module__item {
  background: #f8fafc;
  border-radius: .75rem;
  padding: 1rem;
}
.howto-module__item .item-heading {
  margin: 0 0 .5rem;
  font-size: 1.125rem;
  font-weight: 600;
}
.howto-module__item .item-stats {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .75rem;
}
.howto-module__item .stat-value {
  color: var(--primary);
  font-size: 1.5rem;
  font-weight: 700;
}
.howto-module__item .stat-label {
  color: var(--text-secondary);
  font-size: .875rem;
}
.howto-module__item .item-desc {
  margin: 0;
  color: var(--text-secondary);
  font-size: .875rem;
  line-height: 1.4;
}





/* ─── Treat the “We Handle Everything” header as a feature tile ─── */
.howto-module__header.feature.handle {
  display: flex;
  align-items: center;
  gap: 0.75rem;           /* keep the icon/text spacing */
  margin-bottom: 1.5rem;  /* spacing down into the grid */
  background: none;       /* no separate white box */
  box-shadow: none;       /* no shadow */
  padding: 0;             /* let the parent handle padding */
}


/* Remove the square background and icon size adjustment */
.howto-module__header.feature.handle .ico {
  background: none !important;    /* remove the background */
  font-size: 48px !important;     /* make icon size the same as other icons */
  width: 48px !important;         /* set size */
  height: 48px !important;        /* set size */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F59E0B;                    /* orange gear */
}

/* ─── Heading matches the module titles below ─── */
.howto-module__header.feature.handle h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #0f172a;
}





/* 1 ▸   Header sits on the same left-hand guide as every other title  */
.howto-module__header.feature.handle{
  /* cancel the section’s 1.5 rem side-padding…      */
  margin-inline:-1.5rem !important;

  /* …then give it the same 16 px (=1 rem) inset the other cards use */
  padding-inline:1rem !important;
}

/* 2 ▸   Pull the second row of grey cards a bit higher               */
.howto-module__items{
  row-gap:1rem !important;          /* was 1.5rem */
}

/* 3 ▸   Kill the extra white band under the whole “We Handle Everything” card */
.howto-module{
  margin-bottom:1rem !important;    /* was 2rem */
}


/* ─── Bring “Receive Payouts / Track Performance” closer ───────────── */
.howto-module{                     /* kill the big bottom gap       */
  margin-bottom:0 !important;
}

/* tighten the hand-off between that card and the feature list      */
.howto-module + .howto-list{
  margin-top:1rem !important;     /* 16 px – same as other gaps    */
}

/* the first list-item no longer needs its own top-margin          */
.howto-list li:first-child{
  margin-top:0 !important;
}

/* ─── Give the same 16 px rhythm between “Apply Now” card and
       “We Handle Everything” ─────────────────────────────────── */
.step-card + .howto-module{ margin-top:1rem !important; }













/* ── Payout pills ───────────────────────────────────────── */

.payout-values {
  /* ❶ Use a gap instead of `space-between` so the pills stay together */
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0.25rem 0 0.5rem;
  padding: 0;
  /* keep them on one line by default */
}

.payout-values li {
  /* ❷ Make every pill the same width and let them grow ‑
        this eliminates the giant spaces you were seeing */
  flex: 1 1 0;                 /* equal width, shrink/grow allowed   */
  min-width: 4.5rem;           /* prevents text wrap on tiny screens */
  background: #f6f8ff;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Typography inside the pills – unchanged */
.payout-values li strong {
  font: 600 0.9rem/1 "Inter", sans-serif;
  color: #4f46e5;              /* indigo‑500 */
}
.payout-values li span {
  font: 700 1.25rem/1 "Inter", sans-serif;
  color: #0f172a;
}

/* ── Mobile tweaks (≤ 380 px) ──────────────────────────── */
@media (max-width: 380px) {
  .payout-values {
    flex-wrap: wrap;            /* allow a second line */
  }
  .payout-values li {
    /* Two pills per row with the same 0.5 rem gutter */
    flex: 1 1 calc(50% - 0.25rem);
  }
}

/* ── Card styling (unchanged, shown for completeness) ─── */
.feature.payout {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  overflow: hidden;
}
.feature.payout .guarantee {
  margin: 0;
  font-size: 0.8rem;
  color: #475569;
  line-height: 1.4;
}


/* ── Only this card ─────────────────────────────────────── */
.feature.payout {          /* already has display:flex in your base styles */
  align-items: flex-start; /* top‑align icon and content */
}



/* ── Mobile payout card (≤430px) ───────────────────────────────── */
/* ── Mobile payout card (≤430 px) ─────────────────────────── */
/* ── mobile fix (≤ 430 px) ───────────────────────── */
@media (max-width: 430px) {

  /* flush-left EVERYTHING that sits under the subtitle */
  .feature.payout .payout-intro,
  .feature.payout .payout-values,      /* the pill row */
  .feature.payout .guarantee {        /* the guarantee sentence */
    margin-left: 0 !important;        /* scraps the desktop offset */
    padding-left: 0 !important;       /* scraps the browser’s <ul> padding */
  }

  /* optional: bullet-proof the pill row itself */
  .feature.payout .payout-values {
    list-style: none;                 /* no bullets, ever */
  }

}

@media (max-width: 430px) {
  /* reset indent so these three blocks line up under the icon */
  .feature.payout .payout-intro,
  .feature.payout .payout-values,
  .feature.payout .guarantee {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}





@media (max-width: 430px) {
  /* 1) Stack icon + content */
  .feature.payout {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 1rem !important; /* adjust if needed */
  }
  .feature.payout .ico {
    margin-bottom: 1rem !important;
  }

  /* 2) Kill the desktop margin on the content container */
  .feature.payout .feature-content {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* 3) Flush-left everything under the subtitle */
  .feature.payout .payout-intro,
  .feature.payout .payout-values,
  .feature.payout .guarantee {
    margin: .5rem 0 0 !important;
    padding: 0 !important;
  }
}




/* ── Always use a 2-column grid for the payout card ───────────────────────── */

.feature.payout {
  /* override any flex you had before */
  display: grid !important;
  grid-template-columns: auto 1fr;
  grid-template-rows:
    auto   /* row-1: icon + H3 */
    auto   /* row-2: icon + subtitle */
    auto   /* row-3: intro text */
    auto   /* row-4: pills */
    auto;  /* row-5: guarantee text */
  grid-template-areas:
    "ico    title"
    "ico    subtitle"
    "intro  intro"
    "pills  pills"
    "guarantee guarantee";
  gap: 0.5rem 1rem;
  padding: 1rem;
  align-items: center;
}


/* ── Force a 1×4 layout for the multiplier tiles ───────────────────────── */
.feature.payout .payout-values {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 0.5rem 0 0 !important;
  padding: 0 !important;
  list-style: none;
}

@media (max-width: 380px) {
  .feature.payout .payout-values {
    /* override the 1×4 so it becomes 2 columns */
    grid-template-columns: repeat(2, 1fr) !important;
    /* optional: add a tiny row-gap if you want more breathing room */
    row-gap: 0.5rem;
  }
}


/* Keep each pill’s internal styling */
.feature.payout .payout-values li {
  display: flex;            /* preserve your column-flex pill layout */
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


/* flatten the wrapper so its children fall into the grid */
.feature.payout .feature-content {
  display: contents;
}

/* place each element in its named cell */
.feature.payout .ico {
  grid-area: ico;
}
.feature.payout h3 {
  grid-area: title;
  margin: 0;
}
.feature.payout .sub {
  grid-area: subtitle;
  margin: 0;
}
.feature.payout .payout-intro {
  grid-area: intro;
  margin: 0;
}
.feature.payout .payout-values {
  grid-area: pills;
  margin: 0;
}
.feature.payout .guarantee {
  grid-area: guarantee;
  margin: 0;
}


/* ── Tighten title/sub spacing and center the icon vertically ───────────────── */
.feature.payout {
  /* shrink the vertical gap between every row */
  row-gap: -12.25rem !important;
  /* optionally, tighten the horizontal space too */
  column-gap: 0.75rem !important;
}

.feature.payout .ico {
  /* make the wallet icon sit in the vertical middle of the two text-rows */
  align-self: center !important;
}

/* ── Pull down the title/subtitle ────────────────────────────────────────── */
.feature.payout {
  /* reset that nasty negative row-gap so your grid honors the original gap */
  row-gap: 0.75rem !important;
  /* (optional) tweak column gap if you like */
  column-gap: 1rem !important;
}

/* nudge the H3 and subtitle down a bit more */
.feature.payout h3 {
  margin-top: 0.5rem;
}
.feature.payout .sub {
  margin-top: 0.25rem;
}


/* ── Quick nudge: move title & subtitle down ───────────────────────── */
.feature.payout h3,
.feature.payout .sub {
  position: relative;
  top: 1rem;      /* ↑ change this value to taste */
}

/* ── Nudge only the subtitle up ───────────────────────────────────────── */
.feature.payout .sub {
  position: relative;
  top: 0.1rem;    /* ↑ negative pulls it up—bump this value up/down to taste */
}


/* ─── Payout card (“Receive Payouts”) ───────────────────────────────── */

/* make ALL feature-card headings the same size & weight */
.feature-content h3 {
  margin: 0;
  font-size: 1.25rem;        /* matches Track Performance */
  font-weight: 600;
  line-height: 1.2;
}

/* base card styles */
.feature.payout {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 1rem;
}

.feature.payout .ico {
  font-size: 1.5rem;
  color: #4f46e5;
  flex-shrink: 0;
}

.feature.payout .sub {
  margin: 0.25rem 0;
  font-size: 0.875rem;
  color: #64748b;
}

.feature.payout .payout-intro {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  line-height: 1.4;
}

.payout-values {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.payout-values li {
  flex: 1 1 auto;
  min-width: 4.5rem;
  background: #f6f8ff;
  border-radius: 8px;
  padding: 0.75rem;
  text-align: center;
}

.payout-values li strong {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: #5755d9;
}

.payout-values li span {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
}

.feature.payout .guarantee {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: #475569;
}



/* ─── “Receive Payouts” Card Styles ───────────────────────── */

/* 1) Universal feature-card heading size */
.feature-content h3 {
  margin: 0;
  font-size: 1.25rem;   /* same as Track Performance */
  font-weight: 600;
  line-height: 1.2;
}

/* 2) Base layout — now center aligned */
.feature.payout {
  display: flex;
  align-items: center;  /* ← was flex-start; now matches Track */
  gap: 1rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 1rem;
}

/* 3) Icon sizing & alignment */
.feature.payout .ico {
  font-size: 2rem;      /* ← matches Track Performance icon */
  color: #4f46e5;
  flex-shrink: 0;
  margin: 0;            /* kill any extra top/bottom space */
}

/* 4) Subtitle under the heading */
.feature.payout .sub {
  margin: 0.25rem 0;
  font-size: 0.875rem;
  color: #64748b;
}

/* 5) Intro line & pills & guarantee (desktop) */
.feature.payout .payout-intro {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  line-height: 1.4;
}

.payout-values {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.payout-values li {
  flex: 1 1 auto;
  min-width: 4.5rem;
  background: #f6f8ff;
  border-radius: 8px;
  padding: 0.75rem;
  text-align: center;
}

.payout-values li strong {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: #5755d9;
}

.payout-values li span {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
}

.feature.payout .guarantee {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: #475569;
}

/* ─── Mobile Overrides (≤430px) ────────────────────────── */
@media (max-width: 430px) {
  .feature.payout {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
      "ico title"
      "ico subtitle"
      "intro intro"
      "pills pills"
      "guarantee guarantee";
    column-gap: 0.75rem;
    row-gap: 0.25rem;
    align-items: start;
    padding: 1rem;
  }

  .feature.payout .ico {
    grid-area: ico;
    font-size: 2rem;
    align-self: center; /* vertical center relative to the title+subtitle stack */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .feature.payout h3 {
    grid-area: title;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.2;
  }

  .feature.payout .sub {
    grid-area: subtitle;
    margin: 0;
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.2;
  }

  .feature.payout .payout-intro {
    grid-area: intro;
    margin-top: 0.75rem;
  }

  .feature.payout .payout-values {
    grid-area: pills;
  }

  .feature.payout .guarantee {
    grid-area: guarantee;
  }

  /* Kill any forced position/offsets */
  .feature.payout h3,
  .feature.payout .sub {
    position: static !important;
    top: unset !important;
  }
}



/* ─── Match Track Performance icon size & alignment ───────────────── */

/* 1) Vertically center icon + title on desktop */
.feature.payout {
  display: flex;
  align-items: center;   /* same as Track Performance module */
  gap: 1rem;
}

/* 2) Make the wallet icon the same size as the chart icon */
.feature.payout .ico {
  font-size: 2rem;       /* bump this if you need it slightly larger */
  line-height: 1;
  margin: 0;             /* remove any stray margins */
}

/* 3) Ensure the heading sits level with the icon */
.feature.payout h3 {
  margin: 0;             /* no extra top/bottom space */
}


/* ── Override payout‐card icon to match Track Performance ── */
.feature.payout {
  display: flex;
  align-items: center;   /* same vertical centering as Track */
  gap: 1rem;             /* keep your existing spacing */
}

.feature.payout .ico {
  font-size: 2.5rem;     /* match the chart icon size */
  line-height: 1;        /* remove any extra descender space */
  margin: 0;             /* strip stray margins */
}



/* ─── Payout card: freeze the header block ────────────────────────── */
.payout-header{
  /* ❶  Treat icon + text as one row that never wraps                */
  display:flex;
  align-items:center;
  gap:0.75rem;

  /* ❷  Set a fixed height that matches your mock‑up                 */
  min-height:72px;          /* exact height in the red rectangle     */
}

.payout-header .ico{
  /* 48 px square icon that never scales down                        */
  flex:0 0 48px;
  width:48px; height:48px;
  font-size:48px;           /* wallet glyph stays proportional       */
  line-height:1;            /* no extra vertical whitespace          */
}

.payout-header h3{
  margin:0;
  font:600 1.25rem/1.2 "Inter",sans-serif;   /* freeze font size     */
}

.payout-header .sub{
  margin:2px 0 0;                              /* slight breathing   */
  font:400 .875rem/1.2 "Inter",sans-serif;     /* same on all views  */
}

/* ─── Kill every previous nudge that repositioned the heading ────── */
.feature.payout h3,
.feature.payout .sub{
  position:static !important;
  top:auto !important;
}

/* ─── MOBILE (≤430 px): keep header on row‑1, flush left ─────────── */
@media(max-width:430px){
  .feature.payout{
    display:grid !important;
    grid-template-columns:1fr;               /* single column        */
    grid-template-areas:
      "header"                               /* icon + title block   */
      "intro"
      "pills"
      "guarantee";
    row-gap:0.75rem;
  }
  .payout-header{ grid-area:header; }
}




/* =======================================================================
   UNIFY MODULE TYPOGRAPHY  ▸  paste BELOW all current rules
   ======================================================================= */

/* 1 ▸ Track Performance card heading + subtitle ----------------------- */
.feature.track h3 {
  font: 600 1.25rem/1.2 "Inter", sans-serif;   /* same as Receive Payouts */
  margin: 0;
}
.feature.track .sub {
  font: 400 0.875rem/1.2 "Inter", sans-serif;
  margin: 0.25rem 0 0;
}

/* 2 ▸ “We Handle Everything” header ---------------------------------- */
.howto-module__header.feature.handle h3 {
  font: 600 1.25rem/1.2 "Inter", sans-serif;   /* up from 1.05 rem */
}

/* 3 ▸ Wallet icon – bump from 48 → 52 px ----------------------------- */
.payout-header .ico {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  font-size: 52px;
}


/* ======================================================================
   RECEIVE PAYOUTS – keep full‑size heading & stop wrapping on phones
   ====================================================================== */
@media (max-width: 430px){
  /* 1 ▸ keep the 1.25 rem font instead of the mobile down‑size */
  .feature.payout h3{
    font: 600 1.25rem/1.2 "Inter", sans-serif !important;
  }

  /* 2 ▸ don’t let the icon/text row wrap */
  .payout-header{
    flex-wrap: nowrap !important;   /* icon + text stay on one line   */
    align-items: center !important; /* keep them vertically centred   */
    gap: 0.75rem !important;        /* same horizontal separation     */
  }

  /* 3 ▸ allow the text block to shrink a bit instead of dropping     */
  .payout-header .title-wrap{
    min-width: 0;                   /* lets it flex‑shrink gracefully */
  }
}

/* ======================================================================
   RECEIVE PAYOUTS – tiny vertical tweak for extra‑narrow screens
   ====================================================================== */
@media (max-width: 430px){
  /* lift the text block 2 px so it lines up with the icon */
  .payout-header .title-wrap{
    position: relative;
    top: -2px;          /* adjust ↑ or ↓ 1 px if you need finer tuning */
  }
}

/* ======================================================================
   RECEIVE PAYOUTS – final micro‑alignment for ≤ 430 px
   ====================================================================== */
@media (max-width: 430px){
  /* 1 ▸ top‑align icon + text rather than centre‑align */
  .payout-header{
    align-items: flex-start !important;
  }

  /* 2 ▸ nudge the text block up so the heading sits level with the
         icon’s top edge (adjust −3 px/−5 px if you need finer control) */
  .payout-header .title-wrap{
    position: relative;
    top: 6px;   /* lifts heading & subtitle together */
  }
}




/* ────────────────────────────────────────────────────────────────
   TRACK PERFORMANCE  (glass‑card variant)
   ---------------------------------------------------------------- */
.track-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
}

/* Header: icon + title block */
.track-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.track-header h3 {
  margin: 0;
  font: 600 1.25rem/1.2 "Inter", sans-serif;
  color: #0f172a;
}
.track-header .sub {
  margin: 0.25rem 0 0;
  font: 400 0.875rem/1.4 "Inter", sans-serif;
  color: #64748b;
}

/* Icon inherits existing .ico rules – size bump for consistency */
.track-header .ico {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  font-size: 2rem;         /* ≈32 px glyph */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  background: rgba(85,99,255,.12);
  border-radius: 12px;
}

/* Metrics grid (2 × 2) */
.track-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 460px) {          /* single‑column on tiny phones */
  .track-grid { grid-template-columns: 1fr; }
}

/* Metric tile */
.track-cell {
  background: #f8fafc;
  border-radius: 0.75rem;
  padding: 1rem;
}

/* Typography inside each tile */
.cell-label  { font: 500 0.9rem/1 "Inter", sans-serif; color: #475569; margin: 0 0 .25rem; }
.cell-value  { font: 700 1.75rem/1.1 "Inter", sans-serif; color: #0f172a; margin: 0; }

.cell-change {
  display: flex;
  align-items: baseline;
  gap: .25rem;
  font: 600 0.9rem/1 "Inter", sans-serif;
  margin-top: .35rem;
}
.cell-change.up   { color: #16a34a; }  /* emerald‑600 */
.cell-change.down { color: #dc2626; }  /* red‑600    */
.cell-change small {
  font-weight: 400;
  opacity: .8;
}

/* CTA button */
.track-cta {
  align-self: flex-start;
  padding: 0.75rem 1.5rem;
  font: 600 1rem/1 "Inter", sans-serif;
  color: #fff;
  background: linear-gradient(90deg, #5F3CE7 0%, #8A4FFE 100%);
  border: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  cursor: pointer;
  transition: background .2s ease, transform .1s ease;
}
.track-cta:hover  { background: linear-gradient(90deg,#6A49EA 0%,#9A5FFF 100%); transform: translateY(-2px); }
.track-cta:active { transform: scale(.97); }


/* ────────────────────────────────────────────────────────────────
   ①  Icon → big gradient circle on the left
───────────────────────────────────────────────────────────────── */
.track-header .ico{
  flex:0 0 76px;
  width:76px;
  height:76px;
  border-radius:50%;
  background:linear-gradient(135deg,#6B5CFF 0%,#8A4FFE 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;          /* glyph size */
  color:#fff;
}

/* keep header text flush‑left of the circle */
.track-heading{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.25rem;
}

/* ────────────────────────────────────────────────────────────────
   ②  Metric tile layout (2 × 2)
───────────────────────────────────────────────────────────────── */
.track-cell{
  background:#f9faff;
  border-radius:12px;
  padding:1.25rem 1rem;
  display:grid;
  grid-template-columns:1fr auto;   /* value | delta */
  grid-template-rows:auto auto;     /* label | value */
  row-gap:.25rem;
}
.cell-label{ grid-column:1/-1; font:600 .95rem/1 "Inter",sans-serif; color:#334155; margin:0; }
.cell-value{ font:700 2.125rem/1 "Inter",sans-serif; color:#0f172a; margin:0; }
.cell-delta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  font:600 .95rem/1 "Inter",sans-serif;
}
.cell-delta small{ font:400 .75rem/1 "Inter",sans-serif; opacity:.85; }

/* colours */
.cell-delta.up   { color:#16a34a; }  /* emerald‑600 */
.cell-delta.down { color:#dc2626; }  /* red‑600     */

/* ────────────────────────────────────────────────────────────────
   ③  Fine‑tune the CTA so it stretches full width
───────────────────────────────────────────────────────────────── */
.track-cta{
  margin-top:1.25rem;
  width:100%;
}

/* ────────────────────────────────────────────────────────────────
   ④  Keep existing mobile single‑column rule
───────────────────────────────────────────────────────────────── */
@media(max-width:460px){
  .track-grid{ grid-template-columns:1fr; }
}


/* ────────────────────────────────────────────────────────────────
   TRACK PERFORMANCE – final polish
───────────────────────────────────────────────────────────────── */

/* 1 ▸ Header icon – use the big gradient circle everywhere
   (make it shrink slightly on very small screens)               */
.track-header .ico{
  flex:0 0 68px;             /* desktop / large‑mobile */
  width:68px; height:68px;
  border-radius:50%;
  background:linear-gradient(135deg,#6b5cff 0%,#8a4ffe 100%);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:1.85rem;         /* glyph size */
}
@media(max-width:380px){
  .track-header .ico{        /* tiny phones */
    flex-basis:56px;
    width:56px; height:56px;
    font-size:1.6rem;
  }
}

/* 2 ▸ Grid – always 2 columns, auto‑wrap if card gets < 290 px */
.track-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem 1rem;             /* row & column gaps */
}
@media(max-width:320px){     /* last‑resort for ultra‑narrow */
  .track-grid{ grid-template-columns:1fr; }
}

/* 3 ▸ Metric tile sizing & inner layout */
.track-cell{
  background:#f6f8ff;
  border-radius:12px;
  padding:1rem 1.25rem;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  row-gap:.35rem;
  column-gap:.5rem;
}
.cell-label{
  grid-column:1 / -1;
  font:600 .95rem/1 "Inter",sans-serif;
  color:#334155;
  margin:0;
}
.cell-value{
  font:700 2.05rem/1 "Inter",sans-serif;
  color:#0f172a;
  margin:0;
}
.cell-delta{                 /* stack % and “w/w” */
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}
.delta-val{ font:600 1rem/1 "Inter",sans-serif; }
.cell-delta small{ font:400 .75rem/1 "Inter",sans-serif; opacity:.8; }

.cell-delta.up   { color:#16a34a; }   /* green */
.cell-delta.down { color:#dc2626; }   /* red   */

/* 4 ▸ CTA – stretch to full width, keep pill look */
.track-cta{
  margin-top:1.5rem;
  width:100%;
  border-radius:999px;
  padding:.9rem 1.5rem;
}

/* 5 ▸ Fine‑tune vertical rhythm inside the card */
.track-card{ gap:1.75rem; }  /* header ↔ grid ↔ CTA */

/* ────────────────────────────────────────────────────────────────
   TRACK PERFORMANCE – responsive typography & padding
   (keeps 2×2 grid while shrinking fonts below ≈450 px)
───────────────────────────────────────────────────────────────── */

/* ❶  Let each tile know its own width so we can clamp font‑sizes  */
.track-cell { min-width: 0; }   /* prevents glyph overflow */

/* ❷  Smooth font‑scaling with clamp() – works from desktop down to 320 px */
.cell-value       { font-size: clamp(1.35rem,   6vw, 2.05rem); }
.delta-val        { font-size: clamp(.70rem,    3vw, 1rem);    }
.cell-delta small { font-size: clamp(.60rem, 2.5vw, .75rem);   }

/* ❸  Tighten padding & gaps on narrow screens (≤450 px) */
@media (max-width: 450px) {
  .track-cell {
    padding: .9rem .9rem;
    row-gap: .25rem;
    column-gap: .4rem;
  }
  .track-grid { gap: .8rem; }    /* overall grid gap */
}

/* ❹  Last‑resort tweak for ultra‑narrow (≤340 px) */
@media (max-width: 340px) {
  .cell-value       { font-size: 1.25rem; }
  .delta-val        { font-size: .65rem;  }
  .cell-delta small { font-size: .55rem;  }
  .track-cell       { padding: .75rem .7rem; }
  .track-grid       { gap: .65rem; }
}

/* ================================================================
   TRACK PERFORMANCE – 3 requested desktop tweaks
   ================================================================ */

/* 1 ▸  Give the big numbers a hair‑cut on desktop so
        the “+12 % w/w” never collides with them            */
@media (min-width: 451px){          /* only wider than typical phones */
  .track-card .cell-value{
    /* 2.05 rem ➜ 1.85 rem max, lower vw slope a touch too          */
    font-size: clamp(1.35rem, 5vw, 1.85rem);
  }
  /* tiny breathing‑room between value and delta                     */
  .track-card .delta-val{ margin-left: .15rem; }
}

/* 2 ▸  Make the header (icon + H3) identical to the module above   */
.track-card{ border-radius: 12px !important; }       /* same curve   */

.track-header .ico{
  /* mirror the Receive‑Payouts icon block (52 px square)           */
  flex: 0 0 52px;
  width: 52px; height: 52px;
  display:flex; align-items:center; justify-content:center;
  font-size: 2rem;                     /* glyph size                */
  color: var(--primary);               /* same brand blue           */
  background: none;                    /* no circle / no gradient   */
}

.track-header h3{
  /* exact same typography as the previous module’s heading         */
  font: 600 1.25rem/1.2 "Inter", sans-serif;
  margin: 0;
}

/* 3 ▸  Keep the quadrant grid & mobile fixes you already have      */
/*     (no extra rules needed – previous clamp/mobile code stands)  */


/* =====================================================================
   TRACK PERFORMANCE  – header now twins “Receive Payouts”
   ===================================================================== */
.track-card .track-header .ico{
  /* same 52 px square as the wallet icon */
  flex: 0 0 52px !important;
  width: 52px !important;
  height: 52px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 2rem !important;       /* glyph size */
  line-height: 1 !important;
  color: var(--primary) !important;

  background: none !important;      /* no gradient / no circle */
}

.track-card .track-header h3{
  /* identical heading typography to the module above */
  font: 600 1.25rem/1.2 "Inter", sans-serif !important;
  margin: 0 !important;
}

.track-card .track-header .sub{
  /* identical subtitle size */
  font: 400 0.875rem/1.4 "Inter", sans-serif !important;
}

/* keep the 12 px corner radius we already applied */
.track-card{ border-radius: 12px !important; }


/* ====================================================================
   TRACK PERFORMANCE – header now mirrors “Receive Payouts” exactly
   ==================================================================== */

/* 1 ▸  Same 72 px header band & vertical centring ------------------ */
.track-card .track-header{
  display:flex !important;
  align-items:center !important;   /* centre icon + text vertically   */
  gap:1rem !important;
  min-height:72px !important;      /* identical band height           */
}

/* 2 ▸  Icon block (52 × 52 px, purple glyph, no circle) ------------ */
.track-card .track-header .ico{
  flex:0 0 52px !important;
  width:52px !important;
  height:52px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-size:2rem !important;       /* same glyph size as wallet       */
  line-height:1 !important;
  color:var(--primary) !important; /* same brand purple               */

  background:none !important;      /* remove the earlier gradient     */
  border-radius:0 !important;      /* no circle                       */
  margin:0 !important;             /* flush with the text             */
}

/* 3 ▸  Heading & sub‑title typography ------------------------------ */
.track-card .track-header h3{
  font:600 1.25rem/1.2 "Inter",sans-serif !important;
  margin:0 !important;
}
.track-card .track-header .sub{
  font:400 0.875rem/1.4 "Inter",sans-serif !important;
  margin:0.25rem 0 0 !important;
}

/* 4 ▸  Card corner radius already set to 12 px earlier
        (kept here for clarity)                                      */
.track-card{ border-radius:12px !important; }


/* ─── Match Track Performance header to Receive Payouts ───────────── */
.track-card .track-header {
  display: flex !important;
  align-items: center !important;   /* vertical centering */
  gap: 0.75rem !important;           /* same horizontal gap */
  min-height: 72px !important;       /* same header “band” height */
}

.track-card .track-header .ico {
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;
  font-size: 48px !important;       /* same glyph size */
  line-height: 1 !important;
  background: none !important;  /* same tint */
  border-radius: 0 !important;             /* same corner radius */
  color: var(--primary) !important;
}

.track-card .track-header h3 {
  margin: 0 !important;
  font: 600 1.25rem/1.2 "Inter", sans-serif !important; /* match payout heading */
  color: #0f172a !important;
}

.track-card .track-header .sub {
  margin: 2px 0 0 !important;
  font: 400 .875rem/1.2 "Inter", sans-serif !important; /* match payout subtitle */
  color: #64748b !important;
}

/* ─── Move ALL Track Performance content flush‐left ─────────────── */
.track-card {
  /* shrink left/right padding to match Receive Payouts */
  padding: 1rem !important;
  /* left-align every child in the vertical stack */
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

/* ensure header + grid + CTA span full width of that 1rem inset */
.track-card .track-header,
.track-card .track-grid,
.track-card .track-cta {
  width: 100% !important;
}

/* keep the View Dashboard button flush to left */
.track-card .track-cta {
  align-self: flex-start !important;
  margin: 0 !important;
}

/* center “View Dashboard →” inside the button */
.track-card .track-cta {
  display: inline-flex !important;
  justify-content: center !important;  /* center children horizontally */
}






/* ───── Dashboard bottom‑sheet ───── */
.dashboard-sheet { /* inherits base .partnerform-sheet rules */
  padding: 0 1.25rem 2rem;
}
.dashboard-card {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding-bottom: .5rem;          /* leave space above grab‑bar */
}
.dash-title {
  margin: 0;
  font: 700 1.35rem/1 "Inter", sans-serif;
  color: #0f172a;
}

/* KPI grid: two columns on phones, four on ≥480 px */
.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.25rem;
}
@media (min-width: 480px) {
  .dash-kpi-grid { grid-template-columns: repeat(4, 1fr); }
}
/* each KPI box */
.kpi-box {
  background: #f8fafc;
  border-radius: 0.75rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.kpi-span-2 { grid-column: span 2; }          /* lets Customers bar stretch */
.kpi-label  { margin: 0; font: 500 .85rem/1 "Inter"; color: #64748b; }
.kpi-value  { margin: 0; font: 700 1.65rem/1 "Inter"; color: #0f172a; }

/* small bar‑chart inside Customers box */
#custChart { width: 100% !important; height: 70px !important; }


/* hide sheet handle on dashboard */
.dashboard-sheet .partnerform-grab{display:none;}

/* lock page scroll when overlay is open */
body.partner-locked{
  overflow: hidden;
  touch-action: none;     /* prevents iOS rubber‑band */
}


/* KPI grid responsive tweaks */
.dash-kpi-grid{
  grid-template-columns:repeat(3,1fr);   /* always 3 across */
}
.kpi-box{
  min-width: 0;           /* prevent overflow */
}

/* font + padding drops slightly below 420 px */
@media(max-width:420px){
  .kpi-box { padding:.75rem; }
  .kpi-label{ font:500 .75rem/1 "Inter"; }
  .kpi-value{ font:700 1.15rem/1 "Inter"; }
}


.dash-tabs{
  display:flex; gap:.5rem; margin:-.25rem 0 1rem;
}

 .dash-tabs button{
  flex:1;border:0;padding:.45rem .5rem;border-radius:.5rem;
  font:600 .75rem/1 'Inter';color:#475569;background:#f1f5f9;cursor:pointer
  flex:1 1 0;               /* allow shrinkage */
  min-inline-size:0;        /* remove implicit min‑width */
  border:0;
  padding:.45rem .5rem;
  border-radius:.5rem;
  font:600 .75rem/1.2 'Inter',sans-serif;  /* 1.2 line‑height helps readability */
  color:#475569;
  background:#f1f5f9;
  cursor:pointer;
  white-space:normal;       /* enable wrapping */
  text-align:center;
 }


.dash-tabs button.active{ color:#fff; background:#4f46ff; }

/* KPI grid — never wraps, text scales down */
.dash-kpi-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem .75rem;
}
.kpi-box{background:#f8fafc;border-radius:.75rem;padding:1rem;display:flex;flex-direction:column;gap:.25rem;min-width:0;}
.kpi-label{margin:0;font:500 .9rem/1 'Inter';color:#64748b;}
.kpi-value{margin:0;font:700 1.8rem/1 'Inter';color:#0f172a;}

@media(max-width:430px){
  .kpi-box     {padding:.6rem;}
  .kpi-label   {font-size:.75rem;}
  .kpi-value   {font-size:1.1rem;}
}

@media (max-width:420px){
  .kpi-box{padding:.75rem .5rem;}
}

.dash-tabs{
  display:flex;
  gap:.5rem;
  margin:1.25rem 0 1rem;   /* ⬅︎ adds ~20 px top spacing */
}

@media (max-width:350px){
  .dash-tabs button{
    font-size:.68rem;   /* slightly smaller so two lines fit comfortably */
    padding:.5rem .4rem;
  }
}



/* ONE clean, working block – place it after any other dash‑tab rules */
.dash-tabs {
  display:flex;
  gap:.5rem;
  margin:1.25rem 0 1rem;   /* breathing room */
}

.dash-tabs button{
  flex:1 1 0;              /* may shrink */
  min-inline-size:0;       /* no implicit min‑width */
  border:0;
  padding:.45rem .5rem;
  border-radius:.5rem;
  font:600 .75rem/1.2 "Inter",sans-serif;
  color:#475569;
  background:#f1f5f9;
  cursor:pointer;
  white-space:normal;      /* allow wrapping */
  text-align:center;
}

.dash-tabs button.active{
  background:#4f46ff;
  color:#fff;
}

@media(max-width:350px){
  .dash-tabs button{
    font-size:.68rem;
    padding:.5rem .4rem;
  }
}

.kpi-value{
  margin:0;
  font:700 clamp(1rem,4.5vw,1.65rem)/1 "Inter",sans-serif;
  color:#0f172a;
}


/* 1 ▸ give the card a little breathing room at the top  */
.dashboard-card{
  padding-top:1.25rem;          /* ≈20 px */
}

/* 2 ▸ one authoritative .dash‑tabs rule – place it AFTER every duplicate */
.dash-tabs{
  display:flex;
  gap:.5rem;
  margin:0;                     /* we use padding now */
  /* no need for a negative margin anywhere */
}

.dash-tabs button{
  flex:1 1 0;
  min-inline-size:0;
  padding:.45rem .5rem;
  font:600 .75rem/1.2 "Inter",sans-serif;
  background:#f1f5f9;
  color:#475569;
  border:0;
  border-radius:.5rem;
  cursor:pointer;
  white-space:normal;           /* allows 2‑line wrap */
  text-align:center;
}

.dash-tabs button.active{
  background:#4f46ff;
  color:#fff;
}

@media(max-width:350px){
  .dash-tabs button{
    font-size:.68rem;
    padding:.5rem .4rem;
  }
}

/* DASHBOARD — make sure the close button is always visible */
.dashboard-sheet .partnerform-close{
  display:block;              /* was hidden by earlier overrides   */
  position:absolute;
  top:8px;                    /* clears the rounded corner         */
  right:8px;
  width:32px; height:32px;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,.06); /* subtle disc behind the icon       */
  font-size:1.5rem;
  line-height:32px;
  color:#64748b;
  cursor:pointer;
  z-index:20;                 /* sits above the chart canvas       */
}
.dashboard-sheet .partnerform-close i{pointer-events:none;} /* icon stays clickable */


/* DASHBOARD – responsive tab row */
.dash-tabs{
  display:grid;                               /* instead of flex      */
  grid-template-columns:repeat(auto-fit,
                      minmax(90px,1fr));      /* wrap as needed       */
  gap:.5rem;
  margin:1rem 0 .75rem;                       /* breathing room       */
}

.dash-tabs button{
  min-width:0;           /* let them shrink   */
  padding:.5rem .4rem;
  font:600 .75rem/1.2 "Inter",sans-serif;
  border:0;
  border-radius:.5rem;
  background:#f1f5f9;
  color:#475569;
  white-space:normal;    /* two‑line wrap OK  */
  text-align:center;
  cursor:pointer;
}

.dash-tabs button.active{
  background:#4f46ff;
  color:#fff;
}

@media(max-width:350px){
  .dash-tabs button{font-size:.68rem;}        /* micro‑shrink on tiny */
}



/* ❶  Keep the sheet’s content clear of the chevron  */
.dashboard-sheet{
  position:relative;            /* create a containing block            */
  padding-top:2.75rem;          /* ⇢ pushes tabs & chart ~44 px lower   */
}

/* ❷  Chevron button – fine‑tuned co‑ordinates & size  */
.dashboard-sheet .partnerform-close{
  position:absolute;
  top:.75rem;                   /* sits inside the 2.75 rem padding     */
  right:.75rem;                 /* hugs the curved corner nicely        */
  width:32px; height:32px;      /* compact disc                         */
  border-radius:50%;
  background:rgba(0,0,0,.06);
  border:0;
  font-size:1.5rem;
  line-height:32px;
  color:#64748b;
  cursor:pointer;
  z-index:20;
}
.dashboard-sheet .partnerform-close i{pointer-events:none;}

/* ❸  Tabs – add phantom space on the right so the last pill
       never slides under the chevron on ultra‑wide labels          */
.dash-tabs{
  padding-right:3rem;           /* ≈ 32 px disc + 16 px gutter          */
}


/* ─── Spark‑line selected‑point bubble ───────────────────────── */
.chart-callout{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:2px;

  /* size & shape */
  padding:.45rem .75rem;
  border-radius:.75rem;
  background:#fff;

  /* typography */
  font:600 .9rem/1.25 "Inter",sans-serif;
  color:#0f172a;

  /* depth & positioning */
  box-shadow:0 4px 16px rgba(0,0,0,.14);
  transform:translate(-50%,-140%);       /* sits a touch higher        */
  pointer-events:none;
  white-space:nowrap;
}

/* main $ value */
.chart-callout .c-val{
  font-weight:700;
  font-size:1rem;
}

/* % delta – colourised */
.chart-callout .c-pct{
  font-weight:600;
  font-size:.8rem;
}
.chart-callout .up   { color:#16a34a; }   /* emerald‑600 */
.chart-callout .down { color:#dc2626; }   /* red‑600     */

/* little pointer triangle */
.chart-callout::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-6px;
  width:10px; height:10px;
  background:#fff;
  transform:translateX(-50%) rotate(45deg);
  box-shadow:0 3px 6px rgba(0,0,0,.10);
}


/* put this after the existing .chart-callout rule */
.chart-callout{
    /* was translate(-50% , ‑120%) – too high */
    transform: translate(-50%, -100%);   /* bubble sits just above the marker   */
}


.kpi-eq{ display:none !important; }


/* ─── FINAL‑FINAL bubble position ───────────────────────── */
.chart-callout{
    /* only 30 % upward = ~14 px clearance including the tail */
    transform: translate(-50%, 50%) !important;
}

/* put the little tail 1 px closer as well */
.chart-callout::after{
    bottom: -5px !important;   /* was ‑6 px */
}

/* ─── KPI delta under each tile ───────────────────────────── */
.kpi-delta{
    margin: .25rem 0 0;                 /* breathing‑room below the big number */
    font: 600 .85rem/1 "Inter", sans-serif;
    display: block;                     /* always visible */
    letter-spacing: .015em;
}

/* colour‑coding */
.kpi-delta.up   { color: #16a34a; }     /* emerald‑600  */
.kpi-delta.down { color: #dc2626; }     /* red‑600      */

/* optional: arrow icon size harmony */
.kpi-delta i{
    font-size: .75rem;
    vertical-align: middle;
    margin-right: .25rem;
}

/* grid already exists – just specialise the new container */
#dynamicKPIs{
  display:grid;
  grid-template-columns:repeat(4,1fr);   /* desktop = one long row */
  gap:1rem;
}
@media (max-width:559px){
  #dynamicKPIs{ grid-template-columns:repeat(2,1fr); }  /* phone = 2×2 */
}



/*  ───────────────────────────────────────────────
    STICKY “APPLY NOW” BAR  – final, single source
   ─────────────────────────────────────────────── */
#applyNowBar{
  position:fixed;
  bottom:16px;                   /* 16 px gap from viewport bottom   */
  left:50%;                      /* anchor the bar in the centre     */
  transform:translate(-50%,150%);/* hidden state (slides down)       */

  /* the bar’s own size */
  width:calc(100% - 32px);       /* 16 px side‑gutters on any screen */
  max-width:480px;               /* never wider than your phone shell */

  /* flex just so the pill can stretch full width */
  display:flex;
  justify-content:center;

  /* no background strip or shadow */
  background:transparent !important;
  box-shadow:none        !important;

  /* don’t intercept clicks while hidden */
  pointer-events:none;
}

/* slide‑up + become clickable */
#applyNowBar.visible{
  transform:translate(-50%,0);
  pointer-events:auto;
}

/* pill‑button now really fills the bar */
#applyNowBar .btn-apply{
  width:100%;
  pointer-events:auto;
}


/* ===== FINAL sticky-bar rules (place AFTER any other #applyNowBar blocks) ===== */
#applyNowBar {
  position: fixed;
  bottom: 16px;
  left: 0;
  right: 0;                              /* stretch from left edge to right edge */
  margin: 0 auto;                        /* then auto-center within that space */
  width: calc(100% - 32px);
  max-width: 480px;
  z-index: 1000;
  transform: translateY(120%);           /* start hidden below viewport */
  transition: transform 0.3s ease-out;
}

#applyNowBar.visible {
  transform: translateY(0);              /* slide up into view */
}


/* put this AFTER every other .chart‑callout rule */
.chart-callout{
    /* X‑axis still centred (‑50%), Y‑axis just 1 bubble‑height above the point */
    transform: translate(-50%, 175%) !important;
}

/* nudge the little tail so it kisses the point again */
.chart-callout::after{
    bottom: -6px !important;   /* back to the original 6 px (or ‑5 if you prefer) */
}


/* bubble pointer – now driven by a custom CSS variable */
.chart-callout::after{
    content:'';
    position:absolute;
    /* NEW: we’ll set --arrowX from JS (fallback = 50 %) */
    left: var(--arrowX, 50%);
    bottom:-6px;
    width:10px; height:10px;
    background:#fff;
    transform: translateX(-50%) rotate(45deg);
    box-shadow:0 3px 6px rgba(0,0,0,.10);
}


/* base styles (you may already have these) */
.btn-dashboard {
  display: block;
  margin: 24px auto;
  width: 320px;
  max-width: 100%;
  padding: 12px 0;
  font-size: 0.9rem;       /* ~14.4px */
  text-align: center;
  border-radius: 6px;
  background: #4F46E5;
  color: #fff;
}

/* tweak it on really small screens */
@media screen and (max-width: 320px) {
  .btn-dashboard {
    width: calc(100% - 16px);   /* 8px gutter each side */
    padding: 14px 0;            /* a little taller */
    font-size: 1rem;            /* bump to 16px */
  }
}

@media screen and (max-width: 320px) {
  .metrics-container {
    font-size: 1rem;  /* 16px across all child elements that use rems */
  }
}


/* ─── Ultra‑narrow phones (≤ 350 px) ────────────────────────────── */
@media (max-width:350px){

  /* 1 ▸ give the pills the full width again */
  .dash-tabs{
    padding-right: 0;                      /* was 3 rem */
    grid-template-columns: repeat(auto-fit,
                            minmax(80px,1fr)); /* shrink‑to‑fit */
    overflow-x: auto;                      /* graceful fallback if still tight */
    scrollbar-width: none;                 /* Firefox */
  }
  .dash-tabs::-webkit-scrollbar{ display:none; } /* WebKit */

  /* 2 ▸ let the text breathe but stay readable */
  .dash-tabs button{
    font-size: .72rem;                     /* micro‑shrink */
    padding: .45rem .4rem;                 /* slimmer left/right */
  }
}


/* ────────────────────────────────────────────────────────────────
   “We Handle Everything”  ▸  final grid‑fix
   place this AFTER every other .howto-module__items rule
───────────────────────────────────────────────────────────────── */

/* 1 ▸  Always show two columns once there is room (≥ 560 px)   */
@media (min-width: 560px) {
  .howto-module__items {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;          /* keep the 20 px rhythm */
  }
}

/* 2 ▸  Stop pushing the module 1.5 rem off‑canvas on wide views */
@media (min-width: 560px) {
  .howto-module__header.feature.handle {
    margin-inline: 0 !important;      /* undo the earlier –1.5 rem */
  }
}

/* 3 ▸  Ensure the module never clips its own children            */
.howto-module,
.howto-module__items {
  overflow: visible !important;
}


/* ────────────────────────────────────────────────────────────────
   “We Handle Everything” – stop headings from blowing up the grid
───────────────────────────────────────────────────────────────── */

/* 1 ▸  Let each tile shrink inside the grid track                 */
.howto-module__item{
  min-width: 0 !important;        /* ← critical */
}

/* 2 ▸  Wrap over‑long headings instead of widening the tile       */


/* Machines KPI grid – 3 tiles in one row, wraps on phones */
#dashboardSheet[data-tab="util"] .dash-kpi-grid{
  grid-template-columns:repeat(3,1fr);
}
@media(max-width:560px){
  #dashboardSheet[data-tab="util"] .dash-kpi-grid{
    grid-template-columns:1fr;
  }
}

#dashboardSheet[data-tab="util"] .dash-kpi-grid{
  grid-template-columns:repeat(3,1fr);
}


/* ─── Machines KPI grid – keep 3 tiles in one row, just like Financial ─── */
#dashboardSheet[data-tab="util"] .dash-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1rem !important;
}

/* ─── Small-screen tweaks – shrink padding & type so it never spills ─── */
@media (max-width: 420px) {
  #dashboardSheet[data-tab="util"] .dash-kpi-grid .kpi-box {
    padding: 0.75rem !important;
  }
  #dashboardSheet[data-tab="util"] .dash-kpi-grid .kpi-label {
    font-size: 0.75rem !important;
  }
  #dashboardSheet[data-tab="util"] .dash-kpi-grid .kpi-value {
    font-size: 1.15rem !important;
  }
}


/* ─── For Machines tab only, make dynamicKPIs a 3-column grid ─── */
#dashboardSheet[data-tab="util"] #dynamicKPIs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1rem !important;
}

/* ─── Small-screen shrink-down so 3 never wrap on ≤420px ─── */
@media (max-width: 420px) {
  #dashboardSheet[data-tab="util"] #dynamicKPIs .kpi-box {
    padding: 0.75rem !important;
  }
  #dashboardSheet[data-tab="util"] #dynamicKPIs .kpi-label {
    font-size: 0.75rem !important;
  }
  #dashboardSheet[data-tab="util"] #dynamicKPIs .kpi-value {
    font-size: 1.15rem !important;
  }
}

/* ─── Hide Financial tiles in Machines tab ─── */
#dashboardSheet[data-tab="util"] #financialKPIs,
#dashboardSheet[data-tab="util"] #kpiEq {
  display: none !important;
}

/* ─── Ensure only your 3 “Machines” tiles show ─── */
#dashboardSheet[data-tab="util"] #dynamicKPIs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1rem !important;
}


/* ─── Financial tab – force a 3-column grid ─── */
#dashboardSheet[data-tab="financial"] #financialKPIs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1rem !important;
}

/* ─── Small-screen tweaks for Financial so 3 never wrap on ≤420px ─── */
@media (max-width: 420px) {
  #dashboardSheet[data-tab="financial"] #financialKPIs .kpi-box {
    padding: 0.75rem !important;
  }
  #dashboardSheet[data-tab="financial"] #financialKPIs .kpi-label {
    font-size: 0.75rem !important;
  }
  #dashboardSheet[data-tab="financial"] #financialKPIs .kpi-value {
    font-size: 1.15rem !important;
  }
}


/* ─── Expand the mobile shell on desktop ─── */
/* ─── on big screens, make the shell, the dashboard‐sheet,
       and your 2-column section all expand to the same max ─── */
/* ────────────────────────────────────────────────────────────────────
   Stretch shell, sheet, and 2-col grid in lock-step on large screens
──────────────────────────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────────────
   2-column “Receive / Track” + sheet expand patch
──────────────────────────────────────────────────────────────────── */
/* ─── Expand the mobile shell on desktop ─── */
@media (min-width: 800px) {
  /* expand the phone shell */
  .howto-mobile-shell {
    width: min(100%, 700px) !important;
  }

  /* let the bottom list stretch to the full shell */
  .howto-list {
    max-width: none !important;
    width: 100% !important;
    padding-inline: 0;   /* if you want it flush to the edges */
  }

  /* ensure each list-item/card inside is full-width */
  .howto-list li {
    width: 100% !important;
  }
}





/* ─── We-Handle-Everything: stop headings from spilling ─── */
/* ─── FINAL fix: keep words whole, wrap when card edge is hit ───────── */
/* ─── FINAL: keep headings inside the grey cards ───────────────── */
/* ─── LAST FIX: stop the grey‑tile grid from stretching ───────────── */

/* 1 ▸ force every track in the grid to be allowed to shrink          */
.howto-module__list,
.howto-module__items{                    /* whichever one your HTML uses */
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  column-gap:1.25rem !important;         /* keep the 20 px gutter */
}

/* 2 ▸ back to a single column on narrow phones                       */
@media (max-width:560px){
  .howto-module__list,
  .howto-module__items{
    grid-template-columns:1fr !important;
  }
}

/* 3 ▸ **critical** – let each individual card shrink                 */
.howto-module__item{ min-width:0 !important; }

/* 4 ▸ make sure the heading itself is allowed to wrap cleanly        */
.item-heading{
  white-space: normal !important;       /* wrap at spaces           */
  overflow-wrap: break-word !important; /* split a word only if     */
  word-break: normal !important;        /* absolutely necessary     */
  min-width: 0 !important;              /* let the card shrink      */
}


/* ─── HERO SECTION ───────────────────────────────────────────── */
.hero-section {
  margin-bottom: 24px;
  padding: 1.5rem 1rem;
  text-align: center;
  background: rgba(255,255,255,0.45);    /* matches glass-card backdrop */
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.66) 0%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0.18) 100%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.32);
  z-index: -1;
}

.hero-title {
  margin: 0;
  font: 700 1.5rem/1.2 'Inter', sans-serif;
  color: #0f172a;
}

.hero-subtitle {
  margin-top: 0.5rem;
  font: 400 1rem/1.4 'Inter', sans-serif;
  color: #64748b;
}

/* ─── FULL-WIDTH HERO & INNER ALIGNMENT ───────────────────────── */
.hero-section {
  width: 100%;
  background: linear-gradient(135deg, #dfe9ff 0%, #e5f1ff 100%);
  padding: clamp(3rem, 8vw, 6rem) 0;   /* tall vertical rhythm */
  text-align: center;
}

/* constrain text to the same width as your phone shell */
.hero-inner {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 1rem;                     /* horizontal gutter */
}

/* headline */
.hero-title {
  margin: 0;
  font: 700 clamp(2rem, 6vw, 3rem) / 1.1 'Inter', sans-serif;
  color: #0f172a;
}

/* subhead */
.hero-subtitle {
  margin-top: 1rem;
  font: 400 clamp(1rem, 3vw, 1.25rem) / 1.4 'Inter', sans-serif;
  color: #475569;
}


/* ─── HERO (refresh) ───────────────────────────────────────── */
.hero-section{
  /* same glass‑card backdrop you use elsewhere */
  background: rgba(255,255,255,.45);
  border-radius: 24px;
  position: relative;
  padding: clamp(1.5rem, 5vw, 2.75rem) 1.75rem;
  text-align: center;
  margin-bottom: 1.75rem;             /* rhythm to next module */
}

/* frosted overlay */
.hero-section::before{
  content:'';
  position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background:linear-gradient(135deg,
              rgba(255,255,255,.66) 0%,
              rgba(255,255,255,.35) 50%,
              rgba(255,255,255,.18) 100%);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.32);
  box-shadow:0 12px 48px rgba(0,0,0,.10);
}

/* heading */
.hero-title{
  font: 700 clamp(1.65rem, 4.5vw, 2.25rem)/1.2 'Inter',sans-serif;
  color:#0f172a;
  margin:0;
}
.hero-title mark{
  background:none;
  color:#554cff;                /* brand indigo */
}

/* subtitle */
.hero-subtitle{
  margin:.9rem 0 0;
  font:400 1rem/1.5 'Inter',sans-serif;
  color:#475569;
}

/* CTA — re‑use your pill button */
.hero-cta{
  margin-top:1.5rem;
  width:100%;
  max-width:260px;
}

/* make the card stop growing beyond the shell on ≥800 px */
@media (min-width:800px){
  .hero-section{
    max-width:700px;            /* same as enlarged shell */
    margin-left:auto;
    margin-right:auto;
  }
}

/* —– HERO TYPOGRAPHY ENHANCEMENTS —– */
.hero-section {
  padding: clamp(2.5rem, 8vw, 5rem) 1rem;
}

.hero-title {
  margin: 0 auto 0.75rem;
  max-width: 480px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  /* fluid scale from 2rem up to 3rem */
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.2;
  color: #0f172a;
}

.hero-title mark {
  background: none;
  color: #554cff;         /* brand indigo pop */
  font-style: normal;
}

.hero-subtitle {
  margin: 0 auto;
  max-width: 400px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  /* fluid scale from 1rem up to 1.25rem */
  font-size: clamp(1rem, 3vw, 1.25rem);
  line-height: 1.5;
  color: #475569;
}

/* tighten the card tail into the flow */
.hero-section {
  margin-bottom: clamp(1.5rem, 5vw, 2.5rem);
}


/* ───────────────────────────────────────────────────────────────── */
/*  HERO “mark” override — highest specificity + !important hacks  */
/* ───────────────────────────────────────────────────────────────── */
.hero-section.glass-card .hero-title mark {
  background-color: rgba(85, 76, 255, 0.1) !important;  /* light indigo tint */
  color:             #554cff              !important;  /* solid brand indigo */
  padding:           0.1em 0.25em         !important;  /* a bit of breathing room */
  border-radius:     0.2em                !important;  /* soften the corners */
  font-style:        normal               !important;  /* remove any italic fallback */
}


/* ─── HERO TYPOGRAPHY UPDATE ───────────────────────────────── */

/* constrain & center your copy within the shell */
.hero-inner {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* main headline */
.hero-title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.2;
  color: #0f172a;
  margin: 0 0 1rem;
}

/* highlight the “3×” */
.hero-title mark {
  background: rgba(85, 76, 255, 0.1);  /* light indigo tint */
  color: #554cff;                       /* brand indigo */
  padding: 0 0.2em;
  border-radius: 0.2em;
  font-style: normal;
}

/* sub-heading */
.hero-subtitle {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 3vw, 1.25rem);
  line-height: 1.5;
  color: #475569;
  margin: 0 auto;
  max-width: 400px;
}


/* ─── HERO TEXT FIX ─────────────────────────────────────────────── */
/* 1 ▸ Neutralise every old colour / shadow on the two text rows   */
body.howto-page .hero-title,
body.howto-page .hero-subtitle {
  color: #0f172a !important;      /* slate-900 */
  text-shadow: none !important;   /* kill the fuzzy glow */
}

/* 2 ▸ Headline – big, bold, dark, with a branded 3× highlight     */
body.howto-page .hero-title {
  font: 800 clamp(2.25rem, 6vw, 3.25rem)/1.15 'Inter', sans-serif !important;
  letter-spacing: -0.015em;
  margin: 0;
}
body.howto-page .hero-title mark {
  background: rgba(85, 76, 255, 0.12);   /* soft indigo tint */
  color: #554cff;
  padding: 0 0.22em;
  border-radius: 0.18em;
  font-style: normal;
}

/* 3 ▸ Subtitle – darker grey, looser line-height                  */
body.howto-page .hero-subtitle {
  font: 400 clamp(1rem, 3vw, 1.35rem)/1.45 'Inter', sans-serif !important;
  color: #475569 !important;      /* slate-600 */
  margin-top: 0.85rem;
  max-width: 36rem;               /* stays tidy on wide screens */
}


/* ─── HERO FINE-TUNE (wrap + tighter spacing) ───────────────────── */

/* A) Trim the vertical padding & top offset */
body.howto-page .hero-section {
  /* less internal padding */
  padding-top: clamp(1rem, 4vw, 2rem) !important;
  padding-bottom: clamp(1.5rem, 5vw, 2.25rem) !important;

  /* sit closer to the fixed header (was +16 px) */
  margin-top: calc(var(--header-height) + 4px) !important;
}

/* also shave a bit of shell padding so the card starts higher */
body.howto-page .howto-mobile-shell {
  padding-top: 24px !important;   /* was 32px */
}

/* B) Make the headline wrap gracefully */
body.howto-page .hero-title {
  /* set a comfortable text column so long phrases break naturally */
  max-inline-size: 22ch;          /* ≈ 22 characters per line         */
  text-wrap: balance;             /* nice balanced lines (modern browsers) */
  word-break: break-word;         /* safe fallback                    */
}

/* let the coloured “3×” behave like a word, not a barrier */
body.howto-page .hero-title mark {
  display: inline-block;
  margin: 0 0.05em;               /* micro-gap so it doesn’t stick    */
}

/* C) Tiny phone tweaks (≤430 px) */
@media (max-width: 430px) {
  body.howto-page .hero-title {
    max-inline-size: 20ch;
    font-size: clamp(1.9rem, 6vw, 2.4rem);  /* shrink a notch */
  }

  body.howto-page .hero-section {
    padding-top: 1.25rem !important;        /* a hair tighter */
  }
}

/* ─── HERO  •  no mid-word breaks ───────────────────────────────── */
/* paste AFTER every other .hero-title rule you have                */
body.howto-page .hero-title {
  /* 1 ▸ turn OFF the balancing algorithm that was forcing odd cuts */
  text-wrap: normal !important;        /* overrides earlier balance */

  /* 2 ▸ allow breaks ONLY at spaces/hyphens                        */
  word-break: normal !important;       /* never in the middle of a word */
  overflow-wrap: normal !important;    /* same idea                  */

  /* 3 ▸ optional: enable graceful hyphenation if the word itself
         can’t fit on ultra-narrow phones (Browser support OK)      */
  hyphens: auto;
}

/* Prevent mid-word breaks on the final word */
body.howto-page .hero-title .nowrap {
  white-space: nowrap;
}