/* =====================================================================
   HMV Courier — Products Page
   Implemented 1:1 from Figma "Products Page" node 51:12617 (1728×7812)
   via the official Figma MCP. Loaded after css/landing.css (tokens,
   reset, navbar, buttons, footer).
   ===================================================================== */

/* ---------------- Hero (nodes 56:74/75/76 + 56:85 graphic) ---------------- */
/* hero sits UNDER the transparent glass header (Figma: header bg
   rgba(0,0,0,0) + blur; the network graphic starts at y=-132 and
   crosses behind it) */
.pp-hero{
    position:relative; overflow:hidden;
    min-height:clamp(600px, 58vw, 1010px);
    margin-top:-98px;
}
.pp-hero-copy{ position:relative; z-index:2; padding-top:clamp(150px, 21vw, 363px); }
.pp-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:724px;
}
.pp-hero-copy p{
    margin-top:24px; font-weight:300;
    font-size:var(--fs-body-24); line-height:1.15; max-width:639px; color:#000;
}
.pp-hero-ctas{ margin-top:40px; display:flex; gap:16px; flex-wrap:wrap; }
.lp-btn-outline{
    background:#fff; color:var(--primary); border:1.05px solid var(--primary);
}
.pp-hero-art{
    position:absolute; z-index:1; top:-7.64vw; right:-1.7%;   /* Figma y=-132 @1728 */
    width:clamp(380px, 54.2vw, 937px); pointer-events:none;
}
/* soft white blur washes (Figma Rectangle 11/12) */
.pp-hero::before{
    content:""; position:absolute; z-index:1; left:36%; top:-1%;
    width:176px; height:100%;
    background:rgba(255,255,255,.72); filter:blur(20px);
}
.pp-hero::after{
    content:""; position:absolute; z-index:1; left:-2%; right:-2%; bottom:-4%;
    height:clamp(140px, 17.5vw, 302px);
    background:#fff; filter:blur(20px);
}
@media (max-width: 900px){
    .pp-hero{ min-height:0; padding-bottom:24px; }
    .pp-hero-art{ position:static; width:100%; margin-top:24px; }
    .pp-hero::before, .pp-hero::after{ display:none; }
    .pp-hero-copy{ padding-top:140px; }
}

/* ---------------- Section headings (Semibold 64, Primary) ---------------- */
.pp-heading{
    font-weight:600; font-size:clamp(32px, 3.7vw, 64px); line-height:0.9;
    color:var(--primary); text-align:center;
}
.pp-sub{
    margin:24px auto 0; max-width:1389px;
    font-weight:300; font-size:var(--fs-body-24); line-height:1.0;
    text-align:center; color:#000;
}

/* ---------------- Product cards (Figma 74:1725 pattern) ---------------- */
.pp-products{ padding-top:clamp(64px, 8vw, 140px); }
.pp-cards{
    margin-top:clamp(48px, 5.9vw, 102px);
    display:grid; grid-template-columns:1fr 1fr;
    gap:40px 24px; align-items:start;
}
.pp-col{ display:flex; flex-direction:column; gap:40px; }
.pp-card{ display:flex; flex-direction:column; }
.pp-card-img{
    height:clamp(300px, 31.8vw, 550px);
    border-radius:24px 24px 0 0; overflow:hidden;
}
.pp-card-img img{ width:100%; height:100%; object-fit:cover; }
.pp-card-body{
    border:1px solid var(--neutral-200); border-top:0;
    border-radius:0 0 24px 24px;
    padding:40px 24px 24px;
    display:flex; flex-direction:column; gap:40px;
}
.pp-card-body h3{
    font-weight:600; font-size:clamp(30px, 2.78vw, 48px); line-height:0.9; color:#000;
}
.pp-card-text{
    display:flex; flex-direction:column; gap:24px;
}
.pp-card-text > p{
    font-weight:300; font-size:var(--fs-body-24); line-height:1.2; color:#000;
}
.pp-tags{ display:flex; flex-wrap:wrap; gap:16px; opacity:.8; }
.pp-tag{
    display:inline-flex; align-items:center; justify-content:center;
    padding:16px 24px; border-radius:4px;
    background:#fff; border:1px solid var(--neutral-200);
    font-weight:400; font-size:clamp(16px, 1.39vw, 24px); line-height:1; white-space:nowrap;
}
.pp-card-btns{ display:flex; gap:16px; }
.pp-card-btns .lp-btn{
    flex:1; padding:21px 33.5px; font-size:20.97px; letter-spacing:-0.03em;
}
@media (max-width: 980px){
    .pp-cards{ grid-template-columns:1fr; }
    .pp-card-btns{ flex-direction:column; }
}

