/* 01 / Design tokens and shared components */
:root {
    --blue: #3763ef;
    --blue-soft: #edf2ff;
    --ink: #18243b;
    --muted: #637086;
    --line: #e3e7ee;
    --soft: #f6f7fa;
    --radius: 18px;
    --font: -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px
}

body {
    margin: 0;
    background: white;
    color: var(--ink);
    font: 15px/1.75 var(--font);
    -webkit-font-smoothing: antialiased
}

button,input,textarea,select {
    font: inherit;
    color: inherit
}

button {
    cursor: pointer;
    border: 0
}

a {
    color: inherit;
    text-decoration: none
}

h1,h2,h3,h4,p,figure {
    margin: 0
}

h1,h2,h3,h4 {
    line-height: 1.3;
    letter-spacing: -.035em
}

img {
    display: block;
    max-width: 100%;
    height: auto
}

p {
    color: var(--muted)
}

[hidden] {
    display: none!important
}

.svg-library {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden
}

.wrap {
    width: min(1240px,calc(100% - 96px));
    margin-inline: auto
}

.icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0
}

.skip {
    position: fixed;
    top: -60px;
    left: 20px;
    z-index: 100;
    background: var(--ink);
    color: white;
    padding: 10px
}

.skip:focus {
    top: 10px
}

:focus-visible {
    outline: 3px solid #7096ff;
    outline-offset: 4px
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 50px;
    padding: 13px 23px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    transition: background .18s,transform .18s,box-shadow .18s
}

.btn:hover {
    transform: translateY(-2px)
}

.btn-blue {
    background: var(--blue);
    color: white;
    box-shadow: 0 5px 14px #3763ef18
}

.btn-blue:hover {
    background: #254ed4
}

.btn-dark {
    background: var(--ink);
    color: white
}

.btn-dark:hover {
    background: #2d3c57
}

.btn-outline {
    background: white;
    border-color: #d7dce6
}

.btn-outline:hover {
    background: var(--soft)
}

.btn-white {
    background: white;
    color: var(--ink)
}

.compact {
    min-height: 42px;
    padding: 10px 16px;
    font-size: 13px
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    padding: 0;
    color: var(--blue);
    font-size: 14px;
    font-weight: 600
}

.text-link:hover {
    text-decoration: underline
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    letter-spacing: .09em;
    font-weight: 600;
    color: var(--blue);
    margin-bottom: 18px
}

.eyebrow .icon {
    width: 17px;
    height: 17px
}

.section {
    padding: 100px 0
}

.section-heading {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 14px 80px;
    align-items: end;
    margin-bottom: 44px
}

.section-heading>.eyebrow {
    grid-column: 1/-1;
    margin-bottom: 0
}

.section-heading h2,.enterprise-copy h2,.foundation-heading h2,.guide-grid h2,.pricing-heading h2,.faq-grid h2 {
    font-size: clamp(32px,3.2vw,44px);
    line-height: 1.3
}

.section-heading>p {
    max-width: 510px;
    padding-bottom: 3px;
    font-size: 16px
}

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600
}

.blue {
    background: #e7edff;
    color: #3763ef
}

.purple {
    background: #eee8fb;
    color: #8157c9
}

.green {
    background: #e5f3ed;
    color: #178477
}

.sand {
    background: #fbf0df;
    color: #a8752c
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 4px #3763ef10
}

.presence {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #21a178;
    margin-right: 6px
}


/* 02 / Navigation, hero and interactive product frame */
.site-header {
    height: 80px;
    position: sticky;
    top: 0;
    z-index: 30;
    background: #ffffffed;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid #e9ecf2
}

.nav-row {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px
}

.brand {
    display: inline-block;
    flex-shrink: 0
}

.brand img {
    width: 162px;
    height: 54px;
    object-fit: contain
}

.site-header nav {
    display: flex;
    align-items: center;
    gap: 27px
}

.site-header nav a {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: #48566b
}

.site-header nav a:hover,.site-header nav a.active {
    color: var(--blue)
}

.nav-actions {
    display: flex;
    gap: 20px;
    align-items: center
}

.language {
    font-size: 12px;
    background: transparent;
    padding: 6px;
    color: var(--muted)
}

.menu-toggle {
    display: none
}

.hero {
    background: radial-gradient(ellipse at 85% 45%,#eaf0ff 0,transparent 55%),linear-gradient(110deg,#fbfaf7,#f7f9ff);
    padding: 76px 0 64px;
    overflow: hidden
}

.hero-grid {
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    align-items: center;
    gap: 52px
}

.hero-copy h1 {
    font-size: clamp(40px,4.4vw,62px);
    font-weight: 700;
    line-height: 1.23;
    letter-spacing: -.055em
}

.accent {
    color: var(--blue)
}

.hero-lead {
    margin-top: 24px;
    font-size: 17px;
    line-height: 1.9
}

.hero-actions {
    display: flex;
    gap: 12px;
    margin-top: 30px
}

.micro {
    font-size: 12px;
    margin-top: 15px;
    line-height: 1.8
}

.hero-tags {
    display: flex;
    gap: 10px;
    margin-top: 28px
}

.hero-tags span {
    font-size: 12px;
    color: #52617a;
    border: 1px solid #dfe4ee;
    border-radius: 30px;
    padding: 3px 12px;
    background: #fff7
}

.hero-product {
    min-width: 0;
    scroll-margin-top: 110px
}

.product-tabs {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin-bottom: 16px;
    background: #e9edf5;
    padding: 4px;
    border-radius: 11px;
    gap: 3px
}

.product-tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: transparent;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: #5e6b80
}

.product-tabs button .icon {
    width: 17px;
    height: 17px
}

.product-tabs button[aria-selected=true] {
    background: white;
    color: var(--ink);
    box-shadow: 0 2px 8px #2438570a
}

.demo-shell {
    height: 426px;
    border: 1px solid #dbe2ef;
    background: white;
    border-radius: 15px;
    box-shadow: 0 22px 70px #24417b12;
    overflow: hidden
}

.demo-topbar {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid var(--line);
    background: #fcfdff;
    font-size: 12px
}

.demo-topbar>span {
    display: flex;
    align-items: center;
    gap: 7px
}

.demo-topbar img {
    width: 19px;
    height: 19px;
    border-radius: 6px
}

.window-dots {
    display: flex;
    gap: 5px
}

.window-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d5dce7
}

.demo-body {
    display: grid;
    grid-template-columns: 48px 140px minmax(0,1fr);
    height: calc(100% - 42px)
}

.demo-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    background: #f3f5f9;
    border-right: 1px solid var(--line);
    padding-top: 18px;
    color: #8390a3
}

.demo-rail .icon {
    width: 19px;
    height: 19px
}

