/* =====================================================================
   HMV Courier — Business Page
   Implemented 1:1 from Figma "Businerss Page" node 74:2118 (1728×8828)
   via the official Figma MCP. Loaded after css/landing.css.
   ===================================================================== */

/* ---------------- Hero (74:2122 + wave bg 74:2496 + art 74:2552) ---------------- */
.bp-hero{
    position:relative; overflow:hidden;
    min-height:clamp(620px, 61.5vw, 1063px);
    margin-top:-98px;   /* hero + art tuck under the transparent glass header */
    background:url("../images/figma/wave-bg.png") top center / 118% auto no-repeat;
}
.bp-hero-art{
    position:absolute; top:-1%; right:-8.2%;
    width:clamp(420px, 72.6vw, 1255px); pointer-events:none;
}
.bp-hero-copy{ position:relative; z-index:2; padding-top:clamp(120px, 14.9vw, 258px); }
.bp-hero-copy h1{
    font-family:var(--serif); font-weight:900;
    font-size:clamp(40px, 4.63vw, 80px); line-height:0.9;
    color:var(--primary); max-width:700px;
}
.bp-hero-copy p{
    margin-top:31px; font-weight:300;
    font-size:var(--fs-body-24); line-height:1.25; max-width:595px; color:#000;
}
.bp-hero-ctas{ margin-top:40px; display:flex; gap:16px; flex-wrap:wrap; }
@media (max-width: 900px){
    .bp-hero{ min-height:0; padding-bottom:24px; }
    .bp-hero-art{ position:static; width:100%; margin-top:24px; }
    .bp-hero-copy{ padding-top:140px; }
}

/* ---------------- Shared headings ---------------- */
.bp-heading{
    font-weight:600; font-size:clamp(32px, 3.7vw, 64px); line-height:0.9;
    color:var(--primary);
}
.bp-heading-56{
    font-weight:600; font-size:clamp(30px, 3.24vw, 56px); line-height:0.9;
    color:var(--primary); text-align:center;
}
.bp-sub{
    margin-top:24px; font-weight:300; font-size:var(--fs-body-24);
    line-height:1.0; color:#000;
}

/* ---------------- Trusted band + frosted metrics (74:2554/2556) ---------------- */
.bp-trust{ padding-top:clamp(56px, 5vw, 90px); text-align:center; }
.bp-trust .bp-sub{ max-width:980px; margin-inline:auto; }
.bp-metrics{
    margin-top:clamp(40px, 5.1vw, 88px);
    display:flex; justify-content:space-between; align-items:center;
    gap:clamp(16px, 2.08vw, 36px);
    background:rgba(255,255,255,.1);
    -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
    padding:clamp(20px, 2.3vw, 40px) clamp(24px, 4.63vw, 80px);
    overflow-x:auto;
}
.bp-metric{ display:flex; flex-direction:column; align-items:center; }
.bp-metric b{
    font-family:var(--serif); font-weight:900; color:#000;
    font-size:clamp(40px, 5.56vw, 96px); line-height:0.9; white-space:nowrap;
}
.bp-metric span{
    font-weight:400; color:#000;
    font-size:clamp(16px, 2.08vw, 36px); line-height:0.9; white-space:nowrap;
}

/* ---------------- Slow-down split (74:2569 + art 78:2897) ---------------- */
.bp-slow{ position:relative; overflow:hidden; padding-top:clamp(56px, 6vw, 104px); }
.bp-slow .lp-wrap{
    position:relative; min-height:clamp(320px, 38vw, 656px);
    display:flex; flex-direction:column; justify-content:center;
}
.bp-slow-copy{ position:relative; z-index:2; max-width:663px; }
.bp-slow-copy p{ margin-top:30px; max-width:631px; line-height:1.15; }
.bp-slow-art{
    position:absolute; z-index:1; right:-4.7%; top:50%; transform:translateY(-50%);
    width:clamp(420px, 67.6vw, 1169px); pointer-events:none;
}
@media (max-width: 900px){
    .bp-slow .lp-wrap{ min-height:0; }
    .bp-slow-art{ position:static; transform:none; width:100%; margin-top:24px; }
}