/* ---------------- Comparison table (Figma 74:1884) ---------------- */
.pp-compare{ padding-top:clamp(64px, 7vw, 120px); }
.pp-table-wrap{ margin-top:clamp(40px, 4.6vw, 80px); overflow-x:auto; }
.pp-table{
    width:100%; min-width:900px;
    border-collapse:separate; border-spacing:4px;
}
.pp-table th{
    background:var(--primary-50); color:var(--primary);
    font-weight:500; font-size:clamp(16px, 1.39vw, 24px); line-height:1.2;
    text-align:left; padding:16px 24px; white-space:nowrap;
}
.pp-table th:first-child{ width:32.3%; }
.pp-table td{
    font-weight:300; font-size:clamp(16px, 1.39vw, 24px); line-height:1.2;
    color:#000; padding:16px 24px; white-space:nowrap;
}
.pp-table tbody tr:nth-child(odd) td{ background:#F8FAFF; }
.pp-table td img{ width:24px; height:24px; }
.pp-dots{ letter-spacing:1px; color:#B9B9B9; }

/* ---------------- Every Product Works Together (74:1886) ---------------- */
.pp-together{ position:relative; overflow:hidden; }
.pp-together .lp-wrap{
    position:relative;
    min-height:clamp(420px, 61vw, 1054px);
    display:flex; flex-direction:column; justify-content:center;
}
.pp-together-copy{ position:relative; z-index:2; max-width:531px; }
.pp-together-copy h2{
    font-weight:600; font-size:clamp(32px, 3.7vw, 64px); line-height:0.9;
    color:var(--primary); max-width:502px; text-align:left;
}
.pp-together-copy p{
    margin-top:24px; font-weight:300; font-size:var(--fs-body-24);
    line-height:1.2; color:#000;
}
.pp-together-art{
    position:absolute; z-index:1; right:-3.4%; top:50%; transform:translateY(-50%);
    width:clamp(420px, 66.8vw, 1155px); pointer-events:none;
}
@media (max-width: 900px){
    .pp-together .lp-wrap{ min-height:0; padding:48px 0; }
    .pp-together-art{ position:static; transform:none; width:100%; margin-top:24px; }
}

/* ---------------- CTA — products variant (74:2044) ---------------- */
.pp-cta{ margin-top:clamp(64px, 7vw, 120px); }
.pp-cta-card{
    position:relative; border-radius:24px; overflow:hidden;
    background:linear-gradient(90deg, var(--primary) 0%, var(--dark) 100%);
    min-height:clamp(360px, 28.94vw, 500px);
    display:grid; grid-template-columns:1.1fr 1fr;
    align-items:center; gap:clamp(24px, 5vw, 120px);
    padding:clamp(32px, 2.3vw, 40px);
    color:#fff;
}
.pp-cta-card h2{
    position:relative; z-index:1;
    font-weight:600; font-size:clamp(40px, 5.56vw, 96px); line-height:0.9;
    letter-spacing:-0.03em; max-width:663px;
}
.pp-cta-right{ position:relative; z-index:1; }
.pp-cta-right p{
    font-weight:300; font-size:clamp(20px, 2.08vw, 36px); line-height:0.9;
    letter-spacing:-0.03em; max-width:598px;
}
.pp-cta-right .pp-cta-btns{ margin-top:40px; display:flex; gap:16px; flex-wrap:wrap; }
.lp-btn-outline-white{ background:none; border:1px solid #fff; color:#fff; }
@media (max-width: 900px){
    .pp-cta-card{ grid-template-columns:1fr; text-align:left; }
}