.demo-rail .selected {
    background: var(--blue);
    color: white;
    border-radius: 8px;
    padding: 7px;
    box-sizing: content-box
}

.rail-bottom {
    margin-top: auto;
    margin-bottom: 16px;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    font-size: 12px;
    border-radius: 50%;
    background: #e1e7f2;
    color: #637086
}

.demo-list {
    border-right: 1px solid var(--line);
    background: #fcfdff;
    padding: 14px 9px
}

.demo-list-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #7c899d;
    padding: 0 5px 14px
}

.demo-list-title b {
    font-weight: 400
}

.demo-contact {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 7px;
    margin-bottom: 4px;
    border-radius: 7px
}

.demo-contact.active {
    background: #edf2ff
}

.demo-contact .avatar {
    width: 29px;
    height: 29px;
    border-radius: 9px;
    font-size: 12px
}

.demo-contact div:last-child {
    min-width: 0
}

.demo-contact strong {
    display: block;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600
}

.demo-contact small {
    display: block;
    font-size: 12px;
    color: #8690a0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 85px
}

.demo-chat {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: #f8faff
}

.demo-chat-head {
    height: 57px;
    flex-shrink: 0;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px
}

.demo-chat-head strong {
    display: block;
    font-size: 13px
}

.demo-chat-head small {
    display: block;
    color: #7a889b;
    font-size: 12px
}

.demo-chat-head>span {
    color: #8592a4
}

.demo-messages {
    padding: 16px 14px 10px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin
}

.demo-time {
    display: block;
    text-align: center;
    font-size: 12px;
    color: #9aa4b4;
    margin-bottom: 15px
}

.demo-bubble {
    font-size: 13px;
    line-height: 1.7;
    padding: 9px 12px;
    background: white;
    border: 1px solid #e6ebf3;
    border-radius: 0 10px 10px;
    max-width: 90%;
    width: fit-content;
    margin-bottom: 13px;
    overflow-wrap: anywhere
}

.demo-bubble.own {
    margin-left: auto;
    border-radius: 10px 0 10px 10px;
    background: var(--blue);
    color: white;
    border-color: transparent
}

.demo-message-name {
    font-size: 12px;
    color: #8490a2;
    margin-bottom: 5px
}

.demo-attachment {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    text-align: left
}

.demo-attachment .icon {
    color: #6b83b4
}

.demo-attachment strong {
    display: block;
    font-size: 12px
}

.demo-attachment small {
    display: block;
    font-size: 12px;
    color: #8792a3
}

.demo-attachment:hover {
    border-color: #9bafea
}

.demo-input {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: white;
    border-top: 1px solid var(--line)
}

.demo-input input {
    min-width: 0;
    flex: 1;
    border: 0;
    font-size: 12px;
    background: transparent
}

.demo-input button {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--blue);
    color: white
}

.demo-input .icon {
    width: 17px;
    height: 17px
}

.demo-caption {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: #7f8a9e;
    margin-top: 14px
}

.demo-caption>span:first-child {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #5d6d87
}

.demo-caption i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #40a98b
}

.demo-toolbar {
    display: flex;
    gap: 6px;
    padding: 0 14px 12px
}

.demo-toolbar button {
    font-size: 12px;
    border: 1px solid var(--line);
    padding: 4px 8px;
    border-radius: 6px;
    background: white;
    color: #60708c
}

.demo-notice {
    padding: 8px 12px;
    background: #f0ecfb;
    font-size: 12px;
    color: #8063ac
}

.product-paths {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-bottom: 1px solid var(--line);
    padding-block: 27px
}

.product-paths>a {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 24px;
    border-right: 1px solid var(--line)
}

.product-paths>a:first-child {
    padding-left: 0
}

.product-paths>a:last-child {
    border: 0;
    padding-right: 0
}

.path-number {
    font-size: 12px;
    color: #99a5b7
}

.product-paths h2 {
    font-size: 17px;
    letter-spacing: 0;
    margin-bottom: 4px
}

.product-paths p {
    font-size: 13px
}

.product-paths .icon {
    margin-left: auto;
    color: #77849a;
    transition: transform .18s
}

.product-paths a:hover .icon {
    transform: translateX(4px);
    color: var(--blue)
}


/* 03 / Website service and configurable visitor entry */
.feature-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 80px;
    align-items: center
}

.feature-copy h3 {
    font-size: 29px;
    line-height: 1.4;
    margin-bottom: 18px
}

.feature-copy>p {
    font-size: 15px;
    line-height: 1.9
}

.benefits {
    list-style: none;
    margin: 26px 0 22px;
    padding: 0;
    display: grid;
    gap: 19px
}

.benefits li {
    display: flex;
    gap: 12px
}

.benefits li>.icon {
    color: var(--blue);
    width: 17px;
    height: 17px;
    margin-top: 4px
}

.benefits strong {
    display: block;
    font-size: 14px;
    font-weight: 600
}

.benefits span {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-top: 3px;
    line-height: 1.8
}

.config-demo {
    --widget-color: #3763ef;
    border-radius: var(--radius);
    padding: 22px;
    background: #f0f3fa;
    border: 1px solid #e6eaf2;
    min-width: 0
}

.canvas-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #697891;
    margin-bottom: 18px
}

.sample-label {
    color: var(--blue);
    background: white;
    padding: 2px 8px;
    border-radius: 5px
}

.site-canvas {
    position: relative;
    background: #f1ede6;
    border-radius: 10px;
    min-height: 330px;
    overflow: hidden;
    border: 1px solid #e0ded9
}

.sample-site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 19px 23px;
    font-size: 12px;
    color: #4a514e;
    border-bottom: 1px solid #dbd9d0
}

.sample-site-nav strong {
    letter-spacing: .07em
}

.sample-site-nav strong span {
    font-weight: 400;
    color: #8c928c
}

.sample-site-body {
    padding: 32px 25px;
    position: relative;
    min-height: 270px;
    overflow: hidden
}

.sample-kicker {
    font-size: 12px;
    color: #909587;
    position: relative;
    z-index: 1
}

.sample-site-body h4 {
    font-size: 30px;
    color: #404a40;
    margin-top: 10px;
    position: relative;
    z-index: 1
}

.sample-shop-button {
    display: inline-block;
    font-size: 12px;
    margin-top: 19px;
    border-bottom: 1px solid #87927e;
    color: #5a6752;
    position: relative;
    z-index: 1
}

.sample-product {
    position: absolute;
    width: 220px;
    height: 250px;
    right: -4px;
    top: 15px
}

.object-circle {
    width: 175px;
    height: 175px;
    position: absolute;
    background: #e5dccc;
    border-radius: 50%;
    top: 15px;
    right: 12px
}

