/* Portrait light, milestones, restrained motion and faint landscapes. */
.step .num{margin-top:.35rem}
/* A light, warm grade of the existing portrait; the original photograph remains the source. */
.portrait img{filter:saturate(.97) contrast(1.015) brightness(1.045)}
.portrait::after{background:linear-gradient(180deg,transparent 58%,rgba(17,24,41,.84)),linear-gradient(120deg,rgba(246,192,122,.085),transparent 55%)}
.portrait{border-radius:12px;box-shadow:0 28px 65px -30px rgba(63,43,24,.5),0 0 0 1px rgba(255,245,222,.6)}
.portrait-frame::before{inset:-.85rem .85rem .85rem -.85rem;border-radius:12px;border-color:rgba(169,101,30,.45)}
.timeline::before{background:linear-gradient(90deg,#CD9B59,#E8C694,#CD9B59)}
.tl::before{border-color:#A9651E;background:#FBF8F1;box-shadow:0 0 0 5px #FBF8F1,0 0 0 6px rgba(169,101,30,.2)}
.recovery-path{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.5rem;position:relative}
.recovery-path::before{content:'';position:absolute;left:20px;right:20px;top:21px;height:1px;background:linear-gradient(90deg,#C49252,#E5C692,#C49252)}
.recovery-path li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;font-size:.88rem;line-height:1.55}
.recovery-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#9A601F;background:#FBF7EF;border:1px solid #DCC5A3;box-shadow:0 0 0 5px #F8F3EA}
.recovery-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
 .renewal-landscape{animation:renewal-arrive 2.4s ease-out both}
 @keyframes renewal-arrive{from{opacity:.25;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
 .day .price,.day .calc{transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
 @media(hover:hover){
  .day .price:hover{transform:translateY(-4px);border-color:rgba(169,101,30,.4);box-shadow:0 30px 65px -34px rgba(105,77,42,.3)}
  .day .calc:hover{border-color:rgba(169,101,30,.4)}
 }
}
@media(max-width:640px){
 .recovery-path{grid-template-columns:1fr;gap:1.2rem}
 .recovery-path::before{left:21px;top:20px;bottom:20px;width:1px;height:auto;right:auto}
 .recovery-path li{flex-direction:row;align-items:center;gap:1rem}
 .recovery-icon{flex-shrink:0}
}
@media(prefers-reduced-motion:reduce){
 .renewal-landscape,.day .price,.day .calc{animation:none!important;transition:none!important}
 .day .price:hover{transform:none!important}
}

.step > div{min-width:0}

/* Sparse atmosphere between quiet sections. Fades preserve the dusk-to-dawn transitions. */
.ambient-scene{isolation:isolate}
.ambient-scene::after{
 content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
 background-image:url('assets/renewal-dawn.png');background-repeat:no-repeat;
 background-size:cover;background-position:center;
 -webkit-mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);
 mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);
}
.ambient-session::after{opacity:.065;background-position:68% 56%}
.ambient-guarantee::after{opacity:.04;background-position:50% 44%}
.ambient-faq::after{
 opacity:.045;background-position:74% 56%;
 -webkit-mask-image:radial-gradient(ellipse at 100% 64%,#000 5%,rgba(0,0,0,.65) 42%,transparent 72%);
 mask-image:radial-gradient(ellipse at 100% 64%,#000 5%,rgba(0,0,0,.65) 42%,transparent 72%);
}
@media(max-width:760px){
 .ambient-session::after{opacity:.045;background-position:70% center}
 .ambient-guarantee::after{opacity:.03}
 .ambient-faq::after{opacity:.035}
}