/**
 * The homepage, [bollypiano_home] (child-theme/include/bollypiano_home.php). Concept B, "banner
 * stage", ported from ~/Downloads/bollypiano-landing-mockups/b-banner-stage.html.
 *
 * Every class is prefixed `bph-` and the tokens live on `.bph`, so nothing here reaches the rest
 * of the site. Selectors start `.bph .bph-...` so they outrank the Elementor kit's global link and
 * heading colors (`.elementor-kit-N a`, `.elementor-kit-N h2`) without !important. The site's header, footer and product cards keep their own styles. Fonts are
 * self-hosted in css/fonts/ (the banner fonts in css/fonts/banner/, the app's eight, each
 * downloaded only if a live banner uses it).
 */

@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/fraunces.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/hanken-grotesk.woff2") format("woff2")}
@font-face{font-family:"BP Eczar";font-weight:700;font-display:swap;src:url("fonts/banner/Eczar-Bold.woff2") format("woff2")}
@font-face{font-family:"BP Poppins";font-weight:700;font-display:swap;src:url("fonts/banner/Poppins-Bold.woff2") format("woff2")}
@font-face{font-family:"BP Mukta";font-weight:700;font-display:swap;src:url("fonts/banner/Mukta-ExtraBold.woff2") format("woff2")}
@font-face{font-family:"BP Baloo 2";font-weight:700;font-display:swap;src:url("fonts/banner/Baloo2-Bold.woff2") format("woff2")}
@font-face{font-family:"BP Rozha One";font-weight:700;font-display:swap;src:url("fonts/banner/RozhaOne-Regular.woff2") format("woff2")}
@font-face{font-family:"BP Yatra One";font-weight:700;font-display:swap;src:url("fonts/banner/YatraOne-Regular.woff2") format("woff2")}
@font-face{font-family:"BP Kalam";font-weight:700;font-display:swap;src:url("fonts/banner/Kalam-Bold.woff2") format("woff2")}
@font-face{font-family:"BP Amita";font-weight:700;font-display:swap;src:url("fonts/banner/Amita-Bold.woff2") format("woff2")}

.bph{
  --ink:#001524; --ink-soft:#33474F; --muted:#566669;
  --teal:#15616D; --teal-tint:#EEF5F7;
  --cream:#FFECD1; --cream-2:#FFF7EA; --surface:#FFFBF3;
  --orange:#FF7D00; --orange-press:#E86E00; --rust:#78290F;
  --line:rgba(0,21,36,.12);
  /* The site's own gutter (global.css section-* padding), so the page lines up with the header. */
  --gutter:clamp(20px, 6.522vw - 3.47px, 80px);
  /* Desktop banner peeks: how much of the next and previous banner shows either side. */
  --peek:150px; --gap:16px;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,sans-serif;
  color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased;
}
.bph *,.bph *::before,.bph *::after{box-sizing:border-box}
.bph a{text-decoration:none}
/* Only the page's own headings: the product cards' titles are h2s too and keep the site's style. */
.bph.bph :is(.bph-head, .bph-claim, .bph-player, .bph-plan, .bph-card) :is(h1, h2, h3){font-family:var(--serif); font-weight:700; letter-spacing:-.01em; margin:0; color:inherit}
.bph.bph :is(.bph-head, .bph-player) h2{font-size:34px; line-height:1.15}
.bph .bph-wrap{box-sizing:content-box !important; max-width:1400px; margin:0 auto; padding:0 var(--gutter)}
.bph .bph-eyebrow{font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--teal)}
.bph .bph-sec{padding:64px 0}
.bph .bph-sec--flush{padding-top:0}
.bph .bph-sec--top0{padding-top:0}
.bph .bph-sec--cream{background:var(--cream-2)}
.bph .bph-head{display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:22px}
.bph .bph-head p{margin:6px 0 0; color:var(--muted); font-size:16px}
.bph .bph-see-all{color:var(--teal); font-weight:700; font-size:15px; white-space:nowrap}
.bph .bph-see-all::after{content:" \2192"}