.object-vase {
    position: absolute;
    z-index: 1;
    right: 60px;
    top: 55px;
    width: 90px;
    height: 145px;
    border-radius: 25px 25px 38px 38px;
    background: linear-gradient(100deg,#b2b49d,#d0cdb9 40%,#a5ad94);
    box-shadow: 12px 14px 25px #626d5428
}

.object-vase:before {
    content: "";
    display: block;
    width: 53px;
    height: 20px;
    border-radius: 50%;
    background: #8c977c;
    border: 6px solid #b7bba5;
    margin: -9px auto 0
}

.visitor-launcher {
    position: absolute;
    right: 17px;
    bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--widget-color);
    color: white;
    padding: 12px 17px;
    border-radius: 30px;
    font-size: 13px;
    box-shadow: 0 5px 15px #1c29482a;
    min-height: 44px
}

.visitor-launcher.circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%
}

.visitor-launcher.circle>span {
    display: none
}

.visitor-launcher.outline {
    background: white;
    color: var(--widget-color);
    border: 1px solid var(--widget-color)
}

.site-canvas.left .visitor-launcher {
    left: 17px;
    right: auto
}

.visitor-popover {
    position: absolute;
    z-index: 4;
    right: 17px;
    bottom: 78px;
    width: 280px;
    max-width: calc(100% - 34px);
    border-radius: 11px;
    background: white;
    box-shadow: 0 15px 50px #17243b25;
    overflow: hidden
}

.site-canvas.left .visitor-popover {
    left: 17px;
    right: auto
}

.visitor-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px;
    background: var(--widget-color);
    color: white
}

.visitor-title .avatar {
    background: #ffffff24;
    color: white
}

.visitor-title strong {
    font-size: 13px;
    display: block
}

.visitor-title div>span {
    font-size: 12px;
    opacity: .8;
    display: block
}

.visitor-title button {
    align-self: flex-start;
    margin-left: auto;
    color: white;
    background: transparent;
    font-size: 21px;
    line-height: 1
}

.visitor-popover>p {
    padding: 13px;
    margin: 12px;
    background: #f4f6fb;
    font-size: 13px;
    border-radius: 7px;
    color: #536078
}

.visitor-popover>span {
    display: block;
    padding: 0 12px 14px;
    font-size: 12px;
    color: #8a94a4
}

.config-controls {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding-top: 20px
}

.config-controls fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

.config-controls legend,.config-controls label {
    font-size: 12px;
    color: #6e7b91
}

.config-controls label {
    display: grid;
    gap: 7px
}

.config-controls select {
    border: 1px solid #dce2ed;
    background: white;
    border-radius: 6px;
    padding: 7px;
    font-size: 12px;
    max-width: 130px
}

.swatches {
    display: flex;
    gap: 9px;
    padding-top: 9px
}

.swatches button {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--swatch);
    border: 3px solid #f0f3fa;
    box-shadow: 0 0 0 1px transparent
}

.swatches button.selected {
    box-shadow: 0 0 0 1px var(--swatch)
}


/* 04 / Supporting visitor analytics */
.analytics-addon {
    margin-top: 62px;
    border-top: 1px solid var(--line);
    padding-top: 38px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center
}

.addon-copy h3 {
    font-size: 26px;
    margin-bottom: 12px
}

.addon-copy>p {
    font-size: 14px;
    max-width: 440px
}

.analytics-tabs {
    display: flex;
    gap: 7px;
    margin-top: 18px
}

.analytics-tabs button {
    font-size: 12px;
    border-radius: 6px;
    padding: 6px 12px;
    background: #f1f3f8;
    color: #64738b
}

.analytics-tabs button[aria-selected=true] {
    background: var(--blue-soft);
    color: var(--blue);
    font-weight: 600
}

.addon-copy .addon-description {
    font-size: 12px;
    margin-top: 12px;
    color: #8691a3
}

.analytics-visual {
    height: 224px;
    background: #f7f8fb;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 17px 20px;
    overflow: hidden
}

.analytics-top {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #7e899b;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line)
}

.heat-page {
    position: relative;
    height: 139px;
    margin: 14px auto 0;
    max-width: 330px;
    background: white;
    border: 1px solid #e9ecf3;
    border-radius: 6px;
    padding: 12px;
    overflow: hidden
}

.heat-page .fake-nav {
    height: 5px;
    background: #edf0f5;
    border-radius: 3px
}

.heat-page .fake-title {
    height: 11px;
    width: 55%;
    background: #e4e9f3;
    margin-top: 15px;
    border-radius: 3px
}

.heat-page .fake-text {
    height: 5px;
    width: 70%;
    background: #eef1f6;
    margin-top: 8px;
    border-radius: 3px
}

.heat-page .fake-button {
    height: 20px;
    width: 65px;
    background: #d3dffb;
    margin-top: 13px;
    border-radius: 4px
}

.heat-spot {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(ellipse,#f35e19b8,#ffc12278 25%,#86db7f45 45%,transparent 68%);
    top: 50px;
    left: 5px
}

.heat-spot.second {
    width: 65px;
    height: 65px;
    top: 15px;
    left: 65%;
    background: radial-gradient(ellipse,#ffc12299,#86db7f55 30%,transparent 68%)
}

.analytics-watermark {
    position: absolute;
    right: 9px;
    bottom: 7px;
    font-size: 12px;
    color: #9aa5b6
}

.replay-stage {
    margin-top: 13px;
    position: relative;
    height: 110px;
    background: white;
    border-radius: 5px;
    border: 1px solid #e8edf3;
    padding: 13px
}

.replay-stage:before {
    content: "";
    display: block;
    height: 7px;
    width: 60%;
    background: #e3e9f4;
    margin-bottom: 12px
}

.replay-stage:after {
    content: "";
    display: block;
    width: 95px;
    height: 40px;
    background: #eaf0ff;
    border-radius: 4px
}

.replay-pointer {
    position: absolute;
    left: 42%;
    top: 44%;
    color: var(--blue);
    transition: left 1s,top 1s
}

.replay-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 13px;
    font-size: 12px;
    color: #8a94a6
}

.replay-controls button {
    background: var(--blue);
    color: white;
    border-radius: 5px;
    padding: 3px 9px;
    min-width: 57px;
    font-size: 12px
}

.progress-track {
    height: 4px;
    flex: 1;
    background: #e1e7f0;
    border-radius: 3px;
    overflow: hidden
}

.progress-track i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--blue);
    transition: width .4s linear
}

.funnel {
    display: grid;
    gap: 10px;
    margin-top: 17px
}

.funnel-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: #5870a4;
    background: #e5ecfc;
    padding: 7px 12px;
    border-radius: 4px;
    width: 100%
}

.funnel-row:nth-child(2) {
    width: 78%;
    background: #d5e1ff
}

