/* Extend existing PROMATIC tokens. The browser chrome and outer layout stay unchanged. */
.web-hero-copy,.websites .split-head>div:first-child,.sample-hero{position:relative;isolation:isolate}.tech-motion{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden;opacity:.16;transform:translateY(var(--tech-shift,0px))}.tech-motion i{position:absolute;width:110%;height:36%;left:5%;top:25%;border:1px solid var(--blue);border-radius:50%;transform:rotate(-28deg)}.tech-motion i:nth-child(2){top:33%;left:12%;transform:rotate(-22deg);opacity:.55}.tech-motion i:nth-child(3){width:7px;height:7px;left:75%;top:30%;background:var(--blue);border-radius:50%}
.feature-demo .device{container-type:inline-size}.feature-demo .showcase-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--blue) var(--paper);scroll-behavior:smooth}.showcase-site{background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.6}.sample-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 5%;border-bottom:1px solid var(--line)}.sample-header>strong{font-size:25px;font-weight:600;letter-spacing:-.04em}.sample-header>strong>span{font-size:10px;vertical-align:super;margin-left:3px}.sample-header nav{display:flex;gap:20px}.sample-header button{border:0;background:none;padding:8px 0;font-size:13px;min-height:44px}.sample-step{padding:40px 6%;border-bottom:1px solid var(--line)}.sample-label{display:flex;gap:15px;align-items:baseline;font-size:12px!important;line-height:1.6;margin-bottom:30px!important;color:var(--muted);letter-spacing:.035em}.sample-label>span{white-space:nowrap;color:var(--blue)}.sample-kicker{font-size:10px!important;letter-spacing:.1em;margin-bottom:16px!important}.showcase-site h3{font-size:clamp(31px,4.8cqw,56px);line-height:1.12;font-weight:450;letter-spacing:-.035em;margin:0 0 24px;text-wrap:balance}.showcase-site h4{font-size:22px;line-height:1.25;font-weight:500;letter-spacing:-.02em;margin:0 0 15px}.sample-step>p:not(.sample-label,.sample-kicker,.sample-note){font-size:15px;max-width:60ch;margin-bottom:24px}.sample-hero{min-height:415px}.sample-hero .button{margin-top:6px}.sample-note{font-size:12px!important;line-height:1.6;margin-top:18px!important;color:var(--muted)}.showcase-site .button{font-size:13px;min-height:44px;padding:14px 18px;gap:15px}.showcase-site button:focus-visible,.showcase-site a:focus-visible,.showcase-site input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.showcase-site button:disabled{color:var(--muted);opacity:.5;cursor:not-allowed}
.sample-calculator{display:grid;grid-template-columns:1fr .8fr;gap:40px;margin:32px 0 0}.sample-inputs{display:grid;gap:20px}.sample-inputs label{font-size:14px;display:block}.sample-inputs input[type=number]{display:block;width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;border-radius:0;padding:10px 0;color:var(--ink);font:inherit;font-size:20px}.sample-inputs input[type=range]{display:block;width:100%;margin:15px 0;accent-color:var(--blue)}.sample-inputs [data-share-label]{float:right}.sample-result{align-self:center;background:var(--blue-pale);padding:30px 24px;border-radius:7px}.sample-result>span{font-size:10px;letter-spacing:.08em}.sample-result output{display:block;font-size:clamp(28px,4cqw,46px);line-height:1.2;letter-spacing:-.035em;margin:16px 0}.sample-result small{color:var(--muted);font-size:13px}
.sample-booking{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:start}.sample-month{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}.sample-month>strong{font-size:14px;font-weight:650}.sample-month>button{background:none;border:1px solid var(--line);border-radius:5px;width:44px;height:44px}.sample-weekdays,.sample-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.sample-weekdays{font-size:11px;text-align:center;color:var(--muted);margin-bottom:8px}.sample-calendar button{border:1px solid transparent;border-radius:4px;background:transparent;font-size:13px;min-height:38px;padding:4px 0}.sample-calendar [aria-pressed=true],.sample-times [aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--white)}.sample-times{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.sample-times button{background:var(--white);border:1px solid var(--line);border-radius:5px;min-height:44px;font-size:14px}.sample-slots>p{font-size:14px;min-height:24px}.sample-feedback{margin-top:16px;font-size:13px!important;line-height:1.6;color:var(--ink)}.sample-flow{margin-top:28px}.sample-progress{font-size:12px;color:var(--muted);margin-bottom:16px;font-variant-numeric:tabular-nums}.sample-flow fieldset{border:0;padding:0;margin:0;min-inline-size:0}.sample-flow legend{font-size:18px;font-weight:500;line-height:1.4;padding:0;margin-bottom:18px}.sample-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.sample-choice{border:1px solid var(--line);border-radius:6px;background:var(--white);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px;font-size:14px;min-height:60px;text-align:left}.sample-choice>span{color:var(--blue)}.sample-flow-actions{display:flex;gap:24px;margin-top:15px}.sample-flow .text-button{font-size:13px;min-height:44px}.sample-flow [data-flow-result]>p{font-size:14px;margin-bottom:16px}.sample-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.sample-gallery figure{margin:0;min-width:0}.sample-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}.sample-gallery figcaption{display:flex;justify-content:space-between;font-size:12px;font-weight:600;padding-top:12px;letter-spacing:.045em}.sample-gallery figcaption>span{color:var(--blue)}.sample-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 6%}.sample-footer>p{font-size:12px}
.sample-ai .employee-demo{max-width:650px;margin:0 auto;padding:22px;background:var(--white);box-shadow:none}.sample-ai .channels{position:relative}.sample-ai .channel-underline{left:0;bottom:0;width:1px;transform-origin:left center;transition:transform 250ms cubic-bezier(.23,1,.32,1)}.sample-ai .channel{min-height:44px;flex:1}.sample-ai .conversation{background:var(--paper);border-color:var(--line)}.sample-ai .text-button{min-height:44px;font-size:12px}.sample-ai .demo-bottom small{font-size:11px}.sample-ai .demo-wave{width:64px}.sample-ai .conversation-top strong{font-size:15px}.sample-ai .demo-instant .channel-underline,.sample-ai .demo-instant .bubble{transition:none}.sample-ai .demo-instant .conversation,.sample-ai .demo-instant .workflow-step.done>span{animation:none}.feature-demo.paused .demo-wave i,.feature-demo.paused .assistant-symbol,.feature-demo.paused .assistant-symbol:after{animation-play-state:paused!important}
.website-packages{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.website-packages .price-card{display:flex;flex-direction:column;padding:28px}.website-packages .price-card h3{font-size:19px;letter-spacing:.1em;font-weight:650;margin-bottom:24px}.website-packages .start-offer{margin:0;min-height:232px}.website-packages .start-offer strong,.website-packages .package-price strong{font-size:clamp(30px,3vw,43px);letter-spacing:-.04em;font-weight:500;line-height:1.2;display:block}.website-packages .start-offer>span{font-size:12px}.package-price{padding-top:51px;min-height:232px}.package-price>span{display:block;font-size:12px;line-height:1.5;margin-top:8px;color:var(--muted)}.package-time{font-size:12px!important;color:var(--muted);margin-top:10px!important}.website-packages ul{flex:1;margin:20px 0 28px}.website-packages li{font-size:14px;line-height:1.65}.website-packages .button{font-size:13px}.package-intro{margin-top:20px;max-width:650px}.website-addons{margin-top:56px;padding-top:32px;border-top:1px solid var(--line)}.website-addons h3{font-size:28px;margin-bottom:24px}.addon-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}.addon-list li{display:flex;gap:16px;align-items:baseline;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line);font-size:15px}.addon-list small{white-space:nowrap;color:var(--muted);font-size:13px}
@container(max-width:600px){.showcase-site h3{font-size:34px}.sample-calculator,.sample-booking{grid-template-columns:1fr;gap:24px}.sample-choices{grid-template-columns:1fr}.sample-step{padding:30px 7%}.sample-header{padding:16px 7%;gap:12px}.sample-header nav{gap:12px}.sample-header button{font-size:12px}.sample-label{font-size:11px!important;margin-bottom:22px!important}.sample-gallery{grid-template-columns:1fr}.sample-gallery img{aspect-ratio:16/9}.sample-footer{align-items:flex-start;flex-direction:column}.sample-ai .employee-demo{padding:12px}.sample-ai .conversation{padding:13px}.sample-ai .channel{padding:8px 4px;font-size:12px}.sample-ai .demo-tag{display:none}.sample-ai .demo-heading .eyebrow{font-size:10px}.sample-ai .demo-wave{width:38px}.sample-ai .conversation-top{gap:8px;flex-wrap:wrap}.sample-ai .conversation-top strong{font-size:13px}.sample-ai .assistant-symbol{width:30px;height:30px}.sample-ai .bubble{max-width:100%;font-size:12px}.sample-ai .workflow-step{font-size:11px}.sample-ai .demo-bottom{flex-direction:column;align-items:flex-start}.sample-ai .demo-bottom small{font-size:10px}.sample-result{padding:22px}.sample-hero .button{font-size:12px}.sample-hero{min-height:400px}}
@media(max-width:1000px){.website-packages{grid-template-columns:1fr}.website-packages .price-card{display:grid;grid-template-columns:1fr 1fr;gap:12px 35px}.website-packages .price-card h3{grid-column:1/-1;margin:0}.website-packages .start-offer,.website-packages .package-price{min-height:0;padding-top:0;grid-row:2/4}.website-packages ul{margin:0}.website-packages .button{justify-self:start}.addon-list{grid-template-columns:1fr}}
@media(max-width:600px){.website-packages .price-card{display:flex;padding:25px;gap:0}.website-packages .price-card h3{margin-bottom:24px}.website-packages .start-offer,.website-packages .package-price{margin-bottom:20px}.website-packages ul{margin:0 0 24px}.addon-list li{font-size:14px;gap:12px}.addon-list small{font-size:12px}}
@media(hover:hover) and (pointer:fine){.sample-choice:hover,.sample-header button:hover{border-color:var(--blue);color:var(--blue)}.sample-calendar button:not(:disabled):not([aria-pressed=true]):hover,.sample-times button:not(:disabled):not([aria-pressed=true]):hover{background:var(--blue-pale)}}
@media(prefers-reduced-motion:reduce){.tech-motion{transform:none!important}.feature-demo .showcase-scroll{scroll-behavior:auto}.sample-ai .channel-underline{transition:none}}
