.qx-demo {
    --qx-ink:#173b34;
    --qx-green:#226750;
    --qx-muted:#64746d;
    --qx-lime:#dceda8;
    --qx-line:#dfe6dd;
    --qx-soft:#f5f7ef;
    color:var(--qx-ink);
    background:#fff;
    font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;
    line-height:1.7;
    font-size:16px;
    overflow:clip
}
.qx-demo * {
    box-sizing:border-box
}
.qx-demo h1,.qx-demo h2,.qx-demo h3,.qx-demo h4,.qx-demo p {
    margin:0
}
.qx-demo a {
    color:inherit;
    text-decoration:none
}
.qx-demo button {
    font:inherit
}
.qx-demo a,.qx-demo button,.qx-demo summary {
    -webkit-tap-highlight-color:transparent
}
.qx-demo :focus-visible {
    outline:3px solid #71a64b;
    outline-offset:5px
}
.qx-demo [id] {
    scroll-margin-top:96px
}
.qx-demo .qxd-shell {
    width:min(1160px,calc(100% - 64px));
    margin-inline:auto
}
.qxd-skip {
    position:absolute;
    top:-80px;
    left:20px;
    z-index:30;
    padding:10px 16px;
    background:var(--qx-green);
    color:#fff!important
}
.qxd-skip:focus {
    top:12px
}
.qxd-header {
    position:sticky;
    top:0;
    z-index:20;
    background:#fbfcf8f5;
    border-bottom:1px solid #173b3412;
    backdrop-filter:blur(16px)
}
.qxd-nav {
    height:88px;
    display:flex;
    align-items:center;
    gap:40px
}
.qxd-brand {
    display:flex;
    align-items:center;
    gap:11px;
    font-weight:800;
    font-size:25px;
    letter-spacing:.6px;
    flex-shrink:0
}
.qxd-brand-mark {
    width:39px;
    height:39px;
    display:grid;
    place-items:center;
    background:var(--qx-green);
    border-radius:12px;
    color:#fff;
    font-size:24px;
    letter-spacing:-2px;
    padding-right:2px
}
.qxd-brand>span:last-child {
    display:flex;
    align-items:center;
    gap:14px
}
.qxd-brand small {
    font-weight:500;
    font-size:10px;
    letter-spacing:2px;
    color:var(--qx-muted);
    border-left:1px solid #bfcfc4;
    padding-left:14px
}
.qxd-menu {
    display:flex;
    gap:27px;
    margin-left:auto
}
.qxd-menu a {
    font-size:13px;
    font-weight:600;
    color:var(--qx-muted);
    white-space:nowrap
}
.qxd-menu a:hover {
    color:var(--qx-green)
}
.qxd-nav-cta {
    display:flex;
    align-items:center;
    gap:16px;
    background:var(--qx-ink);
    color:#fff!important;
    padding:11px 18px;
    border-radius:7px;
    font-size:12px;
    font-weight:650;
    white-space:nowrap
}
.qxd-menu-toggle {
    display:none
}
.qxd-hero {
    background:radial-gradient(ellipse at 86% 46%,#e5efcf 0,transparent 49%),#f7f9f1;
    padding:94px 0 112px
}
.qxd-hero-grid {
    display:grid;
    grid-template-columns:1.02fr 1fr;
    gap:65px;
    align-items:center
}
.qxd-eyebrow {
    font-size:12px;
    font-weight:650;
    letter-spacing:1.2px;
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--qx-green);
    margin-bottom:23px!important
}
.qxd-dot {
    display:inline-block;
    width:7px;
    height:7px;
    background:#77a34f;
    border-radius:50%;
    flex-shrink:0
}
.qxd-hero h1 {
    font-size:clamp(40px,4.1vw,58px);
    font-weight:760;
    line-height:1.3;
    letter-spacing:-2px;
    margin-bottom:26px
}
.qxd-highlight {
    position:relative;
    z-index:1;
    white-space:nowrap
}
.qxd-highlight:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:3px;
    height:13px;
    background:var(--qx-lime);
    z-index:-1;
    border-radius:3px
}
.qxd-lead {
    font-size:16px;
    line-height:1.95;
    color:var(--qx-muted)
}
.qxd-actions {
    display:flex;
    align-items:center;
    gap:26px;
    margin-top:34px
}
.qx-demo .qxd-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    min-height:50px;
    padding:13px 22px;
    border-radius:7px;
    font-size:14px;
    font-weight:650;
    transition:transform .18s,background .18s;
    white-space:nowrap
}
.qxd-button:hover {
    transform:translateY(-2px)
}
.qxd-button-primary {
    background:var(--qx-green);
    color:#fff!important
}
.qxd-button-primary:hover {
    background:#174e3b
}
.qxd-text-link {
    font-size:13px;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:14px
}
.qxd-hero-pillars {
    display:flex;
    gap:18px;
    margin-top:31px;
    color:var(--qx-muted);
    font-size:11px
}
.qxd-hero-pillars span+span:before {
    content:"";
    display:inline-block;
    width:3px;
    height:3px;
    border-radius:50%;
    background:#95aa8e;
    vertical-align:middle;
    margin-right:18px
}
.qxd-workspace {
    position:relative;
    border:1px solid #d4dfcf;
    border-radius:15px;
    background:#fff;
    box-shadow:0 26px 80px #284b2e0d;
    transform:rotate(-1deg);
    margin:3px 0 18px
}
.qxd-workspace-top {
    display:flex;
    align-items:center;
    gap:15px;
    height:47px;
    padding:0 20px;
    border-bottom:1px solid #edf0e8;
    font-size:10px;
    color:#82917e;
    letter-spacing:.7px
}
.qxd-window-dots {
    display:flex;
    gap:4px
}
.qxd-window-dots i {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#d3dbce
}
.qxd-demo-label {
    font-size:10px!important;
    color:#74836e;
    letter-spacing:0;
    font-weight:500;
    white-space:nowrap
}
.qxd-workspace-top>.qxd-demo-label {
    margin-left:auto
}
.qxd-workspace-body {
    padding:25px 26px 18px
}
.qxd-workspace-greeting {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px
}
.qxd-small-label {
    font-size:11px;
    font-weight:600;
    color:var(--qx-muted);
    letter-spacing:.3px
}
.qxd-workspace h2 {
    font-size:22px;
    font-weight:700;
    line-height:1.5;
    margin-top:7px
}
.qxd-spark {
    font-size:20px;
    color:#7b9e3d;
    margin-left:7px
}
.qxd-avatar {
    height:40px;
    width:40px;
    display:grid;
    place-items:center;
    background:var(--qx-soft);
    border:1px solid #e4eacd;
    border-radius:12px;
    color:var(--qx-green);
    font-size:12px;
    font-weight:700
}
.qxd-hero-question {
    border:1px solid #dce5d4;
    border-radius:7px;
    padding:11px 13px;
    font-size:11px;
    color:var(--qx-muted);
    margin:22px 0 10px;
    background:#fbfcf8;
    display:flex;
    align-items:center;
    gap:9px
}
.qxd-hero-question>span {
    font-size:18px;
    color:var(--qx-green)
}
.qxd-work-item {
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px 0;
    border-bottom:1px solid #eef1e9
}
.qxd-work-item strong {
    display:block;
    font-size:12px;
    font-weight:650
}
.qxd-work-item small {
    display:block;
    font-size:10px;
    color:#849080;
    margin-top:3px
}
.qxd-item-icon {
    height:33px;
    width:33px;
    border-radius:9px;
    display:grid;
    place-items:center;
    background:#edf5e6;
    color:#507346;
    flex-shrink:0;
    font-size:17px
}
.qxd-icon-warm {
    color:#ad8a46;
    background:#faf4e7
}
.qxd-icon-blue {
    color:#64848b;
    background:#edf3f4
}
.qxd-status {
    margin-left:auto;
    font-size:9px;
    background:#eef5e9;
    padding:3px 7px;
    border-radius:4px;
    color:#607c51;
    white-space:nowrap
}
.qxd-status-warm {
    color:#9c7f43;
    background:#fbf6e9
}
.qxd-workspace-bottom {
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:8px;
    color:#8b9583;
    padding-top:15px
}
.qxd-workspace-bottom>span:first-child {
    display:flex;
    gap:5px;
    align-items:center
}
.qxd-workspace-bottom .qxd-dot {
    width:4px;
    height:4px
}
.qxd-floating-note {
    display:flex;
    align-items:center;
    gap:12px;
    position:absolute;
    bottom:-27px;
    right:24px;
    padding:14px 19px;
    background:#fff;
    border:1px solid #e3e8d9;
    border-radius:11px;
    box-shadow:0 12px 25px #173b3408;
    transform:rotate(1deg)
}
.qxd-note-icon {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:8px;
    background:var(--qx-lime);
    font-size:20px
}
.qxd-floating-note strong {
    display:block;
    font-size:11px
}
.qxd-floating-note small {
    display:block;
    color:var(--qx-muted);
    font-size:9px;
    margin-top:2px
}
.qxd-section {
    padding:92px 0
}
.qxd-section-heading {
    margin-bottom:39px
}
.qxd-section-heading .qxd-eyebrow {
    margin-bottom:18px!important
}
.qxd-section-heading h2 {
    font-size:clamp(30px,3.2vw,42px);
    font-weight:700;
    line-height:1.4;
    letter-spacing:-1.1px
}
.qxd-section-heading>p:last-child {
    margin-top:17px;
    color:var(--qx-muted);
    font-size:14px;
    line-height:1.9
}
.qxd-heading-inline {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:32px
}
.qxd-heading-inline>p:last-child {
    margin:0 0 5px;
    max-width:360px
}
.qxd-advantage-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}
.qxd-advantage {
    padding:29px 29px 26px;
    border:1px solid var(--qx-line);
    border-radius:10px;
    background:#fff
}
.qxd-card-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#95a18e;
    font-size:9px;
    letter-spacing:1px;
    margin-bottom:30px
}
.qxd-card-top>span:last-child {
    font-size:24px;
    color:var(--qx-green);
    letter-spacing:0
}
.qxd-advantage h3 {
    font-size:23px;
    font-weight:700;
    margin-bottom:13px
}
.qxd-advantage p {
    color:var(--qx-muted);
    font-size:13px;
    line-height:1.9;
    min-height:50px
}
.qxd-advantage>a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:11px;
    font-weight:650;
    color:var(--qx-green);
    margin-top:25px
}
.qxd-capabilities {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    border-top:1px solid var(--qx-line);
    margin-top:34px;
    padding-top:23px;
    font-size:11px
}
.qxd-capabilities>span {
    font-weight:650
}
.qxd-capabilities p {
    display:flex;
    align-items:center;
    gap:16px;
    color:var(--qx-muted);
    flex-wrap:wrap
}
.qxd-capabilities i {
    width:3px;
    height:3px;
    background:#b3bfac;
    border-radius:50%
}
.qxd-ai-section {
    background:#f5f7f0
}
.qxd-role-tabs {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    padding:6px;
    border:1px solid #e0e6d9;
    border-radius:10px;
    background:#edf1e7;
    margin-bottom:23px
}
.qxd-role-tabs button {
    appearance:none;
    background:transparent;
    border:1px solid transparent;
    border-radius:6px;
    padding:15px 9px;
    color:#72826c;
    cursor:pointer;
    font-size:13px;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:11px
}
.qxd-role-tabs button>span {
    font-size:9px;
    opacity:.65
}
.qxd-role-tabs button[aria-selected=true] {
    background:#fff;
    border-color:#dce4d2;
    color:var(--qx-green);
    box-shadow:0 3px 9px #304a1e06
}
.qxd-role-panel {
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    border:1px solid #e0e6d9;
    background:#fff;
    border-radius:13px;
    overflow:hidden;
    min-height:414px
}
.qxd-role-story {
    padding:35px 36px
}
.qxd-role-story h3 {
    font-size:23px;
    font-weight:650;
    line-height:1.6;
    margin:12px 0 15px;
    letter-spacing:-.3px;
    min-height:74px
}
.qxd-role-story>p {
    color:var(--qx-muted);
    font-size:13px;
    line-height:1.9;
    min-height:49px
}
.qxd-check-list {
    list-style:none;
    padding:0;
    margin:22px 0 25px
}
.qxd-check-list li {
    position:relative;
    padding-left:22px;
    color:#586e5c;
    font-size:12px;
    margin:9px 0
}
.qxd-check-list li:before {
    content:"✓";
    position:absolute;
    left:0;
    color:#699054;
    font-size:11px
}
.qxd-benefit {
    border-top:1px solid #e8ecdf;
    padding-top:18px
}
.qxd-benefit>span {
    display:block;
    color:#89977f;
    font-size:10px;
    margin-bottom:7px
}
.qxd-benefit strong {
    font-size:13px;
    font-weight:600;
    line-height:1.8;
    display:block
}
.qxd-role-output {
    margin:18px 18px 18px 0;
    padding:25px 25px 18px;
    background:#f8faf5;
    border:1px solid #e8eddf;
    border-radius:8px
}
.qxd-output-heading {
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center
}
.qxd-output-summary {
    display:flex;
    align-items:flex-start;
    gap:13px;
    padding:27px 0
}
.qxd-output-icon {
    width:35px;
    height:35px;
    display:grid;
    place-items:center;
    background:var(--qx-lime);
    border-radius:10px;
    font-size:20px;
    flex-shrink:0
}
.qxd-output-summary strong {
    display:block;
    font-size:14px;
    font-weight:650;
    line-height:1.7
}
.qxd-output-summary p {
    font-size:11px;
    color:var(--qx-muted);
    margin-top:5px
}
.qxd-example-table {
    width:100%;
    font-size:11px;
    border-top:1px solid #dce4d4
}
.qxd-example-row {
    display:grid;
    grid-template-columns:.95fr 1fr 1fr;
    gap:12px;
    padding:13px 0;
    border-bottom:1px solid #e4e9dc;
    align-items:center
}
.qxd-example-row strong {
    font-size:11px;
    font-weight:600
}
.qxd-example-row>span:last-child {
    color:var(--qx-green)
}
.qxd-example-th {
    font-size:10px;
    color:#88977d;
    padding:10px 0
}
.qxd-example-th>span:last-child {
    color:inherit
}
.qxd-source-details {
    border-bottom:1px solid #e5eadb;
    font-size:11px;
    margin-top:5px
}
.qxd-source-details summary {
    cursor:pointer;
    list-style:none;
    padding:12px 0;
    display:flex;
    justify-content:space-between;
    gap:10px;
    color:#536c4c
}
.qxd-source-details summary::-webkit-details-marker {
    display:none
}
.qxd-source-details[open] summary>span {
    transform:rotate(45deg)
}
.qxd-source-details p {
    padding-bottom:12px;
    color:var(--qx-muted);
    line-height:1.8
}
.qxd-demo-note {
    font-size:9px;
    line-height:1.8;
    color:#8b9681;
    margin-top:13px!important
}
.qxd-value-strip {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin-top:31px
}
.qxd-value-strip>div {
    display:flex;
    align-items:center;
    gap:13px
}
.qxd-value-strip>div>span {
    color:#79946a;
    font-size:24px
}
.qxd-value-strip strong {
    display:block;
    font-size:12px;
    font-weight:600
}
.qxd-value-strip small {
    display:block;
    color:#83907b;
    font-size:10px;
    margin-top:3px
}
.qxd-custom-section {
    background:#183f34;
    color:#f5f7ed
}
.qxd-custom-section .qxd-eyebrow {
    color:#bfd58e
}
.qxd-custom-section .qxd-heading-inline>p:last-child {
    color:#a8beb0
}
.qxd-custom-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid #ffffff21;
    border-left:1px solid #ffffff21;
    border-radius:10px;
    overflow:hidden;
    margin-top:44px
}
.qxd-custom-grid article {
    padding:28px;
    border-right:1px solid #ffffff21;
    border-bottom:1px solid #ffffff21;
    background:#ffffff02
}
.qxd-custom-number {
    color:#8da67d;
    font-size:10px;
    letter-spacing:1px
}
.qxd-custom-grid h3 {
    font-size:19px;
    font-weight:600;
    margin:14px 0 12px
}
.qxd-custom-grid p {
    font-size:12px;
    line-height:1.9;
    color:#aac1b1;
    min-height:46px
}
.qxd-custom-grid small {
    font-size:10px;
    display:block;
    color:#d2dfa9;
    margin-top:21px
}
.qxd-custom-example {
    display:grid;
    grid-template-columns:1fr 1.1fr;
    align-items:center;
    gap:45px;
    margin-top:44px;
    padding:30px 0 0
}
.qxd-custom-example .qxd-small-label {
    color:#9cba9b
}
.qxd-custom-example h3 {
    font-size:19px;
    font-weight:600;
    margin:9px 0 12px
}
.qxd-custom-example p {
    font-size:12px;
    line-height:1.9;
    color:#a8beb0
}
.qxd-flow-line {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:9px;
    min-height:72px;
    border:1px solid #648371;
    border-radius:8px;
    background:#ffffff05;
    padding:12px 15px
}
.qxd-flow-line>span {
    font-size:11px;
    white-space:nowrap
}
.qxd-flow-line i {
    font-size:12px;
    font-style:normal;
    color:#89a778
}
.qxd-rule-chips {
    display:flex;
    gap:9px;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:16px
}
.qxd-rule-chips span {
    font-size:10px;
    color:#c3d596;
    background:#dceda80b;
    border:1px solid #b7cc882e;
    border-radius:4px;
    padding:4px 10px
}
.qxd-collaboration {
    background:#fff
}
.qxd-collaboration .qxd-section-heading {
    max-width:750px
}
.qxd-scenario-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin:45px 0 22px
}
.qxd-scenario-header>div {
    display:flex;
    align-items:center;
    gap:15px
}
.qxd-scenario-badge {
    font-size:9px;
    color:var(--qx-green);
    border:1px solid #cbdabb;
    background:#f5f8ed;
    padding:4px 8px;
    border-radius:4px;
    white-space:nowrap
}
.qxd-scenario-header h3 {
    font-size:16px;
    font-weight:600
}
.qxd-step-buttons {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px
}
.qxd-step-buttons button {
    appearance:none;
    text-align:left;
    border:1px solid var(--qx-line);
    border-radius:8px;
    background:#fff;
    padding:23px 24px;
    cursor:pointer;
    color:var(--qx-ink);
    transition:background .18s,border-color .18s
}
.qxd-step-buttons button[aria-pressed=true] {
    background:#eef5df;
    border-color:#a7bd7e
}
.qxd-step-buttons button>span {
    color:#91a281;
    display:block;
    font-size:10px;
    letter-spacing:1px;
    margin-bottom:22px
}
.qxd-step-buttons strong {
    font-size:16px;
    display:block;
    font-weight:600
}
.qxd-step-buttons small {
    display:block;
    font-size:11px;
    color:#7f8f75;
    margin-top:7px
}
.qxd-step-detail {
    display:flex;
    gap:24px;
    align-items:center;
    min-height:133px;
    padding:25px 27px;
    background:#f8faf4;
    border:1px solid #e5eadc;
    border-radius:8px;
    margin-top:17px
}
.qxd-step-detail-number {
    height:44px;
    width:44px;
    border:1px solid #c8d8b1;
    display:grid;
    place-items:center;
    font-size:12px;
    border-radius:50%;
    color:#66834e;
    flex-shrink:0
}
.qxd-step-detail h4 {
    font-size:15px;
    font-weight:600;
    line-height:1.6
}
.qxd-step-detail p {
    font-size:12px;
    line-height:1.9;
    color:var(--qx-muted);
    margin-top:7px;
    max-width:650px
}
.qxd-step-rule {
    margin-left:auto;
    flex-shrink:0;
    font-size:10px;
    color:#71905c;
    padding:7px 11px;
    background:#edf3e2;
    border-radius:5px
}
.qxd-price-section {
    background:#f8f9f4
}
.qxd-invest-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
    margin-top:40px
}
.qxd-invest-grid article {
    padding-top:23px;
    border-top:2px solid #d4e1c1
}
.qxd-invest-grid article>span {
    font-size:10px;
    color:#879577;
    letter-spacing:.6px
}
.qxd-invest-grid h3 {
    font-size:21px;
    font-weight:650;
    margin:13px 0 13px
}
.qxd-invest-grid p {
    font-size:13px;
    line-height:1.9;
    color:var(--qx-muted);
    max-width:300px
}
.qxd-final-section {
    padding:70px 0;
    background:#fff
}
.qxd-final-cta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    background:#e8f0d8;
    border:1px solid #e0e9d0;
    border-radius:12px;
    padding:48px 54px
}
.qxd-final-cta .qxd-eyebrow {
    margin-bottom:17px!important
}
.qxd-final-cta h2 {
    font-size:34px;
    line-height:1.45;
    font-weight:700;
    letter-spacing:-.8px
}
.qxd-final-cta p:last-child {
    font-size:13px;
    color:var(--qx-muted);
    margin-top:15px
}
.qxd-button-lime {
    background:var(--qx-ink);
    color:#fff!important
}
.qxd-button-lime:hover {
    background:var(--qx-green)
}
.qxd-footer {
    background:#fff
}
.qxd-footer-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    border-top:1px solid var(--qx-line);
    padding-block:29px 33px
}
.qxd-footer strong {
    font-size:16px;
    letter-spacing:1px
}
.qxd-footer p {
    font-size:10px;
    color:#8a9683;
    margin-top:5px
}
.qxd-footer-links {
    display:flex;
    gap:24px;
    color:#7c8b75;
    font-size:10px
}
@media(min-width:1600px) {
    .qxd-hero {
        padding:112px 0 124px
    }
}
@media(max-width:1100px) {
    .qxd-nav {
        gap:24px
    }
    .qxd-brand small {
        display:none
    }
    .qxd-hero-grid {
        gap:35px
    }
    .qxd-hero h1 {
        font-size:45px;
        letter-spacing:-1.5px
    }
    .qxd-menu {
        gap:20px
    }
    .qxd-workspace-body {
        padding:22px 20px 17px
    }
    .qxd-workspace h2 {
        font-size:20px
    }
    .qxd-work-item small {
        font-size:9px
    }
    .qxd-capabilities p {
        gap:11px
    }
    .qxd-role-story {
        padding:30px
    }
    .qxd-role-output {
        padding:23px 20px 17px
    }
    .qxd-step-rule {
        max-width:140px;
        white-space:normal;
        text-align:center
    }
    .qxd-custom-example {
        gap:26px
    }
    .qxd-flow-line {
        gap:6px;
        padding:10px
    }
    .qxd-flow-line>span {
        font-size:10px
    }
}
@media(max-width:860px) {
    .qx-demo .qxd-shell {
        width:calc(100% - 42px)
    }
    .qxd-nav {
        height:74px;
        gap:19px
    }
    .qxd-brand {
        font-size:22px
    }
    .qxd-menu {
        gap:17px
    }
    .qxd-menu a {
        font-size:11px
    }
    .qxd-nav-cta {
        font-size:11px;
        padding:9px 12px;
        gap:9px
    }
    .qxd-hero {
        padding:67px 0 81px
    }
    .qxd-hero-grid {
        gap:26px
    }
    .qxd-hero h1 {
        font-size:38px
    }
    .qxd-lead {
        font-size:13px
    }
    .qxd-desktop-break {
        display:none
    }
    .qxd-actions {
        gap:18px
    }
    .qx-demo .qxd-button {
        font-size:12px;
        padding:12px 16px;
        gap:18px;
        min-height:46px
    }
    .qxd-text-link {
        font-size:11px;
        gap:8px
    }
    .qxd-hero-pillars {
        font-size:10px;
        gap:11px
    }
    .qxd-hero-pillars span+span:before {
        margin-right:11px
    }
    .qxd-workspace-top {
        padding:0 14px;
        gap:10px;
        font-size:8px
    }
    .qxd-workspace-body {
        padding:18px 15px 15px
    }
    .qxd-workspace h2 {
        font-size:17px
    }
    .qxd-small-label {
        font-size:9px
    }
    .qxd-avatar {
        width:32px;
        height:32px;
        font-size:10px
    }
    .qxd-hero-question {
        font-size:9px;
        padding:8px;
        margin-top:16px
    }
    .qxd-work-item {
        gap:8px;
        padding:12px 0
    }
    .qxd-item-icon {
        width:27px;
        height:27px;
        font-size:14px
    }
    .qxd-work-item strong {
        font-size:10px
    }
    .qxd-work-item small {
        font-size:8px
    }
    .qxd-status {
        font-size:8px;
        padding:2px 4px
    }
    .qxd-workspace-bottom {
        font-size:7px
    }
    .qxd-workspace-bottom>span:last-child {
        display:none
    }
    .qxd-floating-note {
        right:10px;
        padding:10px 13px;
        bottom:-24px
    }
    .qxd-floating-note strong {
        font-size:10px
    }
    .qxd-floating-note small {
        font-size:8px
    }
    .qxd-section {
        padding:69px 0
    }
    .qxd-section-heading h2 {
        font-size:33px
    }
    .qxd-heading-inline>p:last-child {
        font-size:12px;
        max-width:280px
    }
    .qxd-advantage {
        padding:23px 21px
    }
    .qxd-advantage-grid {
        gap:13px
    }
    .qxd-advantage h3 {
        font-size:21px
    }
    .qxd-advantage p {
        font-size:12px;
        min-height:68px
    }
    .qxd-card-top {
        font-size:8px
    }
    .qxd-capabilities {
        align-items:flex-start
    }
    .qxd-capabilities>span {
        white-space:nowrap
    }
    .qxd-capabilities p {
        justify-content:flex-end;
        gap:9px
    }
    .qxd-role-story {
        padding:25px
    }
    .qxd-role-story h3 {
        font-size:20px;
        min-height:64px
    }
    .qxd-role-story>p {
        font-size:12px;
        min-height:66px
    }
    .qxd-check-list li {
        font-size:11px
    }
    .qxd-benefit strong {
        font-size:12px
    }
    .qxd-role-output {
        margin:12px 12px 12px 0;
        padding:21px 17px 15px
    }
    .qxd-output-summary strong {
        font-size:12px
    }
    .qxd-output-summary p {
        font-size:10px
    }
    .qxd-example-row {
        font-size:10px;
        gap:7px
    }
    .qxd-example-row strong {
        font-size:10px
    }
    .qxd-value-strip {
        gap:13px
    }
    .qxd-value-strip strong {
        font-size:11px
    }
    .qxd-value-strip small {
        font-size:9px
    }
    .qxd-custom-grid article {
        padding:22px
    }
    .qxd-custom-grid h3 {
        font-size:17px
    }
    .qxd-custom-grid p {
        font-size:11px;
        min-height:61px
    }
    .qxd-custom-example {
        grid-template-columns:1fr;
        gap:24px
    }
    .qxd-flow-line {
        max-width:580px;
        margin:auto;
        padding:18px 23px
    }
    .qxd-flow-line>span {
        font-size:12px
    }
    .qxd-rule-chips {
        margin-top:12px
    }
    .qxd-scenario-header>.qxd-demo-label {
        display:none
    }
    .qxd-step-buttons button {
        padding:20px
    }
    .qxd-step-buttons strong {
        font-size:15px
    }
    .qxd-step-buttons small {
        font-size:10px
    }
    .qxd-step-detail {
        padding:23px 21px;
        gap:18px
    }
    .qxd-step-rule {
        display:none
    }
    .qxd-invest-grid {
        gap:22px
    }
    .qxd-invest-grid h3 {
        font-size:18px
    }
    .qxd-invest-grid p {
        font-size:12px
    }
    .qxd-final-cta {
        padding:38px
    }
    .qxd-final-cta h2 {
        font-size:30px
    }
}
@media(max-width:640px) {
    .qx-demo .qxd-shell {
        width:calc(100% - 36px)
    }
    .qx-demo [id] {
        scroll-margin-top:85px
    }
    .qxd-nav {
        height:70px;
        gap:13px;
        position:relative
    }
    .qxd-brand {
        font-size:22px;
        margin-right:auto
    }
    .qxd-brand-mark {
        width:33px;
        height:33px;
        font-size:21px;
        border-radius:10px
    }
    .qxd-brand>span:last-child {
        gap:0
    }
    .qxd-nav-cta {
        font-size:10px;
        padding:9px 11px;
        gap:10px
    }
    .qxd-menu-toggle {
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:4px;
        width:30px;
        height:34px;
        border:0;
        background:transparent;
        padding:5px;
        order:3;
        cursor:pointer
    }
    .qxd-menu-toggle span {
        display:block;
        width:19px;
        height:1.5px;
        background:var(--qx-ink);
        transition:transform .18s
    }
    .qxd-menu-toggle[aria-expanded=true] span:first-child {
        transform:translateY(5.5px) rotate(45deg)
    }
    .qxd-menu-toggle[aria-expanded=true] span:nth-child(2) {
        opacity:0
    }
    .qxd-menu-toggle[aria-expanded=true] span:last-child {
        transform:translateY(-5.5px) rotate(-45deg)
    }
    .qxd-menu {
        display:none;
        position:absolute;
        top:69px;
        left:-18px;
        right:-18px;
        padding:18px 23px;
        background:#fbfcf8;
        border-bottom:1px solid #dce4d5;
        box-shadow:0 9px 14px #173b3407;
        grid-template-columns:1fr 1fr;
        gap:19px
    }
    .qxd-menu.is-open {
        display:grid
    }
    .qxd-menu a {
        font-size:13px;
        padding:3px
    }
    .qxd-hero {
        padding:49px 0 68px
    }
    .qxd-hero-grid {
        grid-template-columns:1fr;
        gap:48px
    }
    .qxd-eyebrow {
        font-size:10px;
        letter-spacing:.7px;
        margin-bottom:22px!important
    }
    .qxd-hero h1 {
        font-size:clamp(34px,9.4vw,43px);
        line-height:1.35;
        letter-spacing:-1.3px;
        margin-bottom:22px
    }
    .qxd-highlight:after {
        height:10px;
        bottom:3px
    }
    .qxd-lead {
        font-size:13px;
        line-height:1.95;
        max-width:430px
    }
    .qxd-actions {
        margin-top:27px;
        gap:24px
    }
    .qx-demo .qxd-button {
        font-size:12px;
        padding:13px 18px;
        gap:24px
    }
    .qxd-text-link {
        font-size:12px
    }
    .qxd-hero-pillars {
        margin-top:25px;
        font-size:10px;
        gap:17px
    }
    .qxd-hero-pillars span+span:before {
        margin-right:17px
    }
    .qxd-workspace {
        max-width:440px;
        width:100%;
        margin:0 auto 18px;
        transform:rotate(-.7deg)
    }
    .qxd-workspace-top {
        height:42px;
        padding:0 16px;
        gap:12px;
        font-size:9px
    }
    .qxd-workspace-body {
        padding:21px 19px 17px
    }
    .qxd-workspace h2 {
        font-size:20px
    }
    .qxd-small-label {
        font-size:10px
    }
    .qxd-avatar {
        width:34px;
        height:34px;
        font-size:11px
    }
    .qxd-hero-question {
        font-size:10px;
        padding:10px;
        margin-top:18px
    }
    .qxd-work-item {
        gap:11px;
        padding:13px 0
    }
    .qxd-work-item strong {
        font-size:11px
    }
    .qxd-work-item small {
        font-size:9px
    }
    .qxd-status {
        font-size:9px;
        padding:3px 6px
    }
    .qxd-workspace-bottom {
        font-size:8px
    }
    .qxd-floating-note {
        right:12px;
        bottom:-25px;
        padding:11px 14px
    }
    .qxd-floating-note strong {
        font-size:10px
    }
    .qxd-floating-note small {
        font-size:8px
    }
    .qxd-section {
        padding:59px 0
    }
    .qxd-section-heading {
        margin-bottom:27px
    }
    .qxd-section-heading .qxd-eyebrow {
        margin-bottom:16px!important
    }
    .qxd-section-heading h2 {
        font-size:29px;
        line-height:1.45;
        letter-spacing:-.7px
    }
    .qxd-section-heading>p:last-child {
        font-size:12px;
        line-height:1.9;
        margin-top:15px
    }
    .qxd-heading-inline {
        display:block
    }
    .qxd-heading-inline>p:last-child {
        max-width:none;
        margin-top:17px
    }
    .qxd-advantage-grid {
        grid-template-columns:1fr;
        gap:12px
    }
    .qxd-advantage {
        padding:23px
    }
    .qxd-card-top {
        font-size:9px;
        margin-bottom:13px
    }
    .qxd-card-top>span:last-child {
        font-size:24px
    }
    .qxd-advantage h3 {
        font-size:21px;
        margin-bottom:9px
    }
    .qxd-advantage p {
        font-size:12px;
        min-height:0;
        max-width:430px
    }
    .qxd-advantage>a {
        margin-top:18px;
        font-size:11px
    }
    .qxd-capabilities {
        display:block;
        margin-top:24px;
        padding-top:21px
    }
    .qxd-capabilities>span {
        font-size:11px
    }
    .qxd-capabilities p {
        justify-content:flex-start;
        gap:10px;
        font-size:10px;
        line-height:1.8;
        margin-top:11px
    }
    .qxd-role-tabs {
        grid-template-columns:1fr 1fr;
        gap:6px;
        padding:5px;
        margin-bottom:16px
    }
    .qxd-role-tabs button {
        font-size:12px;
        padding:12px 6px;
        gap:9px
    }
    .qxd-role-tabs button>span {
        font-size:8px
    }
    .qxd-role-panel {
        grid-template-columns:1fr;
        min-height:0
    }
    .qxd-role-story {
        padding:25px 23px
    }
    .qxd-role-story h3 {
        font-size:21px;
        min-height:0;
        margin-top:12px;
        line-height:1.6
    }
    .qxd-role-story>p {
        font-size:12px;
        min-height:0
    }
    .qxd-check-list {
        margin-top:19px;
        margin-bottom:22px
    }
    .qxd-check-list li {
        font-size:11px;
        margin:10px 0
    }
    .qxd-benefit strong {
        font-size:12px
    }
    .qxd-role-output {
        margin:0 12px 12px;
        padding:22px 17px 17px
    }
    .qxd-output-summary {
        padding:21px 0
    }
    .qxd-output-summary strong {
        font-size:13px
    }
    .qxd-output-summary p {
        font-size:10px
    }
    .qxd-example-row {
        padding:12px 0;
        font-size:10px;
        gap:8px
    }
    .qxd-example-row strong {
        font-size:10px
    }
    .qxd-example-th {
        font-size:9px
    }
    .qxd-demo-note {
        font-size:9px
    }
    .qxd-value-strip {
        grid-template-columns:1fr;
        gap:18px;
        margin-top:26px;
        padding:0 5px
    }
    .qxd-value-strip>div {
        gap:17px
    }
    .qxd-value-strip>div>span {
        font-size:23px;
        width:24px;
        text-align:center
    }
    .qxd-value-strip strong {
        font-size:12px
    }
    .qxd-value-strip small {
        font-size:10px
    }
    .qxd-custom-grid {
        grid-template-columns:1fr 1fr;
        margin-top:28px
    }
    .qxd-custom-grid article {
        padding:21px 17px
    }
    .qxd-custom-number {
        font-size:9px
    }
    .qxd-custom-grid h3 {
        font-size:16px;
        margin:12px 0 10px
    }
    .qxd-custom-grid p {
        font-size:11px;
        min-height:83px;
        line-height:1.9
    }
    .qxd-custom-grid small {
        font-size:9px;
        margin-top:17px;
        min-height:32px;
        line-height:1.8
    }
    .qxd-custom-example {
        padding-top:0;
        margin-top:29px;
        gap:20px
    }
    .qxd-custom-example h3 {
        font-size:17px;
        line-height:1.7
    }
    .qxd-custom-example p {
        font-size:11px
    }
    .qxd-flow-line {
        gap:5px;
        padding:17px 10px
    }
    .qxd-flow-line>span {
        font-size:10px
    }
    .qxd-flow-line i {
        font-size:10px
    }
    .qxd-rule-chips {
        gap:7px;
        justify-content:flex-start;
        margin-top:12px
    }
    .qxd-rule-chips span {
        font-size:9px;
        padding:4px 9px
    }
    .qxd-scenario-header {
        margin-top:29px;
        margin-bottom:18px
    }
    .qxd-scenario-header>div {
        display:block
    }
    .qxd-scenario-header h3 {
        font-size:15px;
        margin-top:10px;
        line-height:1.7
    }
    .qxd-scenario-badge {
        font-size:9px
    }
    .qxd-step-buttons {
        grid-template-columns:1fr 1fr;
        gap:10px
    }
    .qxd-step-buttons button {
        padding:19px
    }
    .qxd-step-buttons button>span {
        margin-bottom:14px;
        font-size:9px
    }
    .qxd-step-buttons strong {
        font-size:15px
    }
    .qxd-step-buttons small {
        font-size:10px;
        margin-top:5px
    }
    .qxd-step-detail {
        padding:22px 18px;
        gap:14px;
        align-items:flex-start;
        min-height:174px;
        margin-top:13px
    }
    .qxd-step-detail-number {
        width:31px;
        height:31px;
        font-size:10px;
        margin-top:2px
    }
    .qxd-step-detail h4 {
        font-size:13px;
        line-height:1.75
    }
    .qxd-step-detail p {
        font-size:11px;
        line-height:1.9;
        margin-top:9px
    }
    .qxd-invest-grid {
        grid-template-columns:1fr;
        gap:26px;
        margin-top:27px
    }
    .qxd-invest-grid article {
        padding-top:20px
    }
    .qxd-invest-grid h3 {
        font-size:19px;
        margin-top:10px;
        margin-bottom:10px
    }
    .qxd-invest-grid p {
        max-width:none;
        font-size:12px
    }
    .qxd-final-section {
        padding:40px 0 22px
    }
    .qxd-final-cta {
        display:block;
        padding:29px 24px
    }
    .qxd-final-cta .qxd-eyebrow {
        font-size:10px
    }
    .qxd-final-cta h2 {
        font-size:27px;
        letter-spacing:-.7px
    }
    .qxd-final-cta p:last-child {
        font-size:11px;
        line-height:1.9;
        margin-top:14px
    }
    .qxd-final-cta .qxd-button {
        margin-top:24px
    }
    .qxd-footer-inner {
        align-items:flex-start;
        flex-direction:column;
        gap:20px;
        padding-block:25px 29px
    }
    .qxd-footer strong {
        font-size:15px
    }
    .qxd-footer p {
        font-size:10px
    }
    .qxd-footer-links {
        justify-content:space-between;
        width:100%;
        font-size:9px;
        gap:12px
    }
}
@media(prefers-reduced-motion:reduce) {
    .qx-demo * {
        scroll-behavior:auto!important;
        transition:none!important
    }
}