/* Health, beauty & pets world: the appointment book, the patient journey, practice-safe. */
.wd-hero--book .wd-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wh-book { position: relative; padding: 10px 0 24px; }
.wh-card { border-radius: 24px; background: #F7FAFB; box-shadow: 0 40px 100px rgba(0,0,0,.45); }
.wh-book-h { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px 14px; }
.wh-book-h .gx-float-top { color: #11846B; }
.wh-book-h .gx-float-top em { color: #5B6B82; }
.wh-book-h > div > b { display: block; margin-top: 6px; font-family: var(--font-heading); font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; color: #0B1220; }
.wh-book-n { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 14px; background: #0B1220; }
.wh-book-h .wh-book-n b { display: block; margin: 0; font-family: var(--font-heading); font-size: 1.8rem; font-weight: 800; color: #3CC9A8; }
.wh-book-n span { font-size: .66rem; line-height: 1.3; color: #C4D0DD; }
.wh-grid { display: grid; grid-template-columns: 44px repeat(6, minmax(0, 1fr)); gap: 5px; padding: 0 24px 24px; }
.wh-grid > b { padding-bottom: 4px; text-align: center; font-family: var(--font-mono); font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #5B6B82; }
.wh-tm { font-family: var(--font-mono); font-size: .58rem; color: #9AA8BC; align-self: center; }
.wh-slot { position: relative; display: block; height: 30px; border-radius: 7px; background: #EAF0F4; border: 1px dashed #D5DCE6; }
.wh-slot.is-kept { background: #D9E2EA; border: 1px solid #D0D9E2; }
.wh-slot.is-new { background: linear-gradient(135deg, #19728A, #3CC9A8); border-color: transparent; box-shadow: 0 6px 16px rgba(25,114,138,.35); animation: whPop .5s cubic-bezier(.16,1,.3,1) both; }
.wh-slot.is-new::after { content: attr(data-l); position: absolute; left: 6px; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--font-heading); font-size: .56rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes whPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.wh-toast { position: absolute; right: -18px; bottom: 60px; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; background: rgba(11,18,32,.94); border: 1px solid rgba(106,205,224,.3); box-shadow: 0 20px 50px rgba(0,0,0,.45); transition: opacity .3s, transform .3s; }
.wh-toast.is-swap { opacity: 0; transform: translateY(6px); }
.wh-toast i { width: 30px; height: 30px; border-radius: 50%; background: rgba(60,201,168,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233CC9A8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 14px no-repeat; }
.wh-toast b { display: block; font-family: var(--font-heading); font-size: .82rem; color: #fff; }
.wh-toast em { font-style: normal; font-size: .7rem; color: #9AA8BC; }

/* journey */
.wh-js { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.wh-js::before { content: ''; position: absolute; left: 6%; right: 6%; top: 58px; height: 2px; background: linear-gradient(90deg, #19728A, #3CC9A8); opacity: .5; }
.wh-j { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 18px; border-radius: 20px; background: var(--gx-card); border: 1px solid var(--gx-line); box-shadow: var(--gx-shadow); }
.wh-j-n { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; color: var(--gx-dim); }
.wh-j-i { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: linear-gradient(135deg, #19728A, #34A3BC); color: #fff; box-shadow: 0 0 0 6px var(--gx-card); }
.wh-j h3 { margin: 6px 0 0; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 800; color: var(--gx-ink); }
.wh-j-q { font-family: var(--font-heading); font-size: .82rem; color: var(--gx-accent); }
.wh-j p { margin: 0; flex: 1; font-size: .84rem; line-height: 1.55; color: var(--gx-body); }
.wh-j-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.wh-j-tags em { padding: 3px 8px; border-radius: 99px; background: var(--gx-bg2); border: 1px solid var(--gx-line); font-style: normal; font-size: .64rem; font-weight: 600; color: var(--gx-body); }
.wh-js.in .wh-j { animation: whRise .6s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i) * 110ms); }
@keyframes whRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* practice-safe */
.wh-trust { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.wh-trust h2 { font-family: var(--font-heading); font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; color: #fff !important; margin: 16px 0 18px; }
.wh-trust > div > p { margin: 0; font-size: 1rem; line-height: 1.7; color: #C4D0DD; }
.wh-trust-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wh-trust-l li { display: flex; gap: 14px; padding: 20px; border-radius: 18px; background: rgba(238,241,246,.04); border: 1px solid rgba(238,241,246,.1); }
.wh-trust-l svg { flex: 0 0 auto; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: rgba(60,201,168,.14); color: #3CC9A8; }
.wh-trust-l h3 { margin: 2px 0 6px; font-family: var(--font-heading); font-size: 1rem; font-weight: 800; color: #fff !important; }
.wh-trust-l p { margin: 0; font-size: .84rem; line-height: 1.55; color: #9AA8BC; }

@media (max-width: 1100px) {
    .wd-hero--book .wd-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .wh-book { max-width: 640px; }
    .wh-js { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wh-js::before { display: none; }
    .wh-trust { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
@media (max-width: 760px) {
    .wh-book-h { padding: 16px 14px 10px; }
    .wh-grid { grid-template-columns: 34px repeat(6, minmax(0, 1fr)); gap: 3px; padding: 0 12px 16px; }
    .wh-slot { height: 24px; border-radius: 5px; }
    .wh-slot.is-new::after { display: none; }
    .wh-toast { right: 8px; bottom: 50px; }
    .wh-js { grid-template-columns: minmax(0, 1fr); }
    .wh-trust-l { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .wh-slot.is-new, .wh-js.in .wh-j { animation: none; } }