/* Home page: finalized assets and components (loads after styles.css) */

/* logo */
.logo .mark{width:32px;height:32px;display:block;flex:none}
.logo .word .ai{color:var(--indigo)}
footer.site .logo .word .ai{color:var(--indigo-light)}

/* images */
.thumb{display:block;width:100%;height:auto;aspect-ratio:8/5;border-radius:12px;border:1px solid var(--line);background:var(--mist)}
.mfeat .thumb{aspect-ratio:16/9}
.media{display:block;width:100%;height:auto;aspect-ratio:8/5;border-radius:var(--r-card);border:1px solid var(--line);box-shadow:var(--shadow);background:var(--mist)}

/* hero journey */
.journey img{display:block;width:100%;height:auto;aspect-ratio:8/5;border-bottom:1px solid var(--line);background:var(--mist);transition:opacity .25s}
.journey img.swap{opacity:0}
button.jrow{position:relative;width:100%;background:#fff;border:0;border-bottom:1px solid var(--line);text-align:left;font:inherit;color:inherit;cursor:pointer;transition:background .15s}
button.jrow:last-child{border-bottom:0}
button.jrow:hover{background:var(--mist)}
button.jrow[aria-pressed="true"]{background:var(--indigo-tint)}
button.jrow[aria-pressed="true"] .n{color:var(--indigo)}
button.jrow::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--indigo)}
.journey.playing button.jrow[aria-pressed="true"]::after{animation:jprog var(--jdur,5s) linear forwards}
@keyframes jprog{to{width:100%}}

/* customer wordmarks */
.clogo{height:56px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 12px;font:700 15px/18px var(--head);letter-spacing:-.01em;color:#8A93A3;transition:color .15s}
.clogo:hover{color:var(--ink)}

/* stat testimonial card */
.statcard{background:var(--indigo-tint);border-color:var(--indigo-light)}
.statcard b{font:800 48px/56px var(--head);color:var(--indigo)}

/* role panel proof */
.proof img{margin-top:16px}
.proof b{display:block;font:800 40px/48px var(--head);color:var(--indigo)}

/* booking slot picker */
.slotpick{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:var(--r-card);padding:20px;display:flex;flex-direction:column;gap:14px;color:#fff}
.slotpick .tz{font-size:13px;color:#E4E2FD}
.slotpick .days,.slotpick .times{display:grid;gap:8px}
.slotpick .days{grid-template-columns:repeat(5,minmax(0,1fr))}
.slotpick .times{grid-template-columns:repeat(3,minmax(0,1fr))}
.slotpick button{height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font:500 14px/1.1 var(--body);cursor:pointer;padding:0 4px}
.slotpick .days button{height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.slotpick .days button small{font-size:12px;opacity:.8}
.slotpick button:hover{background:rgba(255,255,255,.12)}
.slotpick button[aria-checked="true"]{background:#fff;color:var(--indigo);border-color:#fff;font-weight:600}
.slotpick .picked{font-size:14px;color:#E4E2FD}
@media (max-width:640px){.slotpick .times{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (prefers-reduced-motion:reduce){
  .journey img,button.jrow{transition:none}
  .journey.playing button.jrow[aria-pressed="true"]::after{animation:none}
}