/* Extra styles for the 75 Positions sales page (loaded after product.css) */

body{padding-bottom:88px}

.topbar{
background:linear-gradient(90deg,#b8005e,#e00173,#ff4fa3);
color:#fff;
font-weight:700;
}

.topbar b{color:#ffe27a}

/* Hero */

.lp-hero{
position:relative;
overflow:hidden;
padding:36px 0 56px;
background:
radial-gradient(900px 500px at 85% 40%,#ffd6ea 0,transparent 60%),
radial-gradient(600px 400px at 0% 0%,#fff0f7 0,transparent 60%),
#fff;
}

.lp-hero .hero-grid{grid-template-columns:1.1fr .9fr}

.lp-visual{
position:relative;
display:flex;
justify-content:center;
align-items:flex-end;
}

.lp-visual:before{
content:"";
position:absolute;
width:86%;
aspect-ratio:1;
bottom:6%;
border-radius:50%;
background:radial-gradient(circle,#ff7eb9 0,#e00173 55%,#b8005e 100%);
box-shadow:0 30px 80px rgba(224,1,115,.35);
}

.lp-visual img{
position:relative;
max-height:540px;
width:auto;
filter:drop-shadow(0 20px 30px rgba(0,0,0,.18));
}

.float{
position:absolute;
background:#fff;
border-radius:14px;
padding:9px 14px;
font-size:13px;
font-weight:700;
box-shadow:0 10px 30px rgba(0,0,0,.12);
white-space:nowrap;
animation:bob 4s ease-in-out infinite;
}

.float small{display:block;font-weight:500;color:#777;font-size:11px}
.float.f1{top:12%;left:0}
.float.f2{top:42%;right:-4px;animation-delay:1.2s}
.float.f3{bottom:10%;left:4%;animation-delay:2.2s}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.rating-pill{
display:inline-flex;
align-items:center;
gap:8px;
background:#fff;
border:1px solid var(--line);
border-radius:50px;
padding:6px 14px 6px 10px;
font-size:14px;
font-weight:600;
margin-bottom:14px;
}

.rating-pill .stars{color:var(--gold);letter-spacing:1px;font-size:16px}

.save{
display:inline-block;
background:#fff4d6;
color:#8a5a00;
font-weight:700;
font-size:13px;
border-radius:8px;
padding:4px 10px;
margin-bottom:16px;
}

.pay-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}

.pay-row span{
border:1px solid #e6e6e6;
background:#fff;
border-radius:8px;
padding:5px 10px;
font-size:12px;
font-weight:700;
color:#333;
}

/* Stats strip */

.stats{
background:var(--ink);
color:#fff;
padding:22px 0;
}

.stats .wrap{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
text-align:center;
}

.stats b{display:block;font-size:26px;font-weight:900;color:#ff4fa3;line-height:1.2}
.stats span{font-size:13px;color:#ccc}

/* Problems with photos */

.pcard{
position:relative;
border-radius:20px;
overflow:hidden;
aspect-ratio:3/2;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.pcard img{width:100%;height:100%;object-fit:cover}

.pcard p{
position:absolute;
left:0;right:0;bottom:0;
margin:0;
padding:40px 18px 16px;
background:linear-gradient(transparent,rgba(0,0,0,.78));
color:#fff;
font-weight:700;
font-size:16px;
text-align:left;
}

.pcard p span{font-size:22px;margin-right:6px}

.verdict{
display:inline-block;
margin-top:28px;
background:#fff;
border:2px solid var(--pink);
color:var(--pink-dark);
border-radius:50px;
padding:10px 22px;
font-weight:800;
}

/* Why */

.why-grid{
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:40px;
align-items:center;
text-align:left;
}

.why-img{
background:linear-gradient(135deg,var(--pink-soft),var(--pink-soft2));
border-radius:28px;
padding:24px 24px 0;
display:flex;
justify-content:center;
}

.why-img img{max-height:380px;width:auto}

.why-list{list-style:none;padding:0;margin:20px 0 0}

.why-list li{
display:flex;
gap:12px;
align-items:flex-start;
padding:10px 0;
font-weight:500;
}

.why-list li b{
flex:none;
width:28px;height:28px;
border-radius:50%;
background:var(--pink);
color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:14px;
}

/* Levels */

.level{
border-radius:22px;
padding:26px 22px;
color:#fff;
text-align:left;
position:relative;
overflow:hidden;
}

.level .big{font-size:44px;font-weight:900;line-height:1;opacity:.95}
.level h3{font-size:22px;margin:10px 0 6px}
.level p{margin:0;opacity:.92;font-size:15px}
.level .emo{position:absolute;right:16px;top:14px;font-size:40px}

.lv1{background:linear-gradient(135deg,#ff8ab8,#e00173)}
.lv2{background:linear-gradient(135deg,#ffb347,#ff5e62)}
.lv3{background:linear-gradient(135deg,#c0007a,#4a0033)}

/* Rating block */

.score{
display:flex;
align-items:center;
justify-content:center;
gap:22px;
flex-wrap:wrap;
margin:10px 0 8px;
}

.score .num{font-size:72px;font-weight:900;line-height:1}
.score .stars{color:var(--gold);font-size:28px;letter-spacing:3px}
.score small{display:block;color:var(--muted);font-size:14px}

/* Steps */

.steps3 .card{text-align:center}

@media (max-width:900px){
.lp-hero .hero-grid{grid-template-columns:1fr}
.lp-visual{order:-1}
.lp-visual img{max-height:340px}
.why-grid{grid-template-columns:1fr}
.why-img{order:-1}
.why-img img{max-height:280px}
}

@media (max-width:600px){
.lp-hero{padding:16px 0 40px}
.lp-visual img{max-height:250px}
.lp-hero h1{font-size:30px}
.float{font-size:12px;padding:7px 10px}
.float.f2{right:0}
.stats .wrap{grid-template-columns:repeat(2,1fr);gap:16px}
.stats b{font-size:22px}
.score .num{font-size:56px}
}