/* A fixed desktop app viewport, scaled inside a responsive laptop frame. */
.hair-page .hp-desktop { padding-top:106px; scroll-margin-top:115px; }
.hp-desktop .hd-heading { display:grid; grid-template-columns:1fr .84fr; align-items:end; gap:80px; max-width:1120px; margin:0 auto 44px; }
.hp-desktop .hd-heading h2 { text-wrap:initial; }
.hp-desktop .hd-heading > p { max-width:450px; margin:0 0 4px; font-size:15px; line-height:1.85; }
.hp-desktop .hd-visual { position:relative; isolation:isolate; margin:0; padding:0 24px; }
.hp-desktop .hd-visual::before { content:""; position:absolute; z-index:-1; inset:18% 0 39px; border-radius:28px; background:linear-gradient(180deg,#f1effc,#f8f7fc); }
.hp-desktop .hd-laptop { max-width:1110px; margin-inline:auto; }
.hp-desktop .hd-screen { width:94%; margin-inline:auto; padding:9px 9px 0; border:1px solid #50515d; border-radius:20px 20px 0 0; background:#252631; box-shadow:0 18px 36px #1c17391a; overflow:hidden; }
.hp-desktop .hd-browserbar { display:flex; align-items:center; justify-content:space-between; gap:12px; height:36px; padding:0 16px; border-radius:11px 11px 0 0; background:#f1f2f7; border-bottom:1px solid #e2e3ec; color:#5e6478; font-size:10px; }
.hp-desktop .hd-window-dots { display:flex; gap:5px; width:62px; }
.hp-desktop .hd-window-dots i { display:block; width:6px; height:6px; border-radius:50%; background:#c6c7d3; }
.hp-desktop .hd-window-title { display:flex; align-items:center; gap:8px; color:#53576b; font-size:10px; font-weight:600; }
.hp-desktop .hd-window-title img { width:11px; height:13px; object-fit:contain; }
.hp-desktop .hd-window-title > span { color:#b5b7c5; }
.hp-desktop .hd-window-status { width:62px; text-align:right; color:#7a7f92; font-size:9px; }
.hp-desktop .hd-app { position:relative; width:100%; aspect-ratio:1280/680; overflow:hidden; background:#f7f8fc; }
.hp-desktop .hd-app iframe { display:block; width:100%; height:100%; border:0; pointer-events:none; transform-origin:top left; }
.hp-desktop .hd-app[data-ready] iframe { position:absolute; inset:0; width:1280px; height:680px; transform:scale(var(--hd-scale)); }
.hp-desktop .hd-screen-chin { display:grid; place-items:center; height:17px; }
.hp-desktop .hd-screen-chin > span { width:4px; height:4px; border-radius:50%; background:#636570; }
.hp-desktop .hd-laptop-base { position:relative; height:19px; border:1px solid #c9cad2; border-top:0; border-radius:2px 2px 50% 50% / 2px 2px 15px 15px; background:linear-gradient(180deg,#e2e3e9 0%,#d6d7df 45%,#afb0bc 100%); box-shadow:0 15px 19px -12px #24213d45; }
.hp-desktop .hd-laptop-base > span { display:block; width:15%; height:7px; margin:auto; border-radius:0 0 8px 8px; background:#bfc0ca; box-shadow:inset 0 -1px 2px #ffffff80; }
.hp-desktop .hd-visual figcaption { margin:23px 0 0; text-align:center; color:#828697; font-size:10px; line-height:1.6; }
.hp-desktop .hd-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; max-width:1120px; margin:48px auto 0; }
.hp-desktop .hd-benefit-icon { display:grid; place-items:center; width:38px; height:38px; margin-bottom:18px; border-radius:11px; background:#efecff; color:#6156c9; }
.hp-desktop .hd-benefit-icon .sv-icon { width:21px; height:21px; }
.hp-desktop .hd-icon-mint { color:#43775e; background:#e6f3ec; }
.hp-desktop .hd-icon-peach { color:#a46941; background:#fbede3; }
.hp-desktop .hd-benefits h3 { margin:0 0 12px; color:var(--hp-ink); font-size:20px; letter-spacing:-.035em; line-height:1.3; text-wrap:initial; }
.hp-desktop .hd-benefits p { margin:0; font-size:13px; line-height:1.85; }
.hp-desktop .hd-footer { display:flex; align-items:center; justify-content:space-between; gap:28px; max-width:1120px; margin:34px auto 0; padding-top:23px; border-top:1px solid #e8e7f0; }
.hp-desktop .hd-footer p { margin:0; font-size:12px; }
.hp-desktop .hd-footer .hp-textlink { flex-shrink:0; font-size:12px; }
@media (max-width:1000px) {
  .hp-desktop .hd-heading { gap:40px; }
  .hp-desktop .hd-heading > p { font-size:14px; }
  .hp-desktop .hd-benefits { gap:25px; }
  .hp-desktop .hd-benefits h3 { font-size:18px; }
}
@media (max-width:700px) {
  .hair-page .hp-desktop { padding-top:72px; }
  .hp-desktop .hd-heading { grid-template-columns:1fr; gap:22px; margin-bottom:30px; }
  .hp-desktop .hd-heading .hp-eyebrow { margin-bottom:17px; }
  .hp-desktop .hd-heading > p { max-width:100%; margin:0; }
  .hp-desktop .hd-visual { padding:0; }
  .hp-desktop .hd-visual::before { inset:18% -8px 44px; border-radius:15px; }
  .hp-desktop .hd-screen { padding:5px 5px 0; border-radius:11px 11px 0 0; }
  .hp-desktop .hd-browserbar { height:25px; padding:0 8px; border-radius:5px 5px 0 0; }
  .hp-desktop .hd-window-dots { gap:3px; width:28px; }
  .hp-desktop .hd-window-dots i { width:4px; height:4px; }
  .hp-desktop .hd-window-title { font-size:8px; gap:5px; }
  .hp-desktop .hd-window-title img { width:9px; height:10px; }
  .hp-desktop .hd-window-status { width:28px; font-size:7px; }
  .hp-desktop .hd-screen-chin { height:10px; }
  .hp-desktop .hd-screen-chin > span { width:3px; height:3px; }
  .hp-desktop .hd-laptop-base { height:12px; }
  .hp-desktop .hd-laptop-base > span { height:4px; }
  .hp-desktop .hd-visual figcaption { max-width:270px; margin:19px auto 0; font-size:9px; }
  .hp-desktop .hd-benefits { grid-template-columns:1fr; gap:25px; margin-top:34px; }
  .hp-desktop .hd-benefits article { display:grid; grid-template-columns:35px minmax(0,1fr); column-gap:14px; align-items:start; }
  .hp-desktop .hd-benefit-icon { width:35px; height:35px; grid-row:1/3; margin:0; }
  .hp-desktop .hd-benefits h3 { margin:4px 0 9px; font-size:18px; }
  .hp-desktop .hd-benefits p { grid-column:2; font-size:12px; }
  .hp-desktop .hd-footer { flex-direction:column; align-items:flex-start; gap:14px; margin-top:29px; }
}