/* Caleida / Connected. Quiet surfaces, expressive scale, product-first storytelling. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700;750&display=swap');

:root {
  --x-paper: #fbfafc;
  --x-ink: #22212b;
  --x-muted: #6e6c7c;
  --x-purple: #534ab7;
  --x-lilac: #eeedf7;
  --x-line: #e9e7ee;
  --font-display: 'DM Sans', sans-serif;
  --font-sans: 'DM Sans', sans-serif;
  --font-sans-sm: 'DM Sans', sans-serif;
  --caleida-bg: var(--x-paper);
}
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
html, body { overflow-x: clip; }
body { background: var(--x-paper); }
.grid-bg { display: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #8277d6; outline-offset: 5px; }
#main-content:focus { outline: none; }
.x-header { position: sticky; top: 0; z-index: 100; background: rgba(251,250,252,.87); border-bottom: 1px solid rgba(34,33,43,.07); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.x-nav { max-width: 1360px; height: 76px; padding: 0 48px; margin: auto; display: flex; align-items: center; gap: 48px; }
.x-logo { display: flex; flex-shrink: 0; }
.x-logo img { width: 112px; height: auto; }
.x-nav-links { display: flex; gap: 30px; margin: auto; align-items: center; }
.x-nav-links a, .x-login { font-size: 13px; font-weight: 500; color: var(--x-ink); transition: color .2s; }
.x-nav-links a:hover, .x-nav-links a[aria-current], .x-login:hover { color: var(--x-purple); }
.x-nav-actions { display: flex; align-items: center; gap: 23px; }
.x-language { border: 0; background: none; color: var(--x-muted); font-size: 11px; padding: 10px 0; cursor: pointer; }
.x-language span { margin-left: 4px; }
.x-button { display: inline-flex; justify-content: center; align-items: center; gap: 20px; min-height: 50px; padding: 13px 24px; background: var(--x-purple); color: white; border: 1px solid transparent; border-radius: 50px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .2s, transform .25s, box-shadow .25s; }
.x-button:hover { background: #413795; color: white; transform: translateY(-2px); box-shadow: 0 7px 20px #534ab71f; }
.x-button-small { min-height: 37px; padding: 8px 18px; font-size: 12px; gap: 14px; white-space: nowrap; }
.x-text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--x-purple); font-size: 14px; font-weight: 500; }
.x-text-link svg { transition: transform .25s; flex-shrink: 0; }
.x-text-link:hover svg { transform: translateX(4px); }
.x-menu-trigger { display: none; }
.x-skip { position: absolute; top: -100px; left: 20px; padding: 10px; background: white; }
.x-skip:focus { top: 15px; z-index: 120; }
.x-experience { color: var(--x-ink); font-family: 'DM Sans', sans-serif; }
.x-experience h1, .x-experience h2, .x-experience h3, .x-experience h4 { font-family: inherit; }
.x-experience p { margin: 0; }
.x-eyebrow { color: var(--x-purple); font-size: 10px; font-weight: 650; letter-spacing: .16em; line-height: 1.5; text-transform: uppercase; }
.x-hero { width: 100%; overflow: hidden; background: radial-gradient(ellipse 55% 31% at 50% 89%, #c9c3ef 0, #e5e1f7 45%, transparent 100%), var(--x-paper); padding: 51px 0 0; }
.x-hero-copy { text-align: center; margin: 0 auto; padding: 0 24px; }
.x-hero h1, .x-platform-hero h1 { font-size: clamp(44px, 5.7vw, 82px); font-weight: 550; line-height: 1.04; letter-spacing: -.063em; margin: 22px 0; }
.x-hero h1 span, .x-platform-hero h1 span { color: var(--x-purple); }
.x-hero-intro { max-width: 520px; margin: 0 auto !important; font-size: 16px; line-height: 1.65; color: var(--x-muted); text-wrap: balance; }
.x-hero-actions { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 26px; }
.x-hero-copy > * { animation: x-entrance .8s both; }
.x-hero-copy > :nth-child(2) { animation-delay: .08s; }
.x-hero-copy > :nth-child(3) { animation-delay: .16s; }
.x-hero-copy > :nth-child(4) { animation-delay: .24s; }
.x-product-stage { padding: 32px 36px 16px; max-width: 1190px; margin: auto; animation: x-entrance 1s .25s both; }
.x-product-tabs { width: fit-content; display: flex; align-items: center; gap: 5px; margin: 0 auto 20px; padding: 4px; background: #eae8f1; border: 1px solid #e5e2ef; border-radius: 50px; }
.x-product-tabs button { display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 8px 16px; border: none; border-radius: 50px; cursor: pointer; color: #686474; background: transparent; transition: background .25s, color .25s, box-shadow .25s; }
.x-product-tabs button[aria-selected="true"] { background: white; color: var(--x-purple); box-shadow: 0 2px 5px #26203a0a; }
.x-device { min-height: 333px; display: grid; grid-template-columns: 165px 1fr; border: 6px solid #fff; border-radius: 16px; background: #fff; box-shadow: 0 30px 70px -28px #38296744, 0 0 0 1px #ccc7e580; overflow: hidden; text-align: left; font-size: 11px; line-height: 1.45; }
.x-device-sidebar { padding: 20px 12px; background: #f6f5fa; display: flex; flex-direction: column; gap: 6px; border-radius: 10px 0 0 10px; }
.x-device-sidebar > img { width: 85px; margin: 0 9px 23px; }
.x-device-sidebar > span { display: flex; gap: 10px; align-items: center; font-size: 9px; color: #737080; padding: 9px; border-radius: 5px; }
.x-device-sidebar > span svg { width: 15px; height: 15px; }
.x-device-sidebar > .x-sidebar-active { color: var(--x-purple); background: #e9e6f4; }
.x-sidebar-bottom { display: flex; align-items: center; gap: 8px; margin: auto 0 0 4px; padding-top: 16px; font-size: 8px; color: var(--x-muted); }
.x-sidebar-bottom .x-avatar { width: 22px; height: 22px; font-size: 10px; }
.x-device-main { min-width: 0; }
.x-device-top { height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 22px; border-bottom: 1px solid #f0eef5; font-size: 9px; color: #514e5d; }
.x-subtle { color: #767281; margin-left: 7px; }
.x-live { display: inline-flex; align-items: center; gap: 5px; font-size: 8px; }
.x-live i, .x-status-dot { background: #459477; width: 5px; height: 5px; border-radius: 50%; }
.x-device-content { padding: 21px 23px 22px; animation: x-panel-in .35s both; }
.x-device-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 21px; }
.x-micro { color: #777380; font-size: 7px; font-weight: 600; letter-spacing: .13em; }
.x-device-title h3 { font-size: 19px; font-weight: 550; letter-spacing: -.045em; margin-top: 6px; }
.x-demo-label { font-size: 8px; color: #797386; border: 1px solid #e9e6ee; border-radius: 4px; padding: 4px 8px; }
.x-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.x-board-label { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 500; margin-bottom: 10px; }
.x-board-label i { height: 5px; width: 5px; background: #a49acc; border-radius: 50%; }
.x-board-label > span { margin-left: auto; color: #a29aa8; font-size: 8px; }
.x-board-item { min-height: 170px; padding: 11px; border: 1px solid #ebe8f0; border-radius: 8px; display: flex; flex-direction: column; align-items: flex-start; background: #fff; }
.x-board-item > strong { font-size: 10px; font-weight: 550; margin-top: 10px; }
.x-board-item > span { font-size: 8px; color: #777181; margin-top: 4px; }
.x-board-item > small { margin-top: auto; padding-top: 13px; font-size: 7px; display: flex; align-items: center; gap: 4px; color: #6b6777; }
.x-mini-art { height: 81px; width: 100%; position: relative; overflow: hidden; padding: 8px; color: #f2efdb; background: #50439e; border-radius: 4px; }
.x-mini-art > span { font-size: 8px; letter-spacing: -.06em; }
.x-mini-art > strong { position: relative; z-index: 1; display: block; white-space: pre-line; line-height: 1.06; letter-spacing: -.055em; font-size: 18px; font-weight: 500; margin-top: 5px; }
.x-art-orbit { position: absolute; width: 70px; height: 70px; border-radius: 50%; right: -16px; bottom: -9px; border: 16px solid #c8ed9e; }
.x-campaign-symbol { width: 100%; height: 60px; display: grid; place-items: center; background: #f5f2fc; border-radius: 4px; color: #8f7ec4; }
.x-source-line { display: flex; align-items: center; gap: 8px; color: #897baf; margin-top: 15px; font-size: 8px; }
.x-source-line span { border: 1px solid #e9e4f4; padding: 4px 8px; border-radius: 4px; }
.x-inline-person { display: flex; align-items: center; gap: 7px; font-size: 9px; }
.x-avatar { display: grid; place-items: center; width: 31px; height: 31px; flex-shrink: 0; background: #ece7f6; color: #6c5c96; border-radius: 50%; font-size: 10px; }
.x-mini-bubble { margin-top: 15px !important; padding: 10px; border-radius: 0 8px 8px 8px; background: #f1eff6; font-size: 9px; line-height: 1.6; }
.x-mini-response { display: flex; align-items: center; gap: 4px; color: var(--x-purple) !important; font-size: 7px !important; padding-top: 10px; }
.x-board-item > .x-success-icon { width: 39px; height: 39px; border-radius: 50%; background: #edf5f0; color: #4e8d6b; display: grid; place-items: center; margin: 4px 0; }
.x-meeting-time { display: flex; align-items: center; gap: 7px; margin-top: 17px; font-size: 9px; color: #6e6a79; }
.x-product-caption { text-align: center; color: #736b86; font-size: 9px; padding-top: 15px; }
.x-product-caption span { margin: 0 8px; }
.x-preview-conversation { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; height: 193px; }
.x-context-summary { padding: 8px 12px; color: var(--x-purple); }
.x-context-summary h4 { font-size: 20px; letter-spacing: -.04em; font-weight: 500; margin: 8px 0; }
.x-context-summary p { font-size: 10px; color: var(--x-muted); max-width: 240px; }
.x-context-summary > span { display: inline-block; margin-top: 15px; font-size: 9px; }
.x-funnel-example { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; min-height: 193px; }
.x-funnel-example > div { padding: 20px 14px; background: #f6f4fa; border-radius: 6px; }
.x-funnel-step { font-size: 9px; color: #9485b4; }
.x-funnel-example h4 { font-weight: 500; font-size: 13px; margin: 10px 0; }
.x-funnel-example p { font-size: 8px; color: #777080; min-height: 35px; margin-top: 10px; }
.x-funnel-example svg { color: #7767a3; width: 17px; }
.x-funnel-bar { height: 5px; width: var(--bar-width); background: #9281c1; border-radius: 10px; }
.x-section { max-width: 1200px; margin: 0 auto; padding: 110px 48px; }
.x-section-title { font-size: clamp(36px, 4vw, 57px); font-weight: 500; letter-spacing: -.055em; line-height: 1.07; margin-top: 22px; }
.x-section-title span { color: #898391; }
.x-section-intro { font-size: 16px; line-height: 1.7; color: var(--x-muted); max-width: 520px; margin-top: 23px !important; }
.x-story { text-align: center; padding-top: 115px; padding-bottom: 105px; }
.x-story .x-section-intro { margin-left: auto !important; margin-right: auto !important; }
.x-journey { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 890px; margin: 60px auto 0; position: relative; }
.x-journey:before { content: ''; position: absolute; left: 10%; right: 10%; top: 27px; height: 1px; background: #ded9eb; }
.x-journey button { position: relative; display: flex; flex-direction: column; align-items: center; border: 0; background: none; cursor: pointer; padding: 0 0 18px; color: #89818e; }
.x-journey-node { width: 55px; height: 55px; border: 1px solid #e7e2f0; border-radius: 50%; display: grid; place-items: center; background: var(--x-paper); transition: background .25s, color .25s, transform .25s; }
.x-journey button[aria-pressed="true"] { color: var(--x-purple); }
.x-journey button[aria-pressed="true"] .x-journey-node { color: white; background: var(--x-purple); border-color: var(--x-purple); box-shadow: 0 0 0 7px #534ab708; }
.x-journey button:hover .x-journey-node { transform: translateY(-4px); }
.x-journey-index { font-size: 8px; letter-spacing: .1em; margin-top: 17px; }
.x-journey strong { font-size: 16px; font-weight: 500; margin-top: 4px; }
.x-journey-detail { max-width: 560px; min-height: 158px; margin: 25px auto 0; animation: x-panel-in .35s; }
.x-journey-detail h3 { font-size: 22px; letter-spacing: -.035em; font-weight: 500; }
.x-journey-detail p { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--x-muted); }
.x-journey-detail a { margin-top: 19px; font-size: 12px; }
.x-creative { background: #28203e; overflow: hidden; color: #faf8fc; }
.x-creative-inner { max-width: 1200px; margin: auto; padding: 85px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 45px; align-items: center; min-height: 650px; }
.x-creative .x-eyebrow { color: #b7a6de; }
.x-creative .x-section-title { font-size: clamp(50px, 5.8vw, 82px); margin-bottom: 27px; }
.x-creative .x-section-title span { color: #baa9e6; }
.x-creative-copy > p:not(.x-eyebrow) { max-width: 350px; font-size: 16px; line-height: 1.8; color: #c1b9ce; }
.x-creative .x-text-link { color: #e1d6f7; margin-top: 27px; }
.x-creative-tags { margin-top: 49px; display: flex; gap: 14px; flex-wrap: wrap; }
.x-creative-tags span { font-size: 9px; color: #bcb0d0; border-bottom: 1px solid #5a4c70; padding-bottom: 9px; }
.x-creative-visual { min-height: 470px; position: relative; perspective: 1000px; }
.x-creative-sheet { position: absolute; width: 285px; height: 380px; border-radius: 4px; padding: 25px; box-shadow: 0 30px 55px #130d2760; }
.x-creative-sheet-back { top: 22px; right: 6px; background: #c5b2e2; color: #443661; transform: rotate(12deg); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.x-creative-sheet-back > span:first-child { font-size: 24px; letter-spacing: -.07em; }
.x-creative-sheet-back > span:last-child { font-size: 9px; letter-spacing: .15em; }
.x-sheet-orb { width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle at 30% 27%, #f6f1fe, #a68ac7 45%, #4d306d 90%); box-shadow: 10px 25px 30px #49335d44; }
.x-creative-sheet-front { top: 47px; left: 13px; background: #d7efaf; color: #34352d; transform: rotate(-8deg); overflow: hidden; transition: transform .6s; }
.x-creative-visual:hover .x-creative-sheet-front { transform: rotate(-4deg) translateY(-6px); }
.x-sheet-wordmark { font-size: 26px; font-weight: 600; letter-spacing: -.07em; }
.x-creative-sheet-front h3 { position: relative; z-index: 1; font-size: 40px; font-weight: 500; letter-spacing: -.055em; line-height: .97; margin-top: 33px; }
.x-sheet-flower { position: absolute; width: 153px; height: 153px; right: -37px; bottom: 20px; transform: rotate(15deg); }
.x-sheet-flower i { position: absolute; inset: 0; border-radius: 50%; border: 26px solid #7a68a8; transform: scaleX(.44); }
.x-sheet-flower i:nth-child(2) { transform: rotate(45deg) scaleX(.44); }
.x-sheet-flower i:nth-child(3) { transform: rotate(90deg) scaleX(.44); }
.x-sheet-flower i:nth-child(4) { transform: rotate(135deg) scaleX(.44); }
.x-sheet-bottom { position: absolute; bottom: 23px; left: 25px; right: 25px; display: flex; justify-content: space-between; align-items: center; }
.x-sheet-bottom span { font-size: 7px; letter-spacing: .1em; }
.x-approval { position: absolute; bottom: 9px; right: 24px; background: #fff; color: #66547c; display: flex; align-items: center; gap: 9px; padding: 13px 18px; border-radius: 50px; font-size: 11px; box-shadow: 0 10px 25px #16102022; }
.x-creative-note { position: absolute; bottom: -27px; right: 25px; color: #b7a8c8; font-size: 8px; }
.x-human { padding-top: 120px; padding-bottom: 115px; }
.x-human-heading { text-align: center; }
.x-human-heading .x-section-title { font-size: clamp(34px, 3.8vw, 52px); }
.x-human-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 100px; align-items: center; margin-top: 65px; }
.x-human-visual { padding: 37px; border-radius: 26px; background: #eeebf5; }
.x-conversation { border-radius: 15px; background: white; padding: 23px; box-shadow: 0 20px 50px #4535670d; }
.x-chat-header { display: flex; align-items: center; gap: 11px; padding-bottom: 17px; border-bottom: 1px solid #eeebf3; }
.x-chat-header .x-avatar { width: 37px; height: 37px; }
.x-chat-header strong { display: block; font-size: 12px; font-weight: 500; }
.x-chat-header div > span { display: block; font-size: 8px; color: #89808f; margin-top: 3px; }
.x-chat-header > .x-status-dot { margin-left: auto; }
.x-messages { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 0; }
.x-messages p { font-size: 11px; line-height: 1.7; background: #f3f1f6; padding: 12px 15px; border-radius: 1px 12px 12px 12px; max-width: 86%; }
.x-messages .x-reply { align-self: flex-end; color: #55438b; background: #eae5f6; border-radius: 12px 1px 12px 12px; }
.x-reply > span { display: flex; align-items: center; gap: 4px; font-size: 8px; font-weight: 600; margin-bottom: 5px; }
.x-appointment { display: flex; align-items: center; gap: 10px; border: 1px solid #e8e4ef; border-radius: 7px; padding: 12px 9px; }
.x-calendar-icon { display: grid; place-items: center; background: #f0edf6; padding: 6px; color: #7d69a9; border-radius: 5px; }
.x-appointment strong { display: block; font-size: 10px; font-weight: 500; }
.x-appointment div > span { display: block; margin-top: 3px; font-size: 8px; color: #847b8e; }
.x-appointment > svg { margin-left: auto; color: #789b80; }
.x-human-copy > svg { color: #8a78b2; margin-bottom: 25px; }
.x-human-copy h3 { font-size: 31px; font-weight: 500; line-height: 1.15; letter-spacing: -.04em; max-width: 320px; }
.x-human-copy > p { color: var(--x-muted); font-size: 15px; line-height: 1.8; margin-top: 20px; max-width: 350px; }
.x-human-copy > a { margin-top: 24px; }
.x-handoff { display: flex; align-items: flex-start; gap: 13px; border-top: 1px solid var(--x-line); margin-top: 35px; padding-top: 25px; color: #8c7ba8; max-width: 350px; }
.x-handoff > svg { flex-shrink: 0; }
.x-handoff p { color: var(--x-muted); font-size: 12px; line-height: 1.7; }
.x-conversation.is-compact { border: 1px solid #ebe7f1; padding: 9px 12px; border-radius: 7px; box-shadow: none; height: 193px; }
.is-compact .x-chat-header { padding-bottom: 6px; gap: 7px; }
.is-compact .x-chat-header .x-avatar { height: 22px; width: 22px; font-size: 7px; }
.is-compact .x-chat-header strong { font-size: 9px; }
.is-compact .x-chat-header div > span { font-size: 6px; }
.is-compact .x-messages { padding: 7px 0; gap: 5px; }
.is-compact .x-messages p { padding: 5px 8px; font-size: 7px; max-width: 90%; }
.is-compact .x-reply > span { font-size: 6px; margin-bottom: 2px; }
.is-compact .x-appointment { padding: 5px; gap: 5px; }
.is-compact .x-calendar-icon { padding: 3px; }
.is-compact .x-calendar-icon svg { width: 13px; height: 13px; }
.is-compact .x-appointment strong { font-size: 7px; }
.is-compact .x-appointment div > span { font-size: 6px; }
.x-capabilities { border-top: 1px solid var(--x-line); }
.x-capability-layout { display: grid; grid-template-columns: 270px 1fr; gap: 90px; margin-top: 60px; }
.x-capability-nav { display: flex; flex-direction: column; align-self: start; gap: 4px; }
.x-capability-nav button { cursor: pointer; display: flex; align-items: center; gap: 25px; border: 0; background: none; padding: 18px 20px; border-radius: 8px; color: #8a828f; font-size: 21px; font-weight: 500; text-align: left; transition: color .25s, background .25s; }
.x-capability-nav button > span { font-size: 9px; font-weight: 400; }
.x-capability-nav button > svg { margin-left: auto; opacity: 0; }
.x-capability-nav button[aria-pressed="true"] { background: #eeebf6; color: var(--x-purple); }
.x-capability-nav button[aria-pressed="true"] svg { opacity: 1; }
.x-capability-nav button:hover { color: var(--x-purple); }
.x-capability-content { animation: x-panel-in .3s; min-height: 440px; }
.x-capability-content > h3 { font-size: 26px; font-weight: 500; letter-spacing: -.035em; }
.x-capability-content > p { color: var(--x-muted); font-size: 14px; line-height: 1.8; margin-top: 13px; margin-bottom: 28px; max-width: 570px; }
.x-feature-list details { border-top: 1px solid var(--x-line); }
.x-feature-list details:last-child { border-bottom: 1px solid var(--x-line); }
.x-feature-list summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 19px 0; list-style: none; cursor: pointer; font-size: 14px; font-weight: 500; }
.x-feature-list summary::-webkit-details-marker { display: none; }
.x-feature-list summary svg { flex-shrink: 0; color: #9484b8; transition: transform .2s; }
.x-feature-list details[open] summary { color: var(--x-purple); }
.x-feature-list details[open] summary svg { transform: rotate(45deg); }
.x-feature-list details > p { color: var(--x-muted); font-size: 13px; line-height: 1.8; padding: 0 28px 22px 0; animation: x-panel-in .25s; }
.x-integrations { border-top: 1px solid var(--x-line); }
.x-integrations-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.x-integrations .x-section-title { font-size: 44px; }
.x-integrations .x-section-intro { font-size: 14px; max-width: 420px; }
.x-integrations a { margin-top: 25px; }
.x-integration-wall { display: flex; flex-direction: column; gap: 9px; transform: rotate(-5deg); padding: 25px 0; }
.x-integration-wall > div { display: flex; justify-content: center; gap: 9px; }
.x-integration-wall > div:nth-child(even) { transform: translateX(-16px); }
.x-integration-wall span { display: flex; align-items: center; justify-content: center; padding: 20px 18px; background: #fff; border: 1px solid #ece8f0; box-shadow: 0 4px 12px #40324903; border-radius: 11px; font-size: 15px; letter-spacing: -.035em; font-weight: 600; white-space: nowrap; color: #665e70; }
.x-integration-note { color: var(--x-muted); font-size: 10px; max-width: 620px; line-height: 1.7; margin-top: 55px !important; }
.x-closing { background: #eeeaf7; padding: 90px 24px 100px; text-align: center; }
.x-closing img { width: 120px; margin-bottom: 27px; }
.x-closing h2 { font-size: clamp(38px, 4.8vw, 68px); line-height: 1.06; font-weight: 500; letter-spacing: -.055em; }
.x-closing h2 span { color: var(--x-purple); }
.x-closing p { color: var(--x-muted); margin-top: 23px; font-size: 15px; }
.x-closing a { margin-top: 28px; }
.x-platform-hero { max-width: 1104px; padding: 80px 48px 40px; margin: auto; text-align: center; }
.x-platform-hero h1 { font-size: clamp(42px, 5.4vw, 72px); }
.x-platform-hero .x-section-intro { margin: 0 auto !important; }
.x-capabilities-full { border-top: 0; padding-top: 15px; }
.x-will-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s, transform .8s cubic-bezier(.2,.7,.2,1); }
.x-will-reveal.x-revealed { opacity: 1; transform: translateY(0); }
@keyframes x-entrance { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes x-panel-in { from { opacity: .2; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
/* Shared visual language for existing solutions, pricing, news, forms and legal pages. */
.app-root > footer { margin-top: 0 !important; background: var(--x-paper) !important; }
.app-root > footer .t-mono { font-family: var(--font-sans); letter-spacing: .04em !important; }
.app-root > footer .container { max-width: 1200px; padding-top: 65px !important; }
.app-root > footer .footer-grid { gap: 30px; }
.page-header { background: none; }
.page-header h1, .page-title { letter-spacing: -.05em; }
.block-title { letter-spacing: -.045em; }
.btn { border-radius: 50px; text-transform: none; letter-spacing: 0; font-family: var(--font-sans); }
.card, .metric, .pricing-card { border-radius: 16px; box-shadow: none; }
.num-kicker, .hud-label { font-family: var(--font-sans); letter-spacing: .1em; }
.form-input, .form-select, .form-textarea { border-radius: 9px; }
.footer-funding { margin-top: 30px; }
.page-enter .t-italic, .page-enter .block-title em { font-style: normal; }
.page-enter > .block { max-width: 1200px; padding-left: 48px; padding-right: 48px; }
.page-enter > .block:first-child { padding-top: 65px; }
.page-enter > .block:first-child h1 { font-size: clamp(40px, 4.6vw, 66px) !important; line-height: 1.08; font-weight: 500; letter-spacing: -.055em; }
.page-enter .eyebrow-pill { background: transparent; border: 0; padding: 0; box-shadow: none; font-family: var(--font-sans); font-size: 10px; font-weight: 600; letter-spacing: .14em; }
.page-enter .eyebrow-pill:before { display: none; }
.page-enter .hud-corner { display: none; }
.page-enter .t-mono { font-family: var(--font-sans); }
main:is([data-route="pricing"], [data-route="demo"], [data-route="cases"], [data-route="news"]) .page-enter > .block:first-child { text-align: center; }
main:is([data-route="pricing"], [data-route="demo"], [data-route="cases"], [data-route="news"]) .page-enter > .block:first-child h1 { max-width: 900px !important; margin-left: auto; margin-right: auto; }
main:is([data-route="pricing"], [data-route="demo"], [data-route="cases"], [data-route="news"]) .page-enter > .block:first-child > p { font-size: 16px !important; max-width: 600px !important; margin-left: auto; margin-right: auto; color: var(--x-muted) !important; }
.pricing-tabs { border: 0 !important; background: #eeebf5; padding: 5px !important; border-radius: 50px !important; }
.pricing-tab { border-radius: 50px; text-transform: none !important; font-family: var(--font-sans) !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 500 !important; }
.pricing-card { border-radius: 20px !important; background: white !important; padding: 32px 25px !important; }
.pricing-card > .t-mono:first-child { border-radius: 30px; }
.pricing-card .t-mono { letter-spacing: .025em !important; }
.pricing-card ul { border-top-style: solid !important; }
.pricing-integration-track { border-radius: 20px; background: #efecf7; }
.pricing-integration-title, .pricing-integration-track .block-title { font-size: 38px; }
.split-faq > div:last-child { border: 0 !important; }
.solutions-hero { gap: 75px; }
.solutions-hero .t-display { letter-spacing: -.055em; }
.solutions-engine { border-radius: 22px; background: #eeeaf6; border: 0; box-shadow: none; padding: 32px; }
.solutions-engine:before, .solution-card:before { display: none; }
.solutions-engine-top { font-family: var(--font-sans); letter-spacing: 0; }
.solutions-engine-row { border-color: #ddd6ea; }
.solution-card { border-radius: 18px; padding: 28px; background: #fff; border-color: #e7e1ed; transition: transform .3s, border-color .3s; }
.solution-card:hover { transform: translateY(-5px); box-shadow: none; }
.solution-card .solution-code { font-size: 55px; font-family: var(--font-sans); letter-spacing: -.055em; color: var(--solution-color); }
.solution-card h3 { font-family: var(--font-sans); font-weight: 500; letter-spacing: -.035em; }
.solution-card-top > span, .solution-card > strong { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; }
.solution-value, .solution-feature-card, .solution-flow-step, .solution-integration { border-radius: 12px; }
main[data-route="demo"] .page-enter { display: flex; flex-direction: column; }
main[data-route="demo"] .page-enter > .block { width: 100%; }
main[data-route="demo"] .page-enter > .block:nth-child(2) { order: 2; }
main[data-route="demo"] .page-enter > .block:nth-child(3) { padding-top: 15px; }
.split-demo { gap: 70px; }
.split-demo > div:last-child { background: #fff !important; border: 1px solid var(--x-line) !important; border-radius: 20px !important; box-shadow: 0 15px 60px #33234905; }
.split-demo .label { font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.page-enter .input { border-radius: 8px; background: var(--x-paper); font-family: var(--font-sans); }
.demo-option-row button { border-radius: 6px; font-family: var(--font-sans) !important; letter-spacing: 0 !important; font-size: 10px !important; }
@media (max-width: 760px) {
  .page-enter > .block { padding-left: 24px; padding-right: 24px; }
  .page-enter > .block:first-child { padding-top: 42px; }
  .page-enter > .block:first-child h1 { font-size: 39px !important; }
  main:is([data-route="pricing"], [data-route="demo"], [data-route="cases"], [data-route="news"]) .page-enter > .block:first-child > p { font-size: 14px !important; }
  .pricing-tab { padding: 11px 17px !important; font-size: 11px !important; }
  .split-demo { gap: 35px; }
  .split-demo > div:last-child { padding: 24px !important; }
  .solutions-hero { gap: 35px; }
  .solutions-engine { padding: 25px; }
}
@media (min-width: 1600px) {
  .x-hero { padding-top: 68px; }
  .x-product-stage { margin-top: 15px; }
}
@media (min-width: 761px) and (max-height: 900px) {
  .x-hero { padding-top: 22px; }
  .x-hero h1 { font-size: clamp(48px, 5vw, 64px); margin: 16px 0; }
  .x-hero-intro { font-size: 14px; }
  .x-hero-actions { margin-top: 18px; }
  .x-product-stage { padding-top: 18px; }
  .x-product-caption { padding-top: 11px; }
}
@media (max-width: 1150px) {
  .x-nav { gap: 28px; padding: 0 30px; }
  .x-nav-links { gap: 22px; }
  .x-nav-actions { gap: 15px; }
  .x-human-grid { gap: 55px; }
  .x-creative-sheet { width: 250px; height: 360px; }
  .x-creative-sheet-front { left: 0; }
  .x-creative-sheet-back { right: -10px; }
  .x-capability-layout { gap: 55px; }
  .x-integration-wall span { font-size: 13px; padding: 18px 13px; }
}
@media (max-width: 1000px) {
  .x-nav { height: 66px; }
  .x-nav-links, .x-login { display: none; }
  .x-nav-actions { margin-left: auto; }
  .x-menu-trigger { display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; width: 35px; height: 40px; border: 0; color: var(--x-ink); background: none; cursor: pointer; }
  .x-menu-trigger span { display: block; height: 1px; width: 20px; background: currentColor; transition: transform .2s; }
  .x-menu-trigger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .x-menu-trigger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .x-mobile-menu { height: calc(100dvh - 66px); background: var(--x-paper); padding: 25px 35px; overflow-y: auto; animation: x-panel-in .25s; }
  .x-mobile-menu > a { color: var(--x-ink); font-size: 27px; letter-spacing: -.04em; display: flex; align-items: center; justify-content: space-between; padding: 17px 0; border-bottom: 1px solid var(--x-line); }
  .x-device { grid-template-columns: 130px 1fr; }
  .x-device-sidebar { padding: 19px 6px; }
  .x-device-sidebar > span { font-size: 8px; gap: 7px; }
  .x-device-content { padding: 18px 15px; }
  .x-board { gap: 7px; }
  .x-board-item { padding: 8px; }
  .x-section { padding-left: 35px; padding-right: 35px; }
  .x-integrations-inner { gap: 35px; }
  .x-integrations .x-section-title { font-size: 38px; }
  .x-creative-inner { padding: 70px 35px; gap: 20px; }
}
@media (max-width: 760px) {
  .x-nav { padding: 0 22px; gap: 15px; }
  .x-logo img { width: 95px; }
  .x-nav-actions { gap: 14px; }
  .x-hero { padding-top: 42px; }
  .x-hero h1 { font-size: clamp(40px, 7.6vw, 58px); margin: 20px 0; }
  .x-hero-intro { max-width: 350px; font-size: 14px; }
  .x-eyebrow { font-size: 8px; letter-spacing: .14em; }
  .x-hero-actions { gap: 20px; margin-top: 22px; }
  .x-hero-actions .x-button { min-height: 43px; padding: 11px 18px; font-size: 12px; gap: 12px; }
  .x-hero-actions .x-text-link { font-size: 12px; }
  .x-product-stage { padding: 30px 20px 18px; }
  .x-product-tabs button { padding: 8px 13px; font-size: 10px; }
  .x-device { grid-template-columns: 1fr; min-height: 312px; border-width: 4px; border-radius: 12px; }
  .x-device-sidebar { display: none; }
  .x-device-top { padding: 0 14px; }
  .x-device-content { padding: 15px 13px; }
  .x-device-title { margin-bottom: 17px; }
  .x-device-title h3 { font-size: 16px; }
  .x-board-item { min-height: 168px; }
  .x-section { padding: 75px 25px; }
  .x-section-title { font-size: 39px; }
  .x-section-intro { font-size: 14px; }
  .x-journey { margin-top: 38px; }
  .x-journey-node { height: 43px; width: 43px; }
  .x-journey-node svg { height: 19px; width: 19px; }
  .x-journey:before { top: 21px; }
  .x-journey strong { font-size: 13px; }
  .x-journey-index { font-size: 7px; margin-top: 13px; }
  .x-journey-detail { min-height: 165px; margin-top: 20px; }
  .x-journey-detail h3 { font-size: 21px; }
  .x-journey-detail p { font-size: 13px; }
  .x-creative-inner { grid-template-columns: 1fr; padding: 65px 30px 75px; gap: 30px; }
  .x-creative .x-section-title { font-size: 64px; }
  .x-creative-copy > p:not(.x-eyebrow) { max-width: 440px; font-size: 14px; }
  .x-creative-tags { margin-top: 30px; }
  .x-creative-visual { width: 100%; max-width: 420px; margin: 0 auto; min-height: 460px; }
  .x-creative-sheet-front { left: 15px; }
  .x-creative-sheet-back { right: 15px; }
  .x-creative-sheet { width: 260px; height: 350px; }
  .x-human-grid { grid-template-columns: 1fr; margin-top: 35px; gap: 35px; }
  .x-human-heading { text-align: left; }
  .x-human-heading .x-section-title { font-size: 37px; }
  .x-human-visual { max-width: 480px; width: 100%; margin: auto; padding: 28px; }
  .x-human-copy > svg { display: none; }
  .x-human-copy h3 { font-size: 28px; max-width: 400px; }
  .x-human-copy > p { max-width: 500px; }
  .x-handoff { max-width: none; }
  .x-capability-layout { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
  .x-capability-nav { flex-direction: row; overflow-x: auto; gap: 3px; padding: 4px 0 9px; }
  .x-capability-nav button { padding: 11px 14px; font-size: 13px; flex-shrink: 0; border-radius: 30px; }
  .x-capability-nav button > span, .x-capability-nav button > svg { display: none; }
  .x-capability-content { min-height: 430px; }
  .x-capability-content > h3 { font-size: 24px; }
  .x-capability-content > p { font-size: 13px; }
  .x-integrations-inner { grid-template-columns: 1fr; gap: 40px; }
  .x-integration-wall { max-width: 480px; margin: auto; transform: rotate(-4deg); }
  .x-integration-wall span { font-size: 13px; padding: 17px 14px; }
  .x-integration-wall > div:nth-child(even) { transform: translateX(-6px); }
  .x-integration-note { margin-top: 35px !important; }
  .x-closing { padding: 70px 25px; }
  .x-closing p { font-size: 14px; }
  .x-platform-hero { padding: 55px 25px 20px; }
  .x-capabilities-full { padding-top: 10px; }
}
@media (max-width: 480px) {
  .x-nav { padding: 0 16px; gap: 9px; }
  .x-button-small { padding: 8px 13px; font-size: 11px; gap: 10px; }
  .x-hero-copy { padding: 0 16px; }
  .x-hero h1 { font-size: 39px; }
  .x-hero-actions { gap: 16px; }
  .x-hero-actions .x-text-link { gap: 4px; font-size: 11px; }
  .x-product-stage { padding: 26px 14px 16px; }
  .x-device { min-height: 315px; }
  .x-device-top .x-subtle { display: none; }
  .x-device-title h3 { max-width: 240px; font-size: 15px; }
  .x-board { grid-template-columns: repeat(4, 148px); overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; gap: 11px; }
  .x-board-col { scroll-snap-align: start; }
  .x-device-content { padding-right: 10px; }
  .x-board-item { min-height: 164px; }
  .x-device-title { margin-bottom: 14px; }
  .x-preview-conversation { grid-template-columns: 1fr; height: 193px; }
  .x-context-summary { display: none; }
  .x-funnel-example { grid-template-columns: repeat(4, 135px); overflow-x: auto; padding-bottom: 10px; }
  .x-funnel-example > div { padding: 16px 12px; }
  .x-hero .x-product-caption { font-size: 8px; }
  .x-journey strong { font-size: 11px; }
  .x-creative-sheet-front { left: 0; }
  .x-creative-sheet-back { right: -12px; }
  .x-creative-sheet { width: 235px; height: 335px; }
  .x-creative-sheet-front h3 { font-size: 36px; }
  .x-creative-visual { min-height: 430px; }
  .x-approval { right: 0; }
  .x-human-visual { padding: 21px; }
  .x-conversation { padding: 16px; }
  .x-integration-wall { width: 100%; gap: 7px; }
  .x-integration-wall > div { gap: 6px; }
  .x-integration-wall span { font-size: 11px; padding: 16px 10px; }
  .x-feature-list summary { font-size: 13px; }
  .x-section { padding-left: 23px; padding-right: 23px; }
}
@media (max-width: 360px) {
  .x-hero h1 { font-size: 35px; }
  .x-hero-actions { gap: 10px; }
  .x-hero-actions .x-button { padding: 10px 13px; }
  .x-integration-wall span { padding: 14px 7px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .x-will-reveal { opacity: 1; transform: none; }
}