/* ===== Life on service, use case, guide and resources pages ===== */

/* ---------- Service hero record ---------- */
.service-record dl div{transition:background-color .3s}
.service-record dl div.hl{background:#ffffff14}
.service-record dd{transition:opacity .35s ease,transform .35s ease}
.js-anim .service-record.pre dd,.js-anim .service-record.pre figcaption{opacity:0;transform:translateX(-6px)}
.service-record figcaption{transition:opacity .4s ease .1s}
.sr-flip{display:inline-block;padding:0 6px;margin:0 -6px;border-radius:5px;background:#2a9aa3;color:white}
.sr-badge{display:inline-block;padding:1px 8px;border-radius:99px;background:#7fe0b0;color:#163a2a;font-size:.85em}
.js-anim .sr-badge.pop{animation:pl-pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pl-pop{from{transform:scale(0)}to{transform:scale(1)}}

/* ---------- Deliverable cards: rise in + teal hover ---------- */
.service-cards article{position:relative;transition:opacity .5s ease,transform .18s ease,box-shadow .18s,background-color .12s,border-color .12s}
.service-cards article *{transition:color .12s}
.js-anim .service-cards.pre article{opacity:0;transform:translateY(14px)}
@media(hover:hover){
.service-cards article:hover{background:var(--teal);border-color:var(--teal);transform:translateY(-3px);box-shadow:0 18px 40px #0f727b40}
.service-cards article:hover :is(h3,p){color:white}
.service-cards article:hover p{color:#e2f2f3}
}

/* ---------- Steps light up in sequence ---------- */
.service-steps li{transition:opacity .45s ease,transform .45s ease,box-shadow .3s,background-color .3s}
.js-anim .service-steps.pre li{opacity:0;transform:translateY(12px)}
.service-steps li.lit{background:#eaf5f5;box-shadow:inset 0 0 0 1px #bddbde}
.service-steps li>span{display:inline-grid!important;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--teal);transition:background-color .3s,color .3s}
.service-steps li.lit>span,.service-steps li.done>span{background:var(--teal);color:white}

/* ---------- FAQ smooth open ---------- */
details>summary{list-style:none}
details>summary::-webkit-details-marker{display:none}
.faq summary,.service-faq summary{position:relative;padding-right:32px}
.faq summary::after,.service-faq summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(45deg);transition:transform .25s ease}
.faq details[open] summary::after,.service-faq details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
details.animating{overflow:hidden}

/* ---------- Guides: progress bar, active TOC ---------- */
.read-progress{position:fixed;left:0;top:0;z-index:20;width:100%;height:3px;background:var(--teal);transform:scaleX(0);transform-origin:left;pointer-events:none}
.article-toc a.active{color:var(--teal);font-weight:700}
.article-toc li:has(a.active)::marker{color:var(--teal)}

/* ---------- Resources & guide cards ---------- */
.res-thumb,.home-guide-thumb{display:block;overflow:hidden}
.res-thumb img,.home-guide-thumb img{transition:transform .35s ease}
@media(hover:hover){
.res-card{transition:transform .2s,box-shadow .2s}
.res-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px #2037461a}
.res-card:hover .res-thumb img,.home-guide:hover .home-guide-thumb img{transform:scale(1.045)}
}

@media(prefers-reduced-motion:reduce){
.service-cards article,.service-steps li,.res-card,.res-thumb img,.home-guide-thumb img{transition:none!important}
.res-card:hover,.service-cards article:hover{transform:none!important}
}
/* Keep FAQ answer spacing inside the box so open/close doesn't jump */
.faq details p{margin-bottom:0!important;padding-bottom:18px}
.service-faq details p{margin-bottom:0!important;padding-bottom:16px}