/* Bettin drawings: organic curves and open joins. Research/provenance in licenses/. */
.icon { width: 24px; height: 24px; display: inline-block; vertical-align: middle; flex-shrink: 0; fill: none; color: inherit; }
.icon .icon-detail { stroke-width: 1.05; }
.home-treatment-overview .home-overview-icon .icon { width: 28px; height: 28px; }
.button > span .icon, .round-link .icon { width: 16px; height: 16px; }
.text-link > span .icon { width: 17px; height: 17px; }
.text-link > .icon { width: 17px; height: 17px; margin-right: 3px; }
.home-secondary-link .icon { width: 16px; height: 16px; }
.home-hero-location .icon { width: 15px; height: 18px; }
.home-care-strip i { display: inline-flex; align-items: center; justify-content: center; }
.home-care-strip i .icon { width: 24px; height: 24px; }
.home-card-top > .icon { width: 64px; height: 64px; padding: 12px; border: 1px solid #cbd7bf; border-radius: 18px; background: #e9eedf; color: #526d45; stroke: currentColor; transition: transform 220ms ease, background 220ms ease; }
.home-treatment-featured .home-card-top > .icon { background: #ffffff08; border-color: #b4c7a440; color: #d2dfc6; }
.home-treatment-card:hover .home-card-top > .icon { transform: translateY(-3px); }
.card-top > .icon { width: 52px; height: 52px; padding: 8px; border: 1px solid #cbd7bf; border-radius: 14px; background: #e9eedf; stroke: currentColor; color: #526d45; }
.featured .card-top > .icon { background: #ffffff08; border-color: #b4c7a440; color: #d2dfc6; }
.info-symbol { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; border: 1px solid #cdd7c3; background: #e9eedf; color: #617b52; }
.info-symbol > .icon { width: 23px; height: 23px; }
.detail-symbol { display: inline-flex; padding: 11px; border: 1px solid #becdb1; background: #e0e8d7; border-radius: 15px; color: #617b52; }
.detail-symbol > .icon { width: 31px; height: 31px; }
.dialog-mark { display: inline-flex; padding: 14px; border: 1px solid #cdd7c3; background: #e9eedf; border-radius: 18px; color: #617b52; }
.dialog-mark > .icon { width: 30px; height: 30px; }
.close-dialog { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; }
.close-dialog:hover { background: #e3e9d9; }
.close-dialog .icon { width: 20px; height: 20px; }
summary > span { display: inline-grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border: 1px solid #ccd5c3; border-radius: 50%; }
summary > span .icon { width: 16px; height: 16px; }
.credentials span { display: flex; align-items: center; gap: 9px; }
.credentials span::before { content: none; }
.credentials .icon { width: 15px; height: 15px; color: #789166; }
@media (max-width: 800px) and (min-width: 601px) {
  .home-card-top > .icon { margin-top: 20px; }
}
@media (max-width: 600px) {
  .home-card-top > .icon { width: 58px; height: 58px; padding: 10px; }
  .info-symbol { width: 40px; height: 40px; border-radius: 12px; }
  .info-symbol > .icon { width: 21px; height: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-treatment-card:hover .home-card-top > .icon { transform: none; }
}

/* One short gesture on entry, hover, keyboard focus or touch. No idle loops. */
.icon-motion { transform-box: view-box; transform-origin: 50% 50%; }
.is-icon-playing .icon-motion { animation: icon-welcome 700ms cubic-bezier(.22,.7,.25,1); }
.icon--dental.is-icon-playing .icon-motion { animation-name: icon-tooth; }
.icon--refresh.is-icon-playing .icon-motion { animation: icon-inspect 850ms cubic-bezier(.4,0,.2,1); }
.icon--heart-handshake.is-icon-playing .icon-motion,
.icon--user-heart.is-icon-playing .icon-motion { animation-name: icon-heart; }
.icon--map-pin.is-icon-playing .icon-motion { animation-name: icon-pin; }
.icon--arrow-up-right.is-icon-playing .icon-motion { animation-name: icon-northeast; }
.icon--arrow-left.is-icon-playing .icon-motion { animation-name: icon-west; }
.icon--arrow-down.is-icon-playing .icon-motion { animation-name: icon-south; }
.icon--clipboard-check.is-icon-playing .icon-motion,
.icon--list-check.is-icon-playing .icon-motion,
.icon--check.is-icon-playing .icon-motion { animation-name: icon-confirm; }
.icon--clock.is-icon-playing .icon-motion { animation: none; }
.icon--sparkles.is-icon-playing .icon-motion { animation-name: icon-smile; }
.icon--sparkles.is-icon-playing [data-icon-part='smile'] { animation: icon-smile-line 750ms ease both; }
.icon--clock [data-icon-part='clock-hands'] { transform-origin: 12px 12px; }
.icon--clock.is-icon-playing [data-icon-part='clock-hands'] { animation: icon-turn 900ms cubic-bezier(.4,0,.2,1); }
@keyframes icon-inspect {
  0%,100% { transform: rotate(0); }
  35% { transform: rotate(-14deg); }
  70% { transform: rotate(7deg); }
}
@keyframes icon-smile {
  0%,100% { transform: translateY(0); }
  45% { transform: translateY(-1px) rotate(-3deg); }
}
@keyframes icon-smile-line {
  0% { stroke-dasharray: 1; stroke-dashoffset: 1; }
  100% { stroke-dasharray: 1; stroke-dashoffset: 0; }
}
@keyframes icon-welcome {
  0%,100% { transform: rotate(0); }
  30% { transform: rotate(-8deg); }
  65% { transform: rotate(5deg); }
}
@keyframes icon-tooth {
  0%,100% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-10deg) scale(1.06); }
  55% { transform: rotate(8deg) scale(1.06); }
  80% { transform: rotate(-3deg); }
}
@keyframes icon-turn { to { transform: rotate(360deg); } }
@keyframes icon-heart {
  0%,50%,100% { transform: scale(1); }
  25% { transform: scale(1.12); }
  70% { transform: scale(1.06); }
}
@keyframes icon-pin {
  0%,100% { transform: translateY(0); }
  35% { transform: translateY(-2px); }
  65% { transform: translateY(1px); }
}
@keyframes icon-confirm {
  0%,100% { transform: scale(1); }
  40% { transform: scale(.9); }
  70% { transform: scale(1.08); }
}
@keyframes icon-northeast { 45% { transform: translate(2px,-2px); } }
@keyframes icon-west { 45% { transform: translateX(-2px); } }
@keyframes icon-south { 45% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) {
  .icon .icon-motion, .icon .icon-motion path { animation: none !important; }
}