/* Keep one customer and her pets legible across the page's examples. */
.hero .record-preview{box-shadow:0 20px 48px rgba(23,38,61,.08)}
.hero .profile-layout{min-height:340px;grid-template-columns:.84fr 1.16fr}
.hero .profile-top strong{font-size:13px}
.hero .profile-top span,.hero .profile-main-head small,.hero .profile-person small,.hero .pet-card small{font-size:9px}
.hero .profile-person strong,.hero .pet-card strong{font-size:12px}
.hero .profile-main-head strong{font-size:15px}
.hero .profile-sidebar{padding:16px 14px}
.hero .profile-main{padding:16px}
.hero .profile-person{padding-bottom:13px}
.hero .pet-card{padding:9px}
.hero .pet-card.secondary{border-color:transparent;background:transparent}
.hero .pet-card:not(.secondary){border-color:#B7CDEE;background:#EDF4FE}
.hero .avatar,.hero .pet-mark,.pet-switch img,.pet-profile-avatar img{overflow:hidden}
.hero .avatar img,.hero .pet-mark img,.pet-switch img,.pet-profile-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.hero .avatar{width:42px;height:42px}
.hero .pet-mark{width:35px;height:35px}
.hero .fact span,.hero .care-note span,.hero .record-link span{font-size:8px}
.hero .fact strong,.hero .record-link strong{font-size:10px}
.hero .care-note p{font-size:10px}
.hero .record-links{gap:6px}
.hero .preview-caption{font-size:9px}

.pet-switch-demo{min-width:0;padding:12px;border:1px solid #E1E9F3;border-radius:16px;background:#F8FAFD}
.customer-context{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #DFE8F2;border-radius:11px;background:white}
.customer-context img{width:48px;height:48px;flex:none;border-radius:50%;object-fit:cover}
.customer-context div{min-width:0}
.customer-context small,.customer-context strong,.customer-context span{display:block}
.customer-context small{color:var(--blue);font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.customer-context strong{margin-top:2px;font-size:17px;letter-spacing:-.035em}
.customer-context span{margin-top:2px;color:var(--muted);font-size:10px}
.customer-context>b{margin-left:auto;padding:6px 9px;border-radius:6px;background:#EAF2FD;color:var(--blue-dark);font-size:10px}
.pet-switcher{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:10px 0}
.pet-switch{min-width:0;min-height:68px;display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid #DCE6F1;border-radius:10px;background:#F8FAFD;color:var(--ink);text-align:left;cursor:pointer;transition:background .18s,border-color .18s,box-shadow .18s}
.pet-switch:hover{border-color:#9FBAE1;background:#F2F7FE}
.pet-switch[aria-selected="true"]{border-color:#8BAFDF;background:#EAF2FD;box-shadow:inset 0 0 0 1px #8BAFDF}
.pet-switch img{width:43px;height:43px;flex:none;border-radius:9px}
.pet-switch strong,.pet-switch small{display:block}
.pet-switch strong{font-size:13px}
.pet-switch small{margin-top:3px;color:var(--muted);font-size:10px}
.pet-profile-card{min-height:365px;padding:19px;box-shadow:none}
.pet-profile-card[hidden]{display:none}
.pet-profile-avatar{border-radius:10px}
.pet-profile-header{padding-bottom:12px}
.pet-profile-header h3{font-size:18px}
.pet-profile-header p{font-size:11px}
.pet-profile-card .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.pet-profile-card .detail-cell{padding:10px 12px}
.pet-profile-card .detail-cell span,.pet-profile-card .care-cell span{font-size:9px}
.pet-profile-card .detail-cell strong,.pet-profile-card .care-cell strong{font-size:11px}
.pet-profile-card .care-grid{margin-top:8px}
.pet-profile-card .care-cell{padding:9px 12px}
.profile-linked{display:flex;align-items:center;justify-content:space-between;margin-top:9px;padding:9px 12px;border-radius:7px;background:#F4F7FB;font-size:11px}
.profile-linked span{color:var(--muted)}
.profile-note{margin:10px 3px 0;color:var(--muted);font-size:10px;line-height:1.55}

.highlights .highlight-card:nth-child(2){background:#FFF0F6}
.highlights .highlight-card:nth-child(3){background:#F2F5FA}
.highlights .highlight-card:nth-child(4){background:#EDF4FD}
.highlights .highlight-card{height:470px}
.highlights .highlight-card h3{font-size:21px}
.highlights .highlight-card p{font-size:13px;line-height:1.58}
.highlights .highlight-copy{min-height:125px}
.highlights .highlight-visual{border-top-color:#DCE5F0}
.highlights .crm-heading strong{font-size:20px}
.highlights .crm-pet-choice b,.highlights .crm-note strong,.highlights .crm-record strong{font-size:11px}

.history-window-head strong{font-size:15px}
.history-window-head span{font-size:10px}
.history-row{padding:13px 0}
.history-row strong{font-size:12px}
.history-row small{font-size:10px}
.history-row em{font-size:9px}
.history-row:first-of-type .history-icon{background:#FCEAF2;color:#BE3274}
.history-links{display:grid;gap:0;max-width:470px;margin-top:24px;border-top:1px solid #D8E2EF}
.history-links .history-link{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 2px;border-bottom:1px solid #D8E2EF;background:transparent;color:var(--blue-dark);font-size:14px;font-weight:750;transition:color .18s ease}
.history-links .history-link:hover{color:var(--blue)}
.history-links .history-link span{padding:0;border:0;border-radius:0;background:transparent;color:inherit;font-size:inherit;font-weight:inherit}
.history-links .history-link span:last-child{flex:none;font-size:19px;font-weight:500;line-height:1;transition:transform .18s ease}
.history-links .history-link:hover span:last-child{transform:translateX(3px)}
.visit-context{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding:11px 12px;border-radius:8px;background:#F2F6FC;font-size:10px}
.visit-context span{color:var(--blue-dark);font-weight:750}
.visit-context strong{color:var(--body);font-weight:650}
.visit-timeline{margin-top:6px}
.visit-step{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;gap:12px;min-height:78px;padding:10px 0}
.visit-step:not(:last-child)::after{position:absolute;top:51px;bottom:-24px;left:12px;width:1px;background:#C9D9ED;content:""}
.visit-node{z-index:1;width:26px;height:26px;display:grid;place-items:center;border:1px solid #C5D8F0;border-radius:50%;background:#E8F1FD;color:var(--blue);font-size:11px;font-weight:800}
.visit-step-report .visit-node{border-color:#F7BCD4;background:#FDEAF3;color:var(--rose-dark)}
.visit-step-copy small{display:block;margin-bottom:4px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.08em}
.visit-step-copy strong{display:block;font-size:13px;line-height:1.35}
.visit-step-copy p{margin:3px 0 0;color:var(--muted);font-size:11px;line-height:1.4}
.visit-step-report{grid-template-columns:26px minmax(0,1fr) 112px;min-height:108px}
.visit-report-photo{width:112px;height:88px;border:1px solid #DCE5F0;border-radius:8px;object-fit:cover;object-position:center 35%}

@media(max-width:900px){.hero .profile-layout{grid-template-columns:.84fr 1.16fr}}
@media(max-width:620px){.hero .profile-layout{grid-template-columns:1fr}.hero .pet-card.secondary{display:flex}.customer-context{padding:10px}.customer-context span{font-size:9px}.customer-context>b{display:none}.pet-switch{padding:8px}.pet-switch small{font-size:9px}.highlights .highlight-card{height:440px}.highlights .highlight-card h3{font-size:18px}.highlights .highlight-card p{font-size:11px}}
@media(max-width:400px){.highlights .crm-pet-choice small{white-space:normal;line-height:1.25}}