/* Product presentation */
.client-showcase-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.client-showcase-copy { min-width: 0; }
.client-showcase-copy .client-experience-heading { display: block; margin-bottom: 32px; }
.client-showcase-copy .client-experience-heading h2 { font-size: clamp(1.9rem, 3.1vw, 2.9rem); line-height: 1.25; }
.client-showcase-copy .client-experience-intro { text-align: left; justify-self: stretch; width: 100%; max-width: none; margin-top: 22px; }
.client-showcase-copy .client-experience-intro p { text-align: left; margin-bottom: 12px; }
.client-showcase-copy .client-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.client-showcase-copy .client-benefits article { padding: 20px 0; background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.client-showcase-copy .product-benefit-icon { width: 38px; height: 38px; border-radius: 12px; margin-bottom: 12px; }
.client-showcase-copy .client-benefits h3 { font-size: 1rem; margin-bottom: 8px; }
.client-showcase-copy .client-experience-bottom { display: block; margin-top: 20px; }
.client-showcase-copy .client-experience-bottom > p { margin-bottom: 22px; }
.client-showcase-copy .client-experience-bottom > div { flex-wrap: wrap; gap: 18px 24px; }
.client-showcase-visual { position: relative; min-width: 0; height: 650px; display: grid; place-items: center; isolation: isolate; }
.client-showcase-orbit { position: absolute; width: 110%; max-width: 530px; aspect-ratio: 1; background: #edf3e9; border-radius: 50%; z-index: -1; }
.client-showcase-orbit::after { content: ''; position: absolute; inset: 32px; border: 1px solid #dce7d6; border-radius: inherit; }
.client-showcase-phone { position: relative; width: 286px; height: 572px; border: 7px solid #2d2b2b; outline: 1px solid #858b82; border-radius: 44px; background: #2d2b2b; box-shadow: 0 32px 60px -25px #28332455, inset 0 0 0 2px #676d64; transform: rotate(-5deg); }
.client-phone-camera { position: absolute; z-index: 2; top: 9px; left: 50%; transform: translateX(-50%); width: 78px; height: 21px; border-radius: 20px; background: #2d2b2b; }
.client-phone-screen { height: 100%; padding: 38px 20px 16px; border-radius: 36px; background: #fafbf8; overflow: hidden; color: #283126; }
.client-phone-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.client-phone-top img { width: 102px; height: 40px; object-fit: contain; }
.client-phone-top > span { width: 21px; height: 21px; color: #7b9472; }
.client-phone-screen svg { width: 100%; height: 100%; }
.client-phone-greeting { font-size: 10px; color: #77816f; margin: 0 0 5px; }
.client-phone-title { font-family: Geologica, sans-serif; font-size: 20px; line-height: 1.3; margin: 0 0 20px; }
.client-phone-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 20px; }
.client-phone-week > span { text-align: center; font-size: 8px; padding: 8px 0; background: #fff; border: 1px solid #e4e9df; border-radius: 8px; }
.client-phone-week b { display: block; margin-top: 4px; font-size: 13px; }
.client-phone-week .selected { background: #9dbf95; border-color: #9dbf95; }
.client-phone-appointment { padding: 16px 13px; border: 1px solid #dbe6d3; border-radius: 15px; background: #eaf1e4; }
.client-phone-label { display: block; font-size: 7px; letter-spacing: .07em; margin-bottom: 10px; color: #66785b; }
.client-phone-appointment > strong { font-size: 13px; }
.client-phone-appointment > p { font-size: 10px; color: #737d6a; margin: 3px 0 16px; }
.client-phone-appointment > div { display: flex; justify-content: space-between; align-items: center; gap: 4px; font-size: 10px; }
.client-phone-status { font-size: 7px; padding: 4px 6px; border-radius: 20px; background: #fff; }
.client-phone-balance { display: flex; align-items: center; gap: 10px; padding: 16px 0; border-bottom: 1px solid #e1e7dc; }
.client-phone-balance > span { width: 30px; height: 30px; padding: 6px; background: #e5eddf; border-radius: 50%; color: #6e8d60; }
.client-phone-balance strong { font-size: 11px; }
.client-phone-balance p { margin: 0; font-size: 8px; color: #77816f; }
.client-phone-balance > b { margin-left: auto; font-weight: 400; }
.client-phone-next { font-size: 10px; padding: 16px 0; }
.client-phone-next > div { display: flex; gap: 8px; margin-top: 10px; }
.client-phone-next b { padding: 6px 10px; border: 1px solid #dfe6d9; background: #fff; border-radius: 6px; font-weight: 500; }
.client-phone-nav { display: flex; align-items: center; justify-content: center; gap: 20px; border-top: 1px solid #e2e7df; padding-top: 13px; color: #708765; font-size: 9px; }
.client-phone-nav > span:first-child { width: 20px; height: 20px; }
.client-floating-card { position: absolute; display: flex; align-items: center; gap: 12px; padding: 17px 20px; background: #fff; border: 1px solid #e0e8db; box-shadow: 0 18px 40px -16px #28332438; border-radius: 18px; animation: client-card-drift 7s ease-in-out infinite; }
.client-floating-card strong { display: block; font-size: 12px; line-height: 1.4; }
.client-floating-card div > span { display: block; font-size: 10px; color: #7c8575; margin-top: 4px; }
.client-floating-icon { width: 36px; height: 36px; border-radius: 12px; padding: 8px; background: #e9f0e4; color: #6c8c5e; flex-shrink: 0; }
.client-floating-icon svg { width: 100%; height: 100%; }
.client-floating-booking { top: 164px; left: -12px; }
.client-floating-payment { right: -18px; bottom: 118px; animation-delay: -3.5s; }
@keyframes client-card-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.cta-showcase { padding: 72px 0; background: #fff; }
.cta-showcase .cta-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 44px; padding: 60px; border-radius: 30px; background: #2d2b2b; color: #f9faf8; overflow: hidden; }
.cta-showcase h2 { max-width: 560px; font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.22; }
.cta-showcase .eyebrow { color: #b4cda7; }
.cta-showcase p:last-child { color: #c2c9bd; font-size: .9375rem; max-width: 520px; }
.cta-showcase .button { display: inline-flex; margin-top: 28px; background: #9dbf95; color: #252d27; border-radius: 10px; }
.cta-showcase .button:hover { background: #b4cda7; }
.cta-showcase-visual { position: relative; min-width: 0; height: 330px; display: flex; align-items: center; isolation: isolate; }
.cta-showcase-circle { width: 330px; aspect-ratio: 1; position: absolute; right: -65px; background: #9dbf951c; border-radius: 50%; z-index: -1; }
.cta-showcase-window { width: 100%; background: #f7f9f4; border: 5px solid #585d53; border-radius: 18px; transform: rotate(5deg); box-shadow: 0 20px 32px #0003; color: #293024; }
.cta-window-bar { display: flex; gap: 4px; padding: 9px 12px; border-bottom: 1px solid #e1e7dc; }
.cta-window-bar span { width: 5px; height: 5px; border-radius: 50%; background: #a7b99c; }
.cta-window-content { padding: 16px 18px; }
.cta-window-content > img { width: 88px; height: 34px; object-fit: contain; display: block; }
.cta-showcase .cta-window-content > p { color: #69775f; font-size: 11px; margin: 10px 0; }
.cta-mini-appointment { display: flex; gap: 13px; align-items: center; background: #fff; border: 1px solid #e3e8dd; border-radius: 7px; padding: 11px; margin-top: 8px; font-size: 10px; }
.cta-mini-appointment:nth-of-type(2) { background: #e5eedf; }
.cta-mini-appointment b { display: block; font-size: 10px; }
.cta-mini-appointment small { font-size: 8px; color: #7a8471; }
.cta-window-tabs { display: flex; gap: 13px; font-size: 8px; color: #7a8471; margin-top: 16px; }
.cta-showcase-tag { position: absolute; left: -22px; bottom: 3px; display: flex; align-items: center; gap: 10px; border: 1px solid #cbdcbd; border-radius: 12px; background: #e9f0e4; padding: 14px 17px; color: #34442a; font-size: 11px; box-shadow: 0 15px 30px #0002; }
.cta-showcase-tag svg { width: 22px; height: 22px; }
@media (max-width: 1050px) { .client-showcase-layout { gap: 36px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } .client-floating-card { padding: 13px 12px; gap: 8px; } .client-floating-card div > span { display: none; } .client-floating-booking { left: 0; } .client-floating-payment { right: -4px; } .cta-showcase .cta-inner { padding: 42px; gap: 28px; } }
@media (max-width: 760px) { .client-showcase-layout { grid-template-columns: 1fr; gap: 12px; } .client-showcase-copy { display: contents; } .client-showcase-copy .client-experience-heading { grid-row: 1; margin-bottom: 12px; } .client-showcase-visual { grid-row: 2; height: 600px; width: min(100%, 470px); justify-self: center; } .client-showcase-copy .client-benefits { grid-row: 3; gap: 0 20px; } .client-showcase-copy .client-experience-bottom { grid-row: 4; } .client-showcase-orbit { width: 100%; } .client-showcase-phone { transform: rotate(-3deg); } .client-floating-booking { top: 125px; left: 0; } .client-floating-payment { bottom: 100px; right: 0; } .client-showcase-copy .client-experience-bottom > div { flex-direction: row; align-items: center; } .cta-showcase { padding: 40px 0; } .cta-showcase .cta-inner { grid-template-columns: 1fr; padding: 32px 24px; gap: 18px; border-radius: 24px; } .cta-showcase-visual { height: 310px; max-width: 350px; width: 100%; justify-self: center; } .cta-showcase-tag { left: 0; bottom: 0; } }
@media (max-width: 390px) { .client-showcase-visual { height: 565px; } .client-showcase-phone { width: 268px; height: 540px; } .client-phone-screen { padding: 40px 16px 16px; } .client-phone-top { margin-bottom: 15px; } .client-phone-title { margin-bottom: 16px; } .client-floating-card strong { font-size: 10px; } .client-floating-icon { width: 30px; height: 30px; padding: 6px; } .client-floating-card { padding: 11px 10px; } .client-showcase-copy .client-benefits { gap: 0 16px; } .cta-showcase .cta-inner { padding: 30px 20px; } }
@media (prefers-reduced-motion: reduce) { .client-floating-card { animation: none; } }

/* Platform symbols and layered feature presentation */
.client-platform-badges { display: flex; align-items: center; gap: 22px; margin: 6px 0 20px; }
.client-platform-badge { display: inline-flex; align-items: center; gap: 10px; font-size: .8125rem; color: #5b6a54; }
.client-platform-symbol { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #dfe8d9; border-radius: 50%; color: #526b46; background: #fff; }
.client-platform-symbol svg { width: 22px; height: 22px; }
.client-platform-badge:first-child svg { width: 26px; height: 26px; }
.client-showcase-orbit { width: 120%; max-width: 570px; background: #edf3e980; }
.client-showcase-orbit::after { inset: 48px; border-color: #dce7d680; }
.client-showcase-orbit::before { content: ''; position: absolute; width: 90px; aspect-ratio: 1; border-radius: 50%; background: #e4eddf66; right: -5px; top: -24px; }
.cta-showcase-circle { width: 430px; right: -110px; background: #9dbf9517; }
.cta-showcase-circle::after { content: ''; position: absolute; width: 150px; aspect-ratio: 1; border-radius: 50%; background: #9dbf950c; top: -24px; left: -65px; }
.feature-gallery { max-width: 1080px; }
.feature-gallery-stage { position: relative; padding: 42px 68px 65px; isolation: isolate; }
.feature-gallery-halo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; aspect-ratio: 1; max-height: 620px; border-radius: 50%; background: #edf3e97a; z-index: -1; }
.feature-gallery-halo::after { content: ''; position: absolute; width: 95px; aspect-ratio: 1; background: #e5eedf80; border-radius: 50%; left: -38px; bottom: 80px; }
.gallery-detail-cards { pointer-events: none; }
.gallery-detail-card { position: absolute; display: flex; align-items: center; gap: 12px; padding: 18px 22px; background: #fff; border: 1px solid #e0e8db; border-radius: 18px; box-shadow: 0 18px 40px -20px #28332450; animation: client-card-drift 8s ease-in-out infinite; }
.gallery-detail-card strong { display: block; font-size: .8125rem; font-weight: 600; line-height: 1.5; }
.gallery-detail-card div > span { display: block; font-size: .6875rem; margin-top: 3px; color: #7b8573; }
.gallery-detail-icon { width: 38px; height: 38px; padding: 9px; background: #edf3e8; color: #68865a; border-radius: 12px; flex-shrink: 0; }
.gallery-detail-icon svg { width: 100%; height: 100%; }
.gallery-detail-appointments { left: 0; top: 90px; }
.gallery-detail-clients { right: 0; top: 46%; animation-delay: -2.7s; background: #2d2b2b; color: #fafbf8; border-color: #464b42; }
.gallery-detail-clients div > span { color: #c1c9b9; }
.gallery-detail-clients .gallery-detail-icon { background: #ffffff12; color: #b4cda7; }
.gallery-detail-payments { left: 115px; bottom: 22px; animation-delay: -5.3s; }
.feature-gallery-controls { margin-top: 14px; }
@media (max-width: 1050px) { .feature-gallery-stage { padding: 38px 48px 58px; } .gallery-detail-card { padding: 14px 16px; gap: 10px; } .gallery-detail-payments { left: 85px; } }
@media (max-width: 760px) { .client-showcase-orbit { width: 106%; } .client-platform-badges { gap: 20px; } .client-platform-symbol { width: 44px; height: 44px; } .feature-gallery-stage { padding: 34px 0 62px; } .feature-gallery-halo { width: min(115%, calc(100vw - 12px)); max-width: 420px; max-height: none; } .feature-gallery-halo::after { width: 65px; left: 5px; bottom: 28px; } .gallery-detail-card { padding: 12px; gap: 8px; border-radius: 14px; } .gallery-detail-card strong { font-size: .6875rem; } .gallery-detail-card div > span { font-size: .5625rem; } .gallery-detail-icon { width: 30px; height: 30px; padding: 7px; border-radius: 9px; } .gallery-detail-appointments { top: 95px; left: 0; } .gallery-detail-clients { top: auto; bottom: 140px; right: 0; } .gallery-detail-payments { left: 24px; bottom: 25px; } .feature-gallery-controls { margin-top: 10px; } }
@media (prefers-reduced-motion: reduce) { .gallery-detail-card { animation: none; } }

#client-apps .client-showcase-orbit { background: #ffffffc9; }
#client-apps .client-showcase-orbit::after { border-color: #e0e7dc80; }
#client-apps .client-showcase-orbit::before { background: #ffffff99; }

/* Specialty labels */
#professionals .specialty-overview { position: relative; isolation: isolate; padding: 40px; border: 1px solid #e1e9dc; border-radius: 28px; background: #f4f7f1; overflow: hidden; }
#professionals .specialty-overview::after { content: ''; position: absolute; z-index: -1; top: -90px; right: -60px; width: 250px; aspect-ratio: 1; border-radius: 50%; background: #e7efdf80; }
#professionals .specialty-overview h3 { font-size: 1.2rem; margin-bottom: 26px; }
#professionals .specialty-list { display: flex; flex-wrap: wrap; gap: 12px; }
#professionals .specialty-list li { min-width: 0; max-width: 100%; padding: 12px 18px; background: #fff; border: 1px solid #dde7d7; border-radius: 24px; font-size: .875rem; line-height: 1.5; gap: 10px; }
#professionals .specialty-list li::before { width: 6px; height: 10px; border-color: #89ac7e; }
#professionals .specialty-overview > p { margin-top: 28px; padding: 24px 0 0; border: 0; border-top: 1px solid #dde6d6; border-radius: 0; background: transparent; max-width: 860px; text-align: left; }
@media (max-width: 760px) { #professionals .specialty-overview { padding: 26px 22px; border-radius: 22px; } #professionals .specialty-overview h3 { font-size: 1.05rem; margin-bottom: 20px; } #professionals .specialty-list { gap: 10px; } #professionals .specialty-list li { padding: 10px 13px; font-size: .8125rem; gap: 8px; } #professionals .specialty-overview > p { margin-top: 24px; padding-top: 22px; font-size: .875rem; } }
/* Pricing card hover */
.price-card { transition: opacity 1050ms ease, transform 1250ms cubic-bezier(.22,.61,.36,1), border-color 250ms ease, box-shadow 250ms ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .price-card:not(.is-pending):hover { transform: translateY(-5px); border-color: #9dbf95; box-shadow: 0 18px 36px -22px #34472a55; transition-duration: 1050ms, 250ms, 250ms, 250ms; transition-delay: 0ms; } }

/* Connected workflow steps */
.workflow[data-workflow] .workflow-steps li { position: relative; border-bottom: 0; gap: 26px; }
.workflow[data-workflow] .workflow-steps li > span { display: grid; place-items: center; position: relative; z-index: 1; width: 46px; height: 46px; flex: 0 0 46px; border: 1px solid #dce6d5; border-radius: 50%; background: #f5f8f2; color: #798572; font-size: .875rem; transition: background 350ms ease, color 350ms ease, border-color 350ms ease, box-shadow 350ms ease; }
.workflow[data-workflow] .workflow-steps li::before, .workflow[data-workflow] .workflow-steps li::after { content: ''; position: absolute; left: 22px; width: 1px; background: #dfe7d9; }
.workflow[data-workflow] .workflow-steps li::before { top: 0; bottom: calc(50% + 29px); }
.workflow[data-workflow] .workflow-steps li::after { top: calc(50% + 29px); bottom: 0; }
.workflow[data-workflow] .workflow-steps li:first-child::before, .workflow[data-workflow] .workflow-steps li:last-child::after { display: none; }
.workflow[data-workflow] .workflow-steps li.is-active > span { color: #2b3925; background: #9dbf95; border-color: #9dbf95; box-shadow: 0 0 0 6px #edf3e8; }
.workflow[data-workflow] .workflow-steps li > div { min-width: 0; }
@media (max-width: 959px) { .workflow[data-workflow] .workflow-steps li { gap: 18px; padding: 26px 0; } .workflow[data-workflow] .workflow-steps li > span { width: 40px; height: 40px; flex-basis: 40px; font-size: .8125rem; } .workflow[data-workflow] .workflow-steps li::before, .workflow[data-workflow] .workflow-steps li::after { left: 19px; } .workflow[data-workflow] .workflow-steps li::before { bottom: calc(50% + 25px); } .workflow[data-workflow] .workflow-steps li::after { top: calc(50% + 25px); } .workflow[data-workflow] .workflow-steps li.is-active > span { box-shadow: 0 0 0 4px #edf3e8; } }
@media (prefers-reduced-motion: reduce) { .workflow[data-workflow] .workflow-steps li > span { transition: none; } }