/* Homepage: guided tour of the real owner dashboard (web and mobile). Sample salon only. */
.showcase-section { background: radial-gradient(900px 420px at 50% 0, rgba(66,161,111,.09), transparent 70%); overflow: hidden; }
.showcase-section .intro { margin-bottom: 22px; max-width: 640px; }

/* Web / Tablet / Mobile switch */
.sc-toggle { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); width: min(390px, 100%); margin: 0 auto 30px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: #fff; box-shadow: 0 10px 26px rgba(23,74,52,.08); }
.sc-toggle button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: none; min-height: 42px; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 800; color: var(--muted); cursor: pointer; transition: color .25s; }
.sc-toggle button[aria-selected="true"] { color: #fff; }
.sc-toggle button svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-toggle button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.sc-toggle-thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px; background: var(--navy); box-shadow: 0 6px 16px rgba(23,74,52,.25); transition: transform .35s cubic-bezier(.3,.9,.3,1.1); }
.sc-toggle[data-active="tablet"] .sc-toggle-thumb { transform: translateX(100%); }
.sc-toggle[data-active="mobile"] .sc-toggle-thumb { transform: translateX(200%); }

/* Stage */
.sc-stage { position: relative; display: grid; place-items: center; }
.sc-stage:not([data-device="web"]) .sc-laptop, .sc-stage:not([data-device="tablet"]) .sc-tablet, .sc-stage:not([data-device="mobile"]) .sc-phone { display: none; }
.sc-stage.switching .sc-laptop, .sc-stage.switching .sc-tablet, .sc-stage.switching .sc-phone { animation: sc-device-in .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sc-device-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }

