/* Account landing (cms_module_account): full-width benefit cards above the
   inline login. Form internals are styled via #login_forms (shared w/ modal). */

.account{
display:flex;
flex-direction:column;
gap:var(--gap-section);
margin:var(--gap-section) 0;
}

/* Benefits — three cards across the full content width */
.account_benefits h2{
margin:0 0 var(--space-5) 0;
font-size:var(--fs-h2);
font-family:var(--font-heading);
color:var(--color-primary);
}

.account_benefits ul{
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:var(--space-5);
}

.account_benefits li{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:var(--space-3);
margin:0;
padding:var(--space-6);
background:var(--color-bg-alt);
border:1px solid var(--color-border-alt);
border-radius:var(--radius-lg);
}

/* Neutralise the global ul li:before bullet icon */
.account_benefits li::before{
display:none;
content:none;
}

/* Icon in a round badge */
.account_benefits li svg.icon{
flex:0 0 auto;
width:3rem;
height:3rem;
padding:var(--space-3);
box-sizing:border-box;
border-radius:var(--radius-pill);
background:var(--color-border-alt);
color:var(--color-text-muted);
}

.account_benefits li h3{
margin:0 0 var(--space-1) 0;
font-size:var(--fs-h4);
font-family:var(--font-heading);
color:var(--color-text);
}

.account_benefits li p{
margin:0;
font-size:var(--fs-p);
color:var(--color-text-muted);
}

/* Login — card, centered below the benefits */
.account_login{
width:100%;
max-width:46rem;
margin:0 auto;
padding:var(--space-6);
background:var(--white);
border:1px solid var(--gray-95);
border-radius:var(--radius-lg);
box-sizing:border-box;
}

.account_login hgroup{
margin:0 0 var(--space-2) 0;
}

.account_login .lead{
margin:0 0 var(--space-5) 0;
font-size:var(--fs-p);
color:var(--color-text-muted);
}

/* Tablet: two across */
@media screen and (max-width: 64rem){
.account_benefits ul{
grid-template-columns:repeat(2, 1fr);
}
}

/* Mobile: single column */
@media screen and (max-width: 45rem){
.account_benefits ul{
grid-template-columns:1fr;
}
}