@font-face { font-family:SovadoMobilePreview; src:url('../demo/agenda/vendor/dm-sans-400.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:SovadoMobilePreview; src:url('../demo/agenda/vendor/dm-sans-500.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:SovadoMobilePreview; src:url('../demo/agenda/vendor/dm-sans-700.ttf') format('truetype'); font-weight:700; font-display:swap; }
.hair-page .hp-mobile { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center; gap:80px; padding:64px 65px; margin-top:104px; border-radius:30px; background:#f8f7fd; scroll-margin-top:115px; }
.hp-mobile .hm-copy { grid-column:2; grid-row:1; min-width:0; }
.hp-mobile .hm-copy h2 { font-size:clamp(33px,3.1vw,45px); text-wrap:initial; }
.hp-mobile .hm-intro { font-size:15px; line-height:1.85; margin:24px 0 26px; }
.hp-mobile .hm-options { display:grid; gap:10px; }
.hp-mobile .hm-option { display:flex; align-items:flex-start; gap:15px; width:100%; padding:18px; border:1px solid transparent; border-radius:14px; background:transparent; color:var(--hp-ink); text-align:left; transition:background .2s,border-color .2s; }
.hp-mobile .hm-option[aria-pressed=true] { border-color:#ddd8fb; background:#fff; box-shadow:0 5px 16px #36267804; }
.hp-mobile .hm-option:hover:not(:disabled) { background:#fff; }
.hp-mobile .hm-option:disabled { cursor:default; opacity:1; }
.hp-mobile .hm-option-icon { display:grid; place-items:center; flex-shrink:0; width:33px; height:33px; background:#eeecff; color:#6156c9; border-radius:9px; }
.hp-mobile .hm-option-icon .sv-icon { width:19px; height:19px; }
.hp-mobile .hm-option-copy { flex:1; }
.hp-mobile .hm-option-copy > strong { display:block; font-size:15px; font-weight:700; line-height:1.4; margin:3px 0 7px; letter-spacing:-.02em; }
.hp-mobile .hm-option-copy > span { display:block; color:#626b7d; font-size:12px; line-height:1.8; }
.hp-mobile .hm-option-arrow { margin-top:4px; color:#5147e5; opacity:0; }
.hp-mobile .hm-option[aria-pressed=true] .hm-option-arrow { opacity:1; }
.hp-mobile .hm-try { display:flex; align-items:center; gap:7px; margin:22px 0 0; color:#61578b; font-size:11px; }
.hp-mobile .hm-try .sv-icon { width:15px; height:15px; }
.hp-mobile .hm-access { margin:10px 0 0; color:#7c7b8c; font-size:10px; }
.hp-mobile .hm-stage { position:relative; isolation:isolate; grid-column:1; grid-row:1; min-width:0; text-align:center; }
.hp-mobile .hm-stage::before { content:""; position:absolute; z-index:-1; width:115%; aspect-ratio:1; max-width:540px; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; background:#eae7fb; }
.hp-mobile .hm-stage-label { display:flex; justify-content:center; align-items:center; gap:7px; color:#746697; font-size:10px; margin-bottom:22px; }
.hp-mobile .hm-stage-label .sv-icon { width:14px; height:14px; }
.hp-mobile .hm-phone { width:min(100%,316px); margin-inline:auto; padding:7px; border:2px solid #454552; border-radius:43px; background:#20212a; box-shadow:0 26px 40px -20px #29254345,0 0 0 1px #15151c; text-align:left; color:#172036; font-family:SovadoMobilePreview,ui-sans-serif,sans-serif; scroll-margin-top:105px; }
.hp-mobile .hm-app-content:focus-visible { outline:2px solid #5547ed; outline-offset:-3px; border-radius:4px; }
.hp-mobile .hm-phone-display { display:flex; flex-direction:column; height:642px; min-width:0; overflow:hidden; background:#f6f7fb; border-radius:34px; }
.hp-mobile .hm-statusbar { position:relative; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; height:34px; padding:8px 20px 0; background:#fff; color:#172036; font-size:10px; font-weight:700; }
.hp-mobile .hm-island { position:absolute; left:50%; top:8px; width:80px; height:20px; background:#171820; border-radius:15px; transform:translateX(-50%); }
.hp-mobile .hm-status-icons { display:flex; gap:5px; align-items:center; }
.hp-mobile .hm-status-icons svg { width:18px; height:12px; }
.hp-mobile .hm-battery { position:relative; width:19px; height:9px; border:1px solid #172036; border-radius:3px; }
.hp-mobile .hm-battery::before { content:""; position:absolute; inset:1px; background:#172036; border-radius:1px; }
.hp-mobile .hm-battery::after { content:""; position:absolute; top:2px; right:-3px; height:3px; width:2px; background:#172036; border-radius:1px; }
.hp-mobile .hm-appbar { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; height:47px; padding:0 17px; background:#fff; border-bottom:1px solid #e8ebf2; }
.hp-mobile .hm-appbar > span { display:flex; align-items:center; gap:7px; font-size:16px; font-weight:700; letter-spacing:-.04em; }
.hp-mobile .hm-appbar img { width:18px; height:21px; object-fit:contain; }
.hp-mobile .hm-appbar > small { font-size:9px; color:#778092; }
.hp-mobile .hm-app-content { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:none; padding:16px 13px; }
.hp-mobile .hm-app-content::-webkit-scrollbar { display:none; }
.hp-mobile .hm-screen-title { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:16px; }
.hp-mobile .hm-screen h3 { font-family:inherit; font-size:25px; font-weight:700; letter-spacing:-.045em; line-height:1.2; text-wrap:initial; color:#172036; }
.hp-mobile .hm-screen-title p { font-size:10px; line-height:1.6; margin:3px 0 0; color:#778092; }
.hp-mobile .hm-add { display:grid; place-items:center; flex-shrink:0; width:32px; height:32px; border-radius:10px; color:#fff; background:#5547ed; font-size:23px; line-height:1; }
.hp-mobile .hm-week { padding:11px 9px 9px; border:1px solid #e8ebf2; background:#fff; border-radius:12px; }
.hp-mobile .hm-week-month { display:flex; justify-content:space-between; align-items:center; padding:0 3px 10px; font-size:10px; }
.hp-mobile .hm-week-month > span { font-size:17px; line-height:1; }
.hp-mobile .hm-week-days { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; text-align:center; }
.hp-mobile .hm-week-days > span { display:flex; flex-direction:column; gap:2px; padding:5px 0; border-radius:9px; }
.hp-mobile .hm-week-days small { color:#778092; font-size:8px; }
.hp-mobile .hm-week-days b { font-weight:700; font-size:11px; }
.hp-mobile .hm-week-days .hm-day-selected { background:#5547ed; color:#fff; }
.hp-mobile .hm-day-selected small { color:#eeecff; }
.hp-mobile .hm-agenda-label { display:flex; justify-content:space-between; align-items:center; gap:7px; margin:16px 0 11px; font-size:9px; }
.hp-mobile .hm-agenda-label > span { padding:4px 7px; border:1px solid #e8ebf2; background:#fff; border-radius:6px; font-size:8px; color:#778092; }
.hp-mobile .hm-appointments { display:grid; gap:10px; }
.hp-mobile .hm-appointment { display:grid; grid-template-columns:34px minmax(0,1fr); gap:9px; }
.hp-mobile .hm-time { position:relative; padding-top:5px; font-size:10px; line-height:1.5; }
.hp-mobile .hm-time strong,.hp-mobile .hm-time > span { display:block; }
.hp-mobile .hm-time > span { color:#778092; font-size:8px; margin-top:3px; }
.hp-mobile .hm-time::after { content:""; position:absolute; top:42px; bottom:2px; left:13px; width:1px; background:#e1e3ed; }
.hp-mobile .hm-appointment-card { padding:10px 10px 9px; border:1px solid #e8ebf2; border-left:3px solid #776aea; border-radius:10px; background:#fff; }
.hp-mobile .hm-appointment-card > strong { display:flex; justify-content:space-between; gap:7px; font-size:11px; line-height:1.4; }
.hp-mobile .hm-appointment-card > strong span { color:#8f95a3; }
.hp-mobile .hm-appointment-card p { color:#778092; font-size:9px; line-height:1.5; margin:4px 0 8px; }
.hp-mobile .hm-appointment-card > div { display:flex; align-items:center; justify-content:space-between; gap:7px; }
.hp-mobile .hm-employee { display:inline-flex; align-items:center; gap:4px; font-size:8px; color:#778092; }
.hp-mobile .hm-employee::before { content:""; width:5px; height:5px; background:#776aea; border-radius:50%; }
.hp-mobile .hm-appointment-card small { font-size:7px; line-height:1.5; color:#697386; background:#f1f3f8; border-radius:4px; padding:2px 4px; }
.hp-mobile .hm-appointment-card small.hm-completed { color:#16805d; background:#e9f7f0; }
.hp-mobile .hm-client-profile { text-align:center; margin-bottom:12px; }
.hp-mobile .hm-client-profile > span { display:grid; place-items:center; width:41px; height:41px; margin:0 auto 8px; border-radius:50%; background:#eeecff; color:#5547ed; font-size:16px; font-weight:700; }
.hp-mobile .hm-client-profile h3 { font-size:22px; }
.hp-mobile .hm-client-profile p { margin:4px 0 0; color:#778092; font-size:10px; }
.hp-mobile .hm-app-action { display:flex; align-items:center; justify-content:center; gap:8px; min-height:35px; padding:8px 11px; border-radius:9px; background:#5547ed; color:#fff; font-size:10px; font-weight:700; }
.hp-mobile .hm-app-action .sv-icon { width:15px; height:15px; }
.hp-mobile .hm-screen > h4 { font-size:12px; font-weight:700; letter-spacing:-.02em; line-height:1.4; margin:17px 0 9px; }
.hp-mobile [data-mobile-screen="client"] > h4 { margin-top:14px; }
.hp-mobile .hm-notes { padding:12px; background:#fff; border:1px solid #e8ebf2; border-radius:10px; }
.hp-mobile .hm-notes strong { font-size:10px; }
.hp-mobile .hm-notes p { font-size:10px; line-height:1.7; margin:5px 0 0; color:#525e73; }
.hp-mobile .hm-visit { display:flex; align-items:center; gap:8px; padding:10px; background:#fff; border:1px solid #e8ebf2; border-radius:9px; margin-bottom:6px; }
.hp-mobile .hm-visit .sv-icon { width:15px; height:15px; color:#778092; }
.hp-mobile .hm-visit strong { font-size:10px; font-weight:700; display:block; line-height:1.4; }
.hp-mobile .hm-visit small { font-size:8px; color:#778092; display:block; margin-top:2px; }
.hp-mobile .hm-visit > span { margin-left:auto; color:#778092; font-size:14px; }
.hp-mobile .hm-edit { display:block; margin-top:8px; padding:7px; text-align:center; border:1px solid #d9d4fb; border-radius:8px; color:#5547ed; font-size:9px; }
.hp-mobile .hm-home-heading > small { font-size:10px; color:#778092; }
.hp-mobile .hm-home-heading h3 { font-size:22px; line-height:1.2; margin:7px 0 5px; }
.hp-mobile .hm-home-heading p { font-size:10px; color:#778092; margin:0 0 18px; }
.hp-mobile .hm-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.hp-mobile .hm-stats > div { padding:11px 9px; background:#fff; border:1px solid #e8ebf2; border-radius:10px; }
.hp-mobile .hm-stats > div > span { display:flex; align-items:center; gap:5px; font-size:9px; color:#778092; }
.hp-mobile .hm-stats .sv-icon { width:12px; height:12px; color:#5547ed; }
.hp-mobile .hm-stats > div:nth-child(2) .sv-icon { color:#16805d; }
.hp-mobile .hm-stats strong { display:block; font-size:22px; letter-spacing:-.04em; line-height:1.25; margin:9px 0 5px; }
.hp-mobile .hm-stats strong small { font-size:9px; letter-spacing:0; font-weight:400; color:#778092; }
.hp-mobile .hm-stats p { font-size:8px; line-height:1.5; color:#778092; margin:0; }
.hp-mobile .hm-sale-action { padding:13px 11px; justify-content:flex-start; gap:10px; }
.hp-mobile .hm-sale-action > .sv-icon { width:21px; height:21px; }
.hp-mobile .hm-sale-action strong { display:block; font-size:11px; }
.hp-mobile .hm-sale-action small { display:block; font-weight:400; font-size:8px; color:#eeecff; margin-top:2px; }
.hp-mobile .hm-sale-action > span:last-child { margin-left:auto; }
.hp-mobile .hm-next { padding:14px 12px; border:1px solid #dcd7ff; border-radius:12px; background:#f1efff; }
.hp-mobile .hm-next > div { display:flex; align-items:center; justify-content:space-between; gap:7px; }
.hp-mobile .hm-next > div > span { color:#5547ed; font-size:8px; }
.hp-mobile .hm-next > div > strong { font-size:11px; }
.hp-mobile .hm-next strong small { font-size:8px; font-weight:400; color:#778092; }
.hp-mobile .hm-next h4 { font-size:17px; line-height:1.25; letter-spacing:-.025em; margin:16px 0 5px; }
.hp-mobile .hm-next p { font-size:10px; color:#626b7d; margin:0 0 12px; }
.hp-mobile .hm-screen-note { font-size:8px; color:#778092; text-align:center; line-height:1.5; margin:13px 0 0; }
.hp-mobile .hm-app-nav { flex-shrink:0; display:grid; grid-template-columns:repeat(5,1fr); background:#fff; border-top:1px solid #e8ebf2; padding:10px 7px 3px; }
.hp-mobile .hm-app-nav > span { display:flex; flex-direction:column; align-items:center; gap:3px; color:#778092; }
.hp-mobile .hm-app-nav .sv-icon { width:18px; height:18px; }
.hp-mobile .hm-app-nav b { font-size:15px; height:18px; line-height:18px; letter-spacing:1px; }
.hp-mobile .hm-app-nav small { font-size:8px; }
.hp-mobile .hm-app-nav .is-active { color:#5547ed; }
.hp-mobile .hm-home-indicator { position:relative; flex-shrink:0; height:20px; background:#fff; }
.hp-mobile .hm-home-indicator::after { content:""; position:absolute; left:50%; bottom:7px; transform:translateX(-50%); width:91px; height:4px; border-radius:9px; background:#172036; }
.hp-mobile .hm-stage figcaption { font-size:10px; color:#7c7b8c; margin-top:22px; }
.hp-mobile .hm-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:1100px) {
  .hair-page .hp-mobile { gap:38px; padding:48px 35px; }
  .hp-mobile .hm-copy h2 { font-size:35px; }
  .hp-mobile .hm-option { padding:14px 10px; gap:11px; }
  .hp-mobile .hm-option-copy > strong { font-size:14px; }
  .hp-mobile .hm-option-copy > span { font-size:11px; }
}
@media (max-width:800px) {
  .hair-page .hp-mobile { grid-template-columns:minmax(0,1fr); gap:45px; padding:44px 30px; margin-top:72px; border-radius:24px; }
  .hp-mobile .hm-copy { grid-column:1; grid-row:1; }
  .hp-mobile .hm-stage { grid-column:1; grid-row:2; }
  .hp-mobile .hm-stage::before { width:min(100%,430px); }
  .hp-mobile .hm-option { padding:16px; }
  .hp-mobile .hm-option-copy > span { font-size:12px; }
  .hp-mobile .hm-intro { font-size:14px; }
}
@media (max-width:540px) {
  .hair-page .hp-mobile { padding:34px 18px; border-radius:20px; gap:34px; }
  .hp-mobile .hm-copy h2 { font-size:33px; }
  .hp-mobile .hm-option { padding:13px 10px; gap:10px; }
  .hp-mobile .hm-option-copy > strong { font-size:13px; }
  .hp-mobile .hm-option-copy > span { font-size:11px; }
  .hp-mobile .hm-option-icon { width:28px; height:28px; border-radius:8px; }
  .hp-mobile .hm-option-icon .sv-icon { width:16px; height:16px; }
  .hp-mobile .hm-option-arrow { display:none; }
  .hp-mobile .hm-try { font-size:10px; align-items:flex-start; }
  .hp-mobile .hm-access,.hp-mobile .hm-stage figcaption { font-size:9px; }
  .hp-mobile .hm-phone { padding:5px; border-radius:36px; }
  .hp-mobile .hm-phone-display { border-radius:29px; }
}