.funnel-row:nth-child(3) {
    width: 55%;
    background: #3763ef;
    color: white
}

.funnel-note {
    font-size: 12px;
    color: #8a94a4;
    margin-top: 12px
}


/* 05 / Community and enterprise product visuals */
.community-section {
    background: #f7f6fb
}

.community-grid {
    grid-template-columns: 1.1fr .9fr
}

.community-board {
    background: white;
    border: 1px solid #e5e3ee;
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: 0 12px 40px #50467807;
    min-width: 0
}

.board-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 20px
}

.board-header>.avatar {
    width: 42px;
    height: 42px
}

.board-header strong {
    display: block;
    font-size: 16px
}

.board-header div>span {
    display: block;
    font-size: 12px;
    color: #8d93a2;
    margin-top: 3px
}

.members-badge {
    margin-left: auto;
    font-size: 12px;
    color: #897caa;
    white-space: nowrap
}

.board-notice {
    font-size: 12px;
    background: #f4f0fb;
    color: #87799f;
    padding: 10px 12px;
    border-radius: 6px;
    line-height: 1.9
}

.board-notice b {
    color: #8062b2;
    font-weight: 600;
    margin-right: 8px
}

.board-chat {
    display: flex;
    gap: 10px;
    margin-top: 22px
}

.board-chat small {
    display: block;
    font-size: 12px;
    color: #8f94a2;
    margin-bottom: 7px
}

.board-chat p {
    background: #f3f5f9;
    color: #536078;
    padding: 11px 14px;
    border-radius: 0 9px 9px;
    font-size: 13px;
    max-width: 330px
}

.board-chat.reply {
    justify-content: flex-end
}

.board-chat.reply small {
    text-align: right
}

.board-chat.reply p {
    background: #eee8fb;
    border-radius: 9px 0 9px 9px;
    color: #6e5a94
}

.resource-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 15px;
    background: white;
    border: 1px solid #e4e7ef;
    border-radius: 9px;
    text-align: left;
    margin-top: 22px
}

.resource-card:hover {
    border-color: #aebde0
}

.file-type {
    display: grid;
    place-items: center;
    width: 36px;
    height: 42px;
    border-radius: 5px;
    background: #edf2ff;
    color: var(--blue);
    font-size: 12px;
    flex-shrink: 0
}

.resource-card div {
    min-width: 0
}

.resource-card strong {
    display: block;
    font-size: 13px;
    overflow-wrap: anywhere
}

.resource-card div>span {
    display: block;
    font-size: 12px;
    color: #8b96a7
}

.resource-card>.icon {
    margin-left: auto;
    width: 17px;
    color: #8a98ad
}

.board-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    border-top: 1px solid #f0eef5;
    margin-top: 22px;
    padding-top: 16px;
    font-size: 12px;
    color: #9096a4
}

.board-bottom .text-link {
    font-size: 12px
}

.community-section .eyebrow,.community-section .text-link,.community-section .benefits li>.icon {
    color: #8157c9
}

.enterprise-section {
    background: #17263e;
    color: white;
    overflow: hidden
}

.enterprise-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 65px;
    align-items: center
}

.enterprise-copy>.eyebrow {
    color: #94b4fc
}

.enterprise-copy>p {
    font-size: 15px;
    color: #aab8cc;
    margin-top: 20px;
    max-width: 400px
}

.enterprise-points {
    display: grid;
    gap: 18px;
    margin-top: 27px;
    margin-bottom: 28px
}

.enterprise-points>div {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 13px;
    align-items: start
}

.enterprise-points strong {
    font-size: 14px;
    color: #e4eaf6;
    font-weight: 500
}

.enterprise-points span {
    font-size: 13px;
    color: #91a3bd;
    line-height: 1.8
}

.enterprise-board {
    border-radius: 12px;
    border: 1px solid #3b4b65;
    background: #f7f9fc;
    overflow: hidden;
    color: var(--ink);
    box-shadow: 0 25px 60px #08152720;
    min-width: 0
}

.enterprise-board-top {
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #e9eef6;
    padding: 0 19px;
    font-size: 12px;
    color: #718098
}

.enterprise-board-top>span:first-child {
    font-weight: 600;
    letter-spacing: .04em;
    color: #40536e
}

.enterprise-board-top i {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: #3763ef;
    margin-right: 8px
}

.org-layout {
    display: grid;
    grid-template-columns: 155px minmax(0,1fr);
    min-height: 370px
}

.org-layout aside {
    padding: 21px 12px;
    background: #f0f3f8;
    border-right: 1px solid #e0e5ee
}

.org-heading {
    font-size: 12px;
    color: #9aa4b4;
    display: block;
    margin-bottom: 17px;
    padding-left: 7px
}

.org-layout aside>strong {
    display: block;
    font-size: 13px;
    padding: 0 7px;
    margin-bottom: 12px
}

.org-item {
    display: flex;
    justify-content: space-between;
    padding: 9px 10px;
    font-size: 12px;
    border-radius: 6px;
    color: #6b7b93
}

.org-item.active {
    background: #e0e8fc;
    color: #3763ef
}

.org-item b {
    font-size: 12px;
    font-weight: 400;
    color: #95a0b3
}

.org-person {
    font-size: 12px;
    padding: 12px 7px 0;
    color: #647590
}

.org-person small {
    display: block;
    font-size: 12px;
    color: #9ba5b5;
    padding-left: 13px
}

.org-conversation {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column
}

.org-conversation>h3 {
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    letter-spacing: 0;
    display: flex;
    justify-content: space-between
}

.org-conversation>h3>span {
    font-size: 12px;
    font-weight: 400;
    color: #92a0b4
}

.org-message {
    display: flex;
    gap: 9px;
    padding-top: 21px;
    align-items: flex-start
}

.org-message small {
    font-size: 12px;
    color: #657995
}

.org-message small span {
    margin-left: 8px;
    color: #9da7b7
}

.org-message p {
    font-size: 13px;
    background: white;
    border: 1px solid #e7ecf4;
    border-radius: 0 8px 8px;
    padding: 8px 11px;
    margin-top: 6px;
    line-height: 1.8
}

.org-conversation>.resource-card {
    margin-top: 13px;
    margin-left: 43px;
    width: calc(100% - 43px);
    padding: 10px
}

.org-composer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 24px;
    background: white;
    border: 1px solid #e3e8f0;
    border-radius: 8px;
    padding: 12px;
    color: #9ba5b7;
    font-size: 12px
}

.org-composer .icon {
    width: 16px;
    color: var(--blue)
}


/* 06 / Shared capabilities, onboarding and plans */
.foundations {
    padding-bottom: 80px
}

.foundation-heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 16px
}

