/* Shared brand tokens take priority over the legacy demo skin. */
:root{--blue:var(--brand-primary);--blue-dark:var(--brand-primary-hover);--ink:var(--brand-ink);--muted:var(--brand-muted);--line:var(--brand-border);--paper:var(--brand-paper);--lavender:var(--brand-lavender);--pale:var(--brand-lavender-light);font-family:var(--font-body);background:var(--brand-paper)}
body{background:var(--brand-paper)}
html{scroll-padding-top:100px}section[id]{scroll-margin-top:100px}
.wrap{width:calc(100% - 104px);max-width:1280px}
.header{position:sticky;top:0;z-index:40;max-width:none;width:100%;height:88px;padding:0;border-bottom:1px solid transparent;background:var(--brand-paper);transition:background var(--motion-normal),box-shadow var(--motion-normal),border-color var(--motion-normal)}
.header.is-scrolled,.header.menu-open{background:rgb(250 248 244 / .96);border-bottom-color:var(--brand-border);box-shadow:0 4px 20px rgb(39 32 53 / .035);backdrop-filter:blur(14px)}
.header-inner{width:calc(100% - 104px);max-width:1320px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:28px;height:100%;position:relative}
.brand{display:inline-flex;flex-shrink:0;line-height:1}.brand img{display:block;width:170px;height:auto;max-width:100%}
.header nav{display:flex;gap:28px;font-size:14px;align-items:center}.header nav a{display:flex;align-items:center;min-height:44px;position:relative}.header nav a:hover{color:var(--brand-primary)}
.header-actions{display:flex;align-items:center;gap:12px}.header-app-link{font-size:13px;min-height:44px;padding:10px 17px;display:flex;align-items:center;gap:16px;border:1px solid #d6cce5;border-radius:var(--radius-full);font-weight:600}.header-app-link:hover{background:var(--brand-lavender-light)}
.menu-toggle{display:none;width:44px;height:44px;border-radius:12px;background:transparent}.menu-toggle svg{width:24px;height:24px}
.button{border-radius:var(--radius-full);background:var(--brand-primary);min-height:52px;box-shadow:none}.button:hover{background:var(--brand-primary-hover);box-shadow:0 5px 16px rgb(91 53 181 / .12)}
.hero{grid-template-columns:1.03fr 1fr;gap:36px;min-height:660px;padding-block:62px 66px}
.hero-copy{padding-bottom:12px}.hero .eyebrow{font-size:13px;font-weight:500;letter-spacing:0;color:var(--brand-primary);margin-bottom:27px}.moment-dot{height:8px;width:8px;background:var(--brand-primary);border-radius:50%;box-shadow:0 0 0 5px var(--brand-lavender);margin-inline:5px}
.hero h1{font-size:clamp(48px,4.9vw,72px);line-height:1.16;letter-spacing:-2.5px;font-weight:600}.hero h1 span{color:var(--brand-primary)}
.hero-copy>p{font-size:17px;line-height:1.95;max-width:455px;margin-top:26px;color:#655b72}.hero-actions{margin-top:30px;align-items:flex-start;flex-wrap:wrap;gap:18px 25px}.hero-actions .button{font-size:14px;gap:25px;padding-inline:23px}.hero-actions .text-link{font-size:13px;min-height:52px}
.hero-note{font-size:11px;color:#766c81;margin-top:18px;gap:9px}.demo-dot{width:6px;height:6px;background:var(--color-success);border-radius:50%}.hero-footnote{display:flex;gap:18px;flex-wrap:wrap;font-size:11px;color:#766c81;margin-top:45px}.hero-footnote span+span:before{content:'·';margin-inline-end:18px;color:#b7abc7}
.signature-art{position:relative;isolation:isolate;margin:0;min-height:490px;background:#ede5f5;border:1px solid #e4daed;border-radius:44% 44% 24px 24px;display:flex;align-items:center;justify-content:center;box-shadow:none;padding:35px 0 20px;overflow:hidden}
.hero-illustration{width:112%;max-width:none;height:auto;display:block;flex-shrink:0;animation:illustration-enter 850ms var(--ease-out) both}
.art-eyebrow{position:absolute;top:54px;inset-inline:32px;display:flex;justify-content:space-between;gap:12px;font-size:9px;letter-spacing:.7px;color:#72617e;z-index:1}.art-eyebrow span:first-child{font-size:8px;letter-spacing:1.2px}
.signature-art .art-caption{position:absolute;bottom:26px;inset-inline:30px;display:flex;gap:12px;align-items:center;font-size:11px;color:#5f4d73;justify-content:center}.art-caption-line{width:28px;height:1px;background:#b49ccb}
.intro-strip{border-top:1px solid var(--brand-border);border-bottom:1px solid var(--brand-border);font-size:13px;gap:25px;padding-block:24px}.intro-strip b{color:#675d73;font-weight:500}.intro-strip>span:first-child{color:#8b7b9b;font-size:11px}.intro-strip .strip-end{font-size:11px;margin-inline-start:auto}
.workspace-section{background:#f1ecf5;padding-top:70px;margin-top:25px}.section-top h2,.dialog-section h2,.flow-section h2{font-weight:600;letter-spacing:-1.2px}.workspace{box-shadow:0 16px 54px rgb(39 32 53 / .045);border-color:#e2d9eb;border-radius:24px;background:#fff}.sidebar{background:#faf8fc}.studio-avatar{background:#eee7f7;display:grid;place-items:center}.side-item.active{background:var(--brand-lavender-light);color:var(--brand-primary)}
.workspace-toolbar h3{font-weight:500}.workspace-main .eyebrow{font-size:11px}.stats>div{border-color:#e7e0ed;border-radius:14px}.stats .stat-special{background:#f2edf8}.stats .revenue-stat{background:#f0f6ef;border-color:#deeadc}.appointment-person strong{font-weight:500}.avatar{background:var(--brand-lavender-light);color:var(--brand-primary)}.status.confirmed{background:#eee7f8;color:var(--brand-primary)}.row-buttons button{min-height:44px}.day-control button{min-width:44px;min-height:44px}.appointment-answers summary{min-height:44px;display:flex;align-items:center}.form-grid input,.form-grid select{min-width:0}.empty:before{content:'';display:block;width:160px;height:115px;background:url('assets/illustrations/empty-calendar.svg') center/contain no-repeat;margin:0 auto 12px}
.studio-builder,.dialog-builder{border-radius:24px}.builder-controls,.studio-editor{background:#fff}.question-option:has(input:checked){background:var(--brand-lavender-light);border-color:var(--brand-primary)}.client-preview{background:#f2ecf8}.outline-button{min-height:44px}.preview-progress span:first-child{color:var(--brand-primary)}
.care-section{background:#ece5f4;border-radius:28px}.closing-mark{display:block;margin:0 auto 20px}.closing h2{font-weight:600}.closing .button{margin-top:25px}footer .brand img{width:148px}dialog{box-shadow:var(--shadow-sheet);border-radius:24px}dialog::backdrop{background:rgb(30 20 43 / .4);backdrop-filter:blur(3px)}
@keyframes illustration-enter{from{opacity:0;transform:translateY(18px) rotate(-2deg)}to{opacity:1;transform:none}}
@media(min-width:1440px){.hero{gap:70px;padding-block:70px 80px}.signature-art{min-height:510px}}
@media(max-width:1100px){.header nav{gap:17px;font-size:12px}.header-inner,.wrap{width:calc(100% - 64px)}.header-inner{gap:18px}.brand img{width:150px}.header-app-link{font-size:12px}.hero{gap:25px}.hero h1{font-size:56px}.hero-actions .text-link{min-height:30px}.signature-art{min-height:440px}.intro-strip .strip-end{display:none}}
@media(max-width:800px){.header{height:76px}.header-inner,.wrap{width:calc(100% - 40px)}.header nav{display:none;position:absolute;top:calc(100% - 1px);inset-inline:0;background:var(--brand-paper);padding:16px;border:1px solid var(--brand-border);border-radius:0 0 18px 18px;box-shadow:var(--shadow-card)}.header.menu-open nav{display:grid;gap:4px}.header nav a{padding:9px 12px;font-size:15px;min-height:48px}.menu-toggle{display:grid;place-items:center}.header-app-link{padding:9px 13px;min-height:44px}.hero{grid-template-columns:1fr 1fr;min-height:560px;padding-block:38px 45px;gap:25px}.hero h1{font-size:47px;letter-spacing:-1.8px}.hero-copy>p{font-size:15px;line-height:1.9}.hero .eyebrow{font-size:11px;margin-bottom:22px}.hero-actions .button{font-size:12px;padding-inline:16px;gap:14px}.hero-footnote{display:none}.hero-note{font-size:10px;align-items:flex-start}.signature-art{min-height:370px;border-radius:45% 45% 22px 22px}.art-eyebrow{top:40px;inset-inline:20px;justify-content:center}.art-eyebrow span:first-child{display:none}.signature-art .art-caption{font-size:9px;inset-inline:15px;gap:8px;bottom:22px}.workspace-section{padding-top:42px}.intro-strip{gap:20px}}
@media(max-width:560px){.header{height:72px}.header-inner{gap:10px}.brand img{width:136px}.header-actions{gap:6px}.header-app-link{font-size:11px;padding-inline:12px;gap:8px}.header-app-link span{display:none}.hero{grid-template-columns:1fr;padding-top:36px;padding-bottom:30px;gap:28px}.hero-copy{padding:0}.hero h1{font-size:clamp(43px,11.9vw,55px);line-height:1.16;letter-spacing:-2px}.hero-copy>p{font-size:15px;margin-top:20px;line-height:1.95;max-width:355px}.hero .eyebrow{font-size:11px;margin-bottom:20px}.hero-actions{margin-top:23px;gap:12px;display:grid;grid-template-columns:1fr}.hero-actions .button{font-size:14px;justify-content:space-between;min-height:52px;padding:13px 21px}.hero-actions .text-link{font-size:12px;justify-content:center;min-height:40px}.hero-note{justify-content:center;margin-top:8px;font-size:10px;gap:6px}.signature-art{min-height:310px;height:310px;margin-inline:5px;border-radius:44% 44% 20px 20px;padding-top:18px}.hero-illustration{width:105%;height:320px;object-fit:contain}.art-eyebrow{top:29px}.signature-art .art-caption{bottom:18px;font-size:9px}.intro-strip{padding-block:20px;gap:12px 20px;justify-content:center}.intro-strip>span:first-child{flex-basis:100%;text-align:center;font-size:10px}.intro-strip b{font-size:12px}.workspace-section{margin-top:0}.workspace-toolbar{gap:14px;align-items:flex-start}.workspace-toolbar .workspace-actions{gap:8px}.workspace-actions .outline-button{font-size:10px;padding-inline:10px}.workspace-toolbar h3{font-size:23px}.stats b{font-size:23px}.section-top h2{font-size:32px}.calendar-controls{gap:15px}.appointment-person strong{font-size:14px}.appointment-person small{font-size:11px}.row-buttons button{font-size:11px;min-height:44px}.workspace-foot{font-size:10px}.workspace-foot .plain-button{min-height:44px}.question-options label{min-height:48px}.closing h2{font-size:39px}footer{padding-block:25px;align-items:center}html{scroll-padding-top:86px}section[id]{scroll-margin-top:86px}}
@media(prefers-reduced-motion:reduce){.hero-illustration{animation:none}.header{transition:none}}
/* Keep the illustration labels inside its curved silhouette. */
.art-eyebrow{inset-inline:25%;justify-content:center;white-space:nowrap}
@media(max-width:560px){.art-eyebrow{inset-inline:20px}}
/* The browser chrome and every product header share the primary surface. */
.header,.header.is-scrolled,.header.menu-open{background:var(--brand-primary);color:#fff;border-bottom-color:rgb(255 255 255 / .15);backdrop-filter:none}
.header nav a:hover{color:#fff;background:rgb(255 255 255 / .1)}
.header nav a{padding-inline:5px;border-radius:6px}
.header-app-link{color:#fff;border-color:rgb(255 255 255 / .45);background:var(--brand-primary)}
.header-app-link:hover{background:var(--brand-primary-hover)}
.menu-toggle{color:#fff}.menu-toggle:hover{background:rgb(255 255 255 / .12)}
.header :focus-visible{outline-color:#fff}
.hero{min-height:610px;padding-block:60px 70px}
.hero h1{font-size:clamp(42px,4.5vw,65px);line-height:1.24;letter-spacing:-1.8px}
.hero-copy>p{font-size:18px;max-width:475px;line-height:1.9;margin-top:25px}
.hero-copy>.hero-note{font-size:12px;line-height:1.8;color:var(--brand-muted);margin-top:18px;max-width:430px;display:block}
.signature-art{padding-block:20px;min-height:460px}
.workspace-section{margin-top:0}
@media(max-width:800px){.header nav{background:var(--brand-primary);color:#fff;border-color:rgb(255 255 255 / .2)}.hero{min-height:520px;padding-block:40px 50px}.hero h1{font-size:45px}.hero-copy>p{font-size:16px}.hero-copy>.hero-note{font-size:11px}}
@media(max-width:560px){.hero{padding-block:36px 35px;gap:25px}.hero h1{font-size:clamp(35px,9.6vw,42px);line-height:1.3;letter-spacing:-1px}.hero-copy>p{font-size:16px;line-height:1.9;margin-top:21px}.hero-actions{margin-top:25px}.hero-copy>.hero-note{text-align:center;font-size:11px;margin-top:13px}.signature-art{min-height:280px;height:280px;border-radius:40% 40% 20px 20px}.hero-illustration{height:290px}.workspace-section{padding-top:42px}}
/* The active XB header uses the same primary as the product and browser chrome. */
.header,.header.is-scrolled,.header.menu-open{background:var(--brand-primary);color:#fff;border-bottom-color:rgb(255 255 255 / .16)}
.header nav a:hover{color:#fff;background:rgb(255 255 255 / .12)}
.header-app-link{background:rgb(255 255 255 / .1);border-color:rgb(255 255 255 / .4);color:#fff}
.header-app-link:hover{background:rgb(255 255 255 / .2)}
.menu-toggle{color:#fff}.menu-toggle:hover{background:rgb(255 255 255 / .12)}
.header :focus-visible{outline-color:#fff}
.signature-art{background:#eee6f8;border-color:#e4d9f1}
.workspace-section{background:#f3eef8}.care-section{background:#ede5f7}
@media(max-width:800px){.header nav{background:var(--brand-primary);color:#fff;border-color:rgb(255 255 255 / .2)}}