/* softcupid.com marketing — service, AI solutions, process and directory page layouts (pages that set $mk['pages']). */
/* Service experiences share the homepage's cream, forest and Softcupid brand (cyan + blue) palette. */
.theme-cyan { --page-accent: #dcf3f6; }
.theme-lavender { --page-accent: #eae5f4; }
.theme-sage { --page-accent: #e4ecdc; }
.theme-yellow { --page-accent: #f2edcf; }
.theme-blue { --page-accent: #e1eaf2; }
.theme-pink { --page-accent: #f3e2e6; }
.service-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; padding-block: 52px 80px; }
.service-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; }
.service-eyebrow .service-icon { width: 40px; height: 40px; border-radius: 12px; }
.service-eyebrow .soft-icon { width: 24px; height: 24px; }
.service-hero h1, .directory-hero h1, .process-hero h1 { font-size: clamp(44px, 4.25vw, 66px); line-height: 1.07; letter-spacing: -2.8px; font-weight: 550; }
.service-hero-copy > p { max-width: 510px; font-size: 18px; color: #616e59; margin-top: 26px; }
.page-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 32px; }
.page-actions .button { padding-inline: 18px; font-size: 14px; }
.page-actions .text-button { font-size: 14px; }
.service-demo, .assistant-demo { min-width: 0; background: #fffef9; border: 1px solid #dde1d3; border-radius: 18px; box-shadow: 0 18px 48px -30px #344d3d45; overflow: hidden; }
.demo-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid #e6e7dc; font-size: 12px; color: #55634d; }
.demo-toolbar > span:first-child { display: flex; align-items: center; gap: 8px; }
.demo-toolbar > span:last-child { font-size: 9px; letter-spacing: 1.5px; }
.demo-toolbar i { width: 6px; height: 6px; border-radius: 50%; background: #829469; }
.demo-screen { padding: 24px; min-height: 322px; background: linear-gradient(180deg, var(--page-accent), #fffef9 65%); }
.demo-message { display: flex; align-items: flex-start; gap: 12px; background: #fffef9; border: 1px solid #e1e3d7; padding: 16px; border-radius: 10px; margin-bottom: 16px; }
.demo-avatar { display: inline-flex; justify-content: center; align-items: center; flex: none; width: 32px; height: 32px; background: #e9eddf; border-radius: 9px; font-size: 11px; font-weight: 650; color: #344d3d; }
.demo-message strong { font-size: 13px; }
.demo-message p { font-size: 13px; color: #59664f; margin-top: 4px; }
.demo-time { white-space: nowrap; font-size: 9px; color: #65715c; }
.demo-record { padding: 18px; background: #fffef9; border: 1px solid #e1e3d7; border-radius: 10px; }
.demo-record-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.demo-record-heading > strong { font-size: 14px; }
.demo-badge { display: inline-block; padding: 5px 8px; border: 1px solid #d9dfce; border-radius: 5px; font-size: 9px; color: #4c6040; background: #f1f4e9; line-height: 1.5; }
.demo-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin: 0; }
.demo-fields dt { font-size: 10px; color: #68745e; margin-bottom: 4px; }
.demo-fields dd { font-size: 13px; margin: 0; color: #344d3d; font-weight: 500; }
.demo-owner, .demo-approval { display: flex; align-items: center; gap: 10px; border-top: 1px solid #e4e7da; padding-top: 14px; margin-top: 18px; }
.demo-owner strong, .demo-approval strong { display: block; font-size: 12px; }
.demo-owner small, .demo-approval small { display: block; font-size: 10px; color: #64705b; margin-top: 4px; }
.demo-playback { padding: 14px 20px; border-top: 1px solid #e3e6d9; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.demo-state { font-size: 11px; color: #53644a; max-width: 60%; line-height: 1.5; }
[data-play] { border: 0; background: #344d3d; color: #fffef9; padding: 10px 12px; border-radius: 6px; font: inherit; font-size: 11px; cursor: pointer; flex: none; min-height: 40px; }
.demo-rail { display: flex; list-style: none; padding: 14px 18px 4px; margin: 0; }
.demo-rail li { flex: 1; position: relative; min-width: 0; }
.demo-rail li:not(:last-child):after { content: ''; position: absolute; left: 32px; right: 0; height: 1px; top: 16px; background: #dfe3d6; transform-origin: left; }
.demo-rail li.is-complete:after { background: #7f946d; animation: connector-progress .35s ease both; }
.demo-rail button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; background: none; border: 0; padding: 0 8px 0 0; font: inherit; text-align: left; font-size: 10px; line-height: 1.4; cursor: pointer; color: #56634d; }
.node-number { display: flex; align-items: center; justify-content: center; border: 1px solid #d9dfd0; border-radius: 8px; background: #fffef9; width: 32px; height: 32px; font-size: 10px; transition: background .2s, color .2s; }
.is-active .node-number, .is-complete .node-number { background: #344d3d; color: #fffef9; border-color: #344d3d; }
.demo-inspection { font-size: 11px; margin: 14px 20px 0; color: #59684f; min-height: 38px; }
.demo-disclaimer { font-size: 10px; color: #65705c; padding: 12px 20px 16px; }
.message-timeline { list-style: none; margin: 0; padding: 0; }
.message-timeline li { display: flex; gap: 16px; padding-bottom: 22px; position: relative; }
.message-timeline li:not(:last-child):before { content: ''; position: absolute; top: 28px; bottom: 0; left: 13px; width: 1px; background: #d4d9cb; }
.message-timeline li > span { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; background: #fffef9; border: 1px solid #d7dbcf; font-size: 10px; flex: none; }
.message-timeline small { font-size: 8px; letter-spacing: 1px; color: #59664f; }
.message-timeline strong { display: block; font-size: 15px; margin: 5px 0; }
.message-timeline p { font-size: 12px; color: #606b57; }
.campaign-preview { background: #fffef9; border: 1px solid #dfe3d6; border-radius: 10px; padding: 18px; margin-top: 20px; }
.campaign-preview small { font-size: 9px; color: #64705c; letter-spacing: 1px; }
.campaign-preview h3 { font-size: 20px; margin: 9px 0; }
.campaign-preview p { font-size: 12px; color: #64705c; }
.campaign-preview > span { display: inline-block; margin-top: 12px; font-size: 11px; padding: 8px 10px; background: #344d3d; color: #fffef9; border-radius: 5px; }
.demo-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.demo-branches > div { padding: 12px; background: #f3f4ec; border: 1px solid #e2e5d8; border-radius: 7px; }
.demo-branches small { display: block; font-size: 8px; color: #59664f; }
.demo-branches strong { display: block; font-size: 11px; margin-top: 6px; }
.demo-order { display: flex; align-items: center; gap: 18px; padding-bottom: 24px; }
.product-drawing { display: grid; place-items: center; width: 100px; height: 100px; border-radius: 12px; background: #f7f9f2; border: 1px solid #dce2d4; color: #5e7351; flex: none; }
.product-drawing svg { width: 85%; }
.demo-order small { font-size: 9px; color: #59664f; }
.demo-order h3 { font-size: 17px; margin-block: 8px; }
.demo-order p { font-size: 13px; margin-bottom: 10px; }
.order-events { border: 1px solid #dde2d5; border-radius: 10px; background: #fffef9; padding: 16px; }
.order-events > div { display: grid; grid-template-columns: 25px 1fr; gap: 3px 10px; margin: 0 0 16px; }
.order-events > div:last-child { margin: 0; }
.order-events span { grid-row: span 2; font-size: 13px; }
.order-events strong { font-size: 13px; }
.order-events small { font-size: 11px; color: #64705c; }
.operations-list { background: #fffef9; border: 1px solid #dce1d3; border-radius: 10px; padding: 0 14px; }
.operations-list > div { display: flex; align-items: center; gap: 10px; padding-block: 18px; }
.operations-list > div + div { border-top: 1px solid #e4e7db; }
.document-icon { padding: 10px 7px; background: #f2eee7; border-radius: 5px; font-size: 9px; }
.operations-list strong { display: block; font-size: 13px; }
.operations-list small { display: block; font-size: 10px; color: #606d57; margin-top: 5px; }
.operations-list .demo-badge { margin-left: auto; }
.service-outcomes { border-top: 1px solid #e0e4d6; border-bottom: 1px solid #e0e4d6; padding-block: 22px; }
.service-outcomes > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.service-outcomes span { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: #4c5e41; }
.service-outcomes svg { width: 17px; height: 17px; flex: none; }
.service-story { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.service-story h2 { margin-top: 20px; }
.service-story p { font-size: 17px; color: #606e56; margin-top: 22px; }
.manual-comparison { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #dde2d4; border-radius: 14px; overflow: hidden; }
.manual-comparison > div { padding: 25px; }
.manual-comparison > div:last-child { background: var(--page-accent); }
.comparison-label { display: block; font-size: 9px; letter-spacing: 1px; font-weight: 600; }
.manual-comparison ol { list-style: none; padding: 0; margin: 18px 0 0; }
.manual-comparison li { font-size: 13px; padding-block: 12px; border-bottom: 1px solid #d8ded066; }
.manual-comparison li > span { margin-right: 8px; }
.page-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 36px; }
.page-section-heading h2 { max-width: 640px; margin-top: 17px; }
.page-section-heading > p { max-width: 310px; font-size: 16px; color: #64705c; }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #dde2d4; }
.capability { position: relative; padding: 30px 28px 30px 0; border-bottom: 1px solid #dde2d4; }
.capability h3 { margin: 16px 0 10px; font-size: 21px; }
.capability p { font-size: 16px; color: #626f59; max-width: 300px; }
.capability-check { display: inline-flex; padding: 8px; border-radius: 8px; background: var(--page-accent); }
.capability-check svg { width: 17px; height: 17px; }
.examples-section { background: #edf0e5; padding-block: 80px; }
.workflow-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.workflow-tabs button { font: inherit; font-size: 14px; border: 1px solid #d8dece; background: transparent; border-radius: 7px; padding: 12px 20px; cursor: pointer; color: #425638; }
.workflow-tabs button[aria-selected="true"] { background: #344d3d; color: #fffef9; border-color: #344d3d; }
.example-panel { background: #fffef9; border: 1px solid #dce2d1; border-radius: 14px; }
.example-steps { display: grid; grid-template-columns: repeat(3, 1fr); padding: 32px; gap: 40px; }
.example-step { position: relative; }
.example-step-label { display: flex; align-items: center; gap: 10px; font-size: 10px; color: #5e6c52; letter-spacing: 1px; }
.example-step-label b { font-size: 12px; padding: 8px; background: #edf0e5; border-radius: 6px; }
.example-step h3 { font-size: 21px; margin-top: 20px; line-height: 1.35; }
.example-arrow { position: absolute; top: 10px; right: -24px; color: #82926f; }
.example-done svg { width: 22px; height: 22px; margin-top: 16px; }
.example-description { border-top: 1px solid #e1e5d7; padding: 25px 32px; }
.example-description p { font-size: 16px; color: #5f6d55; }
.example-description > span { display: block; margin-top: 12px; font-size: 12px; color: #4d6140; }
.control-section { background: #344d3d; color: #fffef9; padding-block: 80px; }
.control-layout { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 80px; }
.control-section h2, .control-section h3 { color: #fffef9; }
.control-section .eyebrow { color: #cad3bd; }
.control-section h2 { margin-top: 18px; }
.control-section p { margin-top: 24px; font-size: 17px; color: #d7ddce; }
.control-preview { padding: 30px; border: 1px solid #687b5d; border-radius: 14px; background: #ffffff05; }
.control-preview h3 { font-size: 25px; margin-top: 20px; }
.control-preview p { font-size: 15px; margin-top: 16px; }
.handoff-row { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #dce2d2; border-top: 1px solid #617456; padding-top: 20px; margin-top: 24px; }
.setup-layout { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 100px; }
.setup-layout h2 { margin-top: 18px; }
.setup-list { list-style: none; padding: 0; margin: 32px 0; }
.setup-list li { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 24px; }
.setup-list li > span { font-size: 11px; padding-top: 5px; color: #67765a; }
.setup-list h3 { font-size: 19px; }
.setup-list p { font-size: 15px; color: #627056; margin-top: 8px; }
.setup-card { background: #f0f2e8; border: 1px solid #dce2d0; border-radius: 15px; padding: 34px; }
.setup-card h3 { font-size: 28px; margin-top: 16px; }
.setup-card > p { color: #5b6b50; font-size: 15px; margin-top: 16px; }
.setup-price { display: flex; align-items: baseline; gap: 14px; margin-top: 28px; }
.setup-price > span { font-size: 13px; }
.setup-price strong { font-size: 44px; font-weight: 550; letter-spacing: -2px; }
.setup-card .setup-management, .setup-card .setup-scope { font-size: 13px; }
.setup-card .button { margin-top: 25px; }
.setup-pricing-link { display: flex; align-items: center; gap: 10px; font-size: 12px; margin-top: 20px; }
.setup-pricing-link svg { width: 14px; height: 14px; }
.related-section { padding-block: 70px; background: #edf0e5; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.service-page-link { display: block; background: #fffef9; }
.service-page-link .service-link { margin-top: 24px; }
.service-page-link h2 { font-size: 28px; }
.directory-hero, .process-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: center; padding-block: 65px 85px; }
.directory-hero h1, .process-hero h1 { margin-top: 22px; }
.directory-hero p, .process-hero p, .choice-layout p { margin-top: 25px; color: #627056; font-size: 18px; }
.directory-note { background: #ecefe3; border-radius: 14px; padding: 35px; }
.directory-spark { font-size: 42px; color: var(--brand-deep); }
.directory-list { padding-bottom: 65px; }
.directory-list .service-grid { grid-template-columns: repeat(3, 1fr); }
.choice-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
.choice-layout h2 { margin-top: 18px; }
.choice-layout .button { margin-top: 28px; }
.choice-list > div { display: grid; grid-template-columns: 35px 1fr; border-bottom: 1px solid #dde3d3; padding: 25px 0; }
.choice-list span { font-size: 12px; color: #6b795e; }
.choice-list h3 { font-size: 21px; }
.choice-list p { grid-column: 2; font-size: 15px; margin-top: 10px; }
.process-hero .button { margin-top: 28px; }
.process-summary { padding: 30px; border: 1px solid #dce2d2; border-radius: 14px; background: #edf0e5; }
.process-summary a { display: flex; align-items: center; gap: 20px; padding: 20px 0; }
.process-summary a + a { border-top: 1px solid #d9dfcf; }
.process-summary span { font-size: 12px; color: #68775c; }
.process-summary svg { width: 18px; height: 18px; margin-left: auto; }
.process-stage { display: grid; grid-template-columns: 90px 1.4fr 1fr; gap: 40px; padding-block: 65px; border-top: 1px solid #dce2d3; scroll-margin-top: 110px; }
.process-number { font-size: 55px; font-weight: 450; color: #9da88c; }
.process-stage h2 { margin: 16px 0 20px; }
.process-stage p { font-size: 17px; color: #617056; }
.process-stage ul { list-style: none; padding: 0; margin-top: 26px; }
.process-stage li { display: flex; align-items: center; gap: 12px; font-size: 15px; margin-top: 14px; }
.process-stage li svg { width: 18px; height: 18px; flex: none; }
.process-stage aside { padding: 26px; background: #edf0e5; border-radius: 12px; }
.process-stage aside h3 { font-size: 23px; margin: 20px 0 14px; }
.process-stage aside p { font-size: 15px; }
.assistant-sources { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 24px 0; }
.assistant-sources span { font-size: 10px; padding: 6px 8px; border: 1px solid #dce2d2; border-radius: 5px; }
.chat-message { margin: 18px 24px; padding: 20px; background: #edf0e5; border-radius: 12px; }
.customer-message { margin-left: 65px; background: #f5eedc; }
.chat-message small { font-size: 9px; letter-spacing: 1px; }
.chat-message p { font-size: 15px; margin-top: 10px; }
.source-reference { display: block; font-size: 10px; color: #526548; margin-top: 14px; }
.assistant-action { margin: 20px 24px; padding-top: 18px; border-top: 1px solid #dfe3d6; }
.assistant-action strong { display: block; font-size: 15px; margin-top: 12px; }
.assistant-action p { font-size: 12px; margin-top: 8px; color: #64725a; }
.knowledge-map { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 35px; background: #f1efe0; border-radius: 14px; }
.knowledge-map > span { padding: 20px; text-align: center; border: 1px solid #dcdccf; background: #fffef9; width: 100%; border-radius: 9px; font-size: 16px; }
.knowledge-map b { font-size: 20px; color: #7f8f6e; }
.solution-links { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; }
.solution-links a { font-size: 12px; border: 1px solid #dce2d1; padding: 11px 14px; border-radius: 6px; }
.solution-links a:hover { background: #e8eddf; }
.solution-section { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding-block: 65px; border-top: 1px solid #dce2d2; scroll-margin-top: 100px; }
.solution-number { font-size: 11px; letter-spacing: 1px; color: #65745a; }
.solution-section h2 { margin: 20px 0 24px; }
.solution-section > div > p { font-size: 17px; color: #607054; }
.solution-section .text-button { margin-top: 26px; }
.solution-preview { border: 1px solid #dce2d2; background: #fffef9; border-radius: 14px; padding: 24px; }
.solution-preview > div { padding-block: 15px; }
.solution-preview > div + div { border-top: 1px solid #e1e5d8; }
.solution-preview small { font-size: 9px; letter-spacing: 1px; color: #5c6f4e; }
.solution-preview p { font-size: 14px; margin-top: 8px; }
.solution-output { background: #eff2e7; padding: 14px!important; border-radius: 8px; }
.solution-output strong { display: block; font-size: 14px; margin-top: 8px; }
.solution-preview .solution-limit { font-size: 11px; color: #5f6f53; margin-top: 15px; }
/* Warehouse automation: the phone inside the demo panel, the house rules, the wide directory card. Brand tokens only. */
.wh-demo-screen { display: grid; place-items: center; padding-block: 28px; }
.wh-rules { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 12px; }
.wh-rules li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--on-brand-deep-soft); }
.wh-rules .soft-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--brand); stroke-width: 2; }
.directory-list .service-grid > .service-card-wide { grid-column: 1 / -1; }
.service-card-wide > p { max-width: 720px; }
@keyframes connector-progress { from { transform: scaleX(0); }
 to { transform: scaleX(1); }
 }
@media (max-width: 1100px) {
  .service-hero { gap: 32px; }
  .service-hero h1 { font-size: 48px; }
  .service-story, .setup-layout, .control-layout, .solution-section { gap: 40px; }
  .demo-screen { padding: 18px; }
  .manual-comparison > div { padding: 18px; }
}
@media (max-width: 900px) {
  .service-hero { grid-template-columns: 1fr; gap: 36px; padding-block: 40px 55px; }
  .service-hero-copy { max-width: 690px; }
  .service-demo, .assistant-demo { width: 100%; max-width: 650px; }
  .service-hero h1 { font-size: clamp(42px, 6.5vw, 60px); }
  .service-story, .control-layout, .setup-layout, .page-faq, .choice-layout { grid-template-columns: 1fr; gap: 35px; }
  .service-story p { max-width: 670px; }
  .setup-card { max-width: 600px; }
  .process-stage { grid-template-columns: 55px 1fr; gap: 25px; }
  .process-stage aside { grid-column: 2; }
  .process-number { font-size: 40px; }
  .directory-hero, .process-hero { gap: 35px; }
}
@media (max-width: 760px) {
  .service-hero h1, .directory-hero h1, .process-hero h1 { font-size: clamp(39px, 8vw, 54px); letter-spacing: -1.8px; }
  .service-hero-copy > p { font-size: 17px; }
  .service-outcomes > div { align-items: flex-start; flex-direction: column; gap: 13px; }
  .page-section-heading { align-items: flex-start; flex-direction: column; gap: 20px; margin-bottom: 28px; }
  .page-section-heading > p { max-width: 100%; }
  .capability-grid { grid-template-columns: 1fr 1fr; }
  .capability h3 { font-size: 19px; }
  .capability p { font-size: 15px; }
  .examples-section, .control-section, .related-section, .page-cta { padding-block: 55px; }
  .example-steps { grid-template-columns: 1fr; gap: 28px; padding: 24px; }
  .example-step h3 { margin-top: 12px; font-size: 20px; }
  .example-arrow { top: auto; bottom: -25px; right: auto; left: 8px; transform: rotate(90deg); }
  .example-description { padding: 24px; }
  .directory-hero, .process-hero { grid-template-columns: 1fr; padding-block: 45px; }
  .directory-list .service-grid { grid-template-columns: 1fr 1fr; }
  .solution-section { grid-template-columns: 1fr; gap: 30px; padding-block: 45px; }
  .demo-rail { flex-direction: column; gap: 10px; padding: 18px 22px 0; }
  .demo-rail button { flex-direction: row; align-items: center; gap: 12px; font-size: 12px; min-height: 38px; }
  .demo-rail li:not(:last-child):after { left: 16px; right: auto; top: 32px; width: 1px; height: 16px; }
  .demo-screen { min-height: auto; }
  .demo-state { font-size: 12px; }
  .demo-disclaimer { font-size: 11px; }
  .demo-inspection { font-size: 12px; }
}
@media (max-width: 480px) {
  .wh-demo-screen { padding: 18px 10px; }
  .manual-comparison { grid-template-columns: 1fr; }
  .manual-comparison ol { margin-top: 10px; }
  .manual-comparison li { padding-block: 8px; }
  .capability-grid, .related-grid, .directory-list .service-grid { grid-template-columns: 1fr; }
  .capability { padding-block: 24px; }
  .service-hero { padding-block: 35px 45px; }
  .demo-toolbar { padding: 15px; font-size: 11px; }
  .demo-screen { padding: 16px; }
  .demo-message { padding: 12px; }
  .demo-time { display: none; }
  .demo-fields { gap: 16px 12px; }
  .demo-fields dd { font-size: 12px; }
  .demo-record { padding: 14px; }
  .demo-record-heading { flex-wrap: wrap; }
  .demo-branches { grid-template-columns: 1fr; }
  .demo-order { align-items: flex-start; gap: 12px; }
  .product-drawing { width: 65px; height: 75px; }
  .operations-list { padding-inline: 10px; }
  .operations-list > div { flex-wrap: wrap; }
  .operations-list .demo-badge { margin-left: 40px; }
  .demo-playback { align-items: flex-start; padding-inline: 16px; }
  .setup-card, .control-preview { padding: 24px; }
  .workflow-tabs { gap: 6px; }
  .workflow-tabs button { padding: 10px 13px; font-size: 13px; }
  .process-stage { grid-template-columns: 1fr; }
  .process-stage aside { grid-column: 1; }
  .solution-preview { padding: 18px; }
  .chat-message { margin-inline: 18px; padding: 16px; }
  .customer-message { margin-left: 36px; }
}