.bph .bph-btns{display:flex; gap:12px; flex-wrap:wrap}
.bph .bph-btns--center{justify-content:center; margin-top:26px}
.bph .bph-btn{display:inline-flex; align-items:center; height:50px; padding:0 24px; border-radius:999px; font-weight:700; font-size:16px; border:2px solid transparent; white-space:nowrap}
.bph .bph-btn--primary{background:var(--orange); color:var(--ink)}
.bph .bph-btn--primary:hover{background:var(--orange-press); color:var(--ink)}
.bph .bph-btn--ghost{border-color:rgba(0,21,36,.25); color:var(--ink)}
.bph .bph-btn--ghost-light{border-color:rgba(255,236,209,.45); color:var(--cream)}
.bph .bph-btn--ghost:hover,.bph .bph-btn--ghost-light:hover{border-color:currentColor}

/* ===== The banner stage ===================================================================
   A scroll-snap track: each banner is a slide, centered, with the neighbours peeking in at the
   sides on desktop, endlessly (js/bollypiano_home.js). Swiped or clicked by hand, never moving on
   its own (the app's rule).
   The track's height is reserved from its width before any banner arrives, so nothing below
   moves when they do. */
.bph .bph-stage{background:var(--ink); padding:28px 0 22px}
.bph .bph-stage.is-empty{display:none}
.bph .bph-carousel{container-type:inline-size}
.bph .bph-track{
  position:relative; display:flex; gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:0 calc(var(--peek) + var(--gap)); scroll-padding:0 calc(var(--peek) + var(--gap));
  height:calc((100cqw - 2 * (var(--peek) + var(--gap))) / 2);
  overscroll-behavior-x:contain;
}
.bph .bph-track::-webkit-scrollbar{display:none}
.bph .bph-slide{flex:none; width:calc(100cqw - 2 * (var(--peek) + var(--gap))); scroll-snap-align:center; transition:opacity .25s}
.bph .bph-track.has-many .bph-slide:not(.is-current){opacity:.45}

/* One banner: the app's BannerSlide drawn the same way. The 2:1 image fills it, and the lines are
   live text over its left 62%, in the font, size and color set in the portal. Sizes are in
   container units so a banner keeps the proportions it was authored at: the app's M header is
   22 pt on a 560 pt slide, so 22/560 = 3.93cqw. */
