/* navbar.css */
:root {
--grad-1: #ff5b2e;
--grad-3: #1fbf73;
}


body { background: #000; }


.topbar {
background: #0b0b0b;
border-bottom: 1px solid rgba(255,255,255,.06);
}


.navbar-brand img {
max-height: 32px;
}


.nav-link {
color: #fff;
font-weight: 500;
}


.nav-link:hover {
color: #f8f9fa;
}


.btn-pill {
border-radius: 999px;
padding: .5rem 1.25rem;
font-weight: 600;
}


.btn-download {
background: linear-gradient(90deg, var(--grad-1), var(--grad-3));
border: none;
color: #fff;
}

/* Increase spacing between nav links */
.nav.gap-4 {
  gap: 3rem !important; /* 48px instead of default 24px */
}

/* Keep the bar above content when sticky */
.topbar { z-index: 1030; box-shadow: 0 6px 24px rgba(0,0,0,.35); }

/* Make Bootstrap hamburger visible on dark bg */
.navbar-toggler { border-color: rgba(255,255,255,.25); }
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile collapse styling (does not affect desktop) */
.mobile-nav { 
  background:#0b0b0b; 
  border-top:1px solid rgba(255,255,255,.06); 
  padding-left: .75rem; padding-right: .75rem;
}
.mobile-link{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .25rem; color:#fff; text-decoration:none; font-weight:500;
}
.mobile-link img{ height:18px; width:auto; opacity:.9; }
.mobile-link:hover{ color:#f8f9fa; }
/* --- Shimmer + glow for the Download button --- */
.btn-download{
  position: relative;           /* needed for the shimmer layer */
  overflow: hidden;             /* hide the sweeping glint */
  box-shadow: 0 0 0 rgba(31,191,115,.0);
  transition: box-shadow .25s ease;
}

/* soft pulse glow (always on, subtle) */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(31,191,115,.0), 0 0 0 rgba(255,91,46,.0); }
  50%     { box-shadow: 0 0 24px rgba(31,191,115,.35), 0 0 16px rgba(255,91,46,.25); }
}
.btn-download { animation: pulse-glow 2.8s ease-in-out infinite; }

/* shimmering sweep */
.btn-download::after{
  content: "";
  position: absolute;
  top: -150%;
  left: -60%;
  width: 40%;
  height: 400%;
  transform: rotate(20deg);
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 45%,
    rgba(255,255,255,0) 100%
  );
  animation: shimmer 2.3s linear infinite;
  pointer-events: none;
  filter: blur(.2px);
}

@keyframes shimmer {
  0%   { left: -60%; }
  100% { left: 140%; }
}

/* stronger effect on hover */
.btn-download:hover{
  box-shadow: 0 0 32px rgba(31,191,115,.5), 0 0 20px rgba(255,91,46,.35);
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  .btn-download{ animation: none; }
  .btn-download::after{ animation: none; }
}
/* Keep text white on hover/focus */
.btn-download,
.btn-download:hover,
.btn-download:focus,
.btn-download:focus-visible {
  color: #fff !important;
}

/* Smooth, subtle grow on hover (no layout shift) */
.btn-download{
  transition: transform .18s ease, box-shadow .25s ease;
  will-change: transform;
}

@media (hover:hover){
  .btn-download:hover,
  .btn-download:focus-visible{
    transform: translateY(-1px) scale(1.05); /* slightly bigger */
  }
  .btn-download:active{
    transform: scale(0.98); /* press feedback */
  }
}

/* Optional focus ring for accessibility */
.btn-download:focus-visible{
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.18), 0 0 24px rgba(31,191,115,.35);
}

/* Reduced motion: disable grow */
@media (prefers-reduced-motion: reduce){
  .btn-download{ transition: none; }
}

/* === MOBILE NAV TO MATCH THE IMAGE (≤ md) === */
@media (max-width: 767.98px){

  /* 1) Show the CTA on the top row (your wrapper is d-none d-md-block) */
  .topbar .d-none.d-md-block{
    display:block !important;
  }

  /* 2) We don't use a hamburger in the design */
  .topbar .navbar-toggler{
    display:none !important;
  }

  /* 3) Force the collapse to be a SECOND ROW strip that is always visible */
  #mobileNav.collapse{
    display:block !important;
    height:auto !important;
    visibility:visible !important;
  }

  /* 4) Strip styling (dark bar below the first row) */
  .mobile-nav{
    display:flex;                                  /* row of 3 */
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    background:#121212;                            /* darker strip like mockup */
    border-top:1px solid rgba(255,255,255,.06);
    border-bottom:1px solid rgba(255,255,255,.06);
    padding:.65rem .95rem;
    margin:0;                                      /* no extra gaps */
  }
  .mobile-nav > li{ list-style:none; flex:1 1 0; } /* even spacing */

  /* 5) Icon + label (white, semi-bold) */
  .mobile-link{
    display:flex;
    align-items:center;
    justify-content:center;                        /* icon + text centered as a unit */
    gap:.55rem;
    padding:0;
    color:#fff;
    text-decoration:none;
    font-weight:600;
    font-size:1rem;
    line-height:1.1;
  }
  .mobile-link:hover{ color:#f8f9fa; }
  .mobile-link img{
    width:22px; height:22px; object-fit:contain;
    /* If your PNGs aren’t white, uncomment: */
    /* filter: invert(1) brightness(1.6) saturate(0); */
  }

  /* 6) Remove the extra CTA that sits inside the collapse (second row) */
  #mobileNav .btn-download{
    display:none !important;
  }

  /* 7) Top row spacing + button size */
  .topbar{ padding-top:.55rem; padding-bottom:.55rem; }
  .navbar-brand img{ max-height:28px; }
  .topbar .btn-download{
    padding:.55rem 1.1rem;
    font-weight:700;
    line-height:1;
  }
}


/* === Mobile: center second row, no background, add top margin === */
@media (max-width: 767.98px){
  /* keep second row visible */
  #mobileNav.collapse{
    display:block !important;
    height:auto !important;
    visibility:visible !important;
  }

  /* center the 3 items and remove the strip styling */
  .mobile-nav{
    display:flex;
    justify-content:center !important;          /* center as a group */
    align-items:center;
    gap: clamp(1rem, 6vw, 2rem);                /* space between items */
    background: transparent !important;         /* remove dark bg */
    border: 0 !important;                       /* remove borders */
    padding: 0 !important;
    margin-top: .6rem;                          /* add top space */
  }

  /* allow items to size to their content so centering works */
  .mobile-nav > li{
    list-style:none;
    flex: 0 0 auto !important;
  }

  /* (keep your icon+label styling) */
  .mobile-link{
    display:flex; align-items:center; gap:.55rem;
    padding:0; color:#fff; text-decoration:none; font-weight:600;
    font-size:1rem; line-height:1.1;
  }
  .mobile-link img{ width:22px; height:22px; object-fit:contain; }
  
  /* hide the extra CTA inside the collapse row */
  #mobileNav .btn-download{ display:none !important; }
}



/* === Mobile: center second row, add space above, keep it clean === */
@media (max-width: 767.98px){

  /* keep the second row visible (no drawer) */
  #mobileNav.collapse{
    display:block !important;
    height:auto !important;
    visibility:visible !important;
  }

  /* center the 3 items as a group, remove strip styling, add top gap */
  .mobile-nav{
    display:flex !important;
    justify-content:center !important;              /* center the row */
    align-items:center !important;
    gap: clamp(.9rem, 6vw, 2rem) !important;        /* spacing between items */
    background:transparent !important;              /* no background */
    border:0 !important;
    padding:0 !important;                           /* ignore py-2 */
    margin: clamp(.6rem, 3vw, .9rem) 0 0 0 !important; /* TOP MARGIN wins over m-0 */
    width:100%;
  }

  /* make each item only as wide as its content so centering works */
  .mobile-nav > li{
    list-style:none;
    flex:0 0 auto !important;                       /* override any flex:1 */
  }

  /* icon + label styling (unchanged) */
  .mobile-link{
    display:flex; align-items:center; gap:.55rem;
    padding:0; color:#fff; text-decoration:none;
    font-weight:600; font-size:1rem; line-height:1.1;
  }
  .mobile-link img{ width:22px; height:22px; object-fit:contain; }

  /* hide the extra CTA that lives inside the collapse row */
  #mobileNav .btn-download{ display:none !important; }
}

















/* Hero Section */
/* ===== Hero section ===== */
.hero-card{
  background: linear-gradient(105deg,#ff5b2e, #ff9f1c 30%, #1fbf73 65%, #1e90ff);
  border-radius: 1.25rem;
  min-height: 280px;
}

.hero-title{
  font-weight: 800;
  font-size: clamp(1.9rem, 3.3vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color:#fff;
}

.hero-copy{
  color: rgba(255,255,255,.92);
  max-width: 48ch;
}

/* CTA already styled by your .btn-pill — no change */

/* Hero image & accent */
.hero-image{
  position: absolute;
  right: -10px;
  bottom: -6px;
  max-height: 100%;
  width: min(46%, 520px);
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.25));
}

.accent-scribble{
  position: absolute;
  right: 18%;
  top: 10%;
  width: 180px;
  height: 130px;
  border: 4px solid rgba(255,255,255,.95);
  border-radius: 1.5rem;
  transform: rotate(15deg);
  filter: drop-shadow(0 0 18px rgba(255,255,255,.35));
  pointer-events: none;
}

/* Mobile behavior */
@media (max-width: 992px){
  .hero-image{
    position: static;
    width: 100%;
    margin-top: 1rem;
  }
  .accent-scribble{ display:none; }
}
/* Ensure the image has a visible box on desktop */
.hero-card { position: relative; } /* already true via class, but safe */

.hero-visual { min-height: 320px; }             /* makes room for abs image */
@media (min-width: 1200px){
  .hero-visual { min-height: 360px; }
}

.hero-image{
  position: absolute;
  right: -10px;
  bottom: 0;
  width: min(520px, 46vw);  /* stay big but within the card */
  height: auto;
  object-fit: contain;
  z-index: 2;
}

/* Keep the scribble above or below as you prefer */
.accent-scribble{ z-index: 3; }   /* scribble on top (like Figma) */

/* Mobile: keep it stacked and fluid */
@media (max-width: 992px){
  .hero-visual { min-height: 0; }
  .hero-image { position: static; width: 100%; margin-top: 1rem; }
}
/* Closer gradient & corner feel to Figma */
.hero-card{
  border-radius: 22px; /* a touch rounder */
  background: linear-gradient(102deg, #ff5b2e 0%, #ff9f1c 32%, #1fbf73 63%, #1e90ff 96%);
  position: relative; /* ensure pseudo overlays sit correctly */
}

/* subtle diagonal sheen band like the design */
.hero-card::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.10) 50%, transparent 60%);
  mix-blend-mode: screen;
  pointer-events:none;
}

