

.ppp-card{
width:100%;
max-width:900px;
background:#ffffff;
border-radius:14px;
padding:clamp(1rem,2.4vw,2rem);
box-shadow:0 8px 30px rgba(16,24,40,0.08);
border:1px solid rgba(15,23,42,0.03);
line-height:1.6;
}


.eyebrow{
display:inline-block;
font-weight:600;
color:#0b5fff;
font-size:0.85rem;
letter-spacing:0.02em;
margin-bottom:.5rem;
}


h1{
margin:0 0 .5rem 0;
font-size:clamp(1.15rem,2.2vw,1.5rem);
line-height:1.15;
}


.lead{
margin:0 0 1rem 0;
color:#6b7280;
font-size:clamp(0.94rem,1.6vw,1rem);
}


p{margin:0 0 0.9rem 0}


.small{font-size:0.9rem;color:#6b7280}


/* Readability improvements on narrow screens */
@media (max-width:520px){
body{padding:1rem}
.ppp-card{padding:1rem;border-radius:12px}
}


/* subtle left accent bar for visual identity */
.ppp-card::before{
content:"";
position:absolute;
left:0;top:0;bottom:0;
width:6px;
background:linear-gradient(180deg,#ff500b,#f75b00);
border-top-left-radius:14px;
border-bottom-left-radius:14px;
transform:translateX(-1px);
display:block;
}


/* container to allow the left accent without shifting layout */
.card-wrap{position:relative;padding-left:1rem}


/* accessible focus state if this card is actionable */
.ppp-card:focus-within{outline:3px solid rgba(11,95,255,0.07)}