.bph .bph-banner{position:relative; display:flex; align-items:center; width:100%; aspect-ratio:2/1; border-radius:18px; overflow:hidden; container-type:inline-size; background:#1d2a33; color:#fff}
.bph .bph-banner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.bph .bph-banner__txt{position:relative; max-width:62%; padding:0 5.5cqw}
.bph .bph-banner__h{margin:0; line-height:1.18; font-weight:800}
.bph .bph-banner__s{margin:.8cqw 0 0; line-height:1.3}
.bph .bph-banner__cta{display:inline-block; white-space:nowrap; margin-top:2.6cqw; border-radius:999px; padding:1.3cqw 2.6cqw; font-weight:700; line-height:1.2}
.bph .bph-banner__h.is-L{font-size:4.64cqw} .bph .bph-banner__h.is-M{font-size:3.93cqw} .bph .bph-banner__h.is-S{font-size:3.21cqw}
.bph .bph-banner__s.is-L{font-size:3.04cqw} .bph .bph-banner__s.is-M{font-size:2.68cqw} .bph .bph-banner__s.is-S{font-size:2.32cqw}
.bph .bph-banner__cta.is-L{font-size:2.86cqw} .bph .bph-banner__cta.is-M{font-size:2.5cqw} .bph .bph-banner__cta.is-S{font-size:2.14cqw}
.bph .bph-banner__s.f-app{font-weight:400}
.bph .bph-banner .f-eczar{font-family:"BP Eczar",serif; font-weight:700}
.bph .bph-banner .f-poppins{font-family:"BP Poppins",sans-serif; font-weight:700}
.bph .bph-banner .f-mukta{font-family:"BP Mukta",sans-serif; font-weight:700}
.bph .bph-banner .f-baloo2{font-family:"BP Baloo 2",sans-serif; font-weight:700}
.bph .bph-banner .f-rozha{font-family:"BP Rozha One",serif; font-weight:700}
.bph .bph-banner .f-yatra{font-family:"BP Yatra One",serif; font-weight:700}
.bph .bph-banner .f-kalam{font-family:"BP Kalam",cursive; font-weight:700}
.bph .bph-banner .f-amita{font-family:"BP Amita",cursive; font-weight:700}

.bph .bph-ctl{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:18px}
.bph .bph-ctl[hidden]{display:none}
.bph .bph-arrow{width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(255,255,255,.3); background:transparent; color:#fff; font-size:18px; cursor:pointer; display:grid; place-items:center; padding:0}
.bph .bph-arrow:hover{border-color:#fff}
/* The theme and the Elementor kit color every button pink on hover and focus; not these. */
.bph .bph-arrow:is(:hover,:focus){background:transparent; color:#fff}
.bph .bph-dots{display:flex; gap:7px}
.bph .bph-dots button{width:8px; height:8px; border-radius:4px; background:rgba(255,255,255,.3); border:0; padding:0; cursor:pointer; transition:width .2s}
.bph .bph-dots button[aria-current="true"]{width:22px; background:var(--orange)}
.bph .bph-dots button:is(:hover,:focus){background:rgba(255,255,255,.6)}
.bph .bph-dots button[aria-current="true"]:is(:hover,:focus){background:var(--orange)}

/* While a website banner is live, the yellow offer bar stands down on this page only: the same
   offer twice in the first screen is noise (decided 2026-10-30). bollypiano_home.js adds
   bph-no-banners when there is none, or the feed cannot be read, and the bar comes back. */
body.home:not(.bph-no-banners) .bp-promo{display:none !important}
/* One search box at a time (2026-10-31). Wide screens: the header's search sits in the header's
   own row, so it is hidden (visibility, so nothing moves) while the band's is on screen; the script
   adds bph-band-search. Up to 1024px (the header's own breakpoint) the header's search is a full
   width bar right above the band and stays on screen, so the band's goes instead. */
body.bph-band-search [data-elementor-type="header"] .elementor-widget-fibosearch{visibility:hidden}
@media (max-width:1024px){ .bph .bph-claim .bph-search{display:none} }

/* ===== The claim band ===================================================================== */
.bph .bph-claim{background:var(--teal); color:#fff}
.bph .bph-claim__in{display:grid; grid-template-columns:1fr 1.05fr; gap:40px; align-items:center; padding-top:34px; padding-bottom:34px}
.bph .bph-claim h1{font-size:36px; line-height:1.12; color:#fff}
.bph .bph-claim p{margin:8px 0 0; color:#cfe7ea; font-size:17px}
.bph .bph-search{min-width:0}

/* ===== What do you play? ================================================================== */
.bph .bph-cats{display:grid; grid-template-columns:repeat(8,1fr); gap:16px}
.bph .bph-cat{text-align:center; font-weight:700; font-size:15px; color:var(--ink)}
.bph .bph-cat:hover{color:var(--teal)}
.bph .bph-cat__ph{display:block; aspect-ratio:1; border-radius:50%; overflow:hidden; margin-bottom:10px; background:var(--teal)}
.bph .bph-cat__ph img{width:100%; height:100%; object-fit:cover; transition:transform .3s}
.bph .bph-cat:hover .bph-cat__ph img{transform:scale(1.05)}
.bph .bph-cat__ph--more{display:grid; place-items:center; background:var(--rust); color:#fff; font-size:30px}
.bph .bph-cat small{display:block; font-weight:500; color:var(--muted); font-size:13px; margin-top:2px}

/* ===== Shelves: the site's [product_slider] cards, given room for their slider arrows ====== */
.bph .bph-shelf .bollypiano-similar-products{margin:0}
/* Top 10: the rank on each card (bollypiano_home_top_ten adds bph-rank-N). */
.bph .bph-top li.product{position:relative}
/* A badge, not the mockup's large white numeral: the site's covers are white sheet music. */
.bph .bph-top li.product::before{position:absolute; z-index:2; left:16px; top:14px; min-width:34px; height:34px; padding:0 6px; border-radius:17px; display:grid; place-items:center; background:var(--ink); color:#fff; font-family:var(--serif); font-size:18px; font-weight:700; line-height:1; box-shadow:0 4px 12px rgba(0,21,36,.25); pointer-events:none}
.bph .bph-top li.bph-rank-1::before{content:"1"} .bph .bph-top li.bph-rank-2::before{content:"2"}
.bph .bph-top li.bph-rank-3::before{content:"3"} .bph .bph-top li.bph-rank-4::before{content:"4"}
.bph .bph-top li.bph-rank-5::before{content:"5"} .bph .bph-top li.bph-rank-6::before{content:"6"}
.bph .bph-top li.bph-rank-7::before{content:"7"} .bph .bph-top li.bph-rank-8::before{content:"8"}
.bph .bph-top li.bph-rank-9::before{content:"9"} .bph .bph-top li.bph-rank-10::before{content:"10"}

/* ===== Songs for every occasion ============================================================ */
.bph .bph-occ{display:grid; grid-template-columns:repeat(5,1fr); gap:16px}
.bph .bph-occ a{position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:end; min-height:150px; padding:22px 18px; border-radius:16px; color:#fff; font-family:var(--serif); font-size:22px; font-weight:700; transition:transform .2s}
.bph .bph-occ a:hover{transform:translateY(-2px); color:#fff}
.bph .bph-occ a small{font-family:var(--sans); font-size:13px; font-weight:500; opacity:.85; margin-top:4px}
/* The faint Devanagari letter: decoration, so the system's own Devanagari font is enough. */
.bph .bph-occ a::before{content:attr(data-g); position:absolute; right:-6px; top:-18px; font-size:96px; opacity:.18; font-family:"Noto Sans Devanagari","Kohinoor Devanagari","Nirmala UI",serif; line-height:1.4}

/* ===== The player ========================================================================= */
.bph .bph-player{background:var(--ink); color:#fff}
.bph .bph-player .bph-eyebrow{color:#7cc4cf}
.bph .bph-player h2{margin-top:10px; color:#fff}
.bph .bph-player__in{display:grid; grid-template-columns:1fr 1.15fr; gap:64px; align-items:center}
.bph .bph-ticks{list-style:none; padding:0; margin:22px 0 28px; display:grid; gap:14px; color:rgba(255,255,255,.88)}
.bph .bph-ticks li{display:flex; gap:12px; font-size:17px; line-height:1.4}
.bph .bph-ticks li::before{content:""; flex:none; width:22px; height:22px; margin-top:1px; border-radius:50%; background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/13px no-repeat}
.bph .bph-player__media{position:relative; padding-bottom:60px}
.bph .bph-device{background:#1d2a33; border-radius:22px; padding:12px; box-shadow:0 30px 60px rgba(0,0,0,.35)}
.bph .bph-device img{display:block; width:100%; height:auto; border-radius:12px}
.bph .bph-device--small{position:absolute; width:52%; right:-16px; bottom:0; padding:8px}

/* ===== Membership ========================================================================= */
.bph .bph-plans{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.bph .bph-plan{position:relative; border:1.5px solid var(--line); border-radius:18px; padding:26px; background:#fff}
.bph .bph-plan--best{border-color:var(--orange)}
.bph .bph-plan__tag{position:absolute; top:-12px; left:24px; background:var(--orange); color:var(--ink); font-size:12px; font-weight:800; padding:4px 10px; border-radius:999px}
.bph .bph-plan h3{font-size:24px}
.bph .bph-plan__sub{margin:6px 0 0; color:var(--muted); font-size:14px}
.bph .bph-plan ul{padding-left:18px; margin:14px 0 0; color:var(--ink-soft); line-height:1.7; font-size:15px}

/* ===== App and classes ===================================================================== */
.bph .bph-duo{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.bph .bph-card{border-radius:20px; padding:32px; display:flex; flex-direction:column; align-items:flex-start; gap:12px}
.bph .bph-card h3{font-size:28px; line-height:1.15}
.bph .bph-card p{margin:0; font-size:16px; line-height:1.5; max-width:440px}
.bph .bph-card--teal{background:var(--teal); color:#fff}
.bph .bph-card--teal h3{color:#fff}
.bph .bph-card--teal .bph-eyebrow{color:#bfe3e8}
.bph .bph-card--teal p{opacity:.9}
.bph .bph-card--teal .bp-app-badges__line{display:none}
.bph .bph-card--cream{background:var(--cream)}
.bph .bph-card--cream .bph-eyebrow{color:var(--rust)}
.bph .bph-card--cream p{color:var(--ink-soft)}
.bph .bph-card .bp-app-badges,.bph .bph-card .bph-btn{margin-top:auto}

/* ===== Tablet ============================================================================== */
@media (max-width:1100px){
  .bph{--peek:0px; --gap:12px}
  .bph.bph :is(.bph-head, .bph-player) h2{font-size:30px}
  .bph .bph-claim__in{grid-template-columns:1fr; gap:20px}
  .bph .bph-cats{grid-template-columns:repeat(4,1fr); row-gap:22px}
  .bph .bph-occ{grid-template-columns:repeat(3,1fr)}
  .bph .bph-player__in{grid-template-columns:1fr; gap:40px}
  .bph .bph-player__media{max-width:680px}
  .bph .bph-duo,.bph .bph-plans{gap:16px}
}

/* ===== Phone =============================================================================== */
@media (max-width:640px){
  .bph.bph :is(.bph-head, .bph-player) h2{font-size:25px}
  .bph .bph-sec{padding:40px 0}
  .bph .bph-sec--flush,.bph .bph-sec--top0{padding-top:0}
  .bph .bph-head{margin-bottom:16px}
  .bph .bph-head p{font-size:15px}
  .bph .bph-stage{padding:14px 0}
  .bph .bph-stage .bph-wrap{padding:0 12px}
  .bph .bph-banner{border-radius:14px}
  /* On a phone the app draws fixed point sizes (the header smaller: 19 where M is 22). */
  .bph .bph-banner__h.is-L{font-size:22px} .bph .bph-banner__h.is-M{font-size:19px} .bph .bph-banner__h.is-S{font-size:16px}
  .bph .bph-banner__s.is-L{font-size:17px} .bph .bph-banner__s.is-M{font-size:15px} .bph .bph-banner__s.is-S{font-size:13px}
  .bph .bph-banner__cta.is-L{font-size:16px} .bph .bph-banner__cta.is-M{font-size:14px} .bph .bph-banner__cta.is-S{font-size:12px}
  .bph .bph-banner__s{margin-top:4px}
  .bph .bph-banner__cta{padding:6px 12px; margin-top:10px}
  .bph .bph-banner__txt{padding:0 16px}
  .bph .bph-ctl{margin-top:12px}
  .bph .bph-arrow{display:none}
  .bph .bph-claim h1{font-size:27px}
  .bph .bph-claim p{font-size:15px}
  .bph .bph-claim__in{padding-top:26px; padding-bottom:26px}
  .bph .bph-cats{gap:10px; row-gap:16px}
  .bph .bph-cat{font-size:13px}
  .bph .bph-cat small{display:none}
  .bph .bph-occ{grid-template-columns:1fr 1fr; gap:12px}
  .bph .bph-occ a{min-height:110px; font-size:19px; padding:16px}
  .bph .bph-occ a:last-child:nth-child(odd){grid-column:span 2}
  .bph .bph-ticks li{font-size:16px}
  .bph .bph-player__media{padding-bottom:50px}
  .bph .bph-device--small{right:-6px; width:58%}
  .bph .bph-duo,.bph .bph-plans{grid-template-columns:1fr}
  .bph .bph-card{padding:24px}
  .bph .bph-card h3{font-size:24px}
  .bph .bph-btn{height:48px; padding:0 20px; font-size:15px}
}