/* ensure the image has room on desktop */
.hero-visual{ min-height: 360px; }
@media (min-width: 1200px){ .hero-visual{ min-height: 400px; } }

/* model image: a bit larger + nudged right/down */
.hero-image{
  position:absolute;
  right:-28px;         /* push slightly outside like in Figma */
  bottom:-10px;
  width:min(580px, 48vw);
  height:auto;
  object-fit:contain;
  z-index:2;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.25));
}

/* the white vector overlay that sits above the model */
.hero-vector{
  position:absolute;
  right:10%;
  top:4%;
  width:clamp(160px, 30%, 320px);
  height:auto;
  z-index:3;
  pointer-events:none;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.15));
}

/* mobile: stack cleanly and hide the overlay */
@media (max-width: 992px){
  .hero-visual{ min-height: 0; }
  .hero-image{ position:static; width:100%; margin-top:1rem; }
  .hero-vector{ display:none; }
}
/* ===== Pixel-match tweaks for the Hero ===== */

/* Card look + gradient + rounded corners */
.hero-card{
  border-radius: 16px; /* tighter radius like the mock */
  background: linear-gradient(
    95deg,
    #ff4e1f 0%,
    #ff8f19 32%,
    #21c774 60%,
    #0e7fff 100%
  );
}

/* Headline weight/size & spacing like the mock */
.hero-title{
  font-weight: 800;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: .65rem;
}

.hero-copy{
  font-size: clamp(.98rem, 1.1vw, 1.06rem);
  max-width: 48ch;
}

/* Give the right column a fixed visual box so abs image can sit cleanly */
.hero-visual{ min-height: 360px; }
@media (min-width: 1200px){ .hero-visual{ min-height: 400px; } }

/* Model image size/position like the mock (slightly outside right, low) */
.hero-image{
  position: absolute;
  right: -26px;
  bottom: -8px;
  width: clamp(420px, 44vw, 620px);
  height: auto;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.25));
}

/* White vector overlay sitting above the model, clipped by card radius */
.hero-vector{
  position: absolute;
  right: 5%;
  top: -6%;
  width: clamp(220px, 40%, 460px);
  height: auto;
  z-index: 3;                 /* above model */
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.15));
}

/* Mobile: stack clean and hide overlay like in the smaller comp */
@media (max-width: 992px){
  .hero-visual{ min-height: 0; }
  .hero-image{ position: static; width: 100%; margin-top: 1rem; }
  .hero-vector{ display: none; }
}
.hero-title{
  font-size: clamp(2.4rem, 4.8vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-bottom: .8rem;
}
.hero-card{
  background: linear-gradient(98deg,
    #ff4d1f 0%,
    #ff8a19 28%,
    #21c774 57%,
    #0e7fff 100%
  );
}
/* optional soft diagonal sheen like the comp */
.hero-card::before{
  background: linear-gradient(112deg, transparent 42%, rgba(255,255,255,.10) 52%, transparent 62%);
}
.hero-image{
  right: -18px;      /* was -26 */
  bottom: -18px;     /* crops a bit more like the mock */
  width: clamp(440px, 45vw, 600px);
}
.hero-vector{
  top: -2%;
  right: 7%;
  width: clamp(240px, 38%, 440px);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.14)); /* subtler */
}
.btn-pill.btn-dark{
  background:#111; border:1px solid rgba(255,255,255,.06);
  box-shadow:
    inset 0 -2px 0 rgba(255,255,255,.06),
    0 4px 12px rgba(0,0,0,.25);
  padding:.6rem 1.25rem;
}
.hero-card{ border-radius: 18px; }
@media (max-width: 992px){
  .hero-image{ margin-top:.75rem; }
  .hero-copy{ max-width: 38ch; }
}
/* 1) Shorter hero like Figma (controls the visual column height) */
.hero-visual{
  min-height: clamp(260px, 32vw, 310px); /* shorter; scales with width */
}

/* 2) Model fills the visual from top to bottom, hugging right edge */
.hero-image{
  position:absolute;
  top:0;                 /* touch top */
  bottom:0;              /* touch bottom */
  right:-10px;           /* spill slightly past the right radius like comp */
  height:100%;           /* fill the column vertically */
  width:auto;            /* keep aspect */
  object-fit:contain;
  z-index:2;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.25));
}

/* 3) Much bigger white vector overlay, positioned like Figma */
.hero-vector{
  position:absolute;
  top:-8%;               /* sits above the head a bit */
  right:2%;
  width:clamp(340px, 50%, 640px); /* bigger */
  height:auto;
  z-index:3;
  pointer-events:none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.14));
}

/* Keep card corners & gradient; remove right padding at lg+ already via pe-lg-0 */
.hero-card{ border-radius:18px; }

/* Mobile: stack cleanly and hide vector */
@media (max-width: 992px){
  .hero-visual{ min-height: 0; }
  .hero-image{ position:static; width:100%; height:auto; margin-top:.75rem; }
  .hero-vector{ display:none; }
}
/* Desktop: let the model span the full hero height (touch top & bottom) */
@media (min-width: 992px){
  .hero-card{ position: relative; }           /* anchor for abs children */

  /* remove positioning context from the right column */
  .hero-visual{ position: static !important; }

  /* fill the hero vertically, hug the right edge */
  .hero-image{
    position: absolute;
    top: 0;               /* touch top edge of the card */
    bottom: 0;            /* touch bottom edge of the card */
    right: -10px;         /* spill slightly past the rounded corner (like Figma) */
    height: 100%;
    width: auto;
    max-width: none;      /* don't let Bootstrap cap it */
    object-fit: contain;
    z-index: 2;
  }

  /* keep the vector above the model */
  .hero-vector{
    position: absolute;
    top: -6%;
    right: 2%;
    width: clamp(340px, 50%, 640px);
    height: auto;
    z-index: 3;
    pointer-events: none;
  }
}

/* Mobile: stack cleanly */
@media (max-width: 991.98px){
  .hero-image{ position: static; width: 100%; height: auto; margin-top: .75rem; }
  .hero-vector{ display: none; }
}

















/* QR Section */
/* ===== Download / QR section ===== */