.foundation-heading>.eyebrow {
    grid-column: 1/-1;
    margin-bottom: 0
}

.foundation-heading>p {
    font-size: 15px;
    margin-bottom: 7px
}

.foundation-list {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 32px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--line)
}

.foundation-list article>span {
    font-size: 12px;
    color: #95a4ba
}

.foundation-list h3 {
    font-size: 17px;
    margin: 13px 0 10px
}

.foundation-list p {
    font-size: 13px;
    line-height: 1.9
}

.guide-section {
    padding: 60px 0;
    background: #f6f8fc;
    border-block: 1px solid #ebeff5
}

.guide-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 80px;
    align-items: center
}

.guide-grid>div>p {
    margin-top: 17px
}

.guide-grid>div>.text-link {
    margin-top: 20px
}

.guide-paths {
    display: grid;
    gap: 22px
}

.guide-paths article {
    display: flex;
    gap: 17px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line)
}

.guide-paths article:last-child {
    padding-bottom: 0;
    border: 0
}

.guide-icon {
    display: grid;
    place-items: center;
    background: #e5ecff;
    color: #3763ef;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex-shrink: 0
}

.guide-icon.purple {
    background: #eee8fb;
    color: #8157c9
}

.guide-icon.green {
    background: #e5f3ed;
    color: #178477
}

.guide-paths h3 {
    font-size: 16px;
    letter-spacing: 0;
    margin: 0 0 7px
}

.guide-paths p {
    font-size: 14px
}

.guide-paths small {
    display: block;
    margin-top: 5px;
    color: #8a97aa;
    font-size: 12px;
    line-height: 1.8
}

.pricing-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 38px
}

.pricing-heading p {
    margin-top: 16px;
    font-size: 15px
}

.billing {
    display: flex;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f5f6fa;
    gap: 5px;
    flex-shrink: 0
}

.billing button {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    background: transparent;
    color: #7b879a;
    white-space: nowrap
}

.billing button[aria-pressed=true] {
    background: white;
    color: var(--ink);
    box-shadow: 0 2px 6px #1e34510c;
    font-weight: 600
}

.billing span {
    font-size: 12px;
    color: #3763ef;
    padding-left: 6px
}

.plans {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 22px
}

.plan {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 28px;
    background: white
}

.plan.recommended {
    border-color: #a5b9ff;
    background: linear-gradient(#f2f5ff,white 50%);
    box-shadow: 0 10px 35px #3763ef0a
}

.plan-label {
    font-size: 12px;
    color: #8995a8
}

.plan h3 {
    font-size: 23px;
    margin: 10px 0 22px
}

.price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-height: 53px;
    font-size: 19px;
    line-height: 1.3
}

.price strong {
    font-size: 43px;
    letter-spacing: -.045em;
    font-weight: 600
}

.price>span {
    font-size: 13px;
    color: #8a95a8;
    margin-left: 4px
}

.custom-price strong {
    font-size: 31px;
    line-height: 1.8
}

.plan>p {
    font-size: 13px;
    min-height: 44px;
    line-height: 1.7;
    margin: 13px 0 24px
}

.plan>.btn {
    width: 100%
}

.plan ul {
    list-style: none;
    padding: 20px 0 0;
    margin: 23px 0 0;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: #617088;
    display: grid;
    gap: 11px
}

.plan li:before {
    content: "✓";
    font-size: 12px;
    color: #7d99ce;
    margin-right: 8px
}

.recommend-label {
    position: absolute;
    top: 24px;
    right: 21px;
    font-size: 12px;
    color: #3763ef;
    background: #e5edff;
    padding: 3px 9px;
    border-radius: 5px
}

.pricing-note {
    font-size: 12px;
    color: #8b95a6;
    text-align: center;
    margin-top: 22px;
    line-height: 1.9
}


/* 07 / Help, download and footer */
.faq-section {
    padding: 60px 0;
    background: #f8f9fb;
    border-block: 1px solid #eceff4
}

.faq-grid {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 90px
}

.faq-grid>div>p {
    margin-top: 17px;
    font-size: 14px
}

.faq-grid>div>.text-link {
    margin-top: 21px
}

.faq-list details {
    border-bottom: 1px solid #e0e5ee
}

.faq-list details:first-child {
    border-top: 1px solid #e0e5ee
}

.faq-list summary {
    list-style: none;
    cursor: pointer;
    padding: 19px 30px 19px 0;
    position: relative;
    font-size: 14px;
    font-weight: 600
}

.faq-list summary::-webkit-details-marker {
    display: none
}

.faq-list summary:after {
    content: "+";
    position: absolute;
    right: 2px;
    top: 15px;
    font-size: 22px;
    font-weight: 400;
    color: #8b97aa
}

.faq-list details[open] summary:after {
    content: "−"
}

.faq-list details p {
    font-size: 13px;
    line-height: 1.9;
    padding: 0 30px 19px 0;
    color: #728097
}

.download-section {
    padding: 52px 0
}

.download-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px
}

.download-brand {
    display: flex;
    gap: 25px;
    align-items: center
}

.download-brand>img {
    width: 64px;
    height: 64px;
    border-radius: 17px;
    box-shadow: 0 8px 25px #3763ef15
}

.download-brand .eyebrow {
    margin-bottom: 8px
}

.download-brand h2 {
    font-size: 32px
}

.download-brand h2 br {
    display: none
}

.download-brand p {
    margin-top: 11px;
    font-size: 13px;
    color: #8b97aa
}

.download-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px
}

.download-action>a {
    font-size: 12px;
    color: #7988a1
}

.release-status {
    font-size: 12px;
    color: #8b97a9
}

.site-footer {
    border-top: 1px solid var(--line);
    padding: 40px 0 20px;
    background: #fafbfc
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
    gap: 45px;
    padding-bottom: 34px
}

.footer-brand .brand img {
    width: 156px;
    height: 52px
}

.footer-brand p {
    font-size: 13px;
    line-height: 1.9;
    margin-top: 15px;
    color: #758196
}

.footer-grid h3 {
    font-size: 13px;
    margin: 15px 0 14px;
    letter-spacing: 0;
    font-weight: 600
}

.footer-grid>div>a:not(.brand),.footer-grid>div>span {
    display: block;
    font-size: 13px;
    line-height: 1.8;
    color: #637086;
    margin-bottom: 8px;
    overflow-wrap: anywhere
}

.footer-grid a:hover,.footer-bottom a:hover {
    color: var(--blue)
}

.footer-bottom {
    border-top: 1px solid var(--line);
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #69768c;
    font-size: 13px
}

.footer-bottom>div {
    display: flex;
    gap: 23px;
    flex-wrap: wrap
}


