/* Responsive code replicas, horizontal workflow and team-cost workbench.
 * The user's round/floating brand intentionally overrides the generic card floor. */
.header-demo { font-size:var(--small); font-weight:650; text-decoration:none; color:var(--accent) }
.product-image { padding:34px; overflow:visible; background:#e9e6fa }
.ui-demo { color:var(--ink); background:var(--surface); border-radius:16px; padding:26px; font-size:.9375rem; line-height:1.65; box-shadow:0 20px 55px -25px rgba(36,29,81,.3); overflow-wrap:anywhere }
.ui-demo p+p { margin-top:14px }
.ui-demo h3 { font-size:1.125rem; line-height:1.45; letter-spacing:-.02em }
.demo-top,.demo-top>span:first-child,.demo-app,.demo-actions,.demo-document-heading,.demo-scheduled { display:flex; align-items:center; gap:12px }
.demo-top { justify-content:space-between; margin-bottom:28px; gap:16px }
.demo-top .vx-symbol { width:21px; height:21px }
.demo-label { font-size:.75rem; color:var(--muted); text-align:right }
.demo-prompt { margin-left:15%; padding:14px 18px; border-radius:18px 18px 4px 18px; background:var(--soft) }
.demo-answer { margin-top:28px }
.demo-answer>p { margin-top:14px }
.demo-source { margin-top:22px; font-size:.875rem }
.demo-source summary { display:flex; align-items:center; gap:8px; cursor:pointer; color:var(--accent-deep); text-decoration:underline; text-underline-offset:.25em; min-height:32px; width:fit-content }
.demo-source summary::-webkit-details-marker { display:none }
.demo-source p { margin-top:12px }
.demo-source small { color:var(--muted) }
.demo-source code { display:block; margin-top:10px; font-size:.875rem; white-space:normal; overflow-wrap:anywhere }
.demo-next { color:var(--muted); font-size:.875rem }
.demo-document-heading { align-items:flex-start; margin-bottom:22px }
.demo-document-heading>.icon { color:var(--accent); margin-top:4px }
.demo-document-heading>div { flex:1 }
.demo-document-heading p,.demo-app span { font-size:.8125rem; color:var(--muted) }
.demo-tag { display:inline-block; color:var(--accent-deep); background:var(--soft); border-radius:999px; padding:4px 9px; font-size:.75rem; font-weight:650; white-space:nowrap }
.demo-document h4 { font-size:.9375rem; margin:20px 0 8px }
.demo-document ul { margin:8px 0 0; padding-left:20px }
.demo-document li+li { margin-top:6px }
.demo-foot { display:flex; align-items:center; gap:9px; border-top:1px solid #e4e2ec; margin-top:22px; padding-top:16px; color:var(--muted); font-size:.8125rem }
.demo-app { margin-bottom:20px }
.demo-app>div { min-width:0 }
.demo-app span { display:block }
.ui-demo--permission>h3 { margin-bottom:10px }
.demo-actions { justify-content:flex-end; flex-wrap:wrap; margin-top:24px }
.demo-actions button,.demo-scheduled button { border:0; border-radius:999px; padding:10px 16px; min-height:44px; background:#eeedf2; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:.875rem; font-weight:650; transition:background-color 160ms var(--ease-out),transform 160ms var(--ease-out) }
.demo-actions .demo-allow { color:white; background:var(--ink) }
.demo-feedback { color:var(--muted); margin-top:16px!important; font-size:.8125rem }
.demo-email { margin:0 }
.demo-email>div { display:grid; grid-template-columns:70px 1fr; gap:12px; padding:7px 0 }
.demo-email dt { color:var(--muted) }
.demo-email dd { margin:0 }
.demo-email-body { margin-top:18px; padding-top:18px; border-top:1px solid #e4e2ec }
.demo-members { display:flex; align-items:center; margin:26px 0 }
.demo-members>span { display:grid; place-items:center; background:var(--soft); color:var(--accent-deep); width:42px; height:42px; border-radius:50%; margin-right:5px; font-weight:650 }
.demo-members>p { margin-left:12px; font-size:.875rem; line-height:1.5 }
.demo-scheduled { align-items:flex-start }
.demo-scheduled>div { flex:1; min-width:0 }
.demo-scheduled>.icon { color:var(--accent); margin-top:5px }
.demo-scheduled p { margin:5px 0 0; color:var(--muted); font-size:.8125rem }
.demo-schedule-answer { margin-top:26px; padding-top:22px; border-top:1px solid #e4e2ec }
.demo-schedule-answer h3 { margin:14px 0 12px }
.followup-inner .ui-demo p { margin-top:12px; max-width:none }
.followup-inner .demo-label { color:var(--muted) }
.workflow-story { position:relative; margin-top:42px }
.workflow-showcase { position:relative; margin-top:0 }
.workflow-story[data-scroll-book=true]>.workflow-showcase { position:sticky; top:24px }
.workflow-book { position:relative; isolation:isolate; padding:12px; border-radius:26px; background:#35313f; box-shadow:0 28px 65px -36px rgba(36,29,81,.42) }
[data-enhanced=true] .workflow-book { display:grid; grid-template-columns:minmax(250px,.7fr) minmax(0,1.65fr); gap:7px }
.workflow-book::after { content:''; position:absolute; z-index:-1; inset:18px 4px -5px 18px; border-radius:12px 21px 23px 12px; background:#c8c2df; transform:rotate(.35deg); pointer-events:none }
.book-index { display:flex; flex-direction:column; padding:34px 26px; border-radius:17px 4px 4px 17px; background:#eeecf8; color:var(--ink) }
.book-index-intro h3 { font-size:clamp(1.375rem,2vw,1.75rem); line-height:1.25; letter-spacing:-.025em }
.book-index-intro p { margin-top:16px; color:var(--muted); font-size:.9375rem }
.workflow-tabs { display:grid; grid-template-columns:1fr; gap:7px; margin:32px 0 }
.workflow-tabs button { display:flex; align-items:center; justify-content:space-between; gap:14px; border:0; border-radius:12px; text-align:left; padding:17px 16px; min-height:58px; color:var(--ink); background:transparent; font-size:.9375rem; font-weight:650; transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out) }
.workflow-tabs button[aria-selected=true] { color:var(--accent-deep); background:white }
.workflow-tabs .icon { width:18px; height:18px }
[data-keyboard=true] .workflow-tabs button { transition:none }
.book-footer { margin-top:auto; padding-top:12px }
.book-hint { font-size:.8125rem; line-height:1.7; color:var(--muted) }
.book-progress { height:3px; margin-top:18px; overflow:hidden; border-radius:999px; background:#d7d2e9 }
.book-progress span { display:block; height:100%; background:var(--accent); transform:scaleX(.04); transform-origin:left }
.workflow-panels { position:relative; perspective:1800px; background:#f8f7fc; border-radius:4px 17px 17px 4px; overflow:hidden }
.workflow-panel { display:grid; grid-template-columns:1fr; gap:28px; padding:34px; align-content:start; min-height:660px; transform-origin:left center }
.workflow-copy h3 { font-size:clamp(1.5rem,2.3vw,2rem); line-height:1.25; max-width:25ch }
.workflow-copy>p { margin-top:14px; max-width:66ch; font-size:.9375rem }
.workflow-copy>a { display:inline-flex; align-items:center; gap:14px; margin-top:16px; font-size:var(--small) }
.workflow-example { min-width:0 }
.workflow-example .ui-demo { padding:24px; font-size:.875rem }
.workflow-example .demo-top { margin-bottom:20px }
.workflow-example .demo-document-heading { margin-bottom:16px }
.workflow-example .demo-document h4 { margin-top:16px }
.workflow-example .demo-foot { margin-top:16px; padding-top:12px }
.workflow-example .demo-tag,.workflow-example .demo-label { font-size:.8125rem }
.workflow-example .demo-members { flex-wrap:wrap; gap:4px }
.workflow-example .demo-members>p { margin-left:8px; flex:1 }
.scope-examples { position:relative; background:var(--soft); border-radius:var(--radius); padding:30px }
.scope-body>div:first-child { position:relative }
.scope-body { gap:70px; align-items:start }
.scope-copy { padding-top:30px }
.pricing-workbench { margin-top:40px }
.plan-controls { margin:0 0 26px; align-items:center }
.plan-controls h3 { font-size:1.25rem; margin-bottom:6px }
.billing-cycle button>span { display:block; font-size:.8125rem; line-height:1.4 }
.seat-workbench { display:grid; grid-template-columns:1fr auto 1fr; gap:28px; align-items:center; padding:22px 28px; border-radius:16px; background:#eae8f2 }
.seat-copy label { font-size:.9375rem; font-weight:650 }
.seat-copy p { margin-top:4px; font-size:.8125rem }
.seat-stepper { display:flex; align-items:center; background:white; border-radius:14px; padding:5px; gap:4px }
.seat-stepper input { appearance:textfield; -moz-appearance:textfield; width:74px; border:0; background:transparent; color:var(--ink); font:650 1.125rem/1.4 var(--font); text-align:center; font-variant-numeric:tabular-nums; padding:8px 0; border-radius:8px }
.seat-stepper input::-webkit-inner-spin-button,.seat-stepper input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0 }
.seat-stepper button { display:grid; place-items:center; width:44px; height:44px; padding:0; background:#f2f0f7; border:0; border-radius:10px; color:var(--ink); transition:background-color 160ms var(--ease-out),transform 160ms var(--ease-out) }
.seat-stepper button:active { transform:scale(.97) }
.seat-stepper input[aria-invalid=true] { background:#fbecee; color:#a13236 }
.seat-privacy { justify-self:end; font-size:.8125rem; max-width:24ch }
.plan-fields { gap:24px; margin-top:26px; border-radius:0; overflow:visible }
.plan-field { background:white; border-radius:var(--radius); padding:34px; box-shadow:0 22px 55px -35px rgba(28,24,62,.28) }
.plan-field--scale { background:#24232c; color:var(--dark-ink) }
.plan-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; width:100% }
.plan-heading span { font-size:.8125rem; background:var(--soft); color:var(--accent-deep); border-radius:999px; padding:5px 10px; font-weight:650 }
.plan-field>p:first-of-type { font-size:.9375rem; min-height:48px; max-width:40ch; margin-top:14px }
.plan-price { font-size:3.5rem; margin-top:26px; line-height:1.1 }
.price-unit { font-size:.8125rem; line-height:1.4; color:var(--muted) }
.plan-field--scale .price-unit,.plan-field--scale .small-note,.plan-field--scale .price-period { color:var(--dark-muted) }
.plan-team-total { width:100%; padding:22px 0; margin:22px 0 4px; border:0 }
.plan-field--scale .plan-team-total { border-color:#53515f }
.plan-team-total>span { font-size:.8125rem; color:var(--muted) }
.plan-field--scale .plan-team-total>span { color:var(--dark-muted) }
.plan-estimate { margin-top:7px; min-height:0; font-size:1.125rem; line-height:1.6; max-width:none }
.plan-team-total .small-note { margin-top:8px }
.plan-capacity { width:100%; font-size:.875rem; margin:12px 0 28px; font-variant-numeric:tabular-nums }
.plan-capacity>div { display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:10px 0 }
.plan-capacity dt { max-width:30ch }
.plan-capacity dd { margin:0; font-weight:750; text-align:right }
.plan-field>.button { width:100%; background:var(--accent); color:white }
.plan-field--scale>.button { background:white; color:var(--ink) }
.plan-demo-link { align-self:center; font-size:.875rem; margin-top:18px; font-weight:650 }
.plan-field>.small-note { align-self:center; text-align:center; font-size:.75rem }
.plan-shared { display:grid; grid-template-columns:.8fr 1.4fr auto; gap:30px; align-items:center; padding:30px 0; border:0 }
.plan-shared h3 { font-size:1.25rem }
.plan-shared p { font-size:.875rem }
.plan-shared a { display:inline-flex; align-items:center; gap:12px; font-size:.875rem; white-space:nowrap }
.pricing-disclaimer { margin-top:22px; max-width:90ch }
.payg-plan { display:grid; grid-template-columns:1fr 1.05fr; gap:70px; align-items:center; padding:40px; margin-top:26px; border-radius:var(--radius); background:var(--soft) }
.payg-intro h3 { font-size:clamp(1.75rem,2.6vw,2.5rem); max-width:17ch; line-height:1.15 }
.payg-intro p { margin-top:20px; font-size:.9375rem; max-width:44ch }
.payg-intro .payg-includes { font-size:.8125rem; color:var(--accent-deep) }
.payg-intro .inline-link { margin-top:24px; display:inline-flex; align-items:center; gap:12px; font-size:.875rem }
.payg-purchase { min-width:0 }
.payg-purchase fieldset { margin:0; padding:0; border:0 }
.payg-purchase legend { font-size:.875rem; font-weight:650; margin-bottom:14px }
.credit-pack-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.credit-pack-options label { position:relative; cursor:pointer; min-width:0 }
.credit-pack-options input { position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer }
.credit-pack-options span { display:flex; flex-direction:column; padding:17px 14px; border-radius:16px; background:#dedbed; color:var(--ink); transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out) }
.credit-pack-options strong { font-size:1.375rem; font-weight:750; line-height:1.2; font-variant-numeric:tabular-nums }
.credit-pack-options small { font-size:.8125rem; margin:3px 0 16px }
.credit-pack-options b { font-size:.9375rem; font-weight:600 }
.credit-pack-options input:checked+span { background:var(--accent-deep); color:white }
.credit-pack-options input:focus-visible+span { outline:3px solid var(--accent); outline-offset:4px }
.payg-summary { font-size:1rem; font-weight:650; margin-top:22px; font-variant-numeric:tabular-nums }
html:not([data-pricing-ready=true]) [data-pack-summary] { display:none }
.plan-field [data-plan-choose][aria-disabled=true] { opacity:.5; cursor:not-allowed }
.payg-purchase>.button { width:100%; margin-top:16px; background:var(--ink); color:white }
.payg-purchase>.small-note { font-size:.8125rem; margin-top:18px; color:var(--accent-deep) }
.plan-field>.button { margin-top:auto }
.plan-price,.plan-estimate { font-variant-numeric:tabular-nums }
html:not([data-pricing-ready=true]) .billing-cycle,html:not([data-pricing-ready=true]) .seat-workbench { display:none }
@media(max-width:1100px) { .payg-plan { gap:34px } }
@media(max-width:800px) { .payg-plan { grid-template-columns:1fr; gap:26px; padding:28px } .payg-intro h3 { max-width:none } }
@media(max-width:760px) { .payg-plan { padding:24px; border-radius:20px } .credit-pack-options span { padding:17px 11px } .credit-pack-options strong { font-size:1.1875rem } }
.demo-page { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; padding-block:70px 100px; align-items:start }
.demo-page .standalone-intro { margin:0 }
.demo-page h1 { font-size:clamp(2.625rem,5vw,4.75rem) }
.demo-form { background:var(--surface); border-radius:var(--radius); padding:36px; box-shadow:0 24px 65px -36px rgba(36,29,81,.3) }
.demo-form label { display:block; font-size:.875rem; font-weight:650; margin-bottom:20px }
.demo-form input:not([type=checkbox]),.demo-form textarea,.demo-form select { width:100%; border:1px solid #c9c6d6; background:white; color:var(--ink); border-radius:12px; padding:12px 14px; margin-top:8px; font:inherit; min-height:48px; resize:vertical }
.demo-form input::placeholder,.demo-form textarea::placeholder { color:var(--muted); opacity:1 }
.demo-form .demo-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px }
.demo-form .consent-label { display:flex; align-items:flex-start; gap:10px; font-weight:500 }
.consent-label input { flex:none; margin-top:5px; accent-color:var(--accent); width:18px; height:18px }
.demo-form .small-note { margin-top:18px }
.form-error { background:#f8e9ed; color:#912b42; padding:16px; border-radius:12px; margin-bottom:22px }
.demo-received { max-width:850px; margin:0 auto; padding-block:100px }
.demo-received p { margin-top:28px }
.demo-received .button { margin-top:32px }
@media(hover:hover) and (pointer:fine) {
  .demo-actions button:hover,.demo-scheduled button:hover { background:#dedbef }
  .demo-actions .demo-allow:hover { background:#3b3946 }
  .workflow-tabs button:not([aria-selected=true]):hover { background:#dedbec }
  .seat-stepper button:not(:disabled):hover { background:#e5e0f2 }
  .plan-field>.button:hover { background:var(--accent-deep) }
  .plan-field--scale>.button:hover { background:#e8e5ff }
}
@media(max-width:1100px) {
  .desktop-links { gap:18px }
  .workflow-panel { padding:28px; gap:24px }
  .book-index { padding:28px 18px }
  .workflow-tabs button { padding:15px 12px; font-size:.875rem }
  .seat-workbench { gap:20px }
  .plan-shared { grid-template-columns:1fr 1.5fr }
  .plan-shared a { grid-column:2 }
  .demo-page { gap:40px }
}
@media(max-width:1000px) {
  [data-enhanced=true] .workflow-book { grid-template-columns:1fr }
  .book-index { display:grid; grid-template-columns:1fr 1.4fr; gap:18px; border-radius:16px 16px 4px 4px; padding:26px }
  .workflow-tabs { grid-template-columns:1fr 1fr; margin:0; gap:6px }
  .book-footer { grid-column:1/-1; padding-top:0 }
  .book-progress { display:none }
  .workflow-panels { border-radius:4px 4px 16px 16px }
  .workflow-panel { min-height:0 }
  .marketing-header { gap:18px }
  .tool-bridge { gap:28px; flex-wrap:wrap }
  .tool-bridge>div { gap:22px; flex-wrap:nowrap }
  .tool-bridge>.inline-link { display:none }
}
@media(max-width:900px) {
  .scope-body,.followup-inner,.trust-story { grid-template-columns:1fr; gap:32px }
  .scope-copy { padding-top:0 }
}
@media(max-width:800px) {
  .product-section { gap:35px }
  .product-image { padding:20px }
  .workflow-panel { gap:24px }
  .workflow-copy h3 { max-width:none }
  .workflow-copy>p { max-width:60ch; margin-top:16px }
  .workflow-copy>a { margin-top:20px }
  .plan-fields { gap:18px }
  .plan-field { padding:26px }
  .plan-price { font-size:3rem }
  .demo-page { grid-template-columns:1fr; gap:36px }
}
@media(max-width:760px) {
  .header-demo { display:none }
  .ui-demo { padding:20px; font-size:.875rem }
  .demo-top { margin-bottom:23px }
  .demo-label { font-size:.6875rem }
  .demo-top>span:first-child { gap:7px }
  .demo-document-heading { flex-wrap:wrap; gap:10px }
  .demo-document-heading .demo-tag { margin-left:30px }
  .demo-scheduled { flex-wrap:wrap }
  .demo-scheduled>div { flex-basis:calc(100% - 36px) }
  .demo-scheduled button { margin-left:32px }
  .product-image { padding:18px; border-radius:20px }
  .demo-prompt { margin-left:5% }
  .workflow-book { padding:8px; border-radius:22px }
  .book-index { display:block; padding:24px 18px }
  .book-index-intro h3 { font-size:1.5rem }
  .book-index-intro p { margin-top:10px }
  .workflow-tabs { margin:22px 0 18px }
  .workflow-panel { padding:26px 16px }
  .workflow-example .ui-demo { padding:18px; font-size:.875rem }
  .workflow-tabs { gap:7px }
  .workflow-tabs button { padding:14px; gap:8px; min-height:60px }
  .workflow-tabs .icon { width:16px }
  .scope-examples { padding:18px; border-radius:20px }
  .scope-copy { padding-top:0 }
  .scope-body { gap:28px }
  .plan-controls { align-items:flex-start; gap:20px }
  .seat-workbench { grid-template-columns:1fr auto; padding:20px; gap:18px 10px }
  .seat-privacy { grid-column:1/-1; justify-self:start; max-width:none }
  .seat-privacy br { display:none }
  .plan-shared { grid-template-columns:1fr; gap:18px }
  .plan-shared a { grid-column:auto }
  .plan-capacity>div { gap:14px }
  .demo-form { padding:24px; border-radius:20px }
  .demo-form input:not([type=checkbox]),.demo-form textarea,.demo-form select { font-size:1rem }
  .demo-form .demo-form-grid { grid-template-columns:1fr; gap:0 }
  .demo-page { padding-block:40px 60px }
  .demo-received { padding:60px 22px }
}