/* Laptop */
.sc-laptop { width: min(960px, 100%); margin: 0; }
.sc-laptop-screen { padding: 1.2%; border-radius: 18px 18px 6px 6px; background: linear-gradient(180deg, #1d2b24, #121c17); box-shadow: 0 30px 70px rgba(23,74,52,.22), inset 0 0 0 1px rgba(255,255,255,.06); }
.sc-laptop .sc-screen { aspect-ratio: 1880 / 1175; border-radius: 8px; }
.sc-laptop-base { position: relative; height: 16px; margin: 0 -4%; border-radius: 0 0 22px 22px; background: linear-gradient(180deg, #d7e1db, #b9c7bf); box-shadow: 0 16px 30px rgba(23,74,52,.18); }
.sc-laptop-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 6px; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: #a8b7ae; }

/* Tablet (iPad portrait) */
.sc-tablet { width: min(540px, 88vw); margin: 0; container-type: inline-size; }
.sc-tablet-screen { position: relative; padding: 3.4%; border-radius: 6% / 4.2%; background: #18241e; box-shadow: 0 30px 70px rgba(23,74,52,.24), inset 0 0 0 1px rgba(255,255,255,.08); }
.sc-tablet-screen::before { content: ""; position: absolute; top: 1.2%; left: 50%; width: 1.4%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #2f3d36; }
.sc-tablet .sc-screen { aspect-ratio: 959 / 1381; border-radius: 2.4% / 1.7%; }
.sc-tablet .sc-tap { width: 8%; }

/* Phone */
.sc-phone { width: min(300px, 76vw); margin: 0; }
.sc-phone-screen { position: relative; padding: 3.2%; border-radius: 15% / 7%; background: #18241e; box-shadow: 0 30px 70px rgba(23,74,52,.25), inset 0 0 0 1px rgba(255,255,255,.08); }
.sc-phone-screen::before { content: ""; position: absolute; z-index: 3; top: 2.6%; left: 50%; width: 28%; height: 2.6%; transform: translateX(-50%); border-radius: 99px; background: #18241e; }
.sc-phone .sc-screen { aspect-ratio: 640 / 1385; border-radius: 12% / 5.5%; }

/* Screens: real screenshots that crossfade like a page change */
.sc-screen { position: relative; overflow: hidden; background: #f4f8f5; }
.sc-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .5s ease; }
.sc-shot.on { opacity: 1; }
.sc-shot.sc-scroll.on { animation: sc-scroll-in .9s cubic-bezier(.3,.7,.2,1) both; }
@keyframes sc-scroll-in { from { opacity: .2; transform: translateY(14%); } to { opacity: 1; transform: none; } }
.sc-shot.sc-back.on { animation: sc-scroll-back .8s cubic-bezier(.3,.7,.2,1) both; }
@keyframes sc-scroll-back { from { opacity: .2; transform: translateY(-14%); } to { opacity: 1; transform: none; } }
.sc-shot.sc-sheet.on { animation: sc-sheet-in .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sc-sheet-in { from { opacity: 0; transform: translateY(5%); } }

/* Report period menu, drawn over the real Period select */
.sc-screen { container-type: inline-size; }
.sc-menu { position: absolute; z-index: 3; left: var(--ml); top: var(--mt); width: var(--mw); display: grid; padding: var(--mp) 0; border: 1px solid #cfe3d7; border-radius: var(--mr); background: #fff; box-shadow: 0 1.2cqw 3cqw rgba(16,40,28,.22); font: 700 var(--mf)/var(--mh) Inter, system-ui, sans-serif; color: #17231c; opacity: 0; transform: translateY(-4%) scale(.97); transform-origin: top; transition: opacity .2s, transform .2s; pointer-events: none; }
.sc-menu.open { opacity: 1; transform: none; }
.sc-menu i { font-style: normal; padding: 0 var(--mpx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .2s, color .2s; }
.sc-menu i.sel { background: #e7f4ec; color: #0b6b45; }
.sc-menu.pick i.sel { background: none; color: inherit; }
.sc-menu.pick i:first-child { background: #0b6b45; color: #fff; }
.sc-laptop .sc-menu { --ml: 88%; --mt: 23.2%; --mw: 10%; --mp: .25cqw; --mr: .6cqw; --mf: 1.05cqw; --mh: 2.625cqw; --mpx: .9cqw; }
.sc-phone .sc-menu { --ml: 61%; --mt: 20.8%; --mw: 34.5%; --mp: .9cqw; --mr: 2.4cqw; --mf: 4.1cqw; --mh: 10.6cqw; --mpx: 3.4cqw; }

/* Mouse pointer (web) */
.sc-pointer { position: absolute; z-index: 4; left: var(--x, 50%); top: var(--y, 55%); width: 3.2%; min-width: 16px; transform: translate(-18%, -10%); transition: left .9s cubic-bezier(.45,.05,.25,1), top .9s cubic-bezier(.45,.05,.25,1); filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); pointer-events: none; }
.sc-pointer svg { display: block; width: 100%; fill: #17231c; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.sc-pointer::after { content: ""; position: absolute; left: 18%; top: 10%; width: 260%; aspect-ratio: 1; border-radius: 50%; border: 3px solid rgba(243,201,79,.95); transform: translate(-50%, -50%) scale(0); opacity: 0; }
.sc-pointer.click::after { animation: sc-ripple .55s ease-out; }
.sc-pointer.click svg { animation: sc-press .3s ease-out; }
.sc-pointer.jump, .sc-tap.jump { transition: none; }

/* Finger tap (mobile) */
.sc-tap { position: absolute; z-index: 4; left: var(--x, 50%); top: var(--y, 60%); width: 16%; aspect-ratio: 1; border-radius: 50%; background: rgba(23,35,28,.18); border: 2px solid rgba(255,255,255,.9); box-shadow: 0 4px 14px rgba(0,0,0,.25); transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: left .8s cubic-bezier(.45,.05,.25,1), top .8s cubic-bezier(.45,.05,.25,1), opacity .3s; pointer-events: none; }
.sc-tap.show { opacity: 1; }
.sc-tap.click { animation: sc-tap .5s ease-out; }
.sc-tap::after { content: ""; position: absolute; inset: -40%; border-radius: 50%; border: 3px solid rgba(243,201,79,.95); transform: scale(0); opacity: 0; }
.sc-tap.click::after { animation: sc-ripple-tap .55s ease-out; }

@keyframes sc-ripple { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@keyframes sc-ripple-tap { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes sc-press { 50% { transform: scale(.82); } }
@keyframes sc-tap { 50% { transform: translate(-50%, -50%) scale(.45); } }

/* Steps under the device */
.sc-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 960px; margin: 28px auto 0; padding: 0; list-style: none; }
.sc-points li { position: relative; overflow: hidden; padding: 15px 16px 15px 48px; border: 1px solid var(--line); border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .3s, box-shadow .3s, transform .3s; }
.sc-points li::before { content: attr(data-step); position: absolute; left: 15px; top: 15px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--green-soft); color: var(--navy); font-weight: 900; font-size: 13px; transition: background .3s, color .3s; }
.sc-points li::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--navy); }
.sc-points b { display: block; font-size: 16px; }
.sc-points span { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.sc-points li.on { border-color: #9fd1b4; box-shadow: 0 14px 30px rgba(23,74,52,.12); transform: translateY(-2px); }
.sc-points li.on::before { background: var(--navy); color: #fff; }
.sc-points li.on.timed::after { animation: sc-progress var(--dwell, 3.6s) linear both; }
@keyframes sc-progress { to { width: 100%; } }
.sc-points li.sc-ai { grid-column: span 2; }
.sc-points li.sc-ai b::after { content: " ✦"; color: #d9a514; }
.sc-note { margin-top: 14px; color: var(--muted); font-size: 13px; text-align: center; }

@media (max-width: 900px) { .sc-points { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .sc-toggle { margin-bottom: 22px; }
  .sc-points { gap: 8px; margin-top: 22px; }
  .sc-points li { padding: 12px 12px 12px 42px; }
  .sc-points li::before { left: 12px; top: 13px; }
  .sc-points b { font-size: 15px; }
  .sc-points span { font-size: 13px; }
  .sc-laptop-base { height: 10px; }
  .sc-laptop-screen { border-radius: 10px 10px 4px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-stage *, .sc-stage.switching .sc-laptop, .sc-stage.switching .sc-tablet, .sc-stage.switching .sc-phone { animation: none !important; transition: none !important; }
  .sc-pointer, .sc-tap, .sc-menu, .sc-glow, .sc-typed { display: none; }
  .sc-toggle-thumb, .sc-points li { transition: none; }
  .sc-points li.on.timed::after { animation: none; }
}

/* Phone status bar, so the camera notch never covers the app */
.sc-phone .sc-screen { background: #fff; aspect-ratio: 640 / 1481; }
.sc-phone .sc-shot { top: 6.5%; height: 93.5%; }
.sc-phone .sc-screen::before { content: "9:41"; position: absolute; z-index: 2; top: 2.1%; left: 9%; font: 700 clamp(9px, 4.2cqw, 13px)/1 Manrope, Inter, system-ui, sans-serif; color: #17231c; }
.sc-phone .sc-screen::after { content: ""; position: absolute; z-index: 2; top: 2.4%; right: 8%; width: 18%; height: 1.6%; background: linear-gradient(90deg, #17231c 0 22%, transparent 22% 30%, #17231c 30% 52%, transparent 52% 60%, #17231c 60% 100%); border-radius: 3px; opacity: .85; }
.sc-phone { container-type: inline-size; }
@media (max-width: 480px) {
  .sc-points { grid-template-columns: 1fr 1fr; }
  .sc-points li { padding: 11px 10px 11px 40px; }
  .sc-points li::before { left: 10px; top: 10px; }
  .sc-points span { display: none; }
}

/* Ask Loyora AI: highlight the button, open the chat, type a question */
.sc-shot.sc-pop.on { animation: sc-pop .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sc-pop { from { opacity: 0; transform: translateY(1.2%); } }
.sc-glow { position: absolute; z-index: 3; left: var(--gl); top: var(--gt); width: var(--gw); height: var(--gh); border-radius: 999px; border: 2px solid #f3c94f; transform: scale(1.12); opacity: 0; transition: opacity .25s; pointer-events: none; }
.sc-glow.on { opacity: 1; animation: sc-glow 1s ease-out infinite; }
@keyframes sc-glow { 0% { box-shadow: 0 0 0 0 rgba(243,201,79,.95), 0 0 0 0 rgba(243,201,79,.45); } 100% { box-shadow: 0 0 0 .7cqw rgba(243,201,79,0), 0 0 0 1.6cqw rgba(243,201,79,0); } }
.sc-laptop .sc-glow { --gl: 86.46%; --gt: 91.11%; --gw: 11.88%; --gh: 6.22%; }
.sc-phone .sc-glow { --gl: 82.56%; --gt: 83.6%; --gw: 13.33%; --gh: 5.76%; }
.sc-phone .sc-glow.on { animation-name: sc-glow-phone; }
@keyframes sc-glow-phone { 0% { box-shadow: 0 0 0 0 rgba(243,201,79,.95), 0 0 0 0 rgba(243,201,79,.45); } 100% { box-shadow: 0 0 0 3cqw rgba(243,201,79,0), 0 0 0 6cqw rgba(243,201,79,0); } }
.sc-typed { position: absolute; z-index: 3; left: var(--tl); top: var(--tt); width: var(--tw); height: var(--th); opacity: 0; pointer-events: none; }
.sc-typed.on { opacity: 1; }
.sc-typed::before { content: ""; position: absolute; inset: 8% 1.2%; border-radius: var(--tr); background: #fff; }
.sc-typed img { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 97% 0 0); }
.sc-typed.on img { animation: sc-type 1.6s steps(26, end) both; }
@keyframes sc-type { from { clip-path: inset(0 96% 0 0); } to { clip-path: inset(0 18% 0 0); } }
.sc-laptop .sc-typed { --tl: 70.35%; --tt: 80.33%; --tw: 20.69%; --th: 5.33%; --tr: .5cqw; }
.sc-phone .sc-typed { --tl: 6.41%; --tt: 71.75%; --tw: 64.62%; --th: 5.32%; --tr: 2.2cqw; }
.sc-tablet .sc-menu { --ml: 79.88%; --mt: 23.3%; --mw: 17.68%; --mp: .58cqw; --mr: 1cqw; --mf: 1.75cqw; --mh: 5.18cqw; --mpx: 1.5cqw; }
.sc-tablet .sc-glow { --gl: 76.26%; --gt: 93.22%; --gw: 20.81%; --gh: 4.75%; }
.sc-tablet .sc-typed { --tl: 47.93%; --tt: 84.96%; --tw: 36.39%; --th: 4.07%; --tr: 1.1cqw; }
@media (max-width: 420px) { .sc-toggle button { font-size: 14px; gap: 4px; } .sc-toggle button svg { width: 16px; height: 16px; } }