/* ---------------- Growth panels 2×2 (78:2681/2682/2724/2762) ---------------- */
.bp-grow{ padding-top:clamp(64px, 7vw, 120px); }
.bp-grow-intro{ text-align:center; }
.bp-grow-intro .bp-sub{ max-width:1078px; margin-inline:auto; }
.bp-panels{
    margin-top:clamp(48px, 7.4vw, 128px);
    display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.bp-panel{
    position:relative; border-radius:24px; overflow:hidden;
    min-height:clamp(420px, 32.9vw, 569px);
    padding:40px 24px 24px;
}
.bp-panel-blue  { background:linear-gradient(180deg, rgba(133,165,255,.3) 0%, #fff 34%); }
.bp-panel-amber { background:linear-gradient(0deg,  rgba(254,154,0,.3) 0%,  #fff 55%); }
.bp-panel-red   { background:linear-gradient(0deg,  rgba(255,0,0,.3) 0%,    #fff 55%); }
.bp-panel-green { background:linear-gradient(180deg, rgba(18,255,144,.3) 0%, #fff 46%); }
.bp-panel h3{
    font-weight:500; font-size:clamp(28px, 2.78vw, 48px); line-height:0.9;
    color:#000; max-width:460px;
}
.bp-panel > p{
    margin-top:24px; font-weight:300; font-size:var(--fs-body-24);
    line-height:1; max-width:410px; color:#000;
}
.bp-features{ margin-top:24px; font-size:var(--fs-body-24); color:#000; }
.bp-features .bp-features-label{ font-weight:500; margin-bottom:16px; line-height:1; }
.bp-features ul{ list-style:disc; padding-left:36px; font-weight:300; }
.bp-features li{ margin-bottom:8px; line-height:1; }

/* widget: ETA order card (78:2606) */
.bp-eta-card{
    position:absolute; right:30px; top:137px; width:308px;
    background:#fff; border:1px solid var(--neutral-200); border-radius:16px;
    padding:24px; display:flex; flex-direction:column; gap:16px;
    font-size:14px; line-height:1.2;
}
.bp-eta-card div{ display:flex; justify-content:space-between; }
.bp-eta-card span{ color:#737373; }
.bp-eta-card b{ font-weight:400; color:var(--primary); }

/* widget: stat chips (78:2710 / 78:2760) */
.bp-chips{ position:absolute; display:grid; gap:12.7px; }
.bp-chips-2x2{ right:24px; bottom:64px; grid-template-columns:1fr 1fr; width:min(385px, 52%); }
.bp-chips-col{ right:32px; top:50%; transform:translateY(-50%); width:237px; }
.bp-chip{
    padding:25px 38px 25px 38px;
    border-left:1.6px solid; border-bottom:6.3px solid;
}
.bp-chip span{ display:block; font-weight:400; font-size:15.8px; line-height:1.2; }
.bp-chip b{ display:block; font-weight:600; font-size:38px; line-height:1.2; }
.bp-chip-blue   { background:var(--primary-50);  border-color:var(--primary); }
.bp-chip-blue span   { color:var(--primary-500); } .bp-chip-blue b   { color:var(--primary); }
.bp-chip-green  { background:#ECFDF5; border-color:#00BC7D; }
.bp-chip-green span  { color:#00BC7D; } .bp-chip-green b  { color:#007A55; }
.bp-chip-red    { background:#FEF2F2; border-color:#FB2C36; }
.bp-chip-red span    { color:#FB2C36; } .bp-chip-red b    { color:#C10007; }
.bp-chip-amber  { background:#FFFBEB; border-color:#FE9A00; }
.bp-chip-amber span  { color:#FE9A00; } .bp-chip-amber b  { color:#BB4D00; }

/* widget: shipment card (78:2780) */
.bp-ship-card{
    position:absolute; right:24px; bottom:24px;
    width:min(486px, 62%); border-radius:22px; overflow:hidden;
    background:linear-gradient(180deg, var(--primary) 0%, var(--dark) 100%);
    padding:20px; color:#fff;
}
.bp-ship-head{ display:flex; justify-content:space-between; align-items:center; }
.bp-ship-id{ display:flex; gap:10px; align-items:center; }
.bp-ship-id .bp-ship-ico{
    width:60px; height:60px; border-radius:50%; background:#fff;
    display:flex; align-items:center; justify-content:center;
}
.bp-ship-id .bp-ship-ico img{ width:25px; height:25px; }
.bp-ship-id small{ display:block; font-weight:400; font-size:14.9px; line-height:1.2; }
.bp-ship-id strong{ display:block; font-weight:500; font-size:17.4px; line-height:1.2; }
.bp-ship-badge{
    background:#fff; color:var(--primary); border-radius:4px;
    padding:12px 15px; font-weight:500; font-size:14.9px; line-height:0.8;
    letter-spacing:-0.03em; white-space:nowrap;
}
.bp-ship-route{
    margin-top:26px; display:flex; align-items:center; gap:10px;
    font-weight:500; font-size:17.4px;
}
.bp-ship-route img.bp-pin{ width:20px; height:20px; }
.bp-ship-route .bp-ship-line{ flex:1; height:0; border-top:1.3px dashed rgba(255,255,255,.8); }
.bp-ship-stats{ margin-top:26px; display:flex; gap:10px; }
.bp-ship-stat{
    flex:1; background:#fff; border-radius:5px; padding:20px;
}
.bp-ship-stat span{ display:block; font-weight:400; font-size:12.4px; color:#737373; line-height:1.2; }
.bp-ship-stat b{ display:block; font-weight:500; font-size:17.4px; color:var(--primary); line-height:1.2; }

@media (max-width: 980px){
    .bp-panels{ grid-template-columns:1fr; }
    .bp-panel{ min-height:0; padding-bottom:24px; }
    .bp-eta-card, .bp-chips, .bp-ship-card{ position:static; transform:none; width:100%; margin-top:24px; }
}

/* ---------------- Dashboard splits (78:2892/2899) ---------------- */
.bp-dash{ padding-top:clamp(64px, 7.5vw, 130px); }
.bp-dash-grid{
    display:grid; grid-template-columns:1fr clamp(320px, 51.5vw, 890px);
    gap:clamp(24px, 2.8vw, 48px); align-items:center;
}
.bp-dash-copy .bp-heading{ max-width:742px; }
.bp-dash-copy .bp-sub{ max-width:739px; line-height:1.2; }
.bp-dash-copy .bp-features{ margin-top:24px; }
.bp-dash-copy .lp-btn{ margin-top:40px; padding:21px 33.5px; font-size:20.97px; }
.bp-dash-img{ border-radius:16px; width:100%; }
@media (max-width: 980px){
    .bp-dash-grid{ grid-template-columns:1fr; }
}

/* ---------------- Built Around quads (78:2907) ---------------- */
.bp-built{ padding-top:clamp(64px, 7.5vw, 130px); }
.bp-built-grid{
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; align-items:start;
}
.bp-built-copy .bp-heading{ max-width:572px; }
.bp-built-copy p{
    margin-top:36px; font-weight:300; font-size:var(--fs-body-24); line-height:1; color:#000;
    max-width:507px;
}
.bp-built-cards{
    grid-column:2 / 4;
    display:grid; grid-template-columns:1fr 1fr; gap:24px 24px;
}
.bp-built-card{
    background:#fff; border:1px solid var(--neutral-200); border-radius:16px;
    padding:24px; display:flex; flex-direction:column; gap:24px;
}
.bp-built-card h3{ font-weight:500; font-size:clamp(24px, 2.08vw, 36px); line-height:1; color:#000; }
.bp-built-card p{ font-weight:300; font-size:var(--fs-body-24); line-height:1; color:#000; }
@media (max-width: 980px){
    .bp-built-grid{ grid-template-columns:1fr; }
    .bp-built-cards{ grid-column:auto; grid-template-columns:1fr; }
}

/* ---------------- Testimonials (78:2934) ---------------- */
.bp-testi{ padding-top:clamp(64px, 7.5vw, 120px); }
.bp-testi-track{
    margin-top:clamp(40px, 4.3vw, 74px);
    display:flex; gap:24px; overflow-x:auto;
    scroll-snap-type:x mandatory; scrollbar-width:none;
}
.bp-testi-track::-webkit-scrollbar{ display:none; }
.bp-testi-card{
    position:relative; flex:0 0 min(905px, 92%);
    height:clamp(300px, 23.15vw, 400px);
    background:var(--card-bg); border-radius:24px; overflow:hidden;
    scroll-snap-align:start;
}
.bp-testi-card blockquote{
    position:absolute; left:40px; top:44px; width:min(407px, 55%);
    font-weight:300; font-size:var(--fs-body-24); line-height:0.9; letter-spacing:-0.03em;
}
.bp-testi-stats{
    position:absolute; left:40px; top:56.5%;
    display:flex; gap:16px; color:var(--primary);
}
.bp-testi-stat span{ display:block; font-weight:400; font-size:14px; line-height:0.9; max-width:112px; }
.bp-testi-stat b{
    display:block; margin-top:8px;
    font-family:var(--serif); font-weight:900; font-size:36px; line-height:0.9;
}
.bp-testi-name{ position:absolute; left:40px; bottom:15%; font-weight:300; font-size:var(--fs-body-24); letter-spacing:-0.03em; }
.bp-testi-role{ position:absolute; left:40px; bottom:8%; font-weight:500; font-size:16px; letter-spacing:-0.03em; }
.bp-testi-art{ position:absolute; right:0; top:0; height:100%; width:auto; max-width:none; }

/* ---------------- FAQ (88:3032) ---------------- */
.bp-faq{ padding-top:clamp(64px, 7vw, 120px); }
.bp-faq-heading{ text-align:center; max-width:567px; margin-inline:auto; }
.bp-faq-wrap{
    margin-top:clamp(40px, 4.6vw, 80px);
    display:grid; grid-template-columns:1fr clamp(300px, 35.9vw, 620px);
    gap:40px; align-items:start;
}
.bp-faq-top{
    display:flex; justify-content:space-between; align-items:center; gap:24px;
    margin-bottom:40px;
}
.bp-faq-email span{ display:block; font-weight:400; font-size:14px; color:#737373; line-height:1; }
.bp-faq-email a{ display:block; margin-top:8px; font-weight:400; font-size:20px; color:#000; line-height:1; }
.bp-faq-top .lp-btn{
    gap:4px; padding:21px 33.5px; font-size:20.97px;
    box-shadow:2px 4px 8px rgba(0,0,0,.15);
}
.bp-faq-top .lp-btn img{ width:25px; height:25px; }
.bp-faq-list{ display:flex; flex-direction:column; gap:24px; }
.bp-faq-item{
    background:#FAFAFA; border-radius:8px; padding:24px;
    display:flex; justify-content:space-between; align-items:flex-start; gap:24px;
    cursor:pointer;
}
.bp-faq-item h4{ font-weight:400; font-size:clamp(20px, 1.85vw, 32px); line-height:1; color:#000; }
.bp-faq-item p{
    margin-top:8px; font-weight:300; font-size:var(--fs-body-24); line-height:1; color:#000;
    display:none;
}
.bp-faq-item.open p{ display:block; }
.bp-faq-item .bp-faq-ico{ flex-shrink:0; width:32px; height:32px; position:relative; }
.bp-faq-item .bp-faq-ico img{ position:absolute; inset:0; width:32px; height:32px; }
.bp-faq-item .bp-ico-minus{ display:none; }
.bp-faq-item.open .bp-ico-minus{ display:block; }
.bp-faq-item.open .bp-ico-plus{ display:none; }
.bp-faq-img{
    border-radius:24px; overflow:hidden; height:clamp(360px, 39.5vw, 683px);
}
.bp-faq-img img{ width:100%; height:100%; object-fit:cover; }
@media (max-width: 980px){
    .bp-faq-wrap{ grid-template-columns:1fr; }
    .bp-faq-top{ flex-direction:column; align-items:flex-start; }
}

/* ---------------- CTA (74:2310) — same split layout as products ---------------- */
.bp-cta{ margin-top:clamp(64px, 7vw, 120px); }
