@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');

:root {
  --ink: #101426;
  --muted: #66718a;
  --line: #dfe3ee;
  --paper: #ffffff;
  --soft: #f5f6fb;
  --primary: #5147e5;
  --primary-dark: #3830bb;
  --lavender: #eeecff;
  --lemon: #fff0a8;
  --mint: #dff8eb;
  --peach: #ffe4da;
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 34px;
  --shadow-soft: 0 18px 60px rgba(28, 31, 55, 0.09);
  --shadow-stage: 0 36px 90px rgba(37, 34, 104, 0.17);
  --container: 1380px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 20px; top: -80px; z-index: 1000; padding: 12px 18px; border-radius: 10px; color: #fff; background: var(--ink); transition: top .2s ease; }
.skip-link:focus { top: 20px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; padding: 20px 0; transition: padding .25s var(--ease), background .25s ease, box-shadow .25s ease; }
.site-header.scrolled { padding: 10px 0; background: rgba(255,255,255,.88); border-bottom: 1px solid rgba(223,227,238,.8); box-shadow: 0 10px 32px rgba(16,20,38,.05); backdrop-filter: blur(18px); }
.nav-shell { min-height: 62px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; font-size: 22px; font-weight: 800; letter-spacing: -.04em; }
.brand-mark { display: block; flex: 0 0 auto; width: 38px; height: 40px; object-fit: contain; filter: drop-shadow(0 7px 12px rgba(81,71,229,.18)); }
.site-nav { display: flex; align-items: center; gap: 34px; font-size: 15px; font-weight: 650; }
.site-nav a, .login-link { position: relative; padding: 12px 0; }
.site-nav a::after, .login-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 7px; height: 2px; background: var(--primary); transition: right .25s var(--ease); }
.site-nav a:hover::after, .site-nav a:focus-visible::after, .login-link:hover::after { right: 0; }
.nav-actions { justify-self: end; display: flex; align-items: center; gap: 22px; font-size: 15px; font-weight: 700; }
.button { display: inline-flex; min-height: 58px; align-items: center; justify-content: center; gap: 22px; padding: 0 26px; border: 1px solid var(--primary); border-radius: 15px; color: #fff; background: var(--primary); font-weight: 750; box-shadow: 0 8px 20px rgba(81,71,229,.2); transition: transform .25s var(--ease), box-shadow .25s ease, background .2s ease; }
.button span { font-size: 19px; transition: transform .25s var(--ease); }
.button:hover { transform: translateY(-3px); background: var(--primary-dark); box-shadow: 0 15px 34px rgba(81,71,229,.28); }
.button:hover span { transform: translate(2px,-2px); }
.button:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid rgba(81,71,229,.28); outline-offset: 4px; }
.button-small { min-height: 46px; padding: 0 18px; border-radius: 12px; gap: 12px; }
.button-ghost { color: var(--ink); background: rgba(255,255,255,.72); border-color: rgba(16,20,38,.15); box-shadow: none; backdrop-filter: blur(10px); }
.button-ghost:hover { color: var(--ink); background: #fff; box-shadow: 0 12px 28px rgba(16,20,38,.09); }
.menu-toggle { display: none; }
.home-page .button,
.home-page button { box-shadow: none !important; }

.hero { --hero-rx: 0deg; --hero-ry: 0deg; --hero-shift: 0px; position: relative; isolation: isolate; width: 100%; height: 930px; min-height: 930px; overflow: hidden; padding: 128px 0 170px; background: linear-gradient(180deg, #fff 0%, #fdfcff 48%, #f7f5ff 100%); }
.hero::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: .38; background-image: radial-gradient(circle, rgba(81,71,229,.2) 1px, transparent 1.2px); background-size: 34px 34px; mask-image: linear-gradient(90deg, #000, transparent 32%, transparent 68%, #000); -webkit-mask-image: linear-gradient(90deg, #000, transparent 32%, transparent 68%, #000); }
.hero::after { content: ""; position: absolute; z-index: 1; inset: auto 0 0; height: 210px; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.86) 74%, #fff); }
.hero-atmosphere { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.hero-glow { position: absolute; display: block; border-radius: 999px; filter: blur(8px); }
.hero-glow-violet { top: 85px; right: 5%; width: 720px; height: 610px; background: radial-gradient(circle at 48% 47%, rgba(120,108,255,.27), rgba(224,219,255,.38) 46%, rgba(255,255,255,0) 74%); }
.hero-glow-mint { right: -170px; bottom: 70px; width: 490px; height: 420px; background: radial-gradient(circle, rgba(171,239,212,.44), rgba(255,255,255,0) 71%); }
.hero-glow-peach { left: -220px; bottom: 30px; width: 560px; height: 430px; background: radial-gradient(circle, rgba(255,221,207,.42), rgba(255,255,255,0) 72%); }
.hero-orbit { position: absolute; display: block; border: 1px dashed rgba(81,71,229,.17); border-radius: 50%; }
.hero-orbit-one { top: 92px; right: 3%; width: 690px; height: 690px; transform: rotate(-12deg); }
.hero-orbit-two { top: 178px; right: 11%; width: 510px; height: 510px; border-color: rgba(18,164,111,.13); transform: rotate(17deg); }
.hero-layout { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0,.86fr) minmax(590px,1.14fr); min-height: 610px; align-items: center; gap: clamp(42px,5vw,88px); }
.hero-copy { position: relative; z-index: 4; max-width: 620px; text-align: left; }
.hero-copy::before { content: none; }
.eyebrow { display: inline-flex; min-height: 30px; align-items: center; gap: 8px; margin: 0 0 16px; padding: 0 13px; border: 1px solid rgba(81,71,229,.28); border-radius: 999px; color: var(--primary-dark); background: rgba(255,255,255,.86); font-size: 11px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(81,71,229,.07); }
.eyebrow > i { color: var(--primary); font-size: 10px; }
.hero h1 { max-width: 650px; margin: 0; font-size: clamp(68px,5.9vw,92px); line-height: .91; letter-spacing: -.072em; font-weight: 850; }
.hero h1 em { color: transparent; background: linear-gradient(120deg, #6659f2 5%, #4036ce 60%, #8d75f6); background-clip: text; -webkit-background-clip: text; font-style: normal; }
.hero-lead { max-width: 590px; margin: 26px 0 0; color: var(--muted); font-size: clamp(17px,1.35vw,20px); line-height: 1.58; }
.hero-actions { display: flex; justify-content: flex-start; gap: 13px; margin-top: 28px; }
.hero-actions .button { min-height: 58px; }
.hero-proof { display: flex; justify-content: flex-start; gap: 20px; margin-top: 18px; color: var(--muted); font-size: 12px; font-weight: 650; }
.hero-proof span::before { content: "✓"; margin-right: 7px; color: #0da766; font-weight: 900; }

.hero-live-stage { position: relative; min-width: 0; min-height: 600px; perspective: 1500px; pointer-events: none; }
.hero-live-card { position: absolute; z-index: 2; top: 26px; left: 50%; width: min(100%,620px); min-height: 548px; padding: 24px; border: 1px solid rgba(81,71,229,.14); border-radius: 32px; background: rgba(255,255,255,.82); box-shadow: 0 42px 100px rgba(47,40,145,.16), inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter: blur(22px); transform: translateX(-50%) perspective(1400px) rotateX(var(--hero-rx)) rotateY(var(--hero-ry)) translateY(var(--hero-shift)); transform-style: preserve-3d; transition: transform .25s var(--ease); }
.hero-live-card::before { content: ""; position: absolute; z-index: -1; inset: 13px; border: 1px solid rgba(255,255,255,.92); border-radius: 23px; pointer-events: none; }
.hero-live-topbar { display: flex; align-items: center; justify-content: space-between; }
.hero-live-brand { display: grid; grid-template-columns: repeat(2,9px); grid-template-rows: repeat(2,9px); gap: 3px; }
.hero-live-brand i { display: block; border-radius: 3px; background: var(--ink); }
.hero-live-brand i:nth-child(2) { border-radius: 50%; background: var(--primary); }
.hero-live-brand i:nth-child(3) { border-radius: 6px 3px 3px 6px; }
.hero-live-status { display: inline-flex; min-height: 30px; align-items: center; gap: 8px; padding: 0 11px; border-radius: 999px; color: #087b56; background: #e7f8f0; font-size: 10px; font-weight: 800; }
.hero-live-status i { width: 7px; height: 7px; border-radius: 50%; background: #12ad75; box-shadow: 0 0 0 5px rgba(18,173,117,.1); animation: heroStatusPulse 2s ease-in-out infinite; }
.hero-live-welcome { margin-top: 27px; }
.hero-live-welcome > span { color: var(--primary); font-size: 9px; font-weight: 850; letter-spacing: .11em; }
.hero-live-welcome h2 { margin: 7px 0 4px; font-size: 27px; letter-spacing: -.052em; }
.hero-live-welcome h2 i { color: #f1ad2c; font-size: 15px; font-style: normal; }
.hero-live-welcome p { margin: 0; color: #7c8498; font-size: 11px; }
.hero-live-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 23px; }
.hero-live-metrics article { position: relative; min-height: 116px; padding: 16px; border: 1px solid #e6e8f1; border-radius: 18px; background: rgba(255,255,255,.88); box-shadow: 0 9px 26px rgba(25,29,54,.045); }
.hero-live-metrics article > span { position: absolute; top: 13px; right: 13px; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; font-size: 12px; }
.hero-live-metrics article > small,.hero-live-metrics article > b,.hero-live-metrics article > em { display: block; }
.hero-live-metrics article > small { color: #7c8498; font-size: 9px; font-weight: 700; }
.hero-live-metrics article > b { margin-top: 16px; font-size: 23px; letter-spacing: -.04em; }
.hero-live-metrics article > em { margin-top: 5px; color: #11a56f; font-size: 8px; font-style: normal; }
.metric-violet { color: var(--primary); background: var(--lavender); }.metric-mint { color: #0c986a; background: var(--mint); }.metric-peach { color: #da6c38; background: var(--peach); }
.hero-live-agenda { margin-top: 11px; overflow: hidden; border: 1px solid #e5e7f0; border-radius: 19px; background: rgba(255,255,255,.9); }
.hero-live-agenda > header { display: flex; min-height: 57px; align-items: center; justify-content: space-between; padding: 0 17px; border-bottom: 1px solid #eceef4; }
.hero-live-agenda > header b,.hero-live-agenda > header small { display: block; }.hero-live-agenda > header b { font-size: 12px; }.hero-live-agenda > header small { margin-top: 3px; color: #8a91a2; font-size: 8px; }
.hero-live-agenda > header > span { color: var(--primary); font-size: 8px; font-weight: 800; }
.hero-live-agenda > div { display: grid; grid-template-columns: 48px 4px 1fr auto; min-height: 54px; align-items: center; gap: 11px; padding: 0 17px; }
.hero-live-agenda > div + div { border-top: 1px solid #eff0f5; }
.hero-live-agenda time { color: var(--primary); font-size: 10px; font-weight: 850; }
.hero-live-agenda > div > i { width: 4px; height: 28px; border-radius: 99px; }.agenda-violet { background: #5d54e8; }.agenda-purple { background: #a54be2; }.agenda-orange { background: #f39a08; }
.hero-live-agenda > div > span b,.hero-live-agenda > div > span small { display: block; }.hero-live-agenda > div > span b { font-size: 10px; }.hero-live-agenda > div > span small { margin-top: 3px; color: #8c93a5; font-size: 8px; }
.hero-live-agenda > div > em { padding: 5px 8px; border-radius: 999px; color: #078457; background: #def7e9; font-size: 7px; font-style: normal; font-weight: 800; }
.hero-live-agenda > div:first-of-type > em { color: #fff; background: var(--primary); }

.hero-live-signal { position: absolute; z-index: 4; display: flex; min-width: 205px; align-items: center; gap: 11px; padding: 14px; border: 1px solid rgba(16,20,38,.075); border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 20px 48px rgba(40,41,80,.13); backdrop-filter: blur(14px); animation: heroSignalFloat 5s ease-in-out infinite; }
.hero-live-signal > span { display: grid; flex: 0 0 auto; width: 40px; height: 40px; place-items: center; border-radius: 12px; }
.hero-live-signal small,.hero-live-signal b,.hero-live-signal em { display: block; }.hero-live-signal small { color: #7c8498; font-size: 8px; }.hero-live-signal b { margin-top: 4px; font-size: 10px; }.hero-live-signal em { margin-top: 4px; font-size: 8px; font-style: normal; }
.hero-signal-review { top: 106px; left: -58px; transform: rotate(-4deg); }.hero-signal-review em { color: #f2a616; letter-spacing: .08em; }
.hero-signal-ai { top: 42px; right: -40px; animation-delay: -.9s; }.hero-signal-ai em { display: flex; height: 10px; align-items: center; gap: 2px; }
.hero-signal-ai em i { display: block; width: 2px; height: 5px; border-radius: 9px; background: var(--primary); animation: heroWave .9s ease-in-out infinite alternate; }.hero-signal-ai em i:nth-child(2),.hero-signal-ai em i:nth-child(5){height:9px}.hero-signal-ai em i:nth-child(3){height:7px}.hero-signal-ai em i:nth-child(4){height:10px}
.hero-signal-payment { right: -52px; bottom: 46px; transform: rotate(4deg); animation-delay: -1.8s; }.hero-signal-payment b { font-size: 20px; letter-spacing: -.04em; }
.signal-peach { color: #dc653a; background: var(--peach); }.signal-violet { color: var(--primary); background: var(--lavender); }.signal-mint { color: #0a9969; background: var(--mint); }

@keyframes heroStatusPulse { 50% { box-shadow: 0 0 0 8px rgba(18,173,117,0); } }
@keyframes heroSignalFloat { 0%,100% { margin-top: 0; } 50% { margin-top: -8px; } }
@keyframes heroWave { from { transform: scaleY(.55); } to { transform: scaleY(1.15); } }

/* Sovado brandmark hero */
.hero { --hero-shape-shift: 0px; display: block; height: 760px; min-height: 760px; padding: 120px 0 20px; background: radial-gradient(circle at 50% 76%, rgba(238,236,255,.84), rgba(255,255,255,0) 36%), #fff; }
.hero::before { inset: 0; opacity: .28; background-image: radial-gradient(circle, rgba(81,71,229,.22) 1px, transparent 1.2px); background-size: 36px 36px; mask-image: linear-gradient(90deg, #000 0%, transparent 25%, transparent 75%, #000 100%); -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 25%, transparent 75%, #000 100%); }
.hero::after { z-index: 2; height: 245px; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.9) 73%, #fff); }
.hero-brand-canvas { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.hero-brand-shape { --shape-rotate: 0deg; position: absolute; display: grid; place-items: center; transform: translateY(var(--hero-shape-shift)) rotate(var(--shape-rotate)); transition: translate .35s var(--ease); animation: heroBrandFloat 7s ease-in-out infinite; }
.hero-brand-shape i { font-size: 39px; }
.hero-shape-appointments { --shape-rotate: -7deg; top: 175px; left: -34px; width: 230px; height: 215px; border-radius: 74px 74px 28px 74px; color: #d65f37; background: var(--peach); }
.hero-shape-clients { --shape-rotate: 5deg; top: 500px; left: 8%; width: 174px; height: 184px; border-radius: 58px 24px 58px 58px; color: #3477bd; background: #dff0ff; animation-delay: -2.1s; }
.hero-shape-register { --shape-rotate: 6deg; top: 158px; right: 8%; width: 196px; height: 196px; border-radius: 50%; color: #0b9868; background: var(--mint); animation-delay: -1.3s; }
.hero-shape-ai { --shape-rotate: -5deg; top: 465px; right: -28px; width: 242px; height: 222px; border-radius: 28px 76px 76px 76px; color: var(--primary); background: var(--lavender); animation-delay: -3.2s; }
.hero-center { position: relative; z-index: 3; display: flex; width: min(calc(100% - 48px), 1120px); height: 620px; align-items: center; justify-content: center; flex-direction: column; padding-top: 0; text-align: center; }
.hero h1 { max-width: 1060px; margin: 0 auto; font-size: clamp(58px,5.8vw,88px); line-height: .91; letter-spacing: -.074em; }
.hero h1 em { color: var(--primary); background: none; -webkit-text-fill-color: currentColor; }
.hero-lead { max-width: 720px; margin: 27px auto 0; font-size: clamp(17px,1.35vw,20px); line-height: 1.58; }
.hero-actions { justify-content: center; margin-top: 29px; }
.hero-proof { justify-content: center; margin-top: 18px; }
@keyframes heroBrandFloat { 0%,100% { transform: translateY(var(--hero-shape-shift)) rotate(var(--shape-rotate)); } 50% { transform: translateY(calc(var(--hero-shape-shift) - 12px)) rotate(var(--shape-rotate)); } }

.product-showcase-section { position: relative; overflow: hidden; padding: 120px 0; scroll-margin-top: 80px; background: #fff; }
.product-showcase-shell { position:relative;isolation:isolate;display:grid;width:100%;max-width:none;grid-template-columns:minmax(350px,.72fr) minmax(600px,1.28fr);align-items:center;gap:clamp(34px,4.5vw,76px);overflow:hidden;padding:72px max(48px,calc((100vw - var(--container))/2 + 24px)) 0;border-radius:0;background:linear-gradient(135deg,#faf9ff 0%,#f5f7ff 55%,#f7f8fc 100%); }
.product-showcase-shell::before { content: ""; position: absolute; z-index: -2; inset: 0; opacity: .32; background-image: radial-gradient(circle,rgba(81,71,229,.2) 1px,transparent 1.2px); background-size: 30px 30px; mask-image: linear-gradient(90deg,#000,transparent 34%,transparent 66%,#000); -webkit-mask-image: linear-gradient(90deg,#000,transparent 34%,transparent 66%,#000); }
.product-showcase-intro { position:relative;z-index:3;display:block;width:100%;max-width:560px;margin:0;text-align:left; }
.product-showcase-copy { max-width:560px;margin:0;text-align:left; }
.product-showcase-copy h2 em { color: var(--primary); font-style: normal; }
.product-showcase-lead { max-width:540px;margin:24px 0 0;padding-bottom:0; }
.product-showcase-lead > p { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.65; }
.product-showcase-proof { display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px 18px;margin-top:24px;color:#4e586f;font-size:11px;font-weight:750; }
.product-showcase-proof span::before { content: "✓"; margin-right: 7px; color: #0aa16b; font-weight: 900; }
.product-demo-control { position: absolute; z-index: 6; top: 27px; right: 34px; display: inline-flex; align-items: center; gap: 9px; padding: 7px 9px; border: 0; color: var(--primary); background: transparent; font-size: 11px; font-weight: 850; cursor: pointer; transition: color .2s ease,transform .25s var(--ease); }
.product-demo-control > i { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; color: var(--primary); background: rgba(255,255,255,.78); font-size: 9px; transition: color .25s ease,background .25s ease; }
.product-demo-control:hover { color: var(--primary-dark); transform: translateY(-1px); }.product-demo-control:focus-visible { outline-offset: 2px; }.product-demo-control[data-state="playing"] > i { color: #fff; background: var(--primary); }.product-demo-control[data-state="complete"] { color: #087d56; }.product-demo-control[data-state="complete"] > i { color: #087d56; background: var(--mint); }.product-demo-control[hidden] { display: none; }
.product-showcase-visual { position:relative;z-index:2;width:100%;max-width:none;min-width:0;height:540px;margin:0; }
.product-showcase-stage { position:absolute;z-index:2;top:20px;left:50%;width:1120px;margin:0;padding:0;transform:translateX(-50%) perspective(1800px) rotateX(1deg) scale(.68);transform-origin:50% 0; }
.product-showcase-stage .app-window { width:100%;border-color:rgba(81,71,229,.12);border-radius:28px;box-shadow:0 22px 52px rgba(45,39,145,.1); }

.app-window, .os-product-window { height: 650px; overflow: hidden; border: 1px solid rgba(54,51,120,.16); border-radius: 28px 28px 0 0; background: #f7f8fc; box-shadow: var(--shadow-stage); }
.os-product-window { position: relative; z-index: 4; }
.os-dashboard { display: grid; grid-template-columns: 88px 1fr; min-width: 1120px; min-height: 650px; color: var(--ink); background: #f7f8fc; pointer-events: none; user-select: none; }
.os-sidebar { display: flex; flex-direction: column; min-height: 650px; padding: 15px 9px 12px; background: #fff; border-right: 1px solid #e1e4ed; }
.os-sidebar-logo { display: block; flex: 0 0 auto; width: 42px; height: 44px; margin: 0 auto 12px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(81,71,229,.18)); }
.os-sidebar nav { display: grid; gap: 1px; }
.os-nav-item, .os-settings { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 5px 2px; border-radius: 13px; color: #8d95a8; background: transparent; font-size: 8px; font-weight: 750; }
.os-nav-item > i, .os-settings > i { font-size: 17px; }
.os-nav-item.active { color: var(--primary); background: var(--lavender); }
.os-settings { min-height: 54px; margin-top: auto; padding-top: 10px; border-top: 1px solid #eceef4; border-radius: 0 0 12px 12px; }
.os-workspace { min-width: 0; padding: 36px 42px 60px; background: #f7f8fc; }
.os-dashboard-head { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.os-dashboard-head small { display: block; color: var(--primary); font-size: 11px; font-weight: 850; letter-spacing: .1em; }
.os-dashboard-head h2 { margin: 10px 0 5px; font-size: 36px; line-height: .98; letter-spacing: -.055em; }
.os-dashboard-head p { margin: 0; color: #70798f; font-size: 13px; }
.os-new-appointment { display: inline-flex; min-height: 48px; align-items: center; gap: 10px; padding: 0 22px; border-radius: 14px; color: #fff; background: var(--primary); box-shadow: none; font-size: 12px; font-weight: 800; }
.os-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 30px; }
.os-metric-card { display: grid; grid-template-columns: 46px 1fr auto; min-width: 0; min-height: 98px; align-items: center; gap: 14px; margin: 0; padding: 18px 20px; border: 1px solid #dfe3ed; border-radius: 18px; color: var(--ink); background: #fff; text-align: left; }
.os-metric-card > span:nth-child(2) { min-width: 0; }
.os-metric-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; font-size: 17px; font-weight: 850; }
.os-metric-icon.violet { color: var(--primary); background: #ebe8ff; }
.os-metric-icon.mint { color: #12a777; background: #def7ed; }
.os-metric-icon.peach { color: #ed7413; background: #fff0d9; }
.os-metric-card b, .os-metric-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-metric-card b { font-size: 24px; line-height: 1; }
.os-metric-card small { margin-top: 8px; color: #969eb1; font-size: 11px; }
.os-metric-card > i { color: #bec4d1; font-size: 10px; }
.os-dashboard-content { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(260px,.85fr); align-items: start; gap: 16px; margin-top: 20px; }
.os-today-card, .os-attention-card, .os-actions-card { min-width: 0; overflow: hidden; border: 1px solid #dfe3ed; border-radius: 18px; background: #fff; }
.os-today-card > header { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px; border-bottom: 1px solid #e5e7ee; }
.os-today-card h3, .os-attention-card h3, .os-actions-card h3 { margin: 0; font-size: 16px; letter-spacing: -.025em; }
.os-today-card header p, .os-actions-card header p { margin: 5px 0 0; color: #949caf; font-size: 11px; }
.os-static-link { display: inline-flex; align-items: center; gap: 8px; padding: 7px 0; color: var(--primary); font-size: 10px; font-weight: 800; }
.os-dashboard-appointment { display: grid; width: 100%; grid-template-columns: 58px 4px minmax(0,1fr) auto 10px; min-height: 86px; align-items: center; gap: 13px; padding: 14px 24px; border-bottom: 1px solid #e8eaf0; color: var(--ink); background: #fff; text-align: left; }
.os-dashboard-appointment time { color: var(--primary); font-size: 13px; font-weight: 850; }
.os-appointment-line { width: 4px; height: 42px; border-radius: 999px; }
.os-appointment-line.violet { background: #6255e8; }
.os-appointment-line.purple { background: #a442df; }
.os-appointment-line.orange { background: #f39a06; }
.os-dashboard-appointment span { min-width: 0; }
.os-dashboard-appointment span b, .os-dashboard-appointment span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-dashboard-appointment span b { font-size: 13px; }
.os-dashboard-appointment span small { margin-top: 7px; color: #969eb1; font-size: 10px; }
.os-dashboard-appointment em { padding: 8px 10px; border-radius: 999px; color: #159565; background: #e2f8eb; font-size: 8px; font-style: normal; font-weight: 800; }
.os-dashboard-appointment em.planned { color: var(--primary); background: #efedff; }
.os-dashboard-appointment > i:last-child { color: #c0c5d1; font-size: 9px; }
.os-side-column { display: grid; gap: 14px; }
.os-attention-card > header { display: flex; min-height: 48px; align-items: center; justify-content: space-between; padding: 14px 18px 10px; }
.os-attention-card > header span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #e87816; background: #fff0d9; font-size: 8px; font-weight: 850; }
.os-attention-row { display: grid; width: 100%; grid-template-columns: 30px 1fr 8px; align-items: center; gap: 10px; padding: 14px 18px 18px; color: var(--ink); background: #fff; text-align: left; }
.os-attention-row > i:first-child { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; color: var(--primary); background: #efedff; font-size: 12px; }
.os-attention-row span { min-width: 0; }
.os-attention-row b, .os-attention-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-attention-row b { font-size: 10px; }
.os-attention-row small { margin-top: 5px; color: var(--primary); font-size: 8px; }
.os-attention-row > i:last-child { color: #c0c5d1; font-size: 8px; }
.os-actions-card > header { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; border-bottom: 1px solid #e5e7ee; }
.os-actions-card > header > span { color: var(--primary); font-size: 9px; font-weight: 850; }
.os-actions-card > div { display: grid; gap: 9px; padding: 16px 18px 20px; }
.os-action-row { display: grid; width: 100%; grid-template-columns: 38px 1fr 10px; min-height: 62px; align-items: center; gap: 12px; padding: 10px 13px; border-radius: 14px; color: var(--ink); text-align: left; }
.os-action-row.violet { background: #f1f0ff; }
.os-action-row.mint { background: #ebf8f3; }
.os-action-row.peach { background: #fff6e9; }
.os-action-row > i:first-child { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: #fff; background: var(--primary); font-size: 13px; }
.os-action-row.mint > i:first-child { background: #18b78a; }
.os-action-row.peach > i:first-child { background: #ef942d; }
.os-action-row span { min-width: 0; }
.os-action-row b, .os-action-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-action-row b { font-size: 11px; }
.os-action-row small { margin-top: 5px; color: #969eb1; font-size: 9px; }
.os-action-row > i:last-child { color: #838b9d; font-size: 9px; }

/* Animated product journey: dashboard → agenda → checkout → paid */
.os-demo-stage { position: relative; min-width: 0; height: 650px; overflow: hidden; }
.os-demo-view { position: absolute; z-index: 1; inset: 0; opacity: 0; visibility: hidden; transform: translateY(12px) scale(.995); transition: opacity .34s ease, transform .46s var(--ease), visibility .34s; }
.os-demo-view.is-active { z-index: 2; opacity: 1; visibility: visible; transform: none; }
.os-demo-view.is-demo-view-clicked { animation: osViewConfirm .36s var(--ease); }

.os-agenda-demo { color: var(--ink); background: #f8f9fd; }
.os-agenda-toolbar { display: grid; height: 70px; grid-template-columns: 1.2fr .8fr .8fr; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid #dfe3ed; background: #fff; }
.os-agenda-date-nav, .os-agenda-switch, .os-agenda-tools { display: flex; align-items: center; }
.os-agenda-date-nav { gap: 9px; }
.os-agenda-date-nav > i { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid #dce1eb; border-radius: 10px; color: #697286; font-size: 10px; }
.os-agenda-date-nav > b { display: grid; height: 34px; place-items: center; padding: 0 13px; border: 1px solid #bbb5ff; border-radius: 10px; color: var(--primary); background: #f7f6ff; font-size: 11px; }
.os-agenda-date-nav > strong { margin-left: 5px; font-size: 14px; letter-spacing: -.03em; white-space: nowrap; }
.os-agenda-switch { justify-self: center; padding: 3px; border: 1px solid #dfe3ed; border-radius: 11px; background: #f3f4f8; }
.os-agenda-switch span { padding: 8px 10px; border-radius: 8px; color: #6f788d; font-size: 10px; font-weight: 750; }
.os-agenda-switch span.active { color: #fff; background: var(--primary); }
.os-agenda-tools { justify-self: end; gap: 7px; color: #5f687c; font-size: 10px; font-weight: 750; }
.os-agenda-tools span, .os-agenda-tools b { display: inline-flex; height: 34px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid #dfe3ed; border-radius: 10px; background: #fff; }
.os-agenda-tools b { color: #fff; border-color: var(--primary); background: var(--primary); }
.os-agenda-summary { display: flex; height: 50px; align-items: center; gap: 0; border-bottom: 1px solid #dfe3ed; background: #fbfbfe; }
.os-agenda-summary > span { display: inline-flex; height: 30px; align-items: center; gap: 7px; padding: 0 17px; border-right: 1px solid #dfe3ed; color: #7f889b; font-size: 9px; }
.os-agenda-summary > span i { color: var(--primary); }
.os-agenda-summary > span b { color: var(--ink); font-size: 10px; }
.os-agenda-summary > small { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding-right: 18px; color: #8c94a7; font-size: 8px; }
.os-demo-week { position: absolute; inset: 120px 0 0; display: grid; grid-template-columns: 62px repeat(5,minmax(0,1fr)); overflow: hidden; }
.os-demo-hours, .os-demo-day { display: grid; min-width: 0; grid-template-rows: 42px 1fr; }
.os-demo-hours { grid-template-rows: 42px repeat(7,1fr); border-right: 1px solid #dfe3ed; background: #fff; }
.os-demo-hours time { display: flex; justify-content: center; padding-top: 12px; border-top: 1px solid #e1e4ed; color: #657086; font-size: 9px; font-weight: 800; }
.os-demo-day { border-right: 1px solid #dfe3ed; }
.os-demo-day > header { display: flex; align-items: center; justify-content: center; gap: 4px; border-bottom: 1px solid #dfe3ed; color: #60697d; background: #fff; font-size: 9px; }
.os-demo-day > header small { font-size: inherit; font-weight: 800; }.os-demo-day > header b { font-size: 10px; }
.os-demo-day.active > header { color: var(--primary); background: var(--lavender); }
.os-demo-day-track { position: relative; background-color: #fafbfe; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 63px, #e1e4ed 64px); }
.os-demo-slot { position: absolute; top: var(--demo-top); left: 6px; right: 6px; height: var(--demo-height); overflow: hidden; padding: 9px 10px 8px; border: 1px solid currentColor; border-left-width: 4px; border-radius: 10px; text-align: left; }
.os-demo-slot time, .os-demo-slot b, .os-demo-slot small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-demo-slot time { font-size: 9px; font-weight: 850; }.os-demo-slot b { margin-top: 4px; color: var(--ink); font-size: 10px; }.os-demo-slot small { margin-top: 3px; color: #6f788d; font-size: 8px; }
.os-demo-slot em { position: absolute; top: 8px; right: 7px; padding: 4px 6px; border-radius: 999px; color: #5d6679; background: rgba(255,255,255,.82); font-size: 6px; font-style: normal; font-weight: 850; }
.os-demo-slot.blue { color: #2b62d8; background: #e5edff; }.os-demo-slot.violet { color: #8f43dd; background: #f2e7ff; }.os-demo-slot.mint { color: #17a184; background: #def5ef; }.os-demo-slot.coral { color: #ef4a45; background: #ffe7e5; }.os-demo-slot.gold { color: #e99708; background: #fff2d8; }

.os-appointment-demo { position: absolute; z-index: 20; inset: 0; display: grid; grid-template-columns: minmax(0,1fr) 430px; opacity: 0; visibility: hidden; background: rgba(28,34,52,.48); transition: opacity .36s ease, visibility .36s; }
.os-appointment-demo.is-open { opacity: 1; visibility: visible; }
.os-appointment-panel { display: grid; grid-column: 2; grid-template-rows: auto auto 1fr auto; min-width: 0; color: var(--ink); background: #fff; box-shadow: -24px 0 50px rgba(16,20,38,.14); transform: translateX(100%); transition: transform .5s var(--ease); }
.os-appointment-demo.is-open .os-appointment-panel { transform: none; }
.os-appointment-panel > header { display: flex; min-height: 106px; align-items: flex-start; justify-content: space-between; padding: 23px 22px 18px; border-bottom: 1px solid #e2e5ed; }
.os-appointment-panel > header small { color: var(--primary); font-size: 9px; font-weight: 900; letter-spacing: .15em; }.os-appointment-panel > header h3 { margin: 11px 0 5px; font-size: 25px; letter-spacing: -.045em; }.os-appointment-panel > header p { margin: 0; color: #6e778a; font-size: 12px; }
.os-appointment-panel > header > span { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid #dfe3ed; border-radius: 11px; color: #667086; font-size: 12px; }
.os-appointment-panel > nav { display: flex; height: 48px; align-items: flex-end; gap: 26px; padding: 0 22px; border-bottom: 1px solid #e2e5ed; color: #667086; font-size: 10px; font-weight: 800; }
.os-appointment-panel > nav > * { height: 48px; display: flex; align-items: center; }.os-appointment-panel > nav b { color: var(--primary); border-bottom: 2px solid var(--primary); }
.os-appointment-details { min-height: 0; overflow: hidden; padding: 20px 22px; }
.os-appointment-details > em { display: inline-flex; padding: 8px 10px; border-radius: 999px; color: #118254; background: #e0f8eb; font-size: 9px; font-style: normal; font-weight: 850; }
.os-appointment-details dl { margin: 18px 0 0; }.os-appointment-details dl > div { display: grid; grid-template-columns: 125px 1fr; align-items: center; min-height: 43px; border-bottom: 1px solid #e8eaf0; }
.os-appointment-details dt { color: #6f788c; font-size: 10px; }.os-appointment-details dt i { width: 18px; color: #657086; }.os-appointment-details dd { margin: 0; color: #3d4658; font-size: 10px; font-weight: 800; }
.os-appointment-details h4 { margin: 18px 0 10px; color: #667086; font-size: 10px; }
.os-quick-status { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }.os-quick-status span { display: flex; min-height: 40px; align-items: center; justify-content: center; gap: 6px; border: 1px solid #dce1eb; border-radius: 10px; color: #465064; font-size: 8px; font-weight: 800; }
.os-appointment-panel > footer { display: grid; height: 70px; grid-template-columns: 1.2fr .8fr 1fr; align-items: center; gap: 8px; padding: 11px 17px; border-top: 1px solid #e0e4ec; background: #fff; }
.os-appointment-panel > footer > * { display: flex; height: 44px; align-items: center; justify-content: center; gap: 7px; border: 1px solid #d9dee8; border-radius: 11px; color: #465064; font-size: 9px; font-weight: 800; }
.os-appointment-panel > footer > b { color: #fff; border-color: var(--primary); background: var(--primary); }

.os-checkout-demo { color: var(--ink); background: #f7f8fc; }
.os-checkout-top { display: flex; height: 62px; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid #dfe3ed; background: #fff; }
.os-checkout-top > span { display: inline-flex; height: 38px; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid #c9c5ff; border-radius: 11px; color: var(--primary); background: #faf9ff; font-size: 10px; font-weight: 850; }
.os-checkout-top > div { display: flex; align-items: center; gap: 12px; }.os-checkout-top > div b { color: #4d5668; font-size: 10px; }.os-checkout-top > div em { display: inline-flex; height: 32px; align-items: center; gap: 7px; padding: 0 11px; border-radius: 999px; color: #15835b; background: #e2f7ed; font-size: 8px; font-style: normal; font-weight: 850; }.os-checkout-top > div em i { width: 7px; height: 7px; border-radius: 50%; background: #16bd78; }.os-checkout-top > div strong { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); font-size: 10px; }
.os-checkout-appointment { display: grid; height: 56px; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid #cfcafc; background: #f0efff; }
.os-checkout-appointment > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; color: var(--primary); background: #e3e0ff; font-size: 11px; }.os-checkout-appointment b, .os-checkout-appointment small { display: block; }.os-checkout-appointment b { color: var(--primary); font-size: 11px; }.os-checkout-appointment small { margin-top: 3px; color: #4d576b; font-size: 8px; }.os-checkout-appointment em { color: var(--primary); font-size: 9px; font-style: normal; font-weight: 850; }
.os-checkout-layout { position: absolute; inset: 118px 0 0; display: grid; grid-template-columns: minmax(0,1fr) 328px; }
.os-checkout-main { min-width: 0; padding: 15px 18px; background: #f7f8fc; }
.os-checkout-search { display: grid; grid-template-columns: 1fr auto; gap: 8px; }.os-checkout-search > span { display: flex; height: 38px; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid #d9dee8; border-radius: 11px; color: #7d8698; background: #fff; font-size: 9px; }.os-checkout-search > div { display: flex; align-items: center; padding: 3px; border: 1px solid #dfe3ed; border-radius: 11px; background: #f1f2f7; }.os-checkout-search > div > * { display: inline-flex; height: 30px; align-items: center; gap: 6px; padding: 0 9px; color: #737c90; font-size: 8px; }.os-checkout-search > div b { border-radius: 8px; color: var(--primary); background: #fff; }
.os-checkout-main > header { display: flex; align-items: flex-end; justify-content: space-between; margin: 32px 4px 18px; }.os-checkout-main > header small { color: var(--primary); font-size: 8px; font-weight: 900; letter-spacing: .12em; }.os-checkout-main > header h3 { margin: 8px 0 0; font-size: 22px; letter-spacing: -.04em; }.os-checkout-main > header p { margin: 0; color: #8c95a8; font-size: 8px; }
.os-service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }.os-service-grid article { min-width: 0; height: 178px; padding: 16px; border: 1px solid #dfe3ed; border-radius: 17px; background: #fff; }.os-service-grid article.selected { border-color: #978fff; background: #f6f5ff; }.os-service-grid article > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--primary); background: #efedff; font-size: 15px; }.os-service-grid article > div { margin-top: 13px; }.os-service-grid article b, .os-service-grid article small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.os-service-grid article b { font-size: 11px; }.os-service-grid article small { margin-top: 7px; color: #929aac; font-size: 8px; }.os-service-grid article footer { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; }.os-service-grid article footer em { color: #596276; font-size: 9px; font-style: normal; font-weight: 800; }.os-service-grid article footer strong { color: var(--primary); font-size: 11px; }
.os-checkout-receipt { position: relative; display: flex; min-width: 0; flex-direction: column; border-left: 1px solid #dfe3ed; background: #fff; }.os-checkout-receipt > header { padding: 17px 18px 15px; border-bottom: 1px solid #e2e5ed; }.os-checkout-receipt > header small { color: #596276; font-size: 9px; }.os-checkout-receipt > header h3 { margin: 7px 0; font-size: 20px; }.os-checkout-receipt > header h3 em { color: #8e96a8; font-size: 8px; font-style: normal; }.os-checkout-receipt > header span { color: #8d95a8; font-size: 7px; }.os-checkout-receipt > header span i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #18bd79; }
.os-receipt-person { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 15px 17px 10px; }.os-receipt-person > span { padding: 11px; border: 1px solid #dfe3ed; border-radius: 11px; }.os-receipt-person small, .os-receipt-person b { display: block; }.os-receipt-person small { color: #949caf; font-size: 7px; }.os-receipt-person b { margin-top: 5px; font-size: 9px; }
.os-receipt-item { display: grid; grid-template-columns: 36px 1fr auto auto; align-items: center; gap: 8px; margin: 2px 17px 0; padding: 13px 0; border-bottom: 1px solid #e2e5ed; }.os-receipt-item > i { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--primary); background: #efedff; font-size: 11px; }.os-receipt-item span b, .os-receipt-item span small { display: block; }.os-receipt-item span b { font-size: 9px; }.os-receipt-item span small { margin-top: 4px; color: #9199ab; font-size: 7px; }.os-receipt-item em { font-size: 8px; font-style: normal; }.os-receipt-item strong { font-size: 9px; }
.os-receipt-total { margin-top: auto; padding: 15px 18px 62px; background: #fbfbfd; }.os-receipt-total > span, .os-receipt-total > strong { display: flex; align-items: center; justify-content: space-between; }.os-receipt-total > span { color: #8b94a7; font-size: 8px; }.os-receipt-total > span b { color: var(--ink); }.os-receipt-total > strong { margin-top: 13px; padding-top: 13px; border-top: 1px dashed #d8dce6; font-size: 13px; }.os-receipt-total > strong b { font-size: 17px; }
.os-pay-button { position: absolute; right: 16px; bottom: 13px; left: 16px; display: flex; height: 43px; align-items: center; justify-content: center; gap: 8px; border-radius: 11px; color: #fff; background: var(--primary); font-size: 10px; font-weight: 850; }.os-pay-button b { margin-left: 4px; }

.os-payment-success { position: absolute; z-index: 35; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; color: #fff; background: #1ca978; transform: scale(1.035); transition: opacity .42s ease, transform .55s var(--ease), visibility .42s; }.os-payment-success.is-visible { opacity: 1; visibility: visible; transform: none; }.os-payment-success > div { text-align: center; }.os-payment-success span { display: grid; width: 82px; height: 82px; place-items: center; margin: 0 auto; border: 3px solid rgba(255,255,255,.9); border-radius: 50%; background: rgba(255,255,255,.18); font-size: 32px; }.os-payment-success h3 { margin: 30px 0 0; font-size: 42px; letter-spacing: -.055em; }.os-payment-success p { margin: 17px 0 0; font-size: 16px; }.os-payment-success p b { font-weight: 900; }

.os-demo-cursor { --cursor-x: 1010px; --cursor-y: 64px; --cursor-speed: 0ms; position: absolute; z-index: 50; top: -18px; left: -18px; display: grid; width: 38px; height: 38px; place-items: center; opacity: 0; border: 3px solid #fff; border-radius: 50%; color: #fff; background: #f05268; box-shadow: 0 9px 22px rgba(190,43,67,.3); transform: translate3d(var(--cursor-x),var(--cursor-y),0); transition: transform var(--cursor-speed) var(--ease), opacity .2s ease; pointer-events: none; }.os-demo-cursor.is-visible { opacity: 1; }.os-demo-cursor > i { position: relative; z-index: 2; font-size: 14px; transition: transform .16s ease; }.os-demo-cursor > span { position: absolute; inset: -3px; border: 3px solid rgba(240,82,104,.55); border-radius: 50%; opacity: 0; }.os-demo-cursor.is-clicking > i { transform: scale(.76); }.os-demo-cursor.is-clicking > span { animation: osCursorClick .42s ease-out; }.is-demo-target.is-demo-clicked, .os-nav-item.is-demo-clicked { animation: osTargetClick .4s var(--ease); }
@keyframes osCursorClick { 0% { opacity: .8; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes osTargetClick { 50% { filter: brightness(.95); box-shadow: 0 0 0 5px rgba(240,82,104,.18); } }
@keyframes osViewConfirm { 50% { filter: brightness(.98); } }

.salon-strip { position: relative; z-index: 8; overflow: hidden; margin-top: -26px; padding:26px 0 0; color: var(--ink); background: linear-gradient(180deg,#fff 0%,#fbfaff 100%); }
.salon-strip::before,.salon-strip::after { content:"";position:absolute;z-index:3;top:0;bottom:0;width:clamp(26px,8vw,150px);pointer-events:none; }
.salon-strip::before { left:0;background:linear-gradient(90deg,#fff 8%,rgba(255,255,255,0)); }
.salon-strip::after { right:0;background:linear-gradient(270deg,#fff 8%,rgba(255,255,255,0)); }
.salon-strip-intro { position:relative;z-index:4;width:min(calc(100% - 48px),var(--container));margin:0 auto 19px;text-align:center; }
.salon-strip-intro > span { color:#747c91;font-size:10px;font-weight:850;letter-spacing:.18em;text-transform:uppercase; }
.salon-marquee { width:100%;overflow:hidden; }
.salon-marquee-track { display:flex;width:max-content;will-change:transform;animation:salonMarquee 128s linear infinite; }
.salon-marquee-group { display:flex;flex:0 0 auto;align-items:center;gap:clamp(28px,3.4vw,62px);padding-right:clamp(28px,3.4vw,62px); }
.salon-word { display:inline-flex;align-items:center;gap:clamp(28px,3.4vw,62px);opacity:.68;white-space:nowrap;font-size:clamp(42px,4.6vw,72px);line-height:.9;letter-spacing:-.055em;font-weight:850;text-transform:uppercase; }
.salon-word::after { content:"•";color:#d9dcea;font-size:.42em;line-height:1; }
.salon-word-violet { color:#aaa4ed; }.salon-word-peach { color:#e9ad98; }.salon-word-mint { color:#8fcdb4; }.salon-word-blue { color:#9ebfdf; }
@keyframes salonMarquee { to { transform:translateX(-50%); } }
.salon-strip + .product-showcase-section { padding-top:72px;background:linear-gradient(180deg,#fbfaff 0%,#f7f6ff 58%,#faf9ff 100%); }
.site-footer > .salon-strip { z-index:1;margin:0;padding:48px 0 44px;color:#fff;border-bottom:1px solid #2d3244;background:var(--ink); }
.site-footer > .salon-strip::before { background:linear-gradient(90deg,var(--ink) 8%,rgba(16,20,38,0)); }
.site-footer > .salon-strip::after { background:linear-gradient(270deg,var(--ink) 8%,rgba(16,20,38,0)); }
.site-footer > .salon-strip .salon-strip-intro > span { color:#8e95a7; }
.site-footer > .salon-strip .salon-word { opacity:.78; }
.site-footer > .salon-strip .salon-word-violet { color:#8f87f4; }.site-footer > .salon-strip .salon-word-peach { color:#c8aaa0; }.site-footer > .salon-strip .salon-word-mint { color:#82b39d; }.site-footer > .salon-strip .salon-word-blue { color:#8fa8c3; }
.site-footer > .salon-strip .salon-word::after { color:#393e51; }

.section { padding: 148px 0; }
.section-heading { max-width: 780px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading h2, .feature-head h2, .split-copy h2, .ai-copy h2, .switch-card h2, .final-cta h2 { margin: 0; font-size: clamp(42px, 4.5vw, 66px); line-height: 1.04; letter-spacing: -.058em; }
.section-heading > p:last-child, .feature-head > p, .split-copy > p, .ai-copy > p, .switch-card > div > p, .final-cta > p { color: var(--muted); font-size: 19px; line-height: 1.65; }
.section-heading > p:last-child { max-width: 670px; margin: 24px auto 0; }
.kicker, .card-label { margin: 0 0 20px; color: var(--primary); font-size: 12px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.kicker-light { color: #bcb6ff; }
.feature-head { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 60px; margin-bottom: 64px; }
.feature-head-wide { grid-template-columns: 1.1fr .65fr; }
.feature-head > p { margin: 0 0 4px; }
.text-link, .inline-link a { display: inline-flex; align-items: center; gap: 18px; color: var(--primary); font-weight: 800; }
.text-link span, .inline-link span { transition: transform .2s var(--ease); }.text-link:hover span, .inline-link a:hover span { transform: translateX(5px); }
.reveal { opacity: 0; transform: translateY(25px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

.story-section { overflow: hidden; }
.journey-grid { display: grid; grid-template-columns: 1.15fr .85fr .95fr; gap: 20px; margin-top: 70px; }
.journey-card { position: relative; overflow: hidden; min-height: 460px; padding: 34px; border: 1px solid var(--line); border-radius: 30px; background: #fafaff; }
.journey-card:nth-child(2) { background: #f5fbf8; }.journey-card:nth-child(3) { background: #fffaf0; }
.journey-card > h3 { position: absolute; left: 34px; bottom: 70px; margin: 0; font-size: 27px; letter-spacing: -.04em; }
.journey-card > p { position: absolute; left: 34px; right: 34px; bottom: 20px; margin: 0; color: var(--muted); line-height: 1.55; }
.step-number { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: var(--primary); background: var(--lavender); font-size: 11px; font-weight: 850; }
.mini-site { position: absolute; inset: 86px 32px 145px; padding: 24px; border-radius: 20px; color: #fff; background: #19182c; box-shadow: 0 22px 45px rgba(16,20,38,.17); transform: rotate(-1.5deg); }
.mini-site > div { display: flex; justify-content: space-between; align-items: center; }.mini-site > div b { font-size: 14px; }.mini-site > div i { padding: 7px 9px; border-radius: 6px; color: var(--ink); background: var(--lemon); font-size: 8px; font-style: normal; }
.mini-site h3 { margin: 38px 0 20px; font-size: 28px; line-height: 1.05; letter-spacing: -.05em; }.mini-site button { border: 0; border-radius: 8px; padding: 9px 12px; color: var(--ink); background: #fff; font-size: 9px; font-weight: 750; }
.mini-day { position: absolute; left: 32px; right: 32px; top: 145px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 18px; border: 1px solid #cae8d9; border-radius: 16px; background: #fff; box-shadow: var(--shadow-soft); }.mini-day i { font-style: normal; font-weight: 800; }.mini-day span b,.mini-day span small { display: block; }.mini-day span small { margin-top: 4px; color: var(--muted); font-size: 11px; }.mini-day em { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #087c51; background: var(--mint); font-style: normal; }
.mini-message { position: absolute; left: 32px; right: 32px; top: 115px; padding: 24px; border-radius: 20px; color: #fff; background: var(--primary); box-shadow: 0 22px 45px rgba(81,71,229,.24); transform: rotate(2deg); }.mini-message small { color: #cbc8ff; font-weight: 700; }.mini-message p { font-size: 18px; line-height: 1.4; }.mini-message span { display: inline-flex; padding: 9px 12px; border-radius: 8px; color: var(--ink); background: var(--lemon); font-size: 10px; font-weight: 800; }

.schedule-section { background: var(--soft); }
.calendar-scroll-scene { position: relative; min-height: 0; }
.calendar-stage { position: relative; padding: 28px; border: 1px solid #dde0eb; border-radius: 30px; background: #fff; box-shadow: var(--shadow-soft); }
.calendar-scroll-scene .calendar-stage { position: relative; top: auto; z-index: 2; }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }.calendar-toolbar > div { display: flex; align-items: center; gap: 13px; }.calendar-toolbar span { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--line); border-radius: 8px; }.calendar-toolbar button { padding: 8px 11px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: 12px; }.calendar-toolbar button.active { color: var(--primary); background: var(--lavender); font-weight: 800; }
.calendar-summary { display: flex; align-items: center; gap: 26px; margin-bottom: 18px; padding: 13px 16px; border: 1px solid #e7e8f0; border-radius: 14px; background: #fafafe; }
.calendar-summary > div { display: grid; grid-template-columns: 34px auto; column-gap: 10px; align-items: center; }.calendar-summary > div + div { padding-left: 25px; border-left: 1px solid #e4e6ef; }.summary-icon { grid-row: 1 / 3; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--primary); background: var(--lavender); }.calendar-summary small { color: #8c93a5; font-size: 9px; font-weight: 700; }.calendar-summary b { font-size: 13px; }.calendar-summary p { display: flex; align-items: center; gap: 12px; margin: 0 0 0 auto; color: #7a8295; font-size: 10px; font-weight: 750; }.calendar-summary p > i { width: 110px; height: 5px; overflow: hidden; border-radius: 999px; background: #e7e8ef; font-style: normal; }.calendar-summary p > i b { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--primary),#8c82ff); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); }
.calendar-shell { display: grid; grid-template-columns: 65px repeat(5,1fr); min-height: 560px; overflow: hidden; border: 1px solid #e5e7ef; border-radius: 18px; }
.calendar-scroll-scene .calendar-shell { height: 540px; min-height: 540px; }
.calendar-scroll-scene .calendar-times { grid-template-rows: 60px repeat(7,1fr); }
.calendar-scroll-scene .calendar-day { background: repeating-linear-gradient(to bottom,transparent 0,transparent 68px,#e9ebf2 69px); background-position: 0 60px; }
.calendar-scroll-scene .calendar-day header { height: 60px; background:#fff; }
.calendar-scroll-scene .calendar-day.active header { background:#fbfaff; }
.calendar-scroll-scene .slot { top: calc(60px + var(--top) * 4.78px); height: calc(var(--size) * 4.1px); max-height: calc(100% - 66px - var(--top) * 4.78px); }
.calendar-times { display: grid; grid-template-rows: 70px repeat(7,1fr); color: #9097a8; font-size: 10px; text-align: center; }.calendar-times i { padding-top: 13px; border-top: 1px solid #eef0f4; font-style: normal; }
.calendar-day { position: relative; border-left: 1px solid #e8eaf1; background: repeating-linear-gradient(to bottom, transparent 0, transparent 69px, #eef0f4 70px); }.calendar-day.active { background-color: #fbfaff; }.calendar-day header { height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-bottom: 1px solid #e8eaf1; }.calendar-day header small { color: #8a92a4; font-size: 9px; }.calendar-day header b { margin-top: 3px; font-size: 17px; }.calendar-day.active header b { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); }
.slot { position: absolute; top: calc(70px + var(--top) * 4.9px); left: 7px; right: 7px; height: calc(var(--size) * 4px); padding: 7px 9px; overflow: hidden; border: 1px solid rgba(255,255,255,.5); border-left: 4px solid currentColor; border-radius: 10px; box-shadow: 0 8px 20px rgba(16,20,38,.05); transition: opacity .38s var(--ease), transform .45s var(--ease), filter .3s ease, box-shadow .25s ease; will-change: opacity,transform; }.slot time,.slot b,.slot small { display: block; }.slot time { margin-bottom: 3px; font-size: 9.5px; line-height:1; font-weight: 850; }.slot b { overflow: hidden; padding-right: 0; font-size: 11.5px; line-height:1.1; text-overflow: ellipsis; white-space: nowrap; }.slot small { overflow: hidden; margin-top: 3px; font-size: 9px; line-height:1.2; text-overflow: ellipsis; white-space: nowrap; }.slot em { position: absolute; top: 6px; right: 6px; padding: 4px 6px; border-radius: 999px; color: currentColor; background: rgba(255,255,255,.8); font-size: 7px; line-height:1; font-style: normal; font-weight: 800; }.slot:hover { z-index:4;box-shadow:0 11px 24px rgba(16,20,38,.1); }.slot-blue { color: #215b9a; background: #deecff; }.slot-purple { color: #5a3fb4; background: #ece7ff; }.slot-mint { color: #19714f; background: #def7ec; }.slot-peach { color: #a75434; background: #ffe7dc; }.slot-red { color: #b4242a; background: #ffe5e4; }.slot-violet { color: #7140ba; background: #f1e4ff; }.slot-gold { color: #a96a07; background: #fff1d5; }
.calendar-scroll-scene.is-enhanced .slot-fill { opacity: 0; filter: saturate(.55); pointer-events: none; transform: translateY(18px) scale(.9); }.calendar-scroll-scene.is-enhanced .slot-fill.is-filled { opacity: 1; filter: none; pointer-events: auto; transform: none; animation:calendarItemIn .58s var(--ease) both; }
.os-demo-slot,.slot { border-radius: 0; }
.calendar-popover { position: absolute; right: 58px; bottom: 43px; display: flex; align-items: center; gap: 11px; padding: 15px 19px; border: 1px solid #caeadb; border-radius: 15px; background: #fff; box-shadow: var(--shadow-soft); }.calendar-popover > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; color: #087c51; background: var(--mint); }.calendar-popover small,.calendar-popover b { display: block; }.calendar-popover small { color: #0b8c5a; font-size: 9px; font-weight: 800; }.calendar-popover b { margin-top: 3px; font-size: 11px; }.calendar-scroll-scene.is-enhanced .calendar-fill-confirmation { opacity: 0; pointer-events: none; transform: translateY(14px) scale(.96); transition: opacity .3s var(--ease),transform .35s var(--ease); }.calendar-scroll-scene.is-enhanced .calendar-fill-confirmation.is-visible { opacity: 1; transform: none; }.calendar-fill-confirmation.is-popping { animation: calendarToast .42s var(--ease); }.inline-link { display: flex; justify-content: center; margin-top: 35px; }
@keyframes calendarToast { 50% { transform: translateY(-5px) scale(1.025); } }
@keyframes calendarItemIn { 0% { opacity:0;transform:translateY(18px) scale(.88);box-shadow:0 0 0 0 rgba(81,71,229,0); } 68% { opacity:1;transform:translateY(-2px) scale(1.015);box-shadow:0 0 0 6px rgba(81,71,229,.08); } 100% { opacity:1;transform:none;box-shadow:0 8px 20px rgba(16,20,38,.05); } }

.customer-section { overflow: hidden; }
.split-layout { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 90px; }
.split-copy > p { margin: 25px 0; }.check-list { margin: 32px 0; padding: 0; list-style: none; }.check-list li { position: relative; margin: 15px 0; padding-left: 31px; color: #3f485d; line-height: 1.45; }.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; color: #087c51; background: var(--mint); font-size: 11px; font-weight: 900; }
.customer-visual { position: relative; min-height: 620px; padding: 70px 45px; border-radius: 34px; background: var(--lavender); }
.profile-card { padding: 30px; border: 1px solid rgba(81,71,229,.13); border-radius: 24px; background: #fff; box-shadow: var(--shadow-soft); }.profile-card header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }.profile-avatar { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 17px; color: #fff; background: var(--primary); font-weight: 850; }.profile-card header h3,.profile-card header p { margin: 0; }.profile-card header h3 { font-size: 18px; }.profile-card header p { margin-top: 4px; color: var(--muted); font-size: 11px; }.profile-card header button { border: 0; background: transparent; }.profile-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }.profile-tags span { padding: 7px 10px; border-radius: 999px; color: var(--primary-dark); background: var(--lavender); font-size: 9px; font-weight: 700; }.profile-stats { display: grid; grid-template-columns: repeat(3,1fr); padding: 20px 0; border: solid #eceef4; border-width: 1px 0; }.profile-stats div { padding-left: 20px; border-left: 1px solid #eceef4; }.profile-stats div:first-child { padding-left: 0; border: 0; }.profile-stats small,.profile-stats b { display: block; }.profile-stats small { color: var(--muted); font-size: 9px; }.profile-stats b { margin-top: 6px; font-size: 18px; }.profile-note { margin-top: 20px; padding: 17px; border-radius: 14px; background: #f8f8fb; }.profile-note small { color: var(--muted); font-size: 9px; font-weight: 750; }.profile-note p { margin: 8px 0 0; font-size: 12px; line-height: 1.5; }.profile-note p.is-typewriter-ready { min-height: 3em; }.profile-note p.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 3px; border-radius: 2px; background: var(--primary); vertical-align: -.14em; animation: profileNoteCaret .72s steps(1,end) infinite; }
@keyframes profileNoteCaret { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.history-card { position: absolute; right: -25px; bottom: 32px; width: 64%; padding: 23px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow-soft); }.history-card header { display: flex; justify-content: space-between; font-size: 11px; }.history-card header span { color: var(--primary); font-size: 9px; font-weight: 750; }.history-card > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 15px; padding-top: 15px; border-top: 1px solid #eff0f4; }.history-card i { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }.history-card p,.history-card p b,.history-card p small { display: block; margin: 0; }.history-card p b,.history-card strong { font-size: 10px; }.history-card p small { margin-top: 3px; color: var(--muted); font-size: 8px; }

.online-section { overflow: hidden; background: #fffaf1; }
.web-builder-stage { --builder-accent:#5147e5; position: relative; min-height: 680px; margin-top: 75px; padding: 38px 38px 0 300px; border: 1px solid #eadfc9; border-radius: 34px; background: #f2eee6; }
.builder-panel { position: absolute; z-index: 4; left: 38px; top: 38px; bottom: 38px; width: 235px; padding: 23px; border-radius: 19px; background: #fff; box-shadow: var(--shadow-soft); }.builder-panel header { display: flex; justify-content: space-between; margin-bottom: 35px; font-size: 11px; }.builder-panel header span { color: #0b8c5a; font-size: 8px; }.builder-panel label { display: block; margin: 21px 0 9px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }.style-options,.color-options { display: flex; gap: 8px; }.style-options button,.color-options button { flex:0 0 auto;margin:0;padding:0;cursor:pointer;appearance:none; }.style-options button { width: 53px; height: 42px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(135deg,#202035 50%,#fff 50%); transition:transform .22s var(--ease),outline-color .22s ease,box-shadow .22s ease; }.style-options button:nth-child(2) { background: linear-gradient(135deg,#dbc7b6 50%,#fff8f2 50%); }.style-options button:nth-child(3) { background: linear-gradient(135deg,#d9efdf 50%,#f8fcf9 50%); }.style-options button.active { outline: 2px solid var(--builder-accent); outline-offset: 2px; box-shadow:0 7px 15px rgba(16,20,38,.12);transform:translateY(-1px); }.style-options button:focus-visible,.color-options button:focus-visible,.background-options > button:focus-visible { outline:3px solid rgba(81,71,229,.34);outline-offset:3px; }.color-options button { width: 25px; height: 25px; border:2px solid #fff; border-radius: 50%; background: #5147e5; box-shadow:0 0 0 1px transparent;transition:transform .2s var(--ease),box-shadow .2s ease; }.color-options button:nth-child(2){background:#c46d55}.color-options button:nth-child(3){background:#183a32}.color-options button:nth-child(4){background:#20202e}.color-options button.active { box-shadow:0 0 0 2px var(--builder-accent);transform:scale(1.08); }.builder-panel > button { width: 100%; margin-top: 48px; padding: 12px; border: 0; border-radius: 9px; color: #fff; background: var(--builder-accent); font-size: 10px; font-weight: 800; }
.builder-tryout { display:grid;grid-template-columns:34px 1fr;align-items:start;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid #ececf3; }.builder-tryout > span { display:grid;width:34px;height:34px;place-items:center;border-radius:50%;color:var(--builder-accent);background:#f1efff;font-size:13px;transition:color .3s ease; }.builder-tryout p,.builder-tryout b,.builder-tryout small { display:block;margin:0; }.builder-tryout b { color:var(--ink);font-size:10px;line-height:1.2; }.builder-tryout small { margin-top:4px;color:var(--muted);font-size:8px;line-height:1.45; }
.background-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.background-options > button { position: relative; display: block; width:100%; aspect-ratio: 1.18; overflow: hidden; margin:0;padding:0;cursor:pointer;appearance:none; border: 2px solid transparent; border-radius: 9px; background:#eee; opacity: .52; transform: scale(.94); transition: opacity .55s ease, transform .55s var(--ease), border-color .55s ease, box-shadow .55s ease; }
.background-options img { display: block; width: 100%; height: 100%; object-fit: cover; }
.background-options > button::before { content: ""; position: absolute; z-index: 2; right: 4px; bottom: 4px; left: 4px; height: 3px; border-radius: 999px; background: #fff; transform: scaleX(0); transform-origin: left; }
.background-options > button::after { content: "✓"; position: absolute; z-index: 3; top: 4px; right: 4px; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; color: #fff; background: var(--builder-accent); box-shadow: 0 3px 8px rgba(16,20,38,.24); font-size: 9px; font-weight: 900; opacity: 0; transform: scale(.55); transition: opacity .35s ease, transform .35s var(--ease); }
.background-options > button.active { border-color: var(--builder-accent); opacity: 1; transform: scale(1); box-shadow: 0 0 0 3px rgba(81,71,229,.13), 0 8px 18px rgba(16,20,38,.16); }
.background-options:not(.is-manual) > button.active::before { animation: siteBackgroundProgress 4.6s linear both; }
.background-options.is-manual > button.active::before { transform:scaleX(1); }
.background-options > button.active::after { opacity: 1; transform: scale(1); }
.site-preview { position: relative; min-height: 642px; overflow: hidden; border-radius: 21px 21px 0 0; color: #fff; background: #1f2032; box-shadow: 0 28px 60px rgba(49,39,25,.18); }.site-preview-media { position: absolute; z-index: 0; inset: 0; overflow: hidden; background: #1f2032; }.site-preview-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(17,18,31,.92) 0%,rgba(18,19,32,.78) 43%,rgba(18,19,32,.35) 76%,rgba(18,19,32,.42) 100%),linear-gradient(180deg,rgba(16,18,29,.24),rgba(16,18,29,.42)); }.site-preview-media img { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; opacity: 0; transform: scale(1.025); transition: opacity .85s ease; }.site-preview-media img.active { opacity: 1; animation: siteBackgroundDrift 4.6s ease-out both; }.site-preview nav,.site-preview main { position: relative; z-index: 2; }.site-preview nav { display: flex; align-items: center; justify-content: space-between; padding: 28px 34px; font-size: 10px; }.site-preview nav b { font-size: 18px; }.site-preview nav i { padding: 10px 12px; border-radius: 8px; color: var(--ink); background: var(--lemon); font-style: normal; font-weight: 800; }.site-preview main { max-width: 560px; padding: 95px 55px; }.site-preview main small { color: #e5e5eb; font-size: 10px; letter-spacing: .14em; }.site-preview main h3 { margin: 20px 0; font-size: 54px; line-height: 1; letter-spacing: -.06em; text-shadow: 0 2px 18px rgba(0,0,0,.18); }.site-preview main p { max-width: 420px; color: #e1e2e8; line-height: 1.6; }.site-preview main button { margin-top: 17px; padding: 14px 18px; border: 0; border-radius: 9px; color: var(--ink); background: #fff; font-weight: 800; }
@keyframes siteBackgroundProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes siteBackgroundDrift { from { transform: scale(1.025); } to { transform: scale(1.075); } }
.phone-preview { position: absolute; z-index: 5; right: 14px; bottom: -48px; display: flex; width: 205px; height: 445px; overflow: hidden; flex-direction: column; border: 7px solid #141522; border-radius: 34px; color: var(--ink); background: #fff; box-shadow: 0 30px 65px rgba(16,20,38,.24); transform: rotate(2.2deg); }
.phone-island { position: absolute; z-index: 10; top: 8px; left: 50%; width: 68px; height: 18px; border-radius: 999px; background: #11131f; box-shadow: 0 1px 0 rgba(255,255,255,.12); transform: translateX(-50%); }
.phone-booking-header { display: flex; min-height: 83px; align-items: flex-end; justify-content: space-between; padding: 36px 13px 13px; color: #fff; background: linear-gradient(135deg,#5147e5,#7260ed); }
.phone-booking-header b,.phone-booking-header small { display: block; }.phone-booking-header b { font-size: 11px; letter-spacing: -.02em; }.phone-booking-header small { margin-top: 3px; font-size: 7px; font-weight: 650; opacity: .86; }.phone-booking-header > i { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid rgba(255,255,255,.65); border-radius: 7px; font-size: 18px; font-style: normal; line-height: 1; }
.phone-booking-progress { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5,1fr); min-height: 56px; margin: 0; padding: 11px 8px 8px; border-bottom: 1px solid #e3e5ec; background: #fff; list-style: none; }
.phone-booking-progress::before { content: ""; position: absolute; z-index: -1; top: 20px; right: 22px; left: 22px; height: 1px; background: #d8dbe3; }.phone-booking-progress li { text-align: center; }.phone-booking-progress b { display: grid; width: 19px; height: 19px; margin: 0 auto; place-items: center; border: 1px solid #c8ccd5; border-radius: 50%; color: #777e8c; background: #fff; font-size: 7px; }.phone-booking-progress small { display: block; overflow: hidden; margin-top: 5px; color: #858b97; font-size: 5px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }.phone-booking-progress li.active b { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 0 0 3px rgba(81,71,229,.12); }.phone-booking-progress li.active small { color: var(--primary); }
.phone-booking-body { min-height: 0; flex: 1; overflow: hidden; padding: 15px 12px 10px; background: #fff; }.phone-booking-body h4 { margin: 0; font-size: 15px; letter-spacing: -.04em; }.phone-booking-body > p { margin: 5px 0 11px; color: #7d8492; font-size: 7px; }.phone-booking-filters { display: flex; gap: 6px; margin-bottom: 11px; }.phone-booking-filters span { padding: 6px 9px; border: 1px solid #d9dce4; border-radius: 8px; color: #5f6675; background: #fff; font-size: 7px; font-weight: 800; }.phone-booking-filters span.active { color: #fff; border-color: var(--primary); background: var(--primary); }
.phone-services { display: grid; gap: 7px; }.phone-services article { display: grid; grid-template-columns: 27px minmax(0,1fr) auto 18px; min-height: 53px; align-items: center; gap: 7px; padding: 8px; border: 1px solid #daddE5; border-radius: 10px; background: #fff; }.phone-services article:nth-child(n+3) { display: none; }.phone-services article > i { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; color: var(--primary); background: #f7f0ed; font-size: 10px; }.phone-services article span,.phone-services article span b,.phone-services article span small { display: block; min-width: 0; }.phone-services article span b { overflow: hidden; font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; }.phone-services article span small { margin-top: 3px; color: #7d8492; font-size: 6px; }.phone-services article strong { font-size: 8px; white-space: nowrap; }.phone-services article em { display: grid; width: 18px; height: 18px; place-items: center; border: 1px solid #d4d7df; border-radius: 50%; color: #737a88; font-size: 12px; font-style: normal; line-height: 1; }
.phone-booking-footer { margin-top: auto; padding: 9px 12px 12px; border-top: 1px solid #e0e2e8; background: #fbfbfc; }.phone-booking-footer > small { display: block; margin-bottom: 8px; color: #7c8391; font-size: 5.5px; text-align: center; }.phone-booking-footer > small i { margin-right: 3px; color: var(--primary); }.phone-booking-footer button { display: flex; width: 100%; min-height: 34px; align-items: center; justify-content: center; gap: 17px; margin: 0; padding: 8px 10px; border: 0; border-radius: 10px; color: #fff; background: var(--primary); font-size: 8px; font-weight: 850; }.phone-booking-footer button span { font-size: 12px; }
.web-builder-stage .site-preview nav i,.web-builder-stage .site-preview main button { color:#fff;background:var(--builder-accent);transition:background .3s ease; }
.phone-preview[data-phone-booking-preview] { --booking-accent:var(--builder-accent,#5147e5);transition:border-color .38s ease,border-radius .38s var(--ease),background .38s ease; }
.phone-preview[data-phone-booking-preview] .phone-booking-header { background:var(--booking-accent);transition:color .38s ease,background .38s ease; }
.phone-preview[data-phone-booking-preview] .phone-booking-progress li.active b { border-color:var(--booking-accent);background:var(--booking-accent); }
.phone-preview[data-phone-booking-preview] .phone-booking-progress li.active small,.phone-preview[data-phone-booking-preview] .phone-services article > i,.phone-preview[data-phone-booking-preview] .phone-booking-footer > small i { color:var(--booking-accent); }
.phone-preview[data-phone-booking-preview] .phone-booking-filters span.active { border-color:var(--booking-accent);background:var(--booking-accent); }
.phone-preview[data-phone-booking-preview] .phone-booking-footer button { background:var(--booking-accent); }
.phone-preview[data-booking-style="warm"] { background:#fff9f4; }
.phone-preview[data-booking-style="warm"] .phone-booking-progress,.phone-preview[data-booking-style="warm"] .phone-booking-body,.phone-preview[data-booking-style="warm"] .phone-booking-footer { background:#fff9f4; }
.phone-preview[data-booking-style="warm"] .phone-booking-body h4 { font-family:Georgia,serif;font-weight:700;letter-spacing:-.025em; }
.phone-preview[data-booking-style="warm"] .phone-booking-filters span { border-radius:999px; }
.phone-preview[data-booking-style="warm"] .phone-services article { border-color:#ead8ce;border-radius:16px;background:#fffdfa; }
.phone-preview[data-booking-style="warm"] .phone-services article > i { border-radius:50%;background:#f6e6de; }
.phone-preview[data-booking-style="natural"] { background:#f5faf7; }
.phone-preview[data-booking-style="natural"] .phone-booking-header { color:#183a32;background:#dcefe4; }
.phone-preview[data-booking-style="natural"] .phone-booking-header > i { border-color:rgba(24,58,50,.34); }
.phone-preview[data-booking-style="natural"] .phone-booking-progress,.phone-preview[data-booking-style="natural"] .phone-booking-body,.phone-preview[data-booking-style="natural"] .phone-booking-footer { background:#f5faf7; }
.phone-preview[data-booking-style="natural"] .phone-booking-progress b,.phone-preview[data-booking-style="natural"] .phone-booking-filters span,.phone-preview[data-booking-style="natural"] .phone-booking-footer button { border-radius:4px; }
.phone-preview[data-booking-style="natural"] .phone-services article { border-color:#cfe0d7;border-radius:4px;background:#fff; }
.phone-preview[data-booking-style="natural"] .phone-services article > i { border-radius:4px;background:#e4f1e9; }

.bento-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }.bento-card { position: relative; overflow: hidden; min-height: 460px; padding: 38px; border: 1px solid var(--line); border-radius: 30px; background: #fafbfe; }.bento-card h3 { max-width: 530px; margin: 0; font-size: 31px; line-height: 1.1; letter-spacing: -.045em; }.bento-card > div > p { max-width: 540px; color: var(--muted); line-height: 1.6; }.bento-wide { grid-column: span 2; min-height: 500px; }.bento-register { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 60px; background: #f6f4ff; }.receipt { max-width: 440px; justify-self: end; width: 100%; padding: 29px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-soft); transform: rotate(1.5deg); }.receipt header,.receipt p,.receipt > div { display: flex; justify-content: space-between; }.receipt header { padding-bottom: 18px; border-bottom: 1px dashed #ccd0dc; }.receipt header small { color: var(--muted); }.receipt p { margin: 18px 0; color: var(--muted); }.receipt p b { color: var(--ink); }.receipt > div { padding-top: 18px; border-top: 1px dashed #ccd0dc; }.receipt > div strong { font-size: 24px; }.receipt footer { margin-top: 23px; padding: 12px; border-radius: 10px; color: #087c51; background: var(--mint); text-align: center; font-weight: 750; }
.receipt-paper { position:relative;max-width:370px;padding:40px 31px 34px;border:0;border-radius:0;color:#242630;background:#fff;box-shadow:none;filter:drop-shadow(0 24px 28px rgba(49,43,89,.18));font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;transform:rotate(1.2deg);clip-path:polygon(0 10px,2.5% 0,5% 10px,7.5% 0,10% 10px,12.5% 0,15% 10px,17.5% 0,20% 10px,22.5% 0,25% 10px,27.5% 0,30% 10px,32.5% 0,35% 10px,37.5% 0,40% 10px,42.5% 0,45% 10px,47.5% 0,50% 10px,52.5% 0,55% 10px,57.5% 0,60% 10px,62.5% 0,65% 10px,67.5% 0,70% 10px,72.5% 0,75% 10px,77.5% 0,80% 10px,82.5% 0,85% 10px,87.5% 0,90% 10px,92.5% 0,95% 10px,97.5% 0,100% 10px,100% calc(100% - 10px),97.5% 100%,95% calc(100% - 10px),92.5% 100%,90% calc(100% - 10px),87.5% 100%,85% calc(100% - 10px),82.5% 100%,80% calc(100% - 10px),77.5% 100%,75% calc(100% - 10px),72.5% 100%,70% calc(100% - 10px),67.5% 100%,65% calc(100% - 10px),62.5% 100%,60% calc(100% - 10px),57.5% 100%,55% calc(100% - 10px),52.5% 100%,50% calc(100% - 10px),47.5% 100%,45% calc(100% - 10px),42.5% 100%,40% calc(100% - 10px),37.5% 100%,35% calc(100% - 10px),32.5% 100%,30% calc(100% - 10px),27.5% 100%,25% calc(100% - 10px),22.5% 100%,20% calc(100% - 10px),17.5% 100%,15% calc(100% - 10px),12.5% 100%,10% calc(100% - 10px),7.5% 100%,5% calc(100% - 10px),2.5% 100%,0 calc(100% - 10px));will-change:transform,opacity; }
.receipt-paper > div { display:block;padding-top:0;border-top:0; }.receipt-brand { text-align:center; }.receipt-brand > span { display:grid;width:35px;height:35px;margin:0 auto 9px;place-items:center;border:1px solid #2e3038;border-radius:50%;font-family:var(--font);font-size:10px;font-weight:900; }.receipt-brand b,.receipt-brand small { display:block; }.receipt-brand b { font-size:16px;letter-spacing:.16em; }.receipt-brand small { margin-top:5px;color:#73747c;font-size:8px; }.receipt-paper .receipt-meta { display:flex;justify-content:space-between;gap:15px;margin-top:22px;padding:13px 0;border:1px dashed #aeb0b7;border-width:1px 0; }.receipt-meta span:last-child { text-align:right; }.receipt-meta small,.receipt-meta b { display:block; }.receipt-meta small { color:#8a8b91;font-size:7px;text-transform:uppercase;letter-spacing:.12em; }.receipt-meta b { margin-top:4px;font-size:8px; }.receipt-paper .receipt-items { padding:7px 0 12px;border-bottom:1px dashed #aeb0b7; }.receipt-paper .receipt-items p { display:flex;justify-content:space-between;gap:16px;margin:12px 0;color:#34363d;font-size:9px; }.receipt-items p span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.receipt-items p small { color:#888a91;font-size:7px; }.receipt-paper .receipt-subtotal { display:grid;grid-template-columns:1fr auto;gap:7px 20px;padding:14px 0;border-bottom:1px dashed #aeb0b7;color:#777980;font-size:8px; }.receipt-subtotal b { color:#34363d;text-align:right; }.receipt-paper .receipt-total { display:flex;align-items:flex-end;justify-content:space-between;padding:17px 0 13px;border-bottom:2px solid #30323a; }.receipt-total span { font-size:12px;font-weight:900;letter-spacing:.12em; }.receipt-paper .receipt-total strong { font-size:27px;letter-spacing:-.06em; }.receipt-paper .receipt-payment { display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding:10px 11px;border:1px dashed #8ba998;background:#edf8f1;color:#167450;font-family:var(--font);font-size:9px; }.receipt-payment b { font-size:8px;letter-spacing:.08em; }.receipt-paper .receipt-barcode { margin-top:18px;text-align:center; }.receipt-barcode i { display:block;height:27px;background:repeating-linear-gradient(90deg,#202129 0 2px,transparent 2px 4px,#202129 4px 5px,transparent 5px 8px,#202129 8px 11px,transparent 11px 13px); }.receipt-barcode small { display:block;margin-top:5px;color:#777980;font-size:7px;letter-spacing:.18em; }.receipt-paper footer { margin:16px 0 0;padding:0;border-radius:0;color:#34363d;background:transparent;line-height:1.45;text-align:center; }.receipt-paper footer b,.receipt-paper footer small { display:block; }.receipt-paper footer b { font-size:9px;text-transform:uppercase;letter-spacing:.08em; }.receipt-paper footer small { margin-top:4px;color:#85868c;font-size:7px; }
.bento-register { height:520px;min-height:520px; }
.bento-card > .bento-description { max-width:620px;margin:16px 0 0;color:var(--muted);font-size:13px;line-height:1.55; }
.bento-card > .bento-description + .notification,.bento-card > .bento-description + .mini-chart { margin-top:24px; }
.receipt-print-stage { position:absolute;z-index:2;top:70px;right:38px;width:100%;max-width:394px; }
.receipt-paid { position:absolute;z-index:5;top:128px;left:50%;display:flex;min-width:245px;align-items:center;gap:14px;padding:18px 20px;border:1px solid #ccebdd;border-radius:18px;color:#183c30;background:#fff;box-shadow:0 22px 48px rgba(22,104,75,.17);opacity:0;transform:translateX(-50%) scale(.78);pointer-events:none; }
.receipt-paid > span { display:grid;flex:0 0 46px;width:46px;height:46px;place-items:center;border-radius:50%;color:#fff;background:#17a873;box-shadow:0 0 0 8px rgba(23,168,115,.1);font-size:20px;font-weight:900; }
.receipt-paid b,.receipt-paid small { display:block; }.receipt-paid b { font-size:18px;letter-spacing:-.025em; }.receipt-paid small { margin-top:4px;color:#718078;font-size:9px; }
.receipt-print-viewport { position:relative;padding:0 12px 28px;will-change:transform; }
.receipt-print-stage.receipt-print-ready .receipt-print-viewport { transform:translateY(calc(100% + 90px)) rotate(2.2deg);transition:transform 1.15s cubic-bezier(.18,.82,.24,1); }
.receipt-print-stage.receipt-print-ready.payment-confirmed .receipt-paid { animation:receiptPaid 1.4s .08s var(--ease) both; }
.receipt-print-stage.receipt-print-ready.receipt-visible .receipt-print-viewport { transform:translateY(0) rotate(0); }
@keyframes receiptPaid { 0% { opacity:0;transform:translateX(-50%) translateY(16px) scale(.78); } 24%,68% { opacity:1;transform:translateX(-50%) translateY(0) scale(1); } 100% { opacity:0;transform:translateX(-50%) translateY(-18px) scale(.96); } }
.bento-reminder { background: #f5fcf8; }.notification,.deposit { display: flex; align-items: center; justify-content: space-between; margin-top: 34px; padding: 18px; border: 1px solid #d7ece2; border-radius: 15px; background: #fff; box-shadow: 0 14px 34px rgba(15,83,58,.07); }.notification > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: #087c51; background: var(--mint); }.notification > div { flex: 1; padding-left: 12px; }.notification b,.notification small { display: block; }.notification small { margin-top: 3px; color: var(--muted); font-size: 11px; }.deposit { margin-left: 40px; margin-top: 13px; }.deposit span { color: var(--muted); }
.bento-chart { background: #fff8f1; }.mini-chart { margin-top: 34px; padding: 22px; border-radius: 18px; background: #fff; box-shadow: 0 14px 34px rgba(94,54,22,.08); }.mini-chart header span,.mini-chart header b { display: block; }.mini-chart header span { color: var(--muted); font-size: 11px; }.mini-chart header b { margin-top: 7px; font-size: 25px; }.mini-chart header em { color: #0b8c5a; font-size: 10px; font-style: normal; }.mini-chart > div { height: 115px; display: flex; align-items: flex-end; gap: 11px; margin-top: 20px; }.mini-chart i { flex: 1; height: var(--v); border-radius: 6px 6px 2px 2px; background: linear-gradient(#ffb895,#ffdbc8); }
.bento-marketing { display:grid;min-height:590px;grid-template-columns:minmax(0,.82fr) minmax(480px,1.18fr);align-items:center;gap:clamp(52px,6vw,86px);padding:58px;color:var(--ink);background:#f2f0ff; }
.marketing-copy .card-label { margin-bottom:22px;color:var(--primary); }
.bento-card .marketing-copy h3 { max-width:580px;font-size:clamp(48px,4.35vw,62px);line-height:.96;letter-spacing:-.06em; }
.bento-card .marketing-copy > p { max-width:500px;margin-top:26px;color:#62697b;font-size:16px;line-height:1.65; }
.marketing-status { display:inline-flex;align-items:center;gap:9px;margin-top:26px;padding:9px 11px;border:1px solid #d5e9df;border-radius:999px;color:#27644f;background:#f6fcf9;font-size:9px;font-weight:800; }
.marketing-status > i { width:7px;height:7px;border-radius:50%;background:#20a675;box-shadow:0 0 0 3px #d9f2e8; }
.notification-stage { overflow:visible; }
.marketing-notifications { display:grid;gap:16px;padding:10px 0; }
.marketing-notification { display:grid;width:92%;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:14px;min-height:104px;padding:17px 19px;border:1px solid rgba(98,88,169,.14);border-radius:18px;background:#fff;box-shadow:0 20px 44px rgba(46,39,102,.12);transition:transform .2s ease,border-color .2s ease; }
.notification-reminder { justify-self:start; }
.notification-email { width:96%;justify-self:end; }
.notification-review { width:88%;margin-right:5%;justify-self:end; }
.marketing-notification:hover { border-color:rgba(81,71,229,.34);transform:translateX(-4px); }
.notification-icon { display:grid;width:44px;height:44px;place-items:center;border-radius:13px;color:var(--primary);background:#ece9ff;font-size:15px; }
.notification-reminder .notification-icon { color:#b57017;background:#fff2d8; }
.notification-review .notification-icon { color:#13865e;background:#e1f5eb; }
.marketing-notification small,.marketing-notification b,.marketing-notification p { display:block; }
.marketing-notification small { color:#747b8d;font-size:7px;font-weight:850;letter-spacing:.12em; }
.marketing-notification small time { float:right;color:#999eaa;font-weight:700;letter-spacing:0;text-transform:none; }
.marketing-notification b { margin-top:6px;font-size:14px;letter-spacing:-.025em; }
.marketing-notification p { margin-top:4px;color:#747b8d;font-size:9px; }
.notification-email p { color:var(--primary);font-weight:750; }
.notification-email p i { margin-left:3px;font-style:normal; }
.notification-stars { display:flex;gap:4px;margin-top:7px;color:#d79524; }
.notification-stars i { font-size:11px;font-style:normal; }
.marketing-flow-ready .marketing-copy .card-label,.marketing-flow-ready .marketing-copy h3,.marketing-flow-ready .marketing-copy > p,.marketing-flow-ready .marketing-status { opacity:0;transform:translateY(16px); }
.marketing-flow-ready .notification-stage { opacity:0;transform:translateY(18px); }
.marketing-flow-ready .marketing-notification { opacity:0;transform:translateX(65px); }
.marketing-flow-ready.marketing-flow-active .marketing-copy .card-label,.marketing-flow-ready.marketing-flow-active .marketing-copy h3,.marketing-flow-ready.marketing-flow-active .marketing-copy > p,.marketing-flow-ready.marketing-flow-active .marketing-status,.marketing-flow-ready.marketing-flow-active .notification-stage,.marketing-flow-ready.marketing-flow-active .marketing-notification { opacity:1;transform:none; }
.marketing-flow-ready .marketing-copy .card-label { transition:opacity .55s var(--ease),transform .55s var(--ease); }
.marketing-flow-ready .marketing-copy h3 { transition:opacity .65s .08s var(--ease),transform .65s .08s var(--ease); }
.marketing-flow-ready .marketing-copy > p { transition:opacity .62s .16s var(--ease),transform .62s .16s var(--ease); }
.marketing-flow-ready .marketing-status { transition:opacity .55s .24s var(--ease),transform .55s .24s var(--ease); }
.marketing-flow-ready .notification-stage { transition:opacity .55s .18s var(--ease),transform .65s .18s var(--ease); }
.marketing-flow-ready .notification-reminder { transition:opacity .55s .42s var(--ease),transform .7s .42s var(--ease),border-color .2s ease; }
.marketing-flow-ready .notification-email { transition:opacity .55s .62s var(--ease),transform .7s .62s var(--ease),border-color .2s ease; }
.marketing-flow-ready .notification-review { transition:opacity .55s .82s var(--ease),transform .7s .82s var(--ease),border-color .2s ease; }
.marketing-flow-ready.marketing-flow-active .marketing-notification:hover { transform:translateX(-4px);transition-delay:0s;transition-duration:.2s; }

.bento-section { padding-bottom: 90px; }
.ai-wrap { padding: 0 0 52px; }
.ai-wrap > .ai-section { width: 100%; max-width: none; margin: 0; border-radius: 0; }
.ai-section { position: relative; overflow: hidden; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 80px; padding: 85px max(64px,calc((100vw - var(--container))/2 + 64px)); color: #fff; background: #29255f; }.ai-copy { position: relative; z-index: 2; }.ai-copy > p { color: #c2c4d9; }.ai-price { display: flex; align-items: center; gap: 15px; margin: 28px 0; }.ai-price b { font-size: 38px; }.ai-price span { color: #c2c4d9; font-size: 12px; line-height: 1.4; }.button-light { color: var(--ink); border-color: #fff; background: #fff; box-shadow: none; }.button-light:hover { color: var(--ink); background: var(--lemon); border-color: var(--lemon); }
.ai-demo { position: relative; z-index: 2; padding: 30px; border: 1px solid rgba(255,255,255,.15); border-radius: 27px; background: rgba(13,14,35,.55); box-shadow: 0 30px 60px rgba(0,0,0,.2); }.call-top { display: flex; align-items: center; gap: 13px; }.call-top > span { margin-left: auto; padding: 8px 10px; border-radius: 8px; color: #b9f7d8; background: rgba(39,183,116,.15); font-size: 11px; }.ai-orb { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; color: var(--ink); background: var(--lemon); font-weight: 900; }.call-top small,.call-top b { display: block; }.call-top small { color: #9499ad; font-size: 8px; letter-spacing: .12em; }.call-top b { margin-top: 4px; }.transcript { margin: 26px 0; }.transcript p { max-width: 84%; padding: 13px 16px; border-radius: 14px; font-size: 12px; line-height: 1.5; }.transcript .caller { margin-left: auto; background: #3b3b62; }.transcript .agent { background: #5d53d6; }.wave { height: 36px; display: flex; align-items: center; justify-content: center; gap: 5px; }.wave i { width: 3px; height: calc(8px + (var(--n,1) * 3px)); border-radius: 3px; background: #8d84f6; animation: wave 1.1s ease-in-out infinite alternate; }.wave i:nth-child(2n){height:24px;animation-delay:-.3s}.wave i:nth-child(3n){height:14px;animation-delay:-.7s}.call-result { display: flex; align-items: center; gap: 12px; margin-top: 23px; padding: 15px; border-radius: 14px; color: var(--ink); background: #fff; }.call-result > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: #087c51; background: var(--mint); }.call-result small,.call-result b { display: block; }.call-result small { color: #0b8c5a; font-size: 8px; font-weight: 850; }.call-result b { margin-top: 4px; font-size: 11px; }@keyframes wave{to{transform:scaleY(.45)}}

.switch-section { padding-top: 52px; }
.switch-card { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,.8fr) minmax(560px,1.2fr); align-items: center; gap: clamp(45px,6vw,88px); overflow: hidden; padding: 72px; border: 1px solid #e4e0fa; border-radius: 38px; background: linear-gradient(135deg,#f7f5ff 0%,#eeeaff 58%,#f8f7ff 100%); }
.switch-copy { position: relative; z-index: 2; }
.switch-card h2 { max-width: 560px; font-size: clamp(40px,3.8vw,57px); }
.switch-copy > p:not(.kicker) { max-width: 555px; margin: 24px 0 0; }
.switch-benefits { display: grid; gap: 12px; margin: 29px 0 30px; padding: 0; list-style: none; }
.switch-benefits li { display: flex; align-items: center; gap: 11px; color: #374056; font-size: 13px; font-weight: 700; }
.switch-benefits li > span { display: grid; flex: 0 0 25px; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: #087d56; background: #dff7ec; font-size: 10px; font-weight: 900; }
.switch-visual { position: relative; z-index: 2; min-width: 0; padding: 30px; border: 1px solid rgba(81,71,229,.14); border-radius: 28px; background: rgba(255,255,255,.96); box-shadow: 0 24px 55px rgba(53,44,139,.1); }
.switch-visual-head { display: flex; min-height: 50px; align-items: center; justify-content: space-between; gap: 20px; }
.switch-visual-head div > small,.switch-visual-head div > b { display: block; }
.switch-visual-head div > small { margin-bottom: 5px; color: var(--primary); font-size: 8px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.switch-visual-head div > b { font-size: 18px; letter-spacing: -.025em; }
.switch-visual-head > strong { padding: 9px 11px; border-radius: 12px; color: #087d56; background: #e5f8ef; font-size: 17px; letter-spacing: -.035em; }
.switch-visual-head > strong small { display: block; margin-top: 2px; font-size: 6px; letter-spacing: 0; text-align: center; }
.migration-timeline { position:relative;display:grid;gap:11px;margin-top:24px; }
.migration-line { position:absolute;z-index:0;top:42px;bottom:42px;left:43px;width:1px;background:#b8b2ec;transform-origin:top; }
.migration-step { position:relative;z-index:1;display:grid;min-height:92px;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:14px;padding:15px 17px;border:1px solid #dedaf8;border-radius:17px;background:#f6f4ff; }
.migration-review { border-color:#f0dfbd;background:#fff9ed; }
.migration-live { border-color:#cce6da;background:#edf8f3; }
.migration-step-icon { display:grid;width:48px;height:48px;place-items:center;border-radius:14px;color:var(--primary);background:#fff;font-size:14px; }
.migration-review .migration-step-icon { color:#bc7d12; }.migration-live .migration-step-icon { color:#12835c; }
.migration-step small,.migration-step b,.migration-step p { display:block; }
.migration-step small { color:#7d8493;font-size:7px;font-weight:850;letter-spacing:.12em; }
.migration-step b { margin-top:4px;font-size:14px;letter-spacing:-.025em; }
.migration-step p { margin:3px 0 0;color:#747b8b;font-size:8px;line-height:1.4; }
.migration-step > em { padding:7px 9px;border-radius:999px;color:#625ac3;background:#fff;font-size:7px;font-style:normal;font-weight:800;white-space:nowrap; }
.migration-review > em { color:#9b6f1c; }.migration-live > em { color:#117d58; }
.migration-ready { display:grid;grid-template-columns:43px minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:14px;padding:15px 17px;border-radius:17px;color:#fff;background:var(--primary); }
.migration-ready > span { display:grid;width:43px;height:43px;place-items:center;border-radius:13px;background:#fff; }
.migration-ready img { width:24px;height:24px;object-fit:contain; }
.migration-ready small,.migration-ready b { display:block; }.migration-ready small { color:#d9d6ff;font-size:7px;font-weight:850;letter-spacing:.12em; }.migration-ready b { margin-top:4px;font-size:14px; }
.migration-ready > strong { display:flex;align-items:center;gap:7px;font-size:8px;white-space:nowrap; }
.migration-ready > strong i { display:grid;width:21px;height:21px;place-items:center;border-radius:50%;color:#117d58;background:#dff7ec;font-size:7px;font-style:normal; }
.switch-visual > .switch-assurance { margin:15px 0 0;color:#697184;font-size:8px;line-height:1.45;text-align:center; }.switch-assurance > span { margin-right:5px;color:#0fa66f;font-size:7px; }
.switch-card:not(.visible) .migration-line { transform:scaleY(0); }.switch-card.visible .migration-line { transform:scaleY(1);transition:transform .8s .25s ease-out; }
.switch-card:not(.visible) .migration-step,.switch-card:not(.visible) .migration-ready { opacity:0;transform:translateX(24px); }
.switch-card.visible .migration-step,.switch-card.visible .migration-ready { opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease); }
.switch-card.visible .migration-upload { transition-delay:.18s; }.switch-card.visible .migration-review { transition-delay:.32s; }.switch-card.visible .migration-live { transition-delay:.46s; }.switch-card.visible .migration-ready { transition-delay:.62s; }

.pricing-preview { background: var(--soft); }.price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 70px; }.price-card { position: relative; display:flex; flex-direction:column; padding: 38px; border: 1px solid var(--line); border-radius: 27px; background: #fff; }.price-card.featured { border: 2px solid var(--primary); box-shadow: 0 20px 55px rgba(81,71,229,.13); transform: translateY(-14px); }.popular { position: absolute; left: 32px; top: -16px; padding: 9px 14px; border-radius: 999px; color: #fff; background: var(--primary); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }.price-card > p { margin: 0 0 15px; color: var(--primary); font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }.price-card h3 { margin: 0; font-size: 31px; }.price { display: flex; align-items: center; margin: 37px 0; }.price sup { align-self: flex-start; margin-top: 12px; font-size: 21px; font-weight: 850; }.price > b { font-size: 70px; line-height: 1; letter-spacing: -.07em; }.price > span { margin-left: 13px; color: var(--muted); font-size: 12px; line-height: 1.5; }.price-card ul { flex:1; min-height:150px; margin:0 0 30px; padding:0; list-style:none; }.price-card li { margin: 13px 0; color: #3f485d; font-size: 14px; }.price-card li::before { content:"✓"; margin-right: 10px; color: #0da766; font-weight: 900; }.price-card .button { width: 100%; }.price-card-note { display:block;margin-top:18px;color:var(--primary);font-size:11px;font-weight:800; }.button-outline { color: var(--ink); border-color: var(--line); background: #fff; box-shadow: none; }.button-outline:hover { color:#fff;border-color:var(--primary); }
.ai-addon-bar { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 35px; margin-top: 28px; padding: 24px 28px; border: 1px solid #dddff0; border-radius: 19px; background: #fff; }.ai-addon-bar > div { display: flex; align-items: center; gap: 15px; }.ai-addon-bar > div > span { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 13px; color:#fff;background:var(--ink);font-weight:850; }.ai-addon-bar b,.ai-addon-bar small { display:block; }.ai-addon-bar small { margin-top:4px;color:var(--muted); }.ai-addon-bar > strong { font-size:22px; }.ai-addon-bar > strong small { display:inline;font-size:11px;color:var(--muted); }.ai-addon-bar > a { color:var(--primary);font-weight:800; }

.faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; align-items: start; gap: 100px; }.faq-layout .section-heading { position: sticky; top: 120px; }.faq-list details { border-top: 1px solid var(--line); }.faq-list details:last-child { border-bottom: 1px solid var(--line); }.faq-list summary { display: flex; align-items: center; justify-content: space-between; padding: 27px 0; cursor: pointer; font-size: 18px; font-weight: 750; list-style: none; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary span { display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:var(--soft);transition:transform .2s; }.faq-list details[open] summary span { transform:rotate(45deg); }.faq-list details p { max-width: 680px; margin: -4px 0 28px; color:var(--muted);line-height:1.65; }
.final-section { padding:30px 0 110px; }
.final-cta { position:relative;overflow:hidden;padding:clamp(52px,5vw,72px) 30px;border:1px solid rgba(81,71,229,.12);border-radius:30px;color:var(--ink);background:#f5f4ff;text-align:center; }
.final-cta::before { content:none; }
.final-cta-copy { position:relative;z-index:2;max-width:820px;margin-inline:auto; }
.final-cta .kicker { margin-bottom:17px; }
.final-cta h2 { max-width:820px;margin-inline:auto;font-size:clamp(48px,5vw,70px);line-height:.98; }
.final-cta-copy > p:not(.kicker) { max-width:660px;margin:21px auto 0;color:var(--muted);font-size:18px;line-height:1.6; }
.final-actions { display:flex;flex-wrap:nowrap;justify-content:center;gap:12px;margin-top:28px; }
.final-actions .button { gap:15px;padding-inline:19px;font-size:14px; }
.final-actions .button-ghost { color:var(--ink);border-color:rgba(16,20,38,.15);background:rgba(255,255,255,.7); }
.button-dark-ghost { color:#fff;border-color:rgba(255,255,255,.32);background:transparent;box-shadow:none; }.button-dark-ghost:hover { color:#fff;background:rgba(255,255,255,.1); }

.site-footer { padding:0 0 25px;color:#fff;background:var(--ink); }.site-footer > .footer-main { padding-top:90px; }.footer-main { display:grid;grid-template-columns:1fr 1.4fr;gap:90px;padding-bottom:70px; }.brand-light { color:#fff; }.footer-brand h2 { margin:38px 0 18px;font-size:42px;line-height:1.05;letter-spacing:-.05em; }.footer-brand p { max-width:330px;color:#999fb0;line-height:1.6; }.footer-links { display:grid;grid-template-columns:repeat(3,1fr);gap:45px; }.footer-links h3 { margin:0 0 22px;color:#fff;font-size:13px; }.footer-links a { display:block;margin:13px 0;color:#9da3b4;font-size:14px;transition:color .2s; }.footer-links a:hover { color:#fff; }.footer-bottom { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-top:24px;border-top:1px solid #2d3244;color:#8e95a7;font-size:12px; }.footer-bottom .status { color:#c6cad4; }.status i { display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#18b974;box-shadow:0 0 0 4px rgba(24,185,116,.1); }.footer-bottom > div { justify-self:end;display:flex;gap:20px; }

.inner-page .site-header { background:rgba(255,255,255,.9);border-bottom:1px solid rgba(223,227,238,.75);backdrop-filter:blur(16px); }
.page-hero { position:relative;overflow:hidden;padding:190px 0 120px;background:linear-gradient(180deg,#f7f6ff,#fff); }.page-hero .container { position:relative;z-index:2; }.page-hero.centered { text-align:center; }.page-hero.centered .page-lead { margin-inline:auto; }.page-hero h1 { max-width:1000px;margin:0;font-size:clamp(54px,6vw,86px);line-height:.98;letter-spacing:-.065em; }.page-hero.centered h1 { margin-inline:auto; }.page-hero h1 em { color:var(--primary);font-style:normal; }.page-lead { max-width:720px;margin:28px 0 0;color:var(--muted);font-size:21px;line-height:1.62; }.page-hero-actions { display:flex;gap:13px;margin-top:34px; }.page-hero.centered .page-hero-actions { justify-content:center; }.page-hero .hero-orb-one { top:120px; }.page-hero .hero-orb-two { top:100px; }
.page-band { padding:34px 0;color:#fff;background:var(--ink); }.page-band .container { display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap; }.page-band span { color:#c3c7d2;font-size:13px;font-weight:700; }.page-band i { color:#756cf3;font-style:normal; }
.content-section { padding:125px 0; }.content-section.tint { background:var(--soft); }.content-split { display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px; }.content-copy h2 { margin:0;font-size:clamp(40px,4vw,60px);line-height:1.04;letter-spacing:-.055em; }.content-copy > p { color:var(--muted);font-size:18px;line-height:1.65; }.content-copy .check-list { margin-bottom:35px; }
.feature-index { display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:65px; }.feature-tile { position:relative;overflow:hidden;min-height:330px;padding:30px;border:1px solid var(--line);border-radius:25px;background:#fff;transition:transform .25s var(--ease),box-shadow .25s; }.feature-tile:hover { transform:translateY(-6px);box-shadow:var(--shadow-soft); }.feature-tile:nth-child(3n+2){background:#f6f4ff}.feature-tile:nth-child(3n){background:#f4fbf7}.feature-tile .tile-icon { display:grid;width:46px;height:46px;place-items:center;border-radius:14px;color:var(--primary);background:var(--lavender);font-size:20px;font-weight:850; }.feature-tile h3 { margin:65px 0 13px;font-size:25px;letter-spacing:-.04em; }.feature-tile p { margin:0;color:var(--muted);line-height:1.55; }.feature-tile a { position:absolute;left:30px;bottom:27px;color:var(--primary);font-weight:800; }
.product-map { display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:55px; }.product-map article { padding:25px;border:1px solid var(--line);border-radius:20px;background:#fff; }.product-map span { color:var(--primary);font-size:11px;font-weight:850; }.product-map h3 { margin:23px 0 9px;font-size:19px; }.product-map p { margin:0;color:var(--muted);font-size:13px;line-height:1.5; }
.audience-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:65px; }.audience-card { position:relative;overflow:hidden;min-height:400px;padding:40px;border:1px solid var(--line);border-radius:30px;background:#fafaff; }.audience-card:nth-child(2){background:#f5fbf8}.audience-card:nth-child(3){background:#fff9f0}.audience-card:nth-child(4){background:#fff5f5}.audience-card h3 { margin:0;font-size:34px;letter-spacing:-.045em; }.audience-card p { max-width:430px;color:var(--muted);line-height:1.6; }.audience-card a { position:absolute;left:40px;bottom:35px;color:var(--primary);font-weight:800; }.audience-card .audience-mark { position:absolute;right:30px;bottom:25px;font-size:110px;line-height:1;color:rgba(81,71,229,.12);font-weight:900; }
.comparison-wrap { overflow:auto;margin-top:70px;border:1px solid var(--line);border-radius:24px;background:#fff; }.comparison-table { width:100%;min-width:800px;border-collapse:collapse; }.comparison-table th,.comparison-table td { padding:18px 24px;border-bottom:1px solid #eceef4;text-align:center; }.comparison-table th:first-child,.comparison-table td:first-child { text-align:left; }.comparison-table thead th { padding-top:25px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em; }.comparison-table tbody th { font-size:14px; }.comparison-table td { color:#0b9d65;font-weight:850; }.comparison-table td.muted { color:#a1a7b4; }
.addon-panel { display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:70px;padding:65px;border-radius:32px;color:#fff;background:#29255f; }.addon-panel h2 { margin:0;font-size:50px;line-height:1.04;letter-spacing:-.055em; }.addon-panel p { color:#c5c6da;line-height:1.6; }.addon-price { padding:30px;border:1px solid rgba(255,255,255,.15);border-radius:22px;background:rgba(12,13,35,.4); }.addon-price strong { display:block;font-size:60px;letter-spacing:-.06em; }.addon-price ul { margin:24px 0;padding:0;list-style:none; }.addon-price li { margin:12px 0;color:#d5d6e4; }.addon-price li::before { content:"✓";margin-right:9px;color:#68dba8; }
.form-section { padding:180px 0 110px;background:linear-gradient(180deg,#f7f6ff,#fff); }.form-layout { display:grid;grid-template-columns:.8fr 1.2fr;align-items:start;gap:90px; }.form-copy h1 { margin:0;font-size:clamp(52px,5.8vw,78px);line-height:1;letter-spacing:-.065em; }.form-copy > p { color:var(--muted);font-size:19px;line-height:1.65; }.form-benefits { margin-top:35px; }.form-benefits div { display:flex;align-items:flex-start;gap:13px;margin:20px 0; }.form-benefits span { display:grid;flex:0 0 30px;width:30px;height:30px;place-items:center;border-radius:9px;color:#087c51;background:var(--mint);font-weight:850; }.form-benefits b,.form-benefits small { display:block; }.form-benefits small { margin-top:4px;color:var(--muted);line-height:1.45; }.form-card { padding:42px;border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:var(--shadow-soft); }.form-card h2 { margin:0 0 8px;font-size:28px; }.form-card > p { margin:0 0 30px;color:var(--muted); }.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:18px; }.field { display:flex;flex-direction:column;gap:8px; }.field.full { grid-column:span 2; }.field label { font-size:12px;font-weight:800; }.field input,.field select,.field textarea { width:100%;padding:14px 15px;border:1px solid #d7dae5;border-radius:11px;color:var(--ink);background:#fff;outline:0;transition:border .2s,box-shadow .2s; }.field textarea { min-height:125px;resize:vertical; }.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--primary);box-shadow:0 0 0 4px rgba(81,71,229,.1); }.form-card .button { width:100%;margin-top:22px;border:0; }.form-note { margin-top:14px;color:var(--muted);font-size:11px;text-align:center;line-height:1.5; }
.about-quote { max-width:980px;margin:0 auto;text-align:center; }.about-quote blockquote { margin:0;font-size:clamp(36px,4vw,58px);line-height:1.15;letter-spacing:-.045em;font-weight:800; }.about-quote p { margin-top:25px;color:var(--muted); }.values-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:60px; }.value-card { min-height:280px;padding:34px;border:1px solid var(--line);border-radius:24px;background:#fff; }.value-card span { color:var(--primary);font-size:12px;font-weight:850; }.value-card h3 { margin:60px 0 12px;font-size:24px; }.value-card p { color:var(--muted);line-height:1.6; }
.detail-hero { display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:70px; }.detail-visual { min-height:500px;padding:35px;border:1px solid rgba(81,71,229,.14);border-radius:32px;background:#eeecff; }.detail-visual.dark { color:#fff;background:#29255f; }.detail-visual .calendar-stage { padding:16px; }.detail-visual .calendar-shell { min-height:350px;grid-template-columns:50px repeat(3,1fr); }.detail-visual .calendar-day:nth-child(n+5){display:none}.detail-visual .calendar-times { grid-template-rows:60px repeat(5,1fr); }.detail-visual .calendar-day header { height:60px; }.detail-visual .slot { top:calc(60px + var(--top)*2.6);height:calc(var(--size)*2); }.detail-visual .ai-demo { margin-top:35px; }
.cta-band { padding:80px 0;color:#fff;background:var(--primary); }.cta-band .container { display:flex;align-items:center;justify-content:space-between;gap:40px; }.cta-band h2 { margin:0;font-size:44px;letter-spacing:-.05em; }.cta-band p { color:#d9d7ff; }.cta-band .button { flex:0 0 auto; }

.review-moment { padding:80px 0 42px;background:#fff; }.review-moment .container { max-width:980px;text-align:center; }.review-demo-label { display:inline-flex;padding:6px 9px;border:1px solid #d8dbe6;border-radius:999px;color:var(--muted);background:rgba(255,255,255,.7);font-size:8px;font-weight:850;letter-spacing:.12em;text-transform:uppercase; }.review-stars { margin:18px 0;color:#f0a91d;font-size:15px;letter-spacing:.12em; }.review-moment blockquote { margin:0;font-size:clamp(30px,3.5vw,50px);line-height:1.2;letter-spacing:-.045em;font-weight:750; }.review-moment p { margin-top:25px; }.review-moment p b,.review-moment p span { display:block; }.review-moment p span { margin-top:5px;color:var(--muted);font-size:11px; }
.ai-actions { display:flex;flex-wrap:nowrap;gap:10px; }.ai-actions .button { min-height:54px;gap:12px;padding-inline:18px;border:0;font-size:clamp(12px,1.15vw,15px);white-space:nowrap; }.ai-actions button:disabled { cursor:default;opacity:.78; }.ai-demo.is-playing .caller { animation:callBubble .65s var(--ease) both; }.ai-demo.is-playing .agent { animation:callBubble .7s 1.8s var(--ease) both; }.ai-demo.is-playing .wave { animation:callWave 1.7s 3.1s ease both; }.ai-demo.is-playing .call-result { animation:resultPop .7s 4.7s var(--ease) both; }.ai-demo.is-playing .call-top > span { animation:pulseTime 1s ease 4; }@keyframes callBubble{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}@keyframes callWave{0%{opacity:.2;transform:scaleX(.3)}100%{opacity:1;transform:none}}@keyframes resultPop{from{opacity:0;transform:translateY(15px) scale(.96)}to{opacity:1;transform:none}}@keyframes pulseTime{50%{transform:scale(1.08);background:rgba(39,183,116,.28)}}

.route-review { padding:85px 0;background:#f7f6ff;text-align:center; }
.route-review .container { max-width:900px; }
.route-review blockquote { margin:0;font-size:clamp(28px,3vw,43px);line-height:1.25;letter-spacing:-.04em;font-weight:750; }
.route-review p b,.route-review p span { display:block; }
.route-review p span { margin-top:5px;color:var(--muted);font-size:10px; }

/* Shared inner-page design system: the homepage remains the visual source of truth. */
.inner-page { --page-accent:var(--primary);--page-accent-soft:#eeecff;--page-surface:#f7f6ff; }
.inner-page[data-route*="/betalingen"] { --page-accent:#12835c;--page-accent-soft:#dff7ec;--page-surface:#f3fbf7; }
.inner-page[data-route*="/automatiseringen"] { --page-accent:#7a4ed8;--page-accent-soft:#f0e8ff;--page-surface:#f8f4ff; }
.inner-page[data-route*="/website"] { --page-accent:#c46d55;--page-accent-soft:#ffe7dc;--page-surface:#fff8f2; }
.inner-page[data-route*="/klantenbeheer"] { --page-accent:#246da8;--page-accent-soft:#e1effb;--page-surface:#f4f9fd; }
.inner-page .site-nav a[aria-current="page"]::after { right:0; }
.inner-page .site-nav a[aria-current="page"] { color:var(--primary); }
.inner-page .page-hero { isolation:isolate;background:linear-gradient(180deg,var(--page-surface) 0%,#fff 100%); }
.inner-page .page-hero::before { content:"";position:absolute;z-index:0;inset:0;opacity:.32;pointer-events:none;background-image:radial-gradient(circle,rgba(81,71,229,.2) 1px,transparent 1.2px);background-size:34px 34px;mask-image:linear-gradient(90deg,#000,transparent 35%,transparent 65%,#000);-webkit-mask-image:linear-gradient(90deg,#000,transparent 35%,transparent 65%,#000); }
.inner-page .page-hero h1 em,.inner-page .kicker,.inner-page .text-link { color:var(--page-accent); }
.inner-page .eyebrow { color:var(--page-accent);border-color:color-mix(in srgb,var(--page-accent),transparent 70%); }
.inner-page .eyebrow > span { background:var(--page-accent); }
.inner-page .content-section { padding:104px 0; }
.inner-page .content-section + .content-section:not(.tint) { border-top:1px solid rgba(223,227,238,.72); }
.inner-page .section-heading > p:last-child { max-width:720px; }

.inner-page .feature-index { grid-template-columns:repeat(12,minmax(0,1fr));gap:18px; }
.inner-page .feature-tile { grid-column:span 4;min-height:300px;border-radius:20px; }
.inner-page .feature-tile:nth-child(6n+1),.inner-page .feature-tile:nth-child(6n+5) { grid-column:span 7; }
.inner-page .feature-tile:nth-child(6n+2),.inner-page .feature-tile:nth-child(6n+4) { grid-column:span 5; }
.inner-page .feature-tile:nth-child(6n+3),.inner-page .feature-tile:nth-child(6n+6) { grid-column:span 6; }
.inner-page .feature-index:has(> :nth-child(3):last-child) > :nth-child(1) { grid-column:span 5; }
.inner-page .feature-index:has(> :nth-child(3):last-child) > :nth-child(2) { grid-column:span 7; }
.inner-page .feature-index:has(> :nth-child(3):last-child) > :nth-child(3) { grid-column:span 12;min-height:250px; }
.inner-page .feature-tile:nth-child(4n+1) { background:#fff; }
.inner-page .feature-tile:nth-child(4n+2) { background:#f3f1ff; }
.inner-page .feature-tile:nth-child(4n+3) { background:#f2faf6; }
.inner-page .feature-tile:nth-child(4n) { background:#fff7f1; }
.inner-page .feature-tile .tile-icon { color:var(--page-accent);background:var(--page-accent-soft); }
.inner-page .feature-tile h3 { margin-top:48px; }

.inner-page .product-map { position:relative;gap:0;border-top:1px solid var(--line); }
.inner-page .product-map article { position:relative;padding:34px 24px 24px;border:0;border-radius:0;background:transparent; }
.inner-page .product-map article::before { content:"";position:absolute;top:-5px;left:24px;width:9px;height:9px;border-radius:50%;background:var(--page-accent);box-shadow:0 0 0 7px var(--page-accent-soft); }
.inner-page .product-map article + article { border-left:1px solid var(--line); }

.feature-story { display:grid;grid-template-columns:minmax(0,.82fr) minmax(520px,1.18fr);align-items:center;gap:clamp(55px,7vw,105px); }
.feature-story.reverse { grid-template-columns:minmax(520px,1.18fr) minmax(0,.82fr); }
.feature-story.reverse > .story-copy { order:2; }
.story-copy h2 { max-width:620px;margin:0;font-size:clamp(44px,4.5vw,68px);line-height:1;letter-spacing:-.06em; }
.story-copy > p { max-width:570px;color:var(--muted);font-size:18px;line-height:1.65; }
.story-proof { display:flex;flex-wrap:wrap;gap:10px;margin-top:27px; }
.story-proof span { padding:9px 12px;border:1px solid var(--line);border-radius:999px;color:#536078;background:#fff;font-size:11px;font-weight:750; }
.interface-panel { position:relative;overflow:hidden;min-height:520px;padding:34px;border:1px solid color-mix(in srgb,var(--page-accent),transparent 82%);border-radius:28px;background:var(--page-accent-soft); }
.interface-window { overflow:hidden;border:1px solid rgba(16,20,38,.1);border-radius:18px;background:#fff;box-shadow:0 28px 70px rgba(25,28,54,.12); }
.interface-topbar { display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid #eceef4;color:#788196;font-size:10px;font-weight:750; }
.interface-topbar b { color:var(--ink);font-size:12px; }
.interface-dots { display:flex;gap:5px; }.interface-dots i { width:6px;height:6px;border-radius:50%;background:#d5d8e2; }
.ui-list { display:grid;gap:10px;padding:18px; }
.ui-row { display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;padding:14px;border:1px solid #e7e9f0;background:#fff;transition:transform .25s var(--ease),border-color .25s; }
.ui-row:hover { transform:translateX(4px);border-color:var(--page-accent); }
.ui-row > span { display:grid;width:38px;height:38px;place-items:center;border-radius:11px;color:var(--page-accent);background:var(--page-accent-soft); }
.ui-row b,.ui-row small { display:block; }.ui-row b { font-size:12px; }.ui-row small { margin-top:4px;color:var(--muted);font-size:9px; }.ui-row strong { font-size:11px;white-space:nowrap; }
.floating-status { position:absolute;right:18px;bottom:20px;display:flex;align-items:center;gap:10px;padding:13px 16px;border:1px solid #caeadb;border-radius:14px;color:#17694e;background:#fff;box-shadow:0 18px 44px rgba(16,20,38,.12);font-size:11px;font-weight:800; }
.floating-status > i { display:grid;width:27px;height:27px;place-items:center;border-radius:50%;color:#fff;background:#19a874;font-style:normal; }

.flow-line { display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:52px;border-block:1px solid var(--line); }
.flow-step { position:relative;padding:32px 26px; }.flow-step + .flow-step { border-left:1px solid var(--line); }
.flow-step > span { display:grid;width:32px;height:32px;place-items:center;border-radius:10px;color:var(--page-accent);background:var(--page-accent-soft);font-size:11px;font-weight:900; }
.flow-step h3 { margin:25px 0 9px;font-size:20px; }.flow-step p { margin:0;color:var(--muted);font-size:13px;line-height:1.55; }

.demo-tabs { display:flex;gap:7px;padding:8px;border:1px solid var(--line);border-radius:14px;background:#fff; }
.demo-tabs button { flex:1;min-height:42px;padding:0 14px;border:0;border-radius:9px;color:var(--muted);background:transparent;cursor:pointer;font-size:11px;font-weight:800; }
.demo-tabs button.active { color:#fff;background:var(--page-accent); }
.tab-scene { display:none; }.tab-scene.active { display:block;animation:tabSceneIn .42s var(--ease) both; }
@keyframes tabSceneIn { from { opacity:0;transform:translateY(8px); } to { opacity:1;transform:none; } }

.automation-stage { min-height:560px;background:#171b2b; }
.automation-stage .demo-tabs { position:relative;z-index:3;border-color:#30354a;background:#202537; }
.automation-stage .demo-tabs button { color:#aeb4c5; }.automation-stage .demo-tabs button.active { color:#fff;background:var(--page-accent); }
.notification-cloud { position:relative;min-height:420px;margin-top:18px; }
.floating-note { position:absolute;display:grid;grid-template-columns:42px 1fr;gap:13px;width:min(88%,430px);padding:18px;border:1px solid #34394e;border-radius:18px;color:#fff;background:#23283b;box-shadow:0 24px 55px rgba(0,0,0,.22); }
.floating-note:nth-child(1) { top:18px;left:0; }.floating-note:nth-child(2) { top:145px;right:0; }.floating-note:nth-child(3) { top:278px;left:9%; }
.floating-note > span { display:grid;width:42px;height:42px;place-items:center;border-radius:13px;color:#b7afff;background:#302d58; }
.floating-note b,.floating-note small { display:block; }.floating-note small { margin-top:5px;color:#aeb4c5;font-size:10px;line-height:1.45; }
.floating-note em { position:absolute;top:13px;right:13px;color:#63d8a3;font-size:8px;font-style:normal;font-weight:850;text-transform:uppercase; }
.tab-scene.active .floating-note { animation:noteIn .55s var(--ease) both; }.tab-scene.active .floating-note:nth-child(2){animation-delay:.12s}.tab-scene.active .floating-note:nth-child(3){animation-delay:.24s}
@keyframes noteIn { from { opacity:0;transform:translateY(14px); } to { opacity:1;transform:none; } }

.payment-terminal { padding:26px; }.payment-total { padding:26px;border-bottom:1px dashed #cdd2dd;text-align:center; }.payment-total small,.payment-total strong { display:block; }.payment-total small { color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em; }.payment-total strong { margin-top:9px;font-size:50px;letter-spacing:-.07em; }
.pay-methods { display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:20px; }.pay-methods span { padding:13px 8px;border:1px solid var(--line);border-radius:10px;text-align:center;font-size:10px;font-weight:800; }.pay-methods span.active { color:#fff;border-color:var(--page-accent);background:var(--page-accent); }
.pay-success { margin:0 20px 20px;padding:16px;border:1px solid #c9eadb;border-radius:12px;color:#17694e;background:#effaf5;text-align:center;font-size:12px;font-weight:850; }

.website-canvas { padding:22px;background:#eee8df; }.website-toolbar { display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;padding:13px 15px;border-radius:12px;background:#fff;font-size:10px; }.website-swatches { display:flex;gap:7px; }.website-swatches i { width:18px;height:18px;border:2px solid #fff;border-radius:50%;background:#5147e5;box-shadow:0 0 0 1px #dfe3ee; }.website-swatches i:nth-child(2){background:#c46d55}.website-swatches i:nth-child(3){background:#183a32}.site-mini { min-height:365px;padding:28px;color:#fff;background:linear-gradient(115deg,rgba(18,20,36,.93),rgba(18,20,36,.38)),url('../images/salon-warm.webp') center/cover; }.site-mini nav { display:flex;justify-content:space-between;font-size:9px; }.site-mini h3 { max-width:390px;margin:105px 0 12px;font-size:42px;line-height:.95;letter-spacing:-.06em; }.site-mini p { max-width:340px;color:#d9dbe4;font-size:11px;line-height:1.5; }

.client-profile-demo { padding:24px; }.client-profile-head { display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:13px;padding-bottom:20px;border-bottom:1px solid #eceef4; }.client-profile-head > span { display:grid;width:52px;height:52px;place-items:center;border-radius:16px;color:#fff;background:var(--page-accent);font-weight:850; }.client-profile-head b,.client-profile-head small { display:block; }.client-profile-head small { margin-top:4px;color:var(--muted);font-size:10px; }.client-profile-head em { padding:7px 9px;border-radius:999px;color:#17694e;background:#e2f6ec;font-size:8px;font-style:normal;font-weight:850; }
.client-facts { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:18px 0;background:#eceef4; }.client-facts div { padding:15px;background:#fff; }.client-facts small,.client-facts b { display:block; }.client-facts small { color:var(--muted);font-size:8px; }.client-facts b { margin-top:5px;font-size:15px; }
.client-timeline { display:grid;gap:11px; }.client-timeline article { position:relative;padding:14px 15px 14px 38px;border:1px solid #e8eaf0;border-radius:12px; }.client-timeline article::before { content:"";position:absolute;left:16px;top:19px;width:8px;height:8px;border-radius:50%;background:var(--page-accent); }.client-timeline b,.client-timeline small { display:block; }.client-timeline b { font-size:11px; }.client-timeline small { margin-top:4px;color:var(--muted);font-size:9px; }

.integration-ribbon { display:flex;align-items:center;justify-content:center;gap:18px;padding:27px 24px;border-block:1px solid var(--line);overflow:hidden; }.integration-ribbon span { flex:0 0 auto;color:#8790a3;font-size:13px;font-weight:800; }.integration-ribbon i { color:var(--page-accent);font-style:normal; }
.proof-quote { display:grid;grid-template-columns:auto 1fr;gap:28px;max-width:1050px;align-items:start; }.proof-quote > span { display:grid;width:56px;height:56px;place-items:center;border-radius:18px;color:#f1a91e;background:#fff7df;font-size:20px; }.proof-quote blockquote { margin:0;font-size:clamp(30px,3.4vw,48px);line-height:1.18;letter-spacing:-.045em;font-weight:760; }.proof-quote cite { display:block;margin-top:18px;color:var(--muted);font-size:12px;font-style:normal;font-weight:800; }

@media (max-width:1080px) {
  .feature-story,.feature-story.reverse { grid-template-columns:1fr;gap:42px; }.feature-story.reverse > .story-copy { order:0; }
  .inner-page .feature-tile,.inner-page .feature-tile:nth-child(n) { grid-column:span 6; }
  .flow-line { grid-template-columns:repeat(2,1fr); }.flow-step:nth-child(3) { border-left:0;border-top:1px solid var(--line); }.flow-step:nth-child(4) { border-top:1px solid var(--line); }
}

@media (max-width: 1280px) {
  .product-showcase-shell { padding-inline: 50px; }
  .product-showcase-visual { height: 510px; }
  .product-showcase-stage { transform: translateX(-50%) perspective(1700px) rotateX(1deg) scale(.62); }
}
@media (max-width: 1080px) {
  .nav-shell { grid-template-columns: 1fr auto; }
  .site-nav, .nav-actions { display: none; }
  .menu-toggle { justify-self: end; display: grid; width: 46px; height: 46px; place-content: center; gap: 4px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
  .menu-toggle span { width: 20px; height: 2px; background: var(--ink); }
  .site-nav.open { position: absolute; top: 74px; left: 24px; right: 24px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-soft); }
  .hero { height: 720px; min-height: 720px; padding: 110px 0 0; }
  .hero-center { width: min(calc(100% - 48px), 850px); height: 610px; padding-top: 0; }
  .hero h1 { max-width: 820px; font-size: clamp(52px,7vw,68px); }
  .hero-lead { max-width: 650px; }
  .hero-shape-appointments { top: 170px; left: -78px; width: 190px; height: 185px; }
  .hero-shape-register { top: 158px; right: -64px; width: 176px; height: 176px; }
  .hero-shape-clients { top: 540px; left: -48px; width: 148px; height: 158px; }
  .hero-shape-ai { top: 525px; right: -62px; width: 184px; height: 176px; }
  .hero-brand-shape { opacity: .62; }
  .product-showcase-section { padding: 100px 0; }
  .product-showcase-shell { display:block;padding:62px 42px 0;border-radius:0; }
  .product-showcase-intro { max-width:760px;margin-inline:auto;text-align:center; }
  .product-showcase-copy { max-width:700px;margin-inline:auto;text-align:center; }
  .product-showcase-lead { max-width:650px;margin-inline:auto; }
  .product-showcase-proof { justify-content:center; }
  .product-showcase-visual { height: 490px; }
  .product-showcase-stage { width: 1120px; transform: translateX(-50%) perspective(1600px) rotateX(1deg) scale(.73); transform-origin: 50% 0; }
  .os-dashboard { min-width: 1080px; }
  .section { padding: 110px 0; }.journey-grid { grid-template-columns: 1fr 1fr; }.journey-card:last-child { grid-column: span 2; }.split-layout,.ai-section { gap:45px; }.customer-visual { min-height:570px;padding:45px 30px; }.web-builder-stage { padding-left:260px; }.builder-panel { left:25px;width:215px; }.bento-register,.bento-marketing { gap:35px; }.ai-section { padding:65px 50px; }.switch-card { grid-template-columns:1fr; }.faq-layout { gap:55px; }
  .bento-section { padding-bottom:72px; }.ai-wrap { padding:0 0 44px; }.switch-section { padding-top:44px; }
  .feature-index { grid-template-columns:repeat(2,1fr); }.product-map { grid-template-columns:repeat(2,1fr); }.content-split,.form-layout,.detail-hero { gap:50px; }.addon-panel { gap:40px;padding:50px; }
}
@media (max-width: 900px) {
  .product-showcase-shell { padding: 58px 34px 0; }
  .product-showcase-intro { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .product-showcase-copy { max-width: 650px; margin-inline: auto; text-align: center; }
  .product-showcase-lead { max-width: 620px; margin-inline: auto; }
  .product-showcase-proof { justify-content: center; }
  .product-showcase-visual { height: 450px; }
  .product-showcase-stage { left: 50%; transform: translateX(-50%) perspective(1500px) rotateX(1deg) scale(.67); transform-origin: 50% 0; }
  .bento-marketing { grid-template-columns:1fr;gap:40px; }
  .notification-stage { width:100%;max-width:680px; }
}
@media (max-width: 760px) {
  .container { width: min(calc(100% - 32px), var(--container)); }
  .site-header { padding: 12px 0; }.hero { height: 680px; min-height: 680px; padding: 91px 0 9px; }.hero h1 { font-size: clamp(40px, 11vw, 48px); line-height: .94; }
  .hero-center { width: min(calc(100% - 32px), 850px); height: 580px; padding-top: 0; }
  .eyebrow { font-size: 9px; letter-spacing: .1em; }
  .hero-lead { margin-top: 22px; font-size: 16px; }.hero-actions { width: 100%; flex-direction: column; align-items: stretch; max-width: 390px; margin-inline: auto; margin-top: 25px; }
  .hero-proof { flex-wrap: wrap; gap: 9px 16px; margin-top: 16px; }
  .hero-brand-shape i { font-size: 28px; }
  .hero-shape-appointments { top: 142px; left: -72px; width: 132px; height: 128px; border-radius: 42px 42px 18px 42px; }
  .hero-shape-register { top: 144px; right: -66px; width: 126px; height: 126px; }
  .hero-shape-clients { top: 525px; left: -55px; width: 116px; height: 124px; border-radius: 38px 16px 38px 38px; }
  .hero-shape-ai { top: 522px; right: -61px; width: 126px; height: 120px; border-radius: 16px 42px 42px 42px; }
  .hero-brand-shape { opacity: .45; }
  .product-showcase-section { padding: 82px 0 76px; }
  .product-showcase-shell { padding: 48px 16px 0; border-radius:0; }
  .product-showcase-copy { max-width: 620px; margin-inline: auto; text-align: center; }
  .product-showcase-lead > p { font-size: 16px; }
  .product-demo-control { top: 16px; right: 16px; }
  .product-showcase-visual { height: 270px; margin-top: 34px; }
  .product-showcase-stage { left: 50%; width: 1050px; transform: translateX(-50%) perspective(1200px) rotateX(1deg) scale(.42); transform-origin: 50% 0; }
  .app-window, .os-product-window { width: 1050px; height: 610px; border-radius: 22px 22px 0 0; }
  .os-dashboard { grid-template-columns: 78px 1fr; min-width: 1050px; min-height: 610px; }
  .os-demo-stage { height: 610px; }
  .os-sidebar { min-height: 610px; padding-inline: 7px; }.os-nav-item, .os-settings { min-height: 48px; }.os-workspace { padding: 32px 35px 55px; }
  .salon-strip { margin-top:-18px;padding:23px 0 0; }
  .salon-strip-intro { width:calc(100% - 32px);margin-bottom:16px; }
  .salon-strip-intro > span { font-size:8px;letter-spacing:.15em; }
  .salon-marquee-track { animation-duration:105s; }
  .salon-word { font-size:clamp(34px,10.5vw,44px); }
  .salon-strip + .product-showcase-section { padding-top:52px; }
  .section { padding:82px 0; }.section-heading h2,.feature-head h2,.split-copy h2,.ai-copy h2,.switch-card h2 { font-size:clamp(38px,11vw,52px); }.section-heading > p:last-child,.feature-head > p,.split-copy > p,.ai-copy > p,.switch-card > div > p { font-size:17px; }.feature-head,.feature-head-wide,.split-layout,.ai-section,.faq-layout,.footer-main { grid-template-columns:1fr;gap:38px; }.feature-head { margin-bottom:42px; }.journey-grid { grid-template-columns:1fr;margin-top:45px; }.journey-card,.journey-card:last-child { grid-column:auto;min-height:420px; }.calendar-stage { width:900px;padding:18px; }.schedule-section { overflow:hidden; }.schedule-section > .container { margin-left:16px; }.calendar-popover { right:auto;left:350px; }.split-layout { gap:50px; }.customer-visual { min-height:540px;padding:25px 18px; }.profile-card { padding:20px; }.profile-stats { grid-template-columns:1fr 1fr;gap:14px; }.profile-stats div { padding:0;border:0; }.profile-stats div:last-child { display:none; }.history-card { right:10px;bottom:24px;width:78%; }.web-builder-stage { width:860px;min-height:570px;margin-left:16px;padding:25px 25px 0 240px; }.online-section { overflow:hidden; }.online-section > .container:not(.section-heading) { margin-left:0; }.builder-panel { left:22px;top:22px;bottom:22px;width:198px;padding:18px; }.builder-panel > button { margin-top:70px; }.site-preview { min-height:545px; }.site-preview main { padding:65px 40px; }.site-preview main h3 { font-size:47px; }.phone-preview { display:none; }.bento-grid,.price-grid { grid-template-columns:1fr; }.bento-wide { grid-column:auto; }.bento-card { min-height:420px;padding:28px; }.bento-register,.bento-marketing { grid-template-columns:1fr; }.receipt { max-width:none; }.message-stack { min-height:300px; }.ai-section { padding:45px 25px;border-radius:26px; }.ai-copy h2 { font-size:42px; }.switch-card { padding:35px 24px; }.switch-card ol { grid-template-columns:1fr; }.switch-card li:not(:last-child)::after { right:50%;top:auto;bottom:-17px;transform:translateX(50%) rotate(90deg); }.price-card.featured { transform:none; }.ai-addon-bar { grid-template-columns:1fr;gap:18px; }.faq-layout .section-heading { position:static; }.final-cta { grid-template-columns:1fr;gap:42px;padding:52px 24px;border-radius:26px; }.final-cta h2 { font-size:47px; }.final-actions { flex-direction:column; }.final-actions .button { width:100%; }.footer-main { gap:50px; }.footer-links { grid-template-columns:1fr 1fr;gap:30px; }.footer-bottom { grid-template-columns:1fr;gap:14px; }.footer-bottom > div { justify-self:start; }.site-footer { padding-top:70px; }
  .bento-section { padding-bottom:54px; }.ai-wrap { padding:0 0 36px; }.switch-section { padding-top:36px; }.ai-wrap > .ai-section { border-radius:0; }
  .switch-visual { padding:18px; }
  .switch-visual-head { align-items:flex-start; }
  .migration-line { left:35px; }
  .migration-step { min-height:116px;grid-template-columns:42px minmax(0,1fr);gap:11px;padding:14px; }
  .migration-step-icon { width:42px;height:42px; }
  .migration-step > em { grid-column:2;justify-self:start; }
  .migration-ready { grid-template-columns:40px minmax(0,1fr);padding:14px; }
  .migration-ready > span { width:40px;height:40px; }
  .migration-ready > strong { grid-column:2; }
  .page-hero { padding:145px 0 80px; }.page-hero h1 { font-size:clamp(48px,13vw,66px); }.page-lead { font-size:18px; }.page-hero-actions { flex-direction:column; }.content-section { padding:82px 0; }.content-split,.form-layout,.detail-hero,.addon-panel { grid-template-columns:1fr;gap:40px; }.feature-index,.product-map,.audience-grid,.values-grid { grid-template-columns:1fr; }.feature-tile { min-height:310px; }.audience-card { min-height:350px;padding:30px; }.addon-panel { padding:36px 25px; }.addon-panel h2 { font-size:42px; }.form-section { padding:140px 0 80px; }.form-card { padding:28px 20px; }.form-grid { grid-template-columns:1fr; }.field.full { grid-column:auto; }.detail-visual { min-height:430px;padding:20px;overflow:hidden; }.cta-band .container { align-items:flex-start;flex-direction:column; }.cta-band h2 { font-size:38px; }
  .review-moment { padding:65px 0 34px; }.review-moment blockquote { font-size:31px; }.ai-actions { flex-direction:column; }.ai-actions .button { width:100%; }
  .calendar-scroll-scene { min-height:0; }
  .calendar-scroll-scene .calendar-stage { top:auto;margin-left:16px; }
  .calendar-summary { flex-wrap:wrap;gap:12px 20px; }
  .calendar-summary p { width:100%;margin-left:0; }
  .calendar-scroll-scene .calendar-fill-confirmation { right:auto;left:150px; }
  .schedule-section { overflow:visible;overflow-x:clip; }
  .bento-register { height:680px;min-height:680px; }
  .bento-marketing { min-height:0;background:#f2f0ff; }
  .bento-card .marketing-copy h3 { font-size:40px; }
  .bento-card .marketing-copy > p { margin-top:22px;font-size:15px; }
  .marketing-notifications { gap:12px;padding:2px 0; }
  .marketing-notification { min-height:96px;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:14px;border-radius:16px; }
  .notification-reminder,.notification-email,.notification-review { width:100%;margin-right:0; }
  .notification-icon { width:40px;height:40px; }
  .receipt-print-stage { top:250px;right:auto;left:50%;width:calc(100% - 36px);max-width:380px;margin:0;transform:translateX(-50%); }
  .receipt-paper { max-width:360px;margin:0 auto; }
}
/* Consistent vertical rhythm for every main homepage section. */
.home-page { --home-section-space:72px; }
.home-page main > .section,
.home-page main > .product-showcase-section { padding-block:var(--home-section-space); }
.home-page main > .review-moment { padding-bottom:38px; }
.home-page main > .ai-wrap { padding-block:24px; }
@media (max-width:1080px) {
  .home-page { --home-section-space:64px; }
}
@media (max-width:760px) {
  .home-page { --home-section-space:52px; }
  .home-page main > .review-moment { padding-bottom:28px; }
  .home-page main > .ai-wrap { padding-block:16px; }
  .site-footer > .salon-strip { padding-block:34px 31px; }
}

/* Responsive safeguards for the richer public feature pages. */
@media (max-width:1080px) {
  .inner-page .feature-index { grid-template-columns:repeat(12,minmax(0,1fr)); }
  .inner-page .feature-index > .feature-tile:nth-child(n) { grid-column:span 6; }
  .inner-page .feature-index:has(> :nth-child(3):last-child) > :nth-child(3) { grid-column:span 12; }
}
@media (max-width:760px) {
  .inner-page .site-footer { padding-top:0; }
  .site-footer > .footer-main { padding-top:62px; }
  .inner-page .content-section { padding:76px 0; }
  .inner-page .feature-index { grid-template-columns:1fr;gap:14px;margin-top:42px; }
  .inner-page .feature-index > .feature-tile:nth-child(n) { grid-column:1;min-height:285px; }
  .inner-page .product-map { grid-template-columns:1fr; }
  .inner-page .product-map article + article { border-top:1px solid var(--line);border-left:0; }
  .inner-page .product-map article:not(:first-child)::before { top:-5px; }
  .feature-story,.feature-story.reverse { grid-template-columns:1fr;gap:34px; }
  .feature-story.reverse > .story-copy { order:0; }
  .story-copy h2 { font-size:clamp(39px,11.5vw,52px); }
  .story-copy > p { font-size:16px; }
  .interface-panel { min-height:0;padding:16px;border-radius:20px; }
  .flow-line { grid-template-columns:1fr;margin-top:38px; }
  .flow-step + .flow-step { border-top:1px solid var(--line);border-left:0; }
  .automation-stage { min-height:515px; }
  .demo-tabs { overflow:auto;justify-content:flex-start; }
  .demo-tabs button { min-width:max-content; }
  .floating-note { width:96%;padding:15px; }.floating-note:nth-child(2){top:145px}.floating-note:nth-child(3){top:278px;left:2%;}
  .proof-quote { grid-template-columns:1fr;gap:18px; }.proof-quote > span { width:48px;height:48px;font-size:13px; }.proof-quote blockquote { font-size:30px; }
  .integration-ribbon { justify-content:flex-start;overflow-x:auto; }
  .website-canvas { min-height:420px; }.site-mini h3 { font-size:36px; }
  .pay-methods { grid-template-columns:1fr; }
  .client-facts { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .salon-marquee-track { animation:none !important;transform:none; }
  .calendar-scroll-scene { min-height:auto; }
  .calendar-scroll-scene .calendar-stage { position:relative;top:auto; }
  .calendar-scroll-scene.is-enhanced .slot-fill { opacity:1;filter:none;pointer-events:auto;transform:none; }
  .calendar-scroll-scene.is-enhanced .calendar-fill-confirmation { opacity:1;transform:none; }
  .receipt-print-stage.receipt-print-ready .receipt-print-viewport { transform:none; }
  .receipt-print-stage.receipt-print-ready .receipt-paper { transform:rotate(1.2deg); }
  .marketing-flow-ready .marketing-copy .card-label,.marketing-flow-ready .marketing-copy h3,.marketing-flow-ready .marketing-copy > p,.marketing-flow-ready .marketing-status,.marketing-flow-ready .notification-stage,.marketing-flow-ready .marketing-notification { opacity:1;transform:none;transition:none; }
}