/* 08 / Accessible dialogs and local demo states */
dialog {
    width: min(500px,calc(100% - 36px));
    max-height: 85vh;
    border: 1px solid #e0e6f0;
    border-radius: 18px;
    background: white;
    padding: 33px;
    box-shadow: 0 30px 100px #14264230;
    color: var(--ink)
}

dialog: :backdrop {
    background: #16253d72;
    backdrop-filter: blur(4px)
}

.dialog-close {
    position: absolute;
    right: 15px;
    top: 12px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: #f2f4f8;
    color: #77869b;
    font-size: 23px
}

.dialog-eyebrow {
    display: block;
    font-size: 12px;
    color: var(--blue);
    font-weight: 600;
    margin-bottom: 13px
}

dialog h2 {
    font-size: 25px;
    margin-bottom: 15px
}

#dialog-message {
    font-size: 14px;
    line-height: 1.9;
    color: #687790
}

#dialog-message p+p {
    margin-top: 12px
}

#dialog-message a {
    color: var(--blue);
    text-decoration: underline
}

dialog>.dialog-ok {
    margin-top: 24px;
    min-height: 43px;
    padding: 10px 20px;
    font-size: 13px
}

.dialog-file {
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 18px;
    background: #f7f9fc
}

.dialog-file h3 {
    font-size: 17px;
    color: var(--ink);
    margin-bottom: 10px
}

.dialog-file ol {
    padding-left: 20px;
    font-size: 13px
}

.dialog-file .btn {
    margin-top: 12px;
    font-size: 12px;
    min-height: 40px
}

.invite-link {
    display: block;
    background: #f2f5fb;
    border: 1px dashed #ced8eb;
    border-radius: 7px;
    padding: 12px;
    overflow-wrap: anywhere;
    color: #5c7294;
    font-size: 12px;
    margin: 13px 0
}

.dialog-steps {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #8796ad;
    margin: 12px 0
}

.dialog-steps span {
    background: #f2f4f8;
    padding: 5px 9px;
    border-radius: 5px
}

.toast {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    max-width: calc(100% - 40px);
    background: #18243bef;
    color: white;
    padding: 11px 20px;
    border-radius: 9px;
    font-size: 13px;
    box-shadow: 0 6px 30px #16253d20;
    text-align: center
}


/* 09 / Responsive layout */
@media(min-width:1600px) {
    .hero {
        padding-top: 94px;
        padding-bottom: 80px
    }

    .hero-grid {
        gap: 72px
    }

    .demo-shell {
        height: 440px
    }

}

@media(max-width:1180px) {
    .wrap {
        width: calc(100% - 64px)
    }

    .nav-row {
        gap: 20px
    }

    .site-header nav {
        gap: 19px
    }

    .nav-actions {
        gap: 10px
    }

    .language {
        display: none
    }

    .hero-grid {
        gap: 30px;
        grid-template-columns: .85fr 1.15fr
    }

    .hero-copy h1 {
        font-size: 43px
    }

    .hero-lead {
        font-size: 15px
    }

    .hero-actions .btn {
        padding: 12px 17px
    }

    .demo-body {
        grid-template-columns: 42px 115px minmax(0,1fr)
    }

    .demo-list {
        padding-inline: 5px
    }

    .demo-contact {
        gap: 6px;
        padding-inline: 5px
    }

    .demo-contact .avatar {
        width: 24px;
        height: 27px
    }

    .demo-contact small {
        max-width: 65px
    }

    .product-tabs button {
        padding: 9px 12px
    }

    .feature-grid {
        gap: 48px
    }

    .enterprise-grid {
        gap: 38px
    }

    .org-layout {
        grid-template-columns: 125px minmax(0,1fr)
    }

    .org-layout aside {
        padding-inline: 7px
    }

    .enterprise-points>div {
        grid-template-columns: 88px 1fr
    }

    .recommend-label {
        display: none
    }

    .footer-grid {
        gap: 30px
    }

    .members-badge {
        display: none
    }

}

@media(max-width:980px) {
    .section-heading {
        column-gap: 35px
    }

    .site-header nav {
        position: absolute;
        display: none;
        top: 79px;
        left: 0;
        right: 0;
        background: white;
        padding: 20px 32px;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 14px 24px #17243b0a
    }

    .site-header nav.open {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 18px
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        background: transparent;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        margin-left: auto
    }

    .menu-toggle span {
        display: block;
        width: 19px;
        height: 2px;
        background: var(--ink)
    }

    .language {
        display: block
    }

    .hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px
    }

    .hero-copy h1 {
        font-size: 38px
    }

    .hero-actions {
        flex-wrap: wrap;
        gap: 8px
    }

    .hero-actions .btn {
        font-size: 13px;
        min-height: 45px
    }

    .hero-tags {
        gap: 6px
    }

    .hero-tags span {
        padding: 3px 8px
    }

    .hero-lead {
        font-size: 14px
    }

    .hero-product .product-tabs {
        width: 100%
    }

    .product-tabs button {
        flex: 1;
        font-size: 12px;
        padding: 9px 5px;
        gap: 4px
    }

    .product-tabs button .icon {
        width: 15px;
        height: 15px
    }

    .demo-body {
        grid-template-columns: 38px minmax(0,1fr)
    }

    .demo-list {
        display: none
    }

    .demo-caption {
        flex-direction: column;
        gap: 3px
    }

    .section {
        padding: 75px 0
    }

    .feature-grid {
        gap: 35px;
        grid-template-columns: 1fr 1fr
    }

    .feature-copy h3 {
        font-size: 25px
    }

    .sample-site-nav>span {
        display: none
    }

    .sample-product {
        right: -65px;
        opacity: .7
    }

    .config-demo {
        padding: 16px
    }

    .config-controls {
        flex-wrap: wrap;
        gap: 10px
    }

    .config-controls label {
        flex: 1;
        min-width: 90px
    }

    .config-controls fieldset {
        flex-basis: 100%;
        display: flex;
        gap: 14px;
        align-items: center
    }

    .config-controls legend {
        float: left;
        padding-top: 4px
    }

    .swatches {
        padding-top: 0
    }

    .analytics-addon {
        gap: 35px
    }

    .community-board {
        padding: 20px
    }

    .board-header strong {
        font-size: 14px
    }

    .board-bottom {
        flex-direction: column;
        align-items: flex-start
    }

    .enterprise-grid {
        grid-template-columns: 1fr
    }

    .enterprise-copy {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 40px;
        align-items: start
    }

    .enterprise-copy>.eyebrow {
        grid-column: 1/-1
    }

    .enterprise-copy h2 {
        grid-row: 2/4
    }

    .enterprise-copy>p {
        margin-top: 0
    }

    .enterprise-points {
        grid-column: 2;
        grid-row: 3/5;
        margin-top: 20px
    }

    .enterprise-copy>.btn {
        justify-self: start;
        align-self: start;
        margin-top: 26px
    }

    .enterprise-board {
        max-width: 760px;
        width: 100%;
        margin-top: 20px
    }

    .org-layout {
        grid-template-columns: 180px 1fr
    }

    .guide-grid {
        gap: 40px;
        grid-template-columns: .7fr 1.3fr
    }

    .plan {
        padding: 23px 18px
    }

    .price strong {
        font-size: 37px
    }

    .custom-price strong {
        font-size: 27px
    }

    .plan>.btn {
        padding: 12px 10px;
        font-size: 13px
    }

    .plans {
        gap: 15px
    }

    .faq-grid {
        gap: 45px
    }

    .download-brand h2 {
        font-size: 27px
    }

    .download-brand {
        gap: 18px
    }

    .footer-grid {
        grid-template-columns: 1.3fr 1fr 1fr;
        gap: 25px
    }

    .footer-grid>div:last-child {
        grid-column: 1/-1;
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        align-items: center
    }

    .footer-grid>div:last-child h3 {
        margin: 0
    }

    .footer-grid>div:last-child a,.footer-grid>div:last-child span {
        margin: 0
    }

    .footer-bottom {
        align-items: flex-start
    }

}

