/* Massage finder card (includes/massage-finder.php), used on the Services page and the homepage. */
.fd-bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 249, 243, .18); }
.fd-bar.is-now { background: rgba(244, 163, 145, .45); }
.fd-bar.is-done { background: var(--coral-light); }
.fd-panel { min-height: 420px; }
.fd-step { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; opacity: .6; }
.fd-opt { font-family: inherit; color: var(--ink); cursor: pointer; text-align: left; background: var(--cream); border: 1px solid rgba(11, 10, 8, .14); border-radius: 18px; padding: 18px 20px; min-height: 76px; display: flex; flex-direction: column; gap: 4px; width: 100%; }
.fd-opt:hover { border-color: var(--ink); }
.fd-opt-label { font-size: 17px; font-weight: 600; }
.fd-opt-hint { font-size: 14.5px; opacity: .68; }
.fd-heading:focus { outline: none; }
.fd-rec-name { font-family: var(--serif); font-size: clamp(44px, 4.6vw, 64px); line-height: 1; }
.fd-facts { border-top: 1px solid rgba(11, 10, 8, .12); border-bottom: 1px solid rgba(11, 10, 8, .12); }
.fd-fact-label { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; opacity: .6; }