.download-title{
  color:#fff;
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.05;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  margin-bottom:.25rem;
}
.download-title .brand{ color:#ff3b2f; } /* Mediamax red */

.download-copy{
  color:#b9bcc3;
  margin:0;
}

/* Gradient QR card */
.qr-card{
  background: linear-gradient(100deg, #ff5b2e 0%, #ff8f1c 55%, #ffd36a 100%);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

/* Heading inside QR card */
.qr-heading{
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
}

/* Store badges */
.store-badge{
  height: 40px;
  width: auto;
}

/* White QR holder */
.qr-box{
  background:#fff;
  border-radius: 14px;
  padding: .6rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.qr-box img{
  display:block;
  border-radius: 10px;
}

/* Spacing & responsiveness */
.download-section{ margin-top: clamp(1.25rem, 3vw, 2.25rem); }

@media (max-width: 991.98px){
  .download-title{ text-align: center; }
  .download-copy{ text-align: center; }
  .qr-card{ text-align: center; }
  .download-section .store-badge{ height: 36px; } /* slightly smaller on mobile */
}

@media (min-width: 992px){
  /* nudge card content to breathe on desktop */
  .qr-card{ padding: 1.25rem 1.5rem; }
}
/* --- Match Figma typography for the Download block --- */
.download-title{
  color:#fff;
  /* heavy display look */
  font-weight: 900;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-bottom: .35rem;
  /* optional: tighten rendering on WebKit */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.download-title .brand{ color:#ff3b2f; font-weight: 900; }
.nowrap{ white-space: nowrap; }

.download-copy{
  color:#9aa3ad; /* a touch dimmer to match the comp */
  font-size: clamp(.98rem, 1.1vw, 1.06rem);
  margin: 0;
}

/* QR card heading a bit bolder/larger like Figma */
.qr-heading{
  font-weight: 800;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Slight spacing balance between the two columns */
@media (min-width: 992px){
  .download-section .col-lg-6:first-child{ padding-right: 1.5rem; }
  .download-section .col-lg-6:last-child{ padding-left: 1.5rem; }
}

/* Optional: use Inter if you want the exact display feel */
:root{
  --display-font: "Inter", "SF Pro Display", "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
.download-title, .qr-heading{ font-family: var(--display-font); }
/* Bigger, bolder like your mock */
.download-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(2.6rem, 5vw, 4rem);   /* was ~3rem */
  margin-bottom: .4rem;
}
.download-title .brand{ color:#ff3b2f; font-weight: 900; }

/* Bottom grey copy – larger & brighter */
.download-copy{
  color:#c7ced6;                          /* slightly brighter than before */
  font-weight: 500;
  line-height: 1.35;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);  /* was ~1.0–1.06rem */
  max-width: 50ch;
}

/* QR card heading – punchier */
.qr-heading{
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}

/* Slightly larger badges to balance the bigger type */
.store-badge{ height: 44px; }

/* Mobile: keep hierarchy without overwhelming the screen */
@media (max-width: 991.98px){
  .download-title{ font-size: clamp(2.1rem, 7vw, 2.6rem); }
  .download-copy{ font-size: clamp(1rem, 3.6vw, 1.1rem); }
  .qr-heading{ font-size: clamp(1.2rem, 4.4vw, 1.35rem); }
  .store-badge{ height: 38px; }
}
/* --- Download block: bottom caption to match Figma --- */
.download-copy{
  color: #bfc6ce;                 /* brighter, closer to mock */
  font-weight: 500;               /* a bit stronger than regular */
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  line-height: 1.35;
  letter-spacing: 0.005em;        /* subtle tracking like display text */
  margin-top: .4rem;
  max-width: 50ch;                /* keeps it from running too long */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Balance spacing between title and caption on desktop */
@media (min-width: 992px){
  .download-title{ margin-bottom: .55rem; }
}
/* Pull the two columns closer together on desktop */
@media (min-width: 992px){
  .download-section .row{ --bs-gutter-x: 1rem !important; } /* tighter than g-4 */
}

/* Caption: larger but muted, and no width cap so it stretches */
.download-copy{
  color: #9aa3ad;                 /* greyish / slightly muted */
  font-weight: 500;
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  line-height: 1.35;
  letter-spacing: 0.004em;
  max-width: none;                 /* let it run toward the QR card */
}
/* Center the App Store / Google Play badges on mobile */
@media (max-width: 991.98px){
  .qr-card .d-flex{ 
    justify-content: center !important;
  }
}


/* Download section: mobile-only tweaks (≤576px) */
@media (max-width:575.98px){

  /* 1) Hide the QR side on mobile */
  .download-section .qr-box{ display:none !important; }

  /* If the QR column still leaves extra vertical gap, remove the row's y-gutter */
  .download-section .qr-card .row{ --bs-gutter-y:0; }

  /* If your browser supports :has(), hide the whole QR column cleanly */
  @supports selector(:has(*)){
    .download-section .qr-card .row > .col-md-6:has(.qr-box){
      display:none !important;
    }
  }

  /* 2) Replace heading text visually with “Download for free” (mobile only) */
  .download-section .qr-heading{
    position:relative;
    color:transparent;           /* hide original text but keep space for pseudo */
  }
  .download-section .qr-heading::before{
    content:"Download for free";
    position:absolute; inset:0;
    color:#fff; font-weight:800;
    display:flex; align-items:center; justify-content:center;
  }

  /* 3) Center the badges and set a tidy size */
  .download-section .qr-card{ text-align:center; }
  .download-section .qr-card .d-flex{ justify-content:center; }
  .download-section .store-badge{ height:34px; }

  /* (optional) a little spacing polish */
  .download-section .qr-heading{ margin-bottom:.35rem; }
}
/* Download section — mobile: hide texts, make badges bigger */
@media (max-width:575.98px){

  /* Remove "Keep listening while you do other things!" */
  .download-section .download-copy{
    display:none !important;
  }

  /* Remove "Scan to get the App" (and any earlier pseudo replacement) */
  .download-section .qr-heading{
    display:none !important;
  }
  .download-section .qr-heading::before{
    content:none !important;   /* in case we previously injected alt text */
  }

  /* Bigger store badges and nice centering */
  .download-section .qr-card .d-flex{
    justify-content:center;
    gap:.6rem .8rem;
  }
  .download-section .store-badge{
    height:clamp(44px, 10vw, 56px); /* bigger on mobile */
    width:auto;
  }

  /* If you use a single combined badges image instead */
  .download-section .both-stores{
    max-width:clamp(240px, 62vw, 340px);
    height:auto;
  }
}
/* Download section — MOBILE ONLY (≤576px) */
@media (max-width:575.98px){

  /* Hide the extra texts and the QR block */
  .download-section .download-copy{ display:none !important; }
  .download-section .qr-heading{ display:none !important; }
  .download-section .qr-box{ display:none !important; }

  /* Center the badges row */
  .download-section .qr-card{ 
    position:relative; 
    text-align:center; 
  }
  .download-section .qr-card .d-flex{
    justify-content:center;
    gap:.6rem .9rem;
  }

  /* Inject "Download for free" above the badges */
  .download-section .qr-card::before{
    content:"Download for free";
    display:block;
    color:#fff;
    font-weight:800;
    font-size:1.25rem;
    line-height:1.1;
    margin-bottom:.5rem;
  }

  /* Bigger badges */
  .download-section .store-badge{
    height:clamp(48px, 11vw, 64px);
    width:auto;
  }

  /* If you use ONE combined badges image instead of two */
  .download-section .both-stores{
    display:block;
    margin-inline:auto;
    max-width:clamp(260px, 66vw, 380px);
    height:auto;
  }
}
/* Download section — mobile sizing & spacing */
@media (max-width:575.98px){
  /* More vertical breathing room for the whole section */
  .download-section{
    padding-top: clamp(2.25rem, 8vw, 3rem) !important;
    padding-bottom: clamp(2.25rem, 8vw, 3rem) !important;
  }

  /* A touch more padding inside the card */
  .download-section .qr-card{
    padding: clamp(1rem, 4vw, 1.25rem) clamp(1rem, 5vw, 1.5rem);
    text-align: center;
  }

  /* Make the injected heading ("Download for free") larger */
  .download-section .qr-card::before{
    font-size: clamp(1.6rem, 7vw, 2.1rem);
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: .75rem;
  }

  /* (Optional) keep badges nice and bold */
  .download-section .store-badge{
    height: clamp(50px, 11vw, 64px);
    width: auto;
  }
}












/* --- Now Playing: match Figma exactly --- */

/* Headline sizing to match the comp */
.np-title{
  color:#fff;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.03;
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  margin: 0;
}
.np-title-accent{
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Arrows image scale */
.np-arrows{ width: clamp(96px, 18vw, 148px); height: auto; display: block; }

/* Phone wrapper */
.np-phone-wrap{ width: 100%; max-width: 380px; }

/* Phone image */
.np-phone{
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  z-index: 2;            /* above the glows */
  filter: drop-shadow(0 18px 50px rgba(0,0,0,.45));
  border-radius: 22px;   /* if your image already has a bezel keep or remove */
}

/* Glows (behind phone) */
.np-glow{
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: blur(18px);
  mix-blend-mode: normal;  /* change to 'screen' if you want more punch */
}

/* Red glow at top-left of the phone */
.np-glow-red{
  left: 8%;
  top: 2%;
  width: 520px;
  height: 320px;
  background: radial-gradient(ellipse at center,
      rgba(255, 59, 47, .42) 0%,
      rgba(255, 59, 47, .18) 42%,
      rgba(255, 59, 47, 0) 70%);
}

/* Green glow bottom-right of the phone */
.np-glow-green{
  right: -10%;
  bottom: -6%;
  width: 560px;
  height: 420px;
  background: radial-gradient(ellipse at center,
      rgba(28, 209, 96, .42) 0%,
      rgba(28, 209, 96, .18) 40%,
      rgba(28, 209, 96, 0) 70%);
}

/* Responsive tweaks */
@media (max-width: 991.98px){
  .now-playing-section{ text-align: center; }
  .np-title{ font-size: clamp(2rem, 8vw, 2.8rem); }
  .np-arrows{ margin: 12px auto 0; }
  .np-phone-wrap{ margin-top: 8px; max-width: 320px; }
  .np-glow-red{ left: -10%; top: 0; width: 420px; height: 260px; }
  .np-glow-green{ right: -18%; bottom: -10%; width: 460px; height: 360px; }
}

/* ===== Now Playing heading (stack + styling) ===== */
.np-title{
  color:#fff;
  font-weight:900;
  line-height:1.02;
  letter-spacing:-.015em;
  /* large but responsive */
  font-size: clamp(2.2rem, 6.5vw, 4.2rem);
  margin: 0 0 .25rem 0;
}

/* Put "Playing" on its own line and color it green */
.np-title .np-title-accent{
  display:block;                 /* <-- stacks under "Now" */
  color: var(--grad-3, #1fbf73); /* uses your green token */
  /* very slightly larger for emphasis, like the mock */
  font-size: 1.05em;
}

/* Arrows spacing & sizing */
.np-arrows{
  width: clamp(80px, 10vw, 120px);
  height:auto;
  display:block;
}

/* Layout polish by breakpoint */
@media (max-width: 991.98px){     /* tablet & below */
  .now-playing-section .text-center .np-arrows{
    margin: .65rem auto 0;        /* centered under the title on mobile */
  }
}

@media (min-width: 992px){        /* desktop */
  .now-playing-section .np-arrows{
    margin-top: .75rem;           /* sits nicely under the title */
  }
}
/* Now Playing — 2x bigger */
.np-title{
  font-size: clamp(3.3rem, 10vw, 6.3rem);  /* was ~2.2 / 6.5vw / 4.2 */
  line-height: 1.02;          /* 4.4/ 13 /8.4 */
  letter-spacing: -.015em;
  font-weight: 900;
}

/* keep “Playing” slightly emphasized */
.np-title .np-title-accent{
  display:block;
  font-size: 1.06em;
  color: var(--grad-3, #1fbf73);
}

/* mobile safety so it doesn’t clip on very small screens */
@media (max-width:575.98px){
  .np-title{ font-size: clamp(3.2rem, 14vw, 4.8rem); }
}
/* Mobile: rotate Now-Playing arrows to face down */
@media (max-width:575.98px){
  .np-arrows{
    transform: rotate(90deg);      /* right ➜ down */
    transform-origin: center;
    display:block;
    margin: .6rem auto 0;          /* keep centered under the title */
  }
}
/* ===== Now Playing: phone card ===== */

.np-phone-wrap{
  position: relative;
  width: max-content;
  z-index: 1;
}

/* soft colored glows behind the phone */
.np-phone-wrap .np-glow{
  position:absolute;
  width: 440px; height: 440px;
  border-radius:50%;
  filter: blur(120px);
  opacity:.65;
  z-index:0;
  pointer-events:none;
}
.np-phone-wrap .np-glow-red{
  left:-140px; top:-120px;
  background: radial-gradient(circle, rgba(255,72,32,.35), rgba(255,72,32,0) 60%);
}
.np-phone-wrap .np-glow-green{
  right:-160px; bottom:-140px;
  background: radial-gradient(circle, rgba(22,189,111,.30), rgba(22,189,111,0) 60%);
}

/* device */
.np-phone{
  width: clamp(260px, 42vw, 330px);
  background:#2a2a2a;
  border:6px solid #808488;             /* bezel */
  border-radius:26px;
  box-shadow:
    0 12px 38px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.06);
  position:relative;
  z-index:1;
}
.np-screen{
  background:#151515;
  border-radius:20px;
  margin:6px;                            /* inner bezel */
  padding:14px 14px 18px;
  position:relative;
}

/* top artwork "card" */
.np-art{
  position:relative;
  height: 190px;
  border-radius:16px;
  overflow:hidden;
  background: linear-gradient(180deg, #ff1f1f 0%, #cc1010 100%);
}
.np-art-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  object-position: center top;
  mix-blend-mode: normal;
  transform: translateY(2%);             /* tiny nudge like the comp */
}
.np-art-notes{                           /* optional overlay */
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  opacity:.85;
  pointer-events:none;
}

/* circular station logo overlapping the card */
.np-badge{
  position:absolute;
  left:50%;
  top: calc(14px + 190px - 36px);        /* overlaps artwork bottom */
  transform: translateX(-50%);
  width: 92px; height: 92px;
  border-radius:50%;
  background:#fff;
  border:8px solid #151515;              /* rim that matches screen */
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
}
.np-badge img{ width:70%; height:auto; }

/* track text */
.np-meta{
  margin-top: 58px;                      /* create room for the badge */
  text-align:center;
}
.np-track{
  color:#fff; font-weight:800;
  letter-spacing:.01em;
  font-size: clamp(1rem, 2.4vw, 1.05rem);
  margin:0;
}
.np-byline{
  color:rgba(255,255,255,.7);
  font-size:.78rem;
  margin-top:.2rem;
}

/* progress */
.np-progress{
  width: 82%;
  height: 3px;
  background:#353535;
  border-radius:999px;
  margin:.75rem auto 1rem;
  position:relative;
  overflow:hidden;
}
.np-progress-bar{
  position:absolute; left:0; top:0; bottom:0;
  width: var(--p, 32%);
  background: linear-gradient(90deg, #ff5230, #ff7b3d);
  border-radius:inherit;
}

/* controls */
.np-controls{
  display:flex; align-items:center; justify-content:center;
  gap: 14px;
}
.np-ctrl{
  width:30px; height:30px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:#1d1d1d;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.np-ctrl:hover{ transform: translateY(-1px); background:#232323; border-color:rgba(255,255,255,.28); }
.np-play{
  width:34px; height:34px;
  background:#fff; color:#000; border-color:#fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* mobile spacing */
@media (max-width: 575.98px){
  .np-phone{ width: clamp(250px, 78vw, 310px); }
}
/* === Make the phone taller & keep elements aligned === */
.np-phone{
  /* Taller artwork area = longer phone */
  --art-h: clamp(260px, 45vw, 340px);   /* was ~190px */
  --badge-d: 96px;                      /* station badge diameter */
}

/* Use the new variables */
.np-art{ height: var(--art-h); }

.np-badge{
  width: var(--badge-d);
  height: var(--badge-d);
  /* overlap the bottom of the artwork, regardless of its height */
  top: calc(14px + var(--art-h) - (var(--badge-d) / 2) - 6px);
  left: 50%;
  transform: translateX(-50%);
}

/* Push title/byline down just enough for the larger badge */
.np-meta{
  margin-top: calc((var(--badge-d) / 2) + 22px);
}

/* Give the screen a touch more breathing room at the bottom */
.np-screen{ padding-bottom: 22px; }

/* Mobile tuning: slightly different tallness so it still fits nicely */
@media (max-width:575.98px){
  .np-phone{ --art-h: clamp(230px, 72vw, 300px); --badge-d: 92px; }
}















/* =======================
   FEATURES / CARDS (Figma match)
   ======================= */

:root{
  --blue:#2e7cff;
  --red:#ff3b2f;
  --green:#22c55e;
}

/* Section spacing */
.features-section{ margin-top: clamp(2rem, 5vw, 3.5rem); }

/* Card shell */
.feature-card{
  background:#fff;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 40px rgba(0,0,0,.20);
  overflow:hidden;

  /* Put content exactly where Figma shows it */
  display:grid;
  grid-template-areas:
    "title"
    "sub"
    "cta"
    "visual";
  row-gap:.35rem;
}

/* Figma: blue outline on the first card only */
.features-section .col-md-6:nth-child(1) .feature-card{
  box-shadow:
    inset 0 0 0 3px var(--blue),             /* blue stroke */
    0 14px 40px rgba(0,0,0,.20);             /* keep outer shadow */
}

/* Typography */
.feature-title{
  grid-area:title;
  color:#0f1115;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.14;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  margin:0;
}
.accent-blue{ color:var(--blue); }
.accent-red { color:var(--red);  }
.accent-green{color:var(--green);}

.feature-sub{
  grid-area:sub;
  color:#7e8592;
  font-size: clamp(.92rem, 1.2vw, 1rem);
  margin:0 0 .25rem 0;
}

/* CTA pill always below the subtitle, above the visuals */
.feature-card .btn{
  grid-area:cta;
  justify-self:start;
  font-size:.88rem;
  padding:.45rem .9rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

/* Per-card CTA colors to match Figma */
.features-section .col-md-6:nth-child(1) .feature-card .btn{ background:var(--blue);  color:#fff; border-color:transparent; }
.features-section .col-md-6:nth-child(2) .feature-card .btn{ background:var(--red);   color:#fff; border-color:transparent; }
.features-section .col-md-6:nth-child(3) .feature-card .btn{ background:var(--green); color:#0b0b0b; border-color:transparent; }

/* Visual stack (bg behind, fg in front) */
.feature-visual{
  grid-area:visual;
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:#f6f7f9;                     /* base canvas behind vectors */
  height: clamp(180px, 24vw, 230px);       /* uniform heights like Figma */
}

/* background image (behind) */
.feature-bg{
  position:absolute;
  z-index:1;
  inset:auto 0 0 0;                        /* stick to bottom */
  width:120%;
  height:auto;
  object-fit:cover;
  pointer-events:none;
  transform: translateY(2%);               /* tiny nudge */
}

/* foreground subject (in front) */
.feature-fg{
  position:absolute;
  z-index:2;
  bottom:0;
  width:78%;
  height:auto;
  object-fit:contain;
  pointer-events:none;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.18));
}

/* ---- Per-card image placement tweaks (pixel-match) ---- */

/* 1) Instant Live: subject bigger, anchored left; blob sits bottom-left */
.features-section .col-md-6:nth-child(1) .feature-bg{
  left:0; right:auto; width:120%;
}
.features-section .col-md-6:nth-child(1) .feature-fg{
  left:6%; right:auto; width:90%;
}

/* 2) Catch-Up & Podcasts: mic bottom-right, slightly smaller; light wave */
.features-section .col-md-6:nth-child(2) .feature-bg{
  left:auto; right:0; width:120%;
}
.features-section .col-md-6:nth-child(2) .feature-fg{
  right:4%; left:auto; width:68%;
}

/* 3) Background Play: person large on the right; green blob bottom-right */
.features-section .col-md-6:nth-child(3) .feature-bg{
  right:0; left:auto; width:130%;
}
.features-section .col-md-6:nth-child(3) .feature-fg{
  right:2%; left:auto; width:86%;
}

/* Responsiveness */
@media (max-width: 991.98px){
  .feature-card{ row-gap:.45rem; }
  .feature-visual{ height: 240px; }        /* keep subjects readable */
  .feature-card .btn{ justify-self:start; }/* still under subtitle */
}

/* Optional micro-hover like Figma */
@media (hover:hover){
  .feature-card{ transition: transform .18s ease, box-shadow .18s ease; }
  .feature-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 46px rgba(0,0,0,.26);
  }
}










/* ========== Features / Cards (Figma match) ========== */
.features-section .feature-card{
  background:#ffffff;
  border-radius:20px;
  box-shadow:0 14px 36px rgba(0,0,0,.28);
  position:relative;
  overflow:hidden;
}

/* Title + subtitle */
.features-section .feature-title{
  color:#0e0f11;
  font-weight:800;
  letter-spacing:-.02em;
  font-size:clamp(1.15rem, 1rem + 1.1vw, 1.6rem);
  line-height:1.15;
}
.features-section .feature-sub{
  color:rgba(14,15,17,.70);
  font-size:.92rem;
  line-height:1.35;
}

/* Accent word colors (match Figma) */
.accent-blue  { color:#377dff; }
.accent-red   { color:#ff5b2e; }
.accent-green { color:#22c26e; }

/* Visual stack */
.features-section .feature-visual{
  position:relative;
  height:190px;
  margin-top:.35rem;
}
@media (min-width:768px){ .features-section .feature-visual{ height:220px; } }
@media (min-width:992px){ .features-section .feature-visual{ height:245px; } }

.features-section .feature-bg,
.features-section .feature-fg{
  position:absolute;
  height:auto;
  max-width:none;
  user-select:none;
  pointer-events:none;
}

/* --- Card-specific art placement (uses column order) --- */

/* 1) Instant Live */
.features-section .row > div:nth-child(1) .feature-bg{
  left:-8%; bottom:-14%; width:95%;
}
.features-section .row > div:nth-child(1) .feature-fg{
  left:-2%; bottom:-6%; width:72%;
}

/* 2) Catch-Up & Podcasts */
.features-section .row > div:nth-child(2) .feature-bg{
  left:-4%; bottom:-16%; width:122%; opacity:.95;
}
.features-section .row > div:nth-child(2) .feature-fg{
  right:2%; bottom:-6%; width:80%;
  transform:rotate(-3deg); transform-origin:bottom right;
}

/* 3) Background Play */
.features-section .row > div:nth-child(3) .feature-bg{
  right:-6%; left:auto; bottom:-12%; width:96%;
}
.features-section .row > div:nth-child(3) .feature-fg{
  right:-2%; bottom:-4%; width:76%;
}

/* Pill buttons (small, bold) */
.features-section .feature-card .btn{
  border:none;
  border-radius:999px;
  padding:.46rem .9rem;
  font-weight:700;
  font-size:.82rem;
  line-height:1;
  box-shadow:0 8px 16px rgba(0,0,0,.12);
  transition:filter .15s ease, transform .15s ease;
}
.features-section .feature-card .btn:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
}

/* Button colors per card (Figma) */
.features-section .row > div:nth-child(1) .feature-card .btn{ background:#377dff; color:#fff; } /* Live */
.features-section .row > div:nth-child(2) .feature-card .btn{ background:#ff5b2e; color:#fff; } /* Podcasts */
.features-section .row > div:nth-child(3) .feature-card .btn{ background:#22c26e; color:#fff; } /* Play */

/* Subtle spacing tune so art doesn’t collide with text on small screens */
@media (max-width:575.98px){
  .features-section .feature-visual{ height:200px; }
  .features-section .feature-card .btn{ margin-top:.35rem; }
}










/* Background */
/* Card shell */
.fx-card{
  position: relative;
  background:#fff;
  border-radius:20px;
  box-shadow:0 6px 24px rgba(0,0,0,.22);
  min-height: 300px;                   /* desktop height similar to Figma */
  display:flex;
  overflow:hidden;                      /* trim bg art nicely */
}

/* Left text block (same paddings baseline as Figma) */
.fx-content{
  position: relative;
  z-index: 2;
  padding: 24px 24px 22px 24px;
  max-width: 64%;                       /* keeps text area tight on left */
}

/* Headings & copy */
.fx-title{
  margin:0 0 6px;
  font-weight:800;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height:1.15;
  letter-spacing:-.02em;
  color:#121212;
}
.fx-sub{
  margin: 0 0 14px;
  color:#5b5f63;
  font-size: clamp(13px, 1.1vw, 14.5px);
}

/* Accents (match Figma colors) */
.fx-accent-blue  { color:#2F66FF; }
.fx-accent-red   { color:#FF3B2F; }
.fx-accent-green { color:#16B45A; }

/* Pills */
.fx-chip{
  display:inline-block;
  border-radius:999px;
  padding:8px 14px;
  font-weight:700;
  font-size:13px;
  color:#fff;
  text-decoration:none;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
}
.fx-chip-blue  { background:#2F66FF; }
.fx-chip-red   { background:#FF3B2F; }
.fx-chip-green { background:#16B45A; }

/* The artwork sits as a background, anchored right/bottom */
.fx-card::after{
  content:"";
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-position: right 14px bottom 0;  /* exact corner anchor */
  background-size: auto 100%;                /* fill height, keep aspect */
  border-radius:inherit;
  z-index:1;
}

/* Per-card art (export “art only”, no text/buttons) */
.fx-instant::after  { background-image:url("../images/background\ 1.png"); }
.fx-podcasts::after { background-image:url("../images/background\ 2.png"); }
.fx-bgplay::after   { background-image:url("../images/background\ 3.png"); }

/* Fine-tune art scale per card to match Figma */
.fx-instant::after  { background-size:auto 108%; }   /* a touch taller */
.fx-podcasts::after { background-size:auto 100%; }
.fx-bgplay::after   { background-size:auto 104%; }

/* Responsive (tablet/phone) */
@media (max-width: 991.98px){
  .fx-card{ min-height: 280px; }
  .fx-content{ max-width: 70%; padding: 20px; }
  .fx-card::after{ background-position: right 6px bottom 0; }
}
@media (max-width: 575.98px){
  .fx-card{ min-height: 260px; }
  .fx-content{ max-width: 68%; padding: 18px; }
  .fx-title{ font-size: 22px; }
  .fx-sub{ font-size: 13px; }
  .fx-chip{ padding:7px 12px; font-size:12.5px; }
}


/* Cards Polish */
/* ——— Make the cards just a little bigger (desktop only) ——— */

/* Features (image-stack version) */
@media (min-width: 992px){
  .features-section .feature-card{
    padding: 1.25rem 1.4rem 1.4rem;   /* a hair more breathing room */
  }
  .features-section .feature-visual{
    height: 276px;                    /* was 245px → ~+12% */
  }
}

@media (min-width: 1200px){
  .features-section .feature-visual{
    height: 292px;                    /* gentle bump on wide screens */
  }
}

/* Background-art version (fx-*) */
@media (min-width: 992px){
  .fx-card{
    min-height: 330px;                /* was 300px */
  }
  .fx-content{
    padding: 28px 28px 26px;          /* slightly roomier text block */
  }
  .fx-card::after{
    background-size: auto 104%;       /* keep the art proportional */
  }
}
@media (min-width: 1200px){
  .fx-card{ min-height: 348px; }
}
/* Make the features section span wider and flush to the container edges on desktop */
@media (min-width: 992px){
  /* Your section is <section class="container features-section …">.
     Treat it like a wide, flush container on desktop. */
  .features-section.container{
    /* wider than Bootstrap’s default container */
    max-width: min(1420px, 96vw);
    /* remove the default container side padding so the first/last card touch edges */
    padding-left: 0;
    padding-right: 0;
  }

  /* keep a healthy gap *between* the three cards */
  .features-section .row{
    --bs-gutter-x: 2rem;        /* column gap */
    margin-left: 0;              /* no extra negative margins needed */
    margin-right: 0;
  }

  /* give each card a little more breathing room vertically too (optional) */
  .features-section .feature-visual{ height: 292px; }  /* was 245–276 */
}

/* If you’re also using the background-art (fx-*) version in the same area */
@media (min-width: 992px){
  .fx-wrap.container{
    max-width: min(1420px, 96vw);
    padding-left: 0;
    padding-right: 0;
  }
  .fx-row{ --bs-gutter-x: 2rem; }
}
html { scroll-behavior: smooth; }










/* ===== Stations strip ===== */
.stations-title{
  color:#fff; font-weight:900; letter-spacing:-.02em; line-height:1.05;
  font-size:clamp(1.4rem,2.6vw,2rem); margin:0 0 .75rem 0;
}
.stations-scroller{
  display:grid; grid-auto-flow:column; grid-auto-columns: clamp(180px,21vw,210px);
  gap:18px; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory; padding:2px 6px 8px;
  mask-image:linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.stations-scroller::-webkit-scrollbar{ display:none; }
.stations-scroller{ scrollbar-width:none; -ms-overflow-style:none; }
.stations-scroller.auto-play{ scroll-snap-type:none; }

.station-card{
  scroll-snap-align:start;
  background: var(--card-bg, #fff);
  border-radius:14px; border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  display:flex; flex-direction:column; justify-content:space-between; height:170px;
}
.station-logo-wrap{ display:flex; align-items:center; justify-content:center; padding:18px 12px 6px; min-height:104px; }
.station-logo{ max-width:78%; max-height:64px; height:auto; width:auto; object-fit:contain; }

.station-foot{ margin:0 10px 10px; border-radius:10px; padding:6px; display:flex; justify-content:center;
  background: var(--foot-bg, #e9ecef);
}
.station-cta{ display:inline-block; font-weight:700; font-size:.9rem; padding:.48rem 1rem; border:none; border-radius:999px;
  color: var(--btn-text,#fff); background: var(--btn-bg,#111); text-decoration:none; box-shadow:0 6px 16px rgba(0,0,0,.14);
}

/* ===== Brand themes (adjust hexes to your Figma if needed) ===== */
/* Milele: soft white → mint; foot red→green; pill deep green */
.fm-milele{
  --card-bg: linear-gradient(180deg,#ffffff 0%,#e9f7ee 100%);
  --foot-bg: linear-gradient(90deg,#ff5b2e 0%,#1fbf73 100%);
  --btn-bg:#1a9d55; --btn-text:#0b0b0b;
}
/* Kameme: peach → lavender; foot purple→grey; pill purple */
.fm-kameme{
  --card-bg: linear-gradient(180deg,#ffd2a6 0%,#cec3ea 100%);
  --foot-bg: linear-gradient(90deg,#6a5acd 0%,#a5a8b7 100%);
  --btn-bg:#5b50a5; --btn-text:#fff;
}
/* Emoo: warm peach; foot orange→red; pill orange-red */
.fm-emoo{
  --card-bg: linear-gradient(180deg,#ffd09c 0%,#ffb87a 100%);
  --foot-bg: linear-gradient(90deg,#f59e0b 0%,#ef4444 100%);
  --btn-bg:#f0592a; --btn-text:#fff;
}
/* Meru: pale yellow → mint; foot greens; pill green */
.fm-meru{
  --card-bg: linear-gradient(180deg,#fbf6c8 0%,#dff2c8 100%);
  --foot-bg: linear-gradient(90deg,#9ad86a 0%,#3ca75b 100%);
  --btn-bg:#3aa85e; --btn-text:#0b0b0b;
}
/* Msenangu: light pinks; foot pink→grey; pill magenta */
.fm-msenangu{
  --card-bg: linear-gradient(180deg,#ffd2e6 0%,#ffc1d9 100%);
  --foot-bg: linear-gradient(90deg,#ff3b8a 0%,#b8b6c4 100%);
  --btn-bg:#ff3b8a; --btn-text:#fff;
}
/* Mayan: orange burst; foot red→orange; pill red */
.fm-mayan{
  --card-bg: linear-gradient(180deg,#ffb066 0%,#ff8934 100%);
  --foot-bg: linear-gradient(90deg,#ff3b2f 0%,#ff8f1c 100%);
  --btn-bg:#ff3b2f; --btn-text:#fff;
}
/* Galaxy: cool blue; foot blue→violet; pill indigo */
.fm-galaxy{
  --card-bg: linear-gradient(180deg,#e5f0ff 0%,#d6e7ff 100%);
  --foot-bg: linear-gradient(90deg,#3b82f6 0%,#7c5cff 100%);
  --btn-bg:#6b4bff; --btn-text:#fff;
}

/* Hover micro-lift */
@media (hover:hover){
  .station-card{ transition: transform .15s ease, box-shadow .15s ease; }
  .station-card:hover{ transform: translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.26); }
}

/* Mobile sizing */
@media (max-width:575.98px){
  .stations-scroller{ grid-auto-columns:72vw; gap:14px; }
  .station-card{ height:180px; }
  .station-logo{ max-height:68px; }
}



/* --- Bigger logos + better layout --- */
.station-card{ height: 180px; }
.station-logo-wrap{
  padding: 22px 14px 8px;
  min-height: 118px;                 /* more room for bigger logos */
}
.station-logo{
  max-width: 90%;
  max-height: 86px;                  /* was ~64px */
  height: auto; width: auto;
  object-fit: contain;
}

/* Mobile: show one big, comfy card per viewport */
@media (max-width: 575.98px){
  .stations-scroller{ grid-auto-columns: 80vw; gap: 16px; }
  .station-card{ height: 210px; }
  .station-logo-wrap{ min-height: 140px; }
  .station-logo{ max-height: 100px; }
  .station-cta{ font-size: 1rem; padding: .62rem 1.15rem; }
}

/* --- Pill style (matches Figma: bold pill inside colored footer) --- */
.station-foot{
  margin: 0 10px 10px;
  border-radius: 10px;
  padding: 6px;
  display: flex; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.station-cta{
  display: inline-block;
  font-weight: 800;
  letter-spacing: .01em;
  border-radius: 999px;
  padding: .5rem 1rem;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
     inset 0 -2px 0 rgba(0,0,0,.12),
     0 6px 16px rgba(0,0,0,.16);
}

/* Brand-tinted pills (solid with slight vertical shading) */
.fm-milele   .station-cta{ background: linear-gradient(180deg,#2dae63 0%,#198f51 100%); }
.fm-kameme   .station-cta{ background: linear-gradient(180deg,#6e56c9 0%,#533bab 100%); }
.fm-emoo     .station-cta{ background: linear-gradient(180deg,#f1642e 0%,#e23b2e 100%); }
.fm-meru     .station-cta{ background: linear-gradient(180deg,#4ab469 0%,#2d9b57 100%); }
.fm-msenangu .station-cta{ background: linear-gradient(180deg,#ff4d97 0%,#b93a86 100%); }
.fm-mayan    .station-cta{ background: linear-gradient(180deg,#ff4e28 0%,#f2861b 100%); }
.fm-galaxy   .station-cta{ background: linear-gradient(180deg,#5a7dff 0%,#7a56ff 100%); }

/* Keep footer strips as before (from earlier CSS); only pills changed */
/* --- Buttons: never stretch; size to text and center --- */
.station-cta{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: -moz-fit-content;
  width: fit-content;             /* width = content */
  min-width: 0;
  padding: .52rem 1rem;
  font-weight: 800;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,.12),
    0 6px 16px rgba(0,0,0,.16);
}

/* mobile sizing (smaller so it never looks too wide) */
@media (max-width: 575.98px){
  .station-foot{ padding: 8px; }
  .station-cta{
    padding: .48rem .9rem;
    font-size: .98rem;
  }
}

/* --- Pill gradients to match Figma (top lighter -> bottom darker) --- */
.fm-milele   .station-cta{ background: linear-gradient(180deg,#2BC272 0%,#119B54 100%); color:#0b0b0b; }
.fm-kameme   .station-cta{ background: linear-gradient(180deg,#7A61E2 0%,#5D46BE 100%); color:#fff; }
.fm-emoo     .station-cta{ background: linear-gradient(180deg,#FF6E33 0%,#E7492C 100%); color:#fff; }
.fm-meru     .station-cta{ background: linear-gradient(180deg,#62C36B 0%,#3AA85E 100%); color:#0b0b0b; }
.fm-msenangu .station-cta{ background: linear-gradient(180deg,#FF5CA2 0%,#C13C8A 100%); color:#fff; }
.fm-mayan    .station-cta{ background: linear-gradient(180deg,#FF3B2F 0%,#FF8F1C 100%); color:#fff; }
.fm-galaxy   .station-cta{ background: linear-gradient(180deg,#5A7DFF 0%,#7C5CFF 100%); color:#fff; }

/* keep the footer strip gradients you already have; these only change the pill */

/* --- Make logos larger on small screens (nice balance) --- */
@media (max-width: 575.98px){
  .station-card{ height: 210px; }
  .station-logo-wrap{ min-height: 140px; }
  .station-logo{ max-height: 100px; max-width: 92%; }
}

/* If any logo still looks small on desktop */
.station-logo{ max-height: 86px; max-width: 90%; }

/* (Optional) If a light logo is hard to see (e.g., Galaxy), add a gentle shadow */
.fm-galaxy .station-logo{ filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }
/* --- Buttons: never stretch; size to text and center --- */
.station-cta{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: -moz-fit-content;
  width: fit-content;             /* width = content */
  min-width: 0;
  padding: .52rem 1rem;
  font-weight: 800;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,.12),
    0 6px 16px rgba(0,0,0,.16);
}

/* mobile sizing (smaller so it never looks too wide) */
@media (max-width: 575.98px){
  .station-foot{ padding: 8px; }
  .station-cta{
    padding: .48rem .9rem;
    font-size: .98rem;
  }
}

/* --- Pill gradients to match Figma (top lighter -> bottom darker) --- */
.fm-milele   .station-cta{ background: linear-gradient(180deg,#2BC272 0%,#119B54 100%); color:#0b0b0b; }
.fm-kameme   .station-cta{ background: linear-gradient(180deg,#7A61E2 0%,#5D46BE 100%); color:#fff; }
.fm-emoo     .station-cta{ background: linear-gradient(180deg,#FF6E33 0%,#E7492C 100%); color:#fff; }
.fm-meru     .station-cta{ background: linear-gradient(180deg,#62C36B 0%,#3AA85E 100%); color:#0b0b0b; }
.fm-msenangu .station-cta{ background: linear-gradient(180deg,#FF5CA2 0%,#C13C8A 100%); color:#fff; }
.fm-mayan    .station-cta{ background: linear-gradient(180deg,#FF3B2F 0%,#FF8F1C 100%); color:#fff; }
.fm-galaxy   .station-cta{ background: linear-gradient(180deg,#5A7DFF 0%,#7C5CFF 100%); color:#fff; }

/* keep the footer strip gradients you already have; these only change the pill */

/* --- Make logos larger on small screens (nice balance) --- */
@media (max-width: 575.98px){
  .station-card{ height: 210px; }
  .station-logo-wrap{ min-height: 140px; }
  .station-logo{ max-height: 100px; max-width: 92%; }
}

/* If any logo still looks small on desktop */
.station-logo{ max-height: 86px; max-width: 90%; }

/* (Optional) If a light logo is hard to see (e.g., Galaxy), add a gentle shadow */
.fm-galaxy .station-logo{ filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }
/* --- Buttons: never stretch; size to text and center --- */
.station-cta{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: -moz-fit-content;
  width: fit-content;             /* width = content */
  min-width: 0;
  padding: .52rem 1rem;
  font-weight: 800;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,.12),
    0 6px 16px rgba(0,0,0,.16);
}

/* mobile sizing (smaller so it never looks too wide) */
@media (max-width: 575.98px){
  .station-foot{ padding: 8px; }
  .station-cta{
    padding: .48rem .9rem;
    font-size: .98rem;
  }
}

/* --- Pill gradients to match Figma (top lighter -> bottom darker) --- */
.fm-milele   .station-cta{ background: linear-gradient(180deg,#2BC272 0%,#119B54 100%); color:#0b0b0b; }
.fm-kameme   .station-cta{ background: linear-gradient(180deg,#7A61E2 0%,#5D46BE 100%); color:#fff; }
.fm-emoo     .station-cta{ background: linear-gradient(180deg,#FF6E33 0%,#E7492C 100%); color:#fff; }
.fm-meru     .station-cta{ background: linear-gradient(180deg,#62C36B 0%,#3AA85E 100%); color:#0b0b0b; }
.fm-msenangu .station-cta{ background: linear-gradient(180deg,#FF5CA2 0%,#C13C8A 100%); color:#fff; }
.fm-mayan    .station-cta{ background: linear-gradient(180deg,#FF3B2F 0%,#FF8F1C 100%); color:#fff; }
.fm-galaxy   .station-cta{ background: linear-gradient(180deg,#5A7DFF 0%,#7C5CFF 100%); color:#fff; }

/* keep the footer strip gradients you already have; these only change the pill */

/* --- Make logos larger on small screens (nice balance) --- */
@media (max-width: 575.98px){
  .station-card{ height: 210px; }
  .station-logo-wrap{ min-height: 140px; }
  .station-logo{ max-height: 100px; max-width: 92%; }
}

/* If any logo still looks small on desktop */
.station-logo{ max-height: 86px; max-width: 90%; }

/* (Optional) If a light logo is hard to see (e.g., Galaxy), add a gentle shadow */
.fm-galaxy .station-logo{ filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }
/* --- Buttons: never stretch; size to text and center --- */
.station-cta{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: -moz-fit-content;
  width: fit-content;             /* width = content */
  min-width: 0;
  padding: .52rem 1rem;
  font-weight: 800;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,.12),
    0 6px 16px rgba(0,0,0,.16);
}

/* mobile sizing (smaller so it never looks too wide) */
@media (max-width: 575.98px){
  .station-foot{ padding: 8px; }
  .station-cta{
    padding: .48rem .9rem;
    font-size: .98rem;
  }
}

/* --- Pill gradients to match Figma (top lighter -> bottom darker) --- */
.fm-milele   .station-cta{ background: linear-gradient(180deg,#2BC272 0%,#119B54 100%); color:#0b0b0b; }
.fm-kameme   .station-cta{ background: linear-gradient(180deg,#7A61E2 0%,#5D46BE 100%); color:#fff; }
.fm-emoo     .station-cta{ background: linear-gradient(180deg,#FF6E33 0%,#E7492C 100%); color:#fff; }
.fm-meru     .station-cta{ background: linear-gradient(180deg,#62C36B 0%,#3AA85E 100%); color:#0b0b0b; }
.fm-msenangu .station-cta{ background: linear-gradient(180deg,#FF5CA2 0%,#C13C8A 100%); color:#fff; }
.fm-mayan    .station-cta{ background: linear-gradient(180deg,#FF3B2F 0%,#FF8F1C 100%); color:#fff; }
.fm-galaxy   .station-cta{ background: linear-gradient(180deg,#5A7DFF 0%,#7C5CFF 100%); color:#fff; }

/* keep the footer strip gradients you already have; these only change the pill */

/* --- Make logos larger on small screens (nice balance) --- */
@media (max-width: 575.98px){
  .station-card{ height: 210px; }
  .station-logo-wrap{ min-height: 140px; }
  .station-logo{ max-height: 100px; max-width: 92%; }
}

/* If any logo still looks small on desktop */
.station-logo{ max-height: 86px; max-width: 90%; }

/* (Optional) If a light logo is hard to see (e.g., Galaxy), add a gentle shadow */
.fm-galaxy .station-logo{ filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }
/* --- Buttons: never stretch; size to text and center --- */
.station-cta{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: -moz-fit-content;
  width: fit-content;             /* width = content */
  min-width: 0;
  padding: .52rem 1rem;
  font-weight: 800;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,.12),
    0 6px 16px rgba(0,0,0,.16);
}

/* mobile sizing (smaller so it never looks too wide) */
@media (max-width: 575.98px){
  .station-foot{ padding: 8px; }
  .station-cta{
    padding: .48rem .9rem;
    font-size: .98rem;
  }
}

/* --- Pill gradients to match Figma (top lighter -> bottom darker) --- */
.fm-milele   .station-cta{ background: linear-gradient(180deg,#2BC272 0%,#119B54 100%); color:#0b0b0b; }
.fm-kameme   .station-cta{ background: linear-gradient(180deg,#7A61E2 0%,#5D46BE 100%); color:#fff; }
.fm-emoo     .station-cta{ background: linear-gradient(180deg,#FF6E33 0%,#E7492C 100%); color:#fff; }
.fm-meru     .station-cta{ background: linear-gradient(180deg,#62C36B 0%,#3AA85E 100%); color:#0b0b0b; }
.fm-msenangu .station-cta{ background: linear-gradient(180deg,#FF5CA2 0%,#C13C8A 100%); color:#fff; }
.fm-mayan    .station-cta{ background: linear-gradient(180deg,#FF3B2F 0%,#FF8F1C 100%); color:#fff; }
.fm-galaxy   .station-cta{ background: linear-gradient(180deg,#5A7DFF 0%,#7C5CFF 100%); color:#fff; }

/* keep the footer strip gradients you already have; these only change the pill */

/* --- Make logos larger on small screens (nice balance) --- */
@media (max-width: 575.98px){
  .station-card{ height: 210px; }
  .station-logo-wrap{ min-height: 140px; }
  .station-logo{ max-height: 100px; max-width: 92%; }
}

/* If any logo still looks small on desktop */
.station-logo{ max-height: 86px; max-width: 90%; }

/* (Optional) If a light logo is hard to see (e.g., Galaxy), add a gentle shadow */
.fm-galaxy .station-logo{ filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }
/* ===== Stations: tighter mobile sizing ===== */
@media (max-width: 575.98px){
  /* show a comfy peek of the next card */
  .stations-scroller{
    /* each card ~64% of the viewport, capped so it never gets huge */
    grid-auto-columns: clamp(200px, 64vw, 250px);
    gap: 12px;                     /* smaller gaps */
    padding: 2px 10px 12px;        /* a bit more bottom breathing room */
  }

  /* slightly shorter card so the row feels lighter */
  .station-card{ height: 190px; }

  /* balance logo area */
  .station-logo-wrap{
    padding: 18px 10px 6px;
    min-height: 128px;
  }
  .station-logo{
    max-height: 96px;              /* still nice and big */
    max-width: 92%;
  }

  /* footer + pill proportionate */
  .station-foot{ margin: 0 8px 8px; padding: 6px; }
  .station-cta{
    font-size: .95rem;
    padding: .44rem .9rem;
    width: fit-content;            /* never stretch full width */
  }
}

/* super-small phones (<= 360px): let the card be a touch wider for readability */
@media (max-width: 360px){
  .stations-scroller{ grid-auto-columns: clamp(190px, 70vw, 230px); }
}
/* --- FINAL Figma-match: Open on App pill --- */
.station-foot{
  margin: 0 10px 10px;
  border-radius: 12px;
  padding: 8px;                               /* gives the pill breathing room */
  display: flex; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}

.station-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: fit-content;                          /* never stretch */
  min-width: 0;

  padding: .50rem 1.05rem;
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: .01em;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);     /* bright rim like Figma */
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,.12),            /* tiny pressed highlight */
    0 6px 16px rgba(0,0,0,.18);                /* soft outer lift */
  text-decoration: none;
}

/* Mobile: smaller pill, cards not too wide */
@media (max-width: 575.98px){
  .stations-scroller{ grid-auto-columns: clamp(200px, 64vw, 250px); gap: 12px; }
  .station-card{ height: 192px; }
  .station-logo-wrap{ min-height: 132px; }
  .station-logo{ max-height: 100px; max-width: 92%; }
  .station-cta{ font-size: .95rem; padding: .46rem .95rem; }
}

/* ===== Brand-accurate pill colors (top → bottom slight gloss) ===== */
/* Milele (green pill with dark text) */
.fm-milele   .station-cta{ background: linear-gradient(180deg,#2BC272 0%,#119B54 100%); color:#0b0b0b; }
/* Kameme (deep purple) */
.fm-kameme   .station-cta{ background: linear-gradient(180deg,#7A61E2 0%,#5D46BE 100%); color:#fff; }
/* Emoo (orange-red) */
.fm-emoo     .station-cta{ background: linear-gradient(180deg,#FF6E33 0%,#E7492C 100%); color:#fff; }
/* Meru (fresh green) */
.fm-meru     .station-cta{ background: linear-gradient(180deg,#62C36B 0%,#3AA85E 100%); color:#0b0b0b; }
/* Msenangu (magenta) */
.fm-msenangu .station-cta{ background: linear-gradient(180deg,#FF5CA2 0%,#C13C8A 100%); color:#fff; }
/* Mayan (red) */
.fm-mayan    .station-cta{ background: linear-gradient(180deg,#FF3B2F 0%,#F0642A 100%); color:#fff; }
/* Galaxy (indigo/purple) */
.fm-galaxy   .station-cta{ background: linear-gradient(180deg,#5A7DFF 0%,#7C5CFF 100%); color:#fff; }

/* (Optional) if any light logo (e.g., Galaxy) looks washed out on its pastel card */
.fm-galaxy .station-logo{ filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }
/* === Open on App: text directly on the gradient bar === */
.station-foot{
  /* the bar becomes the button background */
  background: var(--foot-bg, linear-gradient(90deg,#e9ecef,#dfe3e7));
  border-radius: 12px;
  margin: 0 10px 10px;
  height: 42px;                 /* consistent bar height */
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}

/* anchor is full-width, transparent, centered text */
.station-cta{
  display: grid !important;
  place-items: center;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;   /* kill the inner pill */
  border: 0 !important;
  box-shadow: none !important;
  border-radius: inherit;

  color: #fff;                           /* Figma uses white text */
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none;
}

/* Mobile sizing */
@media (max-width: 575.98px){
  .station-foot{ height: 40px; margin: 0 8px 8px; }
  .station-cta{ font-size: .95rem; }
}





















/* ===== Favourite Shows (exact match) ===== */

.shows-title{
  color:#fff;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.05;
  font-size:clamp(1.4rem, 2.6vw, 2rem);
  margin:0;
}

/* Horizontal scroller with snap */
.shows-scroller{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: clamp(260px, 32vw, 340px);
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  padding:4px 6px 8px;
  mask-image: linear-gradient(to right,
    transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.shows-scroller::-webkit-scrollbar{ display:none; }
.shows-scroller{ scrollbar-width:none; -ms-overflow-style:none; }

/* Card */
.show-card{
  scroll-snap-align:start;
  background:#0b0b0b;            /* same black as page */
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 12px 36px rgba(0,0,0,.35);
}

/* Square presenter image */
.show-poster{
  position:relative;
  aspect-ratio: 1 / 1;           /* square, like the comp */
  background:#111;
  overflow:hidden;
}
.show-poster > img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* White station badge bottom-left */
.show-badge{
  position:absolute;
  left:12px;
  bottom:12px;
  background:#fff;
  border-radius:8px;
  padding:6px 8px;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.show-badge > img{
  height:20px;
  width:auto;
  display:block;
  object-fit:contain;
}

/* Meta below image */
.show-meta{ padding:10px 12px 12px; }
.show-title{
  color:#fff;
  margin:0;
  font-weight:900;
  font-size:clamp(1rem, 1.6vw, 1.12rem);
  line-height:1.2;
}

/* Red divider (bar) before the time */
.show-title .time{
  color:#fff;
  font-weight:800;
  margin-left:.45rem;
  position:relative;
}
.show-title .time::before{
  content:"";
  display:inline-block;
  width:4px;
  height:14px;
  background:#ff3b2f;            /* red bar */
  border-radius:1px;
  margin-right:.45rem;
  transform:translateY(2px);
}

/* Hosts (muted grey) */
.show-hosts{
  color:#a9b2bb;
  margin:.2rem 0 0;
  font-size:.92rem;
}

/* Mobile: bigger posters and comfortable snap */
@media (max-width:575.98px){
  .shows-scroller{ grid-auto-columns: 84vw; gap:14px; }
  .show-badge{ left:10px; bottom:10px; }
  .show-badge > img{ height:20px; }
}
/* === Make the show cards bigger === */
.shows-scroller{
  /* wider columns = larger square posters */
  grid-auto-columns: clamp(320px, 38vw, 460px);
  gap: 22px;
}

/* a little more presence */
.show-meta{ padding:12px 14px 14px; }
.show-title{ font-size: clamp(1.1rem, 1.9vw, 1.3rem); }
.show-title .time::before{ height:16px; }
.show-hosts{ font-size:.98rem; }

/* larger station badge */
.show-badge{ left:14px; bottom:14px; padding:8px 10px; }
.show-badge > img{ height:24px; }

/* Mobile: fill most of the viewport for a bold look */
@media (max-width: 575.98px){
  .shows-scroller{ grid-auto-columns: 92vw; gap:16px; }
  .show-title{ font-size: 1.2rem; }
  .show-badge{ left:12px; bottom:12px; }
  .show-badge > img{ height:24px; }
}
/* Badge flush to the image corner */
.show-poster{ padding: 0; }                  /* make sure there's no inner padding */
.show-badge{
  left: 0;                                   /* touch the left edge */
  bottom: 0;                                 /* touch the bottom edge */
  border-radius: 0 8px 0 0;                  /* only top-right rounded, others square */
  padding: 8px 10px;                         /* adjust as needed */
  box-shadow: 0 8px 18px rgba(0,0,0,.25);    /* keep soft lift (optional) */
}

/* Slightly larger logo looks better when flush */
.show-badge > img{ height: 24px; }

/* Mobile—keep it neat */
@media (max-width: 575.98px){
  .show-badge{ padding: 7px 9px; }
  .show-badge > img{ height: 22px; }
}
/* 2× bigger station badge (keeps it flush bottom-left) */
.show-badge{
  left: 0;
  bottom: 0;
  padding: 14px 18px;      /* was ~8px 10px */
  border-radius: 0 12px 0 0;
  z-index: 2;
  max-width: 70%;          /* avoid taking over the whole image */
}
.show-badge > img{
  height: 48px;            /* was ~24px -> doubled */
  width: auto;
}

/* Mobile: still big, but a hair smaller to fit narrow screens */
@media (max-width: 575.98px){
  .show-badge{ padding: 12px 16px; }
  .show-badge > img{ height: 44px; }
}
/* Shows: mobile polish */
@media (max-width: 575.98px){
  .shows-scroller{
    grid-auto-columns: 92vw;      /* big, comfy cards with a peek */
    gap: 16px;
    padding: 0 12px 12px;
  }
  .show-card{ border-radius: 14px; }
  .show-title{ font-size: 1.2rem; }
  .show-hosts{ font-size: 1rem; }
  /* bigger flush badge but not overpowering */
  .show-badge{ padding: 12px 16px; }
  .show-badge > img{ height: 44px; }
}

/* Better touch scroll + hidden bars (desktop keeps snap for mouse drag) */
.shows-scroller{
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}
.shows-scroller::-webkit-scrollbar{ display:none; }
.shows-scroller{ scrollbar-width:none; -ms-overflow-style:none; }

/* During autoplay, disable snap for a glassy glide */
.shows-scroller.auto-play{
  scroll-snap-type: none;
}





























/* ===== Exclusive podcasts ===== */

.podcasts-title{
  color:#fff;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.05;
  font-size:clamp(1.4rem, 2.6vw, 2rem);
  margin:0;
}

/* Horizontal scroller with snap (desktop + mobile) */
.podcasts-scroller{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: clamp(200px, 22vw, 230px);
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  padding:4px 6px 8px;
  mask-image: linear-gradient(to right,
    transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.podcasts-scroller::-webkit-scrollbar{ display:none; }
.podcasts-scroller{ scrollbar-width:none; -ms-overflow-style:none; }

/* Card */
.podcast-card{
  scroll-snap-align:start;
  background:#14161a;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.24);
}

/* Square cover image */
.podcast-cover{
  position:relative;
  aspect-ratio: 1 / 1;
  background:#0f1115;
  overflow:hidden;
}
.podcast-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Mic badge: white chip, FLUSH bottom-left (like show cards) */
.podcast-badge{
  position:absolute;
  left:0;
  bottom:0;
  background:#fff;
  border-radius:0 10px 0 0;
  padding:10px 12px;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  z-index:2;
}
.podcast-badge > img{
  display:block;
  height:28px;
  width:auto;
  object-fit:contain;
}

/* Meta strip */
.podcast-meta{
  background:#1a1e24;
  padding:10px 12px 12px;
}
.podcast-title{
  color:#fff;
  font-weight:900;
  font-size:clamp(.95rem, 1.25vw, 1.05rem);
  line-height:1.2;
  margin:0 0 3px 0;
}
.podcast-desc{
  color:#99a2ac;
  font-size:.9rem;
  line-height:1.25;
  margin:0;
}

/* Hover micro-lift on desktop */
@media (hover:hover){
  .podcast-card{ transition: transform .16s ease, box-shadow .16s ease; }
  .podcast-card:hover{ transform: translateY(-2px); box-shadow:0 18px 46px rgba(0,0,0,.3); }
}

/* Mobile: bigger cards and comfy scroll */
@media (max-width:575.98px){
  .podcasts-scroller{
    grid-auto-columns: 72vw;   /* nice, bold cards with a peek of next */
    gap:14px;
    padding:0 10px 10px;
  }
  .podcast-title{ font-size:1.05rem; }
  .podcast-badge{ padding:10px 12px; }
  .podcast-badge > img{ height:26px; }
}
/* --- Podcasts: mobile polish + autoplay support --- */
@media (max-width: 575.98px){
  .podcasts-scroller{
    grid-auto-columns: 84vw;      /* bold card with a peek of the next */
    gap: 16px;
    padding: 0 12px 14px;
  }
  .podcast-card{ border-radius: 14px; }
  .podcast-title{ font-size: 1.15rem; }
  .podcast-desc{ font-size: .98rem; }
  .podcast-badge{ padding: 12px 16px; }
  .podcast-badge > img{ height: 32px; }
}

/* Better touch scrolling; hide bars */
.podcasts-scroller{
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}
.podcasts-scroller::-webkit-scrollbar{ display:none; }
.podcasts-scroller{ scrollbar-width:none; -ms-overflow-style:none; }

/* During autoplay we remove snap for a glassy glide */
.podcasts-scroller.auto-play{ scroll-snap-type: none; }
/* Podcasts: smaller cards on mobile */
@media (max-width: 575.98px){
  .podcasts-scroller{
    grid-auto-columns: clamp(220px, 68vw, 300px); /* was 84vw */
    gap: 12px;
    padding: 0 10px 12px;
  }
  .podcast-card{ border-radius: 12px; }
  .podcast-title{ font-size: 1rem; }
  .podcast-desc{ font-size: .9rem; }
  .podcast-badge{ padding: 10px 12px; }
  .podcast-badge > img{ height: 24px; }        /* smaller badge */
}

























/* ===== FAQ section ===== */
.faq-section { color:#e9ecef; }
.faq-title{
  color:#fff;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.05;
  font-size:clamp(1.6rem, 3vw, 2.25rem);
  margin-bottom:.4rem;
}
.faq-sub{
  color:#9aa3ad;
  margin:0 auto .75rem;
  max-width:720px;
  font-size:.98rem;
}

/* Pills */
.btn-faq-filter{
  background:#191b1f;
  color:#cfd6dd;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  padding:.35rem .9rem;
  font-weight:600;
}
.btn-faq-filter:hover{ color:#fff; border-color:rgba(255,255,255,.15); }
.btn-faq-filter.active{
  background:#23262c;
  color:#fff;
  border-color:rgba(255,255,255,.18);
}

/* Container width */
.faq-wrap{ max-width:880px; }

/* Accordion: dark, rounded “pill” headers with circular chevron */
.faq-section .accordion{ --bs-accordion-bg: transparent; --bs-accordion-border-color: transparent; }

.faq-section .accordion-item{
  background:transparent;
  border:none;
  margin-bottom:.6rem;
}

.faq-section .accordion-button{
  background:#16191d;
  color:#e9edf2;
  border:1px solid rgba(255,255,255,.06);
  border-radius:999px !important;
  padding:.9rem 3.25rem .9rem 1.1rem;
  box-shadow:none;
  font-weight:600;
}
.faq-section .accordion-button:hover{
  border-color:rgba(255,255,255,.12);
  color:#fff;
}

.faq-section .accordion-button:focus{ box-shadow:none; }
.faq-section .accordion-button:not(.collapsed){
  background:#1a1e24;
  color:#fff;
}

/* Replace default arrow with circular chevron */
.faq-section .accordion-button::after{
  content:"";
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  background-color:transparent;
  margin-left:auto;
  background-position:center;
  background-repeat:no-repeat;
  background-size:16px 16px;
  /* down chevron (URL-encoded SVG) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cfd3dc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  transform:none;
}

/* rotate when open */
.faq-section .accordion-button:not(.collapsed)::after{
  transform:rotate(180deg);
}

/* Body */
.faq-section .accordion-body{
  color:#b7c0c8;
  background:#13161a;
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  margin-top:.5rem;
  padding:1rem 1.1rem;
}

/* Mobile tuning */
@media (max-width: 575.98px){
  .faq-wrap{ max-width:100%; }
  .faq-section .accordion-button{ padding:.85rem 3rem .85rem .95rem; }
  .faq-section .accordion-body{ font-size:.98rem; }
}
/* grey block behind the FAQ */
.faq-section{
  background:#13161a;                 /* grey/dark slate */
  border:1px solid rgba(255,255,255,.06);
  border-radius:20px;
  padding:2.25rem 1.25rem;            /* adds space inside the block */
}
/* FAQ: full-bleed grey background (edge to edge) */
.faq-section{
  position: relative;
  z-index: 0;
  padding: 2.25rem 1.25rem;      /* inner spacing stays */
  border-radius: 0;              /* no rounded corners on full-bleed */
}

.faq-section::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  /* extend background beyond the .container to the viewport edges */
  left: calc(-50vw + 50%);
  right: calc(-50vw + 50%);
  background: #13161a;           /* grey/dark slate */
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  z-index: -1;                   /* sit behind the content */
}



















/* === All-in-one Download CTA === */
.allinone-section{
  background:#000;
  padding-block: clamp(48px, 8vw, 96px);
}

.aio-heading{
  color:#fff;
  font-weight:900;
  font-style: italic;
  letter-spacing:.01em;
  line-height:.92;
  margin:0 0 clamp(18px, 3.5vw, 28px);
  font-size: clamp(72px, 18vw, 220px); /* huge like Figma */
}

.aio-sub{
  color:#fff;
  font-weight:900;
  letter-spacing:-.02em;
  margin:0 0 clamp(18px, 3vw, 24px);
  font-size: clamp(20px, 2.6vw, 32px);
}

/* QR framed in white rounded card */
.qr-wrap{
  display:inline-block;
  background:#fff;
  border-radius:16px;
  padding:16px;                          /* white “frame” thickness */
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  margin:0 0 clamp(16px, 3vw, 24px);
}
.qr-img{
  display:block;
  width: clamp(220px, 36vw, 360px);
  height:auto;
}

/* Combined store badges */
.stores-combo{
  display:inline-block;
  height: clamp(40px, 6vw, 56px);
  width:auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}

/* (Optional) if an image path breaks, show a quiet placeholder so it's obvious */
.qr-img:not([src]), .qr-img[src=""], .qr-img[src="#"]{
  width: clamp(220px, 36vw, 360px);
  aspect-ratio:1/1;
  background:#eee;
  border-radius:8px;
}
/* Center everything in the "all in one" section */
.allinone-section .container{
  display: flex;
  flex-direction: column;
  align-items: center;      /* horizontal centering */
  justify-content: flex-start;
}

/* Make the images block-level and centered */
.qr-wrap,
.qr-img,
.stores-combo{
  display: block;
  margin-inline: auto;      /* centers even if text-align changes */
}

/* Size tweaks (desktop/tablet) */
.qr-wrap{ padding: 16px; border-radius: 16px; }
.qr-img{  width: clamp(260px, 36vw, 420px); height: auto; }
.stores-combo{ height: clamp(56px, 7vw, 78px); width: auto; }  /* a bit bigger */

/* Mobile polish */
@media (max-width: 575.98px){
  .aio-heading{ font-size: 20vw; }           /* big but readable */
  .aio-sub{     font-size: 6vw;  margin-top: .2rem; }

  .qr-wrap{ padding: 12px; border-radius: 14px; margin-top: .5rem; }
  .qr-img{  width: 74vw; }

  .stores-combo{
    height: 16vw;               /* larger tap target */
    margin-top: .6rem;
  }
}
/* === Download section size tweaks === */
/* Desktop / tablet: QR -15%, badges +25% */
.allinone-section .qr-img{
  /* was clamp(260px, 36vw, 420px) */
  width: clamp(221px, 30.6vw, 357px);   /* 0.85 × each bound */
  height: auto;
}

.allinone-section .stores-combo{
  /* was clamp(56px, 7vw, 78px) */
  height: clamp(70px, 8.8vw, 98px);     /* 1.25 × each bound */
  width: auto;
}

/* Mobile: QR -15%, badges +25% */
@media (max-width: 575.98px){
  .allinone-section .qr-img{
    /* was 74vw */
    width: 63vw;                        /* ≈ 0.85 × 74vw */
  }
  .allinone-section .stores-combo{
    /* was 16vw */
    height: 20vw;                        /* 1.25 × 16vw */
  }
}




























/* ===== Footer ===== */
.site-footer{
  background:#13161a;                    /* greyish dark background */
  color:#cfd3dc;
  border-top:1px solid rgba(255,255,255,.06);
}

.footer-logo{
  max-height:34px;
  width:auto;
  opacity:.95;
}

.footer-title{
  color:#fff;
  font-weight:800;
  letter-spacing:-.02em;
}

.footer-address{
  font-style:normal;
  line-height:1.55;
}
.footer-address a{ color:#e8eef6; text-decoration:underline; }
.footer-address a:hover{ color:#fff; }

.footer-links li + li{ margin-top:.25rem; }
.footer-links a{
  color:#d5dbe3;
  text-decoration:underline;
  text-underline-offset:2px;
}
.footer-links a:hover{ color:#fff; }

.store-badge{
  height:32px;
  width:auto;
  display:block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}

.footer-rule{
  border:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}

.footer-copy{
  color:#9aa3ad;
  font-size:.9rem;
}

/* Mobile polish */
@media (max-width: 575.98px){
  .footer-logo{ margin-bottom:.25rem; }
  .footer-title{ margin-top:.25rem; }
  .store-badge{ height:30px; }
}








/* ===== Footer ===== */
.site-footer{
  background:#13161a;                      /* greyish dark */
  color:#cfd3dc;
  border-top:1px solid rgba(255,255,255,.06);
}

.footer-logo{
  max-height:100px;
  width:auto;
  opacity:.95;
}

/* Bigger headings for both columns */
.footer-title{
  color:#fff;
  font-weight:900;
  letter-spacing:-.02em;
  font-size: clamp(1.25rem, 2vw, 1.85rem); /* bigger */
  line-height:1.1;
  margin:0;
}

/* Address + links */
.footer-address{
  font-style:normal;
  line-height:1.6;
  color:#d7dce3;
}
.footer-address a{ color:#e9eff7; text-decoration:underline; text-underline-offset:2px; }
.footer-address a:hover{ color:#fff; }

.footer-links li + li{ margin-top:.3rem; }
.footer-links a{
  color:#d5dbe3;
  text-decoration:underline;
  text-underline-offset:2px;
}
.footer-links a:hover{ color:#fff; }

/* Store badges */
/* .store-badge{
  height:70px;
  width:auto;
  display:block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
} */

/* Divider + copyright */
.footer-rule{
  border:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}
.footer-copy{
  color:#9aa3ad;
  font-size:.92rem;
}

/* Ensure right alignment for the whole Talk block on lg+ */
@media (min-width: 992px){
  .footer-talk{ text-align:right; }
}

/* Mobile polish */
@media (max-width: 575.98px){
  .footer-logo{ margin-bottom:.25rem; }
  .store-badge{ height:32px; }
  .footer-address{ font-size: .98rem; }
}
/* 1) Bigger "Talk to us" + "Legal" headings */
.site-footer .footer-title{
  font-size: clamp(1.8rem, 2.8vw, 2.5rem);  /* up from ~1.85rem */
  line-height: 1.05;
}

/* 2) More gap ABOVE the footer (space from the section above) */
.site-footer{
  margin-top: clamp(56px, 9vw, 128px);      /* adds vertical breathing room */
}

/* 3) More horizontal space between footer columns on desktop */
.site-footer .row{
  --bs-gutter-x: 3rem;                      /* 48px column gutter */
}

/* 4) Extra vertical space between stacks on mobile/tablet */
@media (max-width: 991.98px){
  .site-footer .row{ --bs-gutter-y: 2rem; } /* more vertical spacing */
}