@media(max-width:700px) {
    html {
        scroll-padding-top: 88px
    }

    .wrap {
        width: calc(100% - 40px)
    }

    .site-header {
        height: 68px
    }

    .brand img {
        width: 137px;
        height: 46px
    }

    .site-header nav {
        top: 67px;
        padding: 20px;
        grid-template-columns: repeat(2,1fr)!important
    }

    .nav-row {
        gap: 10px
    }

    .nav-actions .compact {
        padding: 9px 12px;
        min-height: 37px;
        font-size: 12px
    }

    .nav-actions .compact .icon,.language {
        display: none
    }

    .hero {
        padding: 40px 0 33px
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .hero-copy .eyebrow {
        margin-bottom: 17px
    }

    .hero-copy h1 {
        font-size: clamp(33px,10vw,43px);
        line-height: 1.22
    }

    .hero-lead {
        font-size: 15px;
        margin-top: 18px
    }

    .desktop-br {
        display: none
    }

    .hero-actions {
        margin-top: 23px
    }

    .hero-actions .btn {
        font-size: 14px;
        padding: 12px 19px;
        min-height: 47px
    }

    .hero-tags {
        display: none
    }

    .micro {
        font-size: 12px;
        margin-top: 12px
    }

    .hero-product {
        scroll-margin-top: 90px
    }

    .product-tabs {
        margin-bottom: 12px;
        width: 100%
    }

    .product-tabs button {
        font-size: 13px;
        padding: 9px 6px
    }

    .demo-shell {
        height: 382px
    }

    .demo-body {
        grid-template-columns: 37px minmax(0,1fr)
    }

    .demo-topbar {
        height: 38px;
        padding: 0 12px
    }

    .demo-body {
        height: calc(100% - 38px)
    }

    .demo-chat-head {
        height: 53px
    }

    .demo-messages {
        padding-top: 14px
    }

    .demo-time {
        margin-bottom: 13px
    }

    .demo-bubble {
        max-width: 90%
    }

    .demo-caption {
        flex-direction: row;
        font-size: 12px;
        gap: 6px
    }

    .demo-caption>span:last-child {
        text-align: right
    }

    .product-paths {
        grid-template-columns: 1fr;
        padding-block: 9px
    }

    .product-paths>a {
        padding: 15px 0!important;
        border-right: 0;
        border-bottom: 1px solid #edf0f5;
        gap: 16px
    }

    .product-paths>a:last-child {
        border: 0
    }

    .product-paths h2 {
        font-size: 15px;
        margin-bottom: 1px
    }

    .product-paths p {
        font-size: 12px
    }

    .product-paths .icon {
        width: 17px
    }

    .section {
        padding: 56px 0
    }

    .section-heading {
        margin-bottom: 30px;
        display: block
    }

    .section-heading>.eyebrow {
        margin-bottom: 13px
    }

    .section-heading h2,.enterprise-copy h2,.foundation-heading h2,.guide-grid h2,.pricing-heading h2,.faq-grid h2 {
        font-size: 31px;
        line-height: 1.3
    }

    .eyebrow {
        margin-bottom: 13px;
        letter-spacing: .04em
    }

    .section-heading>p {
        font-size: 14px;
        margin-top: 15px;
        padding-bottom: 0
    }

    .feature-grid,.community-grid {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .feature-copy h3 {
        font-size: 24px
    }

    .feature-copy h3 br {
        display: none
    }

    .feature-copy>p {
        font-size: 14px
    }

    .benefits {
        gap: 17px;
        margin-top: 22px
    }

    .config-demo {
        padding: 16px
    }

    .canvas-label {
        margin-bottom: 14px
    }

    .sample-site-body {
        padding: 25px 22px;
        min-height: 246px
    }

    .sample-site-body h4 {
        font-size: 29px
    }

    .sample-product {
        right: -22px;
        opacity: 1
    }

    .sample-site-nav {
        padding: 16px 20px
    }

    .site-canvas {
        min-height: 303px
    }

    .config-controls {
        gap: 12px;
        flex-wrap: nowrap
    }

    .config-controls fieldset {
        display: block;
        flex-basis: auto
    }

    .config-controls legend {
        float: none;
        padding-top: 0
    }

    .swatches {
        padding-top: 12px;
        gap: 7px
    }

    .swatches button {
        width: 20px;
        height: 20px
    }

    .config-controls select {
        max-width: 106px;
        padding: 7px 5px
    }

    .config-controls label {
        min-width: 0;
        flex: 0 1 auto
    }

    .analytics-addon {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-top: 35px;
        padding-top: 30px
    }

    .addon-copy h3 {
        font-size: 24px
    }

    .community-board {
        padding: 20px
    }

    .community-grid .feature-copy {
        order: -1
    }

    .board-header {
        gap: 10px
    }

    .board-header strong {
        font-size: 15px
    }

    .board-bottom {
        gap: 10px
    }

    .enterprise-copy {
        display: block
    }

    .enterprise-copy>p {
        margin-top: 16px;
        font-size: 14px
    }

    .enterprise-copy>.btn {
        margin-top: 0
    }

    .enterprise-points {
        gap: 16px;
        margin-bottom: 22px
    }

    .enterprise-grid {
        gap: 25px
    }

    .enterprise-board {
        margin-top: 0
    }

    .enterprise-board-top {
        padding: 0 13px
    }

    .org-layout {
        grid-template-columns: 1fr;
        min-height: 0
    }

    .org-layout aside {
        display: none
    }

    .org-conversation {
        padding: 0 14px 16px
    }

    .org-conversation>h3 {
        padding: 16px 0
    }

    .org-message {
        padding-top: 17px
    }

    .org-composer {
        margin-top: 18px
    }

    .foundation-heading {
        display: block
    }

    .foundation-heading h2 {
        margin-bottom: 17px
    }

    .foundation-heading>.eyebrow {
        margin-bottom: 13px
    }

    .foundation-heading>p {
        font-size: 14px
    }

    .foundation-list {
        grid-template-columns: 1fr 1fr;
        gap: 25px 22px;
        margin-top: 27px;
        padding-top: 25px
    }

    .foundation-list h3 {
        font-size: 16px;
        margin-top: 9px
    }

    .guide-section {
        padding: 44px 0
    }

    .guide-grid {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .guide-grid h2 br {
        display: none
    }

    .guide-grid>div>p {
        margin-top: 13px;
        font-size: 14px
    }

    .guide-grid>div>.text-link {
        margin-top: 13px
    }

    .guide-paths h3 {
        font-size: 15px
    }

    .guide-paths p {
        font-size: 13px;
        line-height: 1.9
    }

    .guide-paths article {
        gap: 12px
    }

    .guide-icon {
        width: 34px;
        height: 34px
    }

    .pricing-heading {
        display: block;
        margin-bottom: 25px
    }

    .pricing-heading p {
        font-size: 14px;
        margin-top: 13px
    }

    .billing {
        width: max-content;
        margin-top: 20px
    }

    .plans {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .plan {
        padding: 24px
    }

    .plan h3 {
        margin: 9px 0 18px;
        font-size: 24px
    }

    .plan>p {
        min-height: 0;
        margin-top: 10px;
        margin-bottom: 20px
    }

    .price strong {
        font-size: 40px
    }

    .custom-price strong {
        font-size: 29px
    }

    .recommend-label {
        display: block;
        position: absolute;
        top: 24px;
        right: 23px
    }

    .plan ul {
        gap: 10px;
        margin-top: 20px;
        padding-top: 20px
    }

    .pricing-note {
        text-align: left;
        margin-top: 18px
    }

    .faq-section {
        padding: 38px 0
    }

    .faq-grid {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .faq-grid h2 br {
        display: none
    }

    .faq-grid>div>p {
        margin-top: 12px
    }

    .faq-grid>div>.text-link {
        margin-top: 13px
    }

    .faq-list summary {
        padding-block: 17px
    }

    .faq-list details p {
        padding-right: 15px
    }

    .download-section {
        padding: 36px 0
    }

    .download-grid {
        display: block
    }

    .download-brand {
        gap: 16px;
        align-items: flex-start
    }

    .download-brand>img {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        margin-top: 3px
    }

    .download-brand h2 {
        font-size: 27px
    }

    .download-brand h2 br {
        display: block
    }

    .download-action {
        align-items: stretch;
        margin-top: 25px;
        gap: 12px
    }

    .download-action>a,.release-status {
        text-align: center
    }

    .site-footer {
        padding-top: 28px
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px
    }

    .footer-brand {
        grid-column: 1/-1
    }

    .footer-brand .brand img {
        width: 147px;
        height: 49px
    }

    .footer-brand p {
        margin-top: 10px
    }

    .footer-grid>div:last-child {
        display: block
    }

    .footer-grid>div:last-child h3 {
        margin-bottom: 14px
    }

    .footer-grid>div:last-child a,.footer-grid>div:last-child span {
        margin-bottom: 8px
    }

    .footer-grid h3 {
        margin-top: 0
    }

    .footer-bottom {
        flex-direction: column;
        gap: 13px
    }

    .footer-bottom>div {
        gap: 18px
    }

    dialog {
        padding: 28px 23px
    }

    dialog h2 {
        font-size: 23px
    }

}

@media(max-width:370px) {
    .wrap {
        width: calc(100% - 32px)
    }

    .brand img {
        width: 125px
    }

    .hero-copy h1 {
        font-size: clamp(32px,10.5vw,39px)
    }

    .nav-actions .compact {
        padding: 9px
    }

    .product-tabs button {
        font-size: 12px;
        gap: 4px
    }

    .hero-actions .btn {
        padding: 12px 16px
    }

    .demo-caption {
        flex-direction: column
    }

    .config-controls {
        gap: 8px
    }

    .swatches {
        gap: 5px
    }

    .sample-product {
        right: -45px
    }

    .sample-site-body h4 {
        font-size: 27px
    }

    .config-controls select {
        max-width: 96px
    }

    .board-header strong {
        font-size: 14px
    }

}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,*:before,*:after {
        animation-duration: .01ms!important;
        transition: none!important
    }

    .btn:hover {
        transform: none
    }

}

/* Independent-site homepage: clear product hierarchy and compact mobile layouts. */
.hero-copy h1 { font-size: clamp(36px, 3.8vw, 54px); letter-spacing: -.035em; }
.hero-grid { gap: 40px; }
.site-header nav { gap: 18px; }
.demo-shell.screenshot-panel { height: auto; }
.workspace-preview { background: #f3f6fc; }
.workspace-preview > img { width: 100%; height: auto; display: block; }
.workspace-preview figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.workspace-preview button { padding: 6px 0; color: var(--blue); background: none; white-space: nowrap; }
.workspace-dialog { width: min(1120px, calc(100% - 36px)); }
.workspace-full { width: 100%; margin: 16px 0; border: 1px solid var(--line); border-radius: 8px; }
.analytics-section { background: #f6f8fe; }
.analytics-section .analytics-addon { margin-top: 36px; background: #fff; }
.analytics-benefits { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 32px; margin-top: 24px; font-size: 14px; color: #52647e; }
.analytics-benefits span::before { content: '✓'; color: var(--blue); margin-right: 8px; }
.community-section .section-heading { max-width: 780px; }
.plans { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; margin-inline: auto; }
.site-footer [data-company]:empty, .site-footer [data-contact]:empty, .site-footer [data-filing]:empty { display: none; }
.section, .guide-section, .faq-section { scroll-margin-top: 20px; }
@media (max-width: 980px) {
  .hero-copy h1 { font-size: 36px; }
  .product-tabs button { font-size: 12px; padding-inline: 10px; }
}
@media (max-width: 700px) {
  .hero-copy h1 { font-size: clamp(30px, 7.8vw, 40px); }
  .plans { grid-template-columns: 1fr; }
  .analytics-benefits { justify-content: flex-start; gap: 10px; flex-direction: column; }
  .workspace-preview figcaption { flex-wrap: wrap; padding: 10px 12px; gap: 4px; }
  .hero-grid { gap: 28px; }
  .product-tabs button { padding-inline: 7px; }
}