/* Product interfaces use the same conventional font stack as Clientlo's app. */
.product-demo,.product-panel{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:0;line-height:1.5;color:#1a2632}
.product-demo svg,.product-panel svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.product-demo{background:#fff;border:1px solid #d7e0ec;border-radius:12px;overflow:hidden;min-width:0;box-shadow:0 20px 48px #020e2326}
.workspace-brand{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#f6f8fb;border-bottom:1px solid #e3e8ee;font-size:13px}
.workspace-logo{display:grid;place-items:center;width:24px;height:24px;background:#18375c;color:#fff;border-radius:6px;font-size:12px;font-weight:600}
.workspace-brand strong{font-weight:600}
.workspace-caption{margin-left:auto;color:#647182;font-size:11px}
.workspace-tabs{display:flex;gap:20px;padding:0 16px;border-bottom:1px solid #e3e8ee;background:#fff}
.workspace-tabs button{display:flex;align-items:center;gap:6px;border:0;border-bottom:2px solid transparent;background:none;font:inherit;font-size:12px;font-weight:500;line-height:20px;color:#5a6875;padding:12px 0;cursor:pointer;white-space:nowrap}
.workspace-tabs button[aria-selected=true]{border-bottom-color:#2563eb;color:#1d4ed8}
.workspace-tabs svg{width:15px;height:15px}
.workspace-panel{min-height:360px;background:#fff}
.workspace-inbox{display:grid;grid-template-columns:152px minmax(0,1fr);min-height:360px}
.conversation-list{background:#f7f9fc;border-right:1px solid #e3e8ee;font-size:12px}
.conversation-list>div{padding:14px 12px;border-bottom:1px solid #e6ebf2}
.conversation-list .conversation-list-title{display:flex;justify-content:space-between;font-size:11px;color:#647182}
.conversation-list-title span{font-variant-numeric:tabular-nums}
.conversation-list strong,.conversation-list span,.conversation-list small{display:block;overflow-wrap:anywhere}
.conversation-list strong{font-weight:600}
.conversation-list small{font-size:11px;color:#5a6875;margin-top:6px}
.conversation-selected{background:#eaf1ff;box-shadow:inset 2px 0 #2563eb}
.conversation-view{min-width:0;display:flex;flex-direction:column}
.conversation-person{display:flex;gap:8px;align-items:center;padding:12px 16px;border-bottom:1px solid #e3e8ee;font-size:12px}
.conversation-person>svg{margin-left:auto;color:#667789;width:14px;height:14px}
.conversation-person strong,.conversation-person span{display:block}
.conversation-person strong{font-weight:600}.conversation-person div>span{font-size:11px;color:#647182}
.person-avatar{display:grid!important;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:#e9eef4;font-size:11px;font-weight:600}
.conversation-messages{padding:12px;flex:1;background:#fafbfd}
.conversation-day{text-align:center;font-size:10px;color:#647182;margin-bottom:12px}
.conversation-bubble{max-width:90%;padding:10px 12px;border:1px solid #e1e7ee;border-radius:2px 10px 10px;font-size:12px;line-height:1.5;background:#fff}
.conversation-bubble.sent{margin:10px 0 10px auto;border:0;border-radius:10px 2px 10px 10px;background:#e7efff}
.conversation-bubble time{display:block;text-align:right;font-size:10px;color:#5e6c7d;margin-top:6px}
.conversation-attachment{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:11px;border:1px solid #e1e7ee;border-radius:8px;background:#fff;max-width:90%}
.conversation-attachment small{display:block;color:#647182;font-size:10px}
.conversation-attachment>svg:last-child{margin-left:auto;color:#26724f;width:14px;height:14px}
.conversation-facts{display:flex;flex-wrap:wrap;gap:8px 16px;padding:10px 12px;font-size:10px;background:#fff;border-top:1px solid #e3e8ee}
.conversation-facts span{display:flex;gap:4px;align-items:center}.conversation-facts svg{width:12px;height:12px;color:#526a87}
.preview-composer{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid #e3e8ee;font-size:12px;color:#647182;background:#fff}
.preview-composer>span{flex:1}.preview-composer>svg{width:16px;height:16px;color:#2563eb}
.workspace-section-title{padding:24px 20px 16px}.workspace-section-title .workspace-title{font-size:16px;font-weight:600;letter-spacing:0}
.workspace-section-title p{font-size:12px;color:#5a6875}
.access-person{display:flex;align-items:center;gap:12px;margin:0 20px;padding:18px 0;border-bottom:1px solid #e3e8ee;font-size:13px}
.access-person>svg{width:24px;height:24px;color:#526a87}
.access-person>div{flex:1;min-width:0}.access-person strong,.access-person div>span{display:block}
.access-person strong{font-weight:600}.access-person div>span{font-size:11px;color:#5a6875;margin-top:4px}
.access-state{font-size:11px;color:#35587e}.access-removed .access-state{color:#9e3943}
.workspace-footnote{padding:16px 20px;font-size:11px;color:#5a6875;line-height:1.5}
.deadline-example{margin:0 20px;padding:16px 0;border-bottom:1px solid #e3e8ee}
.deadline-example>div{display:grid;grid-template-columns:1fr auto;gap:2px 12px;font-size:12px}
.deadline-example strong{font-weight:600}.deadline-example span{grid-column:1;font-size:11px;color:#5a6875}
.deadline-example b{grid-column:2;grid-row:1/3;align-self:center;font-size:11px;font-weight:500;color:#5a6875}
.deadline-example>i{display:block;position:relative;height:4px;margin-top:12px;background:#edf1f6;border-radius:2px;overflow:hidden}
.deadline-example>i:after{content:"";display:block;width:100%;height:100%;background:var(--meter-color);transform:scaleX(var(--meter));transform-origin:left;transition:transform .6s cubic-bezier(.22,1,.36,1)}
/* One application frame for every staff, inbox, document and quote preview. */
.product-panel{border:1px solid #d7e0e8;border-radius:10px;box-shadow:0 12px 28px #1023430a;background:#fff}
.product-panel .apphead{background:#f5f7fa;padding:14px 16px;min-height:52px}
.panel-title{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;color:#24364b}
.panel-title strong{font-weight:600}.panel-title svg{width:16px;height:16px;color:#64758a}
.product-panel .preview-label{font-size:10px;font-family:inherit;align-self:center}
.product-panel .row{padding:16px;gap:12px;border-bottom-color:#e8edf3;transition:background-color .25s ease}
.product-panel .row:hover{background:#f5f8fc}
.product-panel .av{border-radius:50%;background:#eaf0f5;color:#496079;font-size:11px;font-weight:600}
.product-panel .av svg{width:18px;height:18px}
.product-panel .who{font-size:13px;font-weight:600}.product-panel .what{font-size:12px;color:#5a6875;line-height:1.5;margin-top:4px}
.product-panel .chip{font-family:inherit;font-size:11px;line-height:18px;font-weight:500;letter-spacing:0;border-radius:4px;background:transparent!important;padding:2px 0}
.product-panel .chip:before{content:"";display:inline-block;width:5px;height:5px;margin-right:6px;border-radius:50%;background:currentColor;vertical-align:middle}
.product-panel .tabs{gap:12px;background:#fafbfd}.product-panel .tabs .chip{font-size:11px}
.product-panel .tabs .chip:before{display:none}
.product-panel .msg{font-family:inherit;font-size:13px;line-height:1.55;border-radius:2px 10px 10px;background:#f0f3f7;max-width:82%;margin-top:16px;margin-bottom:16px}
.product-panel .msg.out{border-radius:10px 2px 10px 10px;background:#e8f0ff}
.product-panel .msg small{font-family:inherit;font-size:10px;text-align:right}
.product-panel .kv{font-size:13px;gap:12px 20px;padding:20px}
.product-panel .kv dt{color:#5a6875}.product-panel .kv dd{font-weight:500}
.product-panel .cl li{font-size:13px;padding:16px 20px}
.product-panel .exnote{font-family:inherit;font-size:11px;line-height:1.6;padding:14px 16px;background:#f7f9fc;color:#5a6875}
.product-panel.q table{font-size:13px}.product-panel.q th{font-weight:600;background:#f7f9fc}
.product-panel.q tr:last-child{background:#f0f5ff;font-weight:600}
.product-panel .row[data-attention=true]{background:#fbf5eb}
.product-panel.is-in-view .row[data-attention=true]{animation:attention-wash 900ms ease-out both}
@keyframes attention-wash{from{background:#f5e2b9}to{background:#fbf5eb}}
/* A coloured process rail; the scroll position determines the current stage. */
.steps{gap:8px;position:relative;isolation:isolate}
.steps:before,.steps:after{content:"";position:absolute;left:24px;right:24px;top:40px;height:2px;background:#d9e2ef;z-index:-1}
.steps:after{background:#4e73af;transform:scaleX(var(--journey-progress,0));transform-origin:left;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.steps li{border:0;background:transparent;border-radius:12px;padding:16px;position:relative;transition:background-color .35s ease,box-shadow .35s ease}
.steps li:before{width:48px;height:48px;margin-bottom:24px;border-radius:50%;border:1px solid var(--step-color);background:#fff;color:var(--step-color);font-size:18px;position:relative;z-index:1;transition:none}
.steps li.is-current{background:var(--step-soft);box-shadow:0 8px 24px #10234309}
.steps li.is-current:before,.steps li.is-complete:before{background:var(--step-color);color:#fff}
.steps b{font-size:17px;line-height:1.35;color:var(--ink);font-weight:600}
.steps span{font-size:14px;color:#4b5c70;line-height:1.6}
.steps .step-detail{font-size:12px;font-weight:500;margin-top:20px;min-height:40px;color:var(--step-color)}
.story-enhanced .steps li:not(.is-current) .step-detail{opacity:0}
.steps li .step-detail{transition:opacity .3s ease}
[data-tone="0"]{--step-color:#2459b8;--step-soft:#eaf0fc}
[data-tone="1"]{--step-color:#7152a3;--step-soft:#f1edfa}
[data-tone="2"]{--step-color:#975b08;--step-soft:#fff4dc}
[data-tone="3"]{--step-color:#13777e;--step-soft:#e7f5f4}
[data-tone="4"]{--step-color:#236b4d;--step-soft:#eaf4ee}
.journey li{border:1px solid #dce4ee;background:#fff;transition:background-color .4s ease,border-color .4s ease}
.journey li.is-in-view{background:var(--step-soft);border-color:var(--step-color)}
.journey li:before{background:var(--step-soft);color:var(--step-color);font-weight:600}
.journey li.is-in-view:before{background:var(--step-color);color:#fff}
.journey .fact{font-family:inherit;background:#ffffffa6;color:var(--step-color)}
.rules .card .ic{background:var(--step-soft);color:var(--step-color)}
.rules .card{transition:background-color .35s ease;border-radius:0}
.rules .card.is-in-view{background:var(--step-soft)}
.fblock{padding:64px 0;gap:56px}
.fblock .vis{min-width:0}.fblock h2{font-weight:500}
.fblock .vis .product-panel{transition:box-shadow .5s ease,border-color .5s ease}
.fblock.is-in-view .product-panel{border-color:#b2c5df;box-shadow:0 16px 36px #10234312}
/* Industries are a selected workflow, rather than six anonymous text cards. */
.industry-gallery{display:grid;grid-template-columns:280px minmax(0,1fr);gap:40px;align-items:start}
.industry-tabs{display:grid;gap:0;border-top:1px solid #d8e1ee}
.industry-tabs button{display:grid;grid-template-columns:24px 1fr 20px;align-items:center;gap:12px;padding:20px 12px;border:0;border-bottom:1px solid #d8e1ee;background:transparent;text-align:left;font:500 15px/1.45 Manrope,system-ui,sans-serif;color:#475569;cursor:pointer;min-height:64px}
.industry-tabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}
.industry-tabs button>span:last-child{color:#7d8da3}
.industry-tabs button[aria-selected=true]{background:#102343;color:#fff}
.industry-tabs button[aria-selected=true]>span:last-child{color:#b9d0ff}
.industry-scenes{position:relative;min-width:0;background:#f3f6fc;border-radius:16px;overflow:hidden}
.sector-preview-label{position:absolute;right:24px;top:20px;font:11px/18px Inter,system-ui,sans-serif;color:#5d6b7e;z-index:1}
.industry-panel{padding:56px 32px 32px;min-height:386px;background:var(--step-soft)}
.industry-panel h3{font-size:clamp(24px,2.6vw,32px);line-height:1.2;max-width:23ch;letter-spacing:-.02em;font-weight:500;margin-bottom:32px}
.sector-message{display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:4px 12px 12px;border:1px solid #10234316;background:#fff;max-width:460px}
.sector-message>svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--step-color);stroke-width:1.5}
.sector-message p{font:13px/1.6 Inter,system-ui,sans-serif;color:#30445b}
.sector-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;position:relative;margin:32px 0}
.sector-flow:before{content:"";position:absolute;left:20px;right:20px;top:22px;height:1px;background:var(--step-color);opacity:.4;transform-origin:left}
.sector-station{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;font:12px/1.5 Inter,system-ui,sans-serif;color:#35485e}
.sector-station i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--step-color);color:var(--step-color)}
.sector-station svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sector-link{color:var(--step-color);font-size:14px;font-weight:500;display:flex;align-items:center;gap:12px;justify-content:space-between;max-width:460px}
.story-enhanced .industry-panel:not([hidden]) .sector-flow:before{animation:draw-workflow .7s cubic-bezier(.22,1,.36,1) both}
@keyframes draw-workflow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.industry-detail{padding:36px;margin:0 0 32px!important;border-radius:12px;border:1px solid #dce4ed;background:var(--step-soft)}
.industry-detail h2{font-size:28px;margin-bottom:24px;letter-spacing:-.02em;font-weight:500}
.industry-detail h2 .ic{background:#fff;color:var(--step-color);width:48px;height:48px;border-radius:12px;flex:none}
.industry-detail .pw{gap:32px}.industry-detail .pw>div{padding:0;background:none;color:#475569;font-size:16px}
.industry-detail .pw b{font-size:14px;font-weight:600;margin-bottom:8px;color:var(--ink)}
.industry-detail .pw .w{padding-left:24px;border-left:1px solid #10234326;color:#30445b}
.access-choice{display:flex;align-items:center;gap:12px;padding:18px 20px;border:0;border-bottom:1px solid #e3e8ee;background:#fff;width:100%;text-align:left;font:inherit;cursor:pointer;color:#24364b}
.access-choice>svg{width:22px;height:22px;color:#59718c}
.access-choice>span{flex:1;min-width:0}.access-choice strong,.access-choice small{display:block}
.access-choice strong{font-size:13px;font-weight:600}.access-choice small{font-size:11px;color:#5a6875;margin-top:3px;line-height:1.5}
.access-choice em{font-size:11px;font-style:normal;color:#596e88}
.access-choice[aria-pressed=true]{background:#eaf1ff;box-shadow:inset 2px 0 #2563eb}
.access-choice[aria-pressed=true]>svg,.access-choice[aria-pressed=true] em{color:#1d4ed8}
.access-scope{display:flex;gap:10px;align-items:flex-start;padding:18px 20px;background:#f5f8fc;font-size:12px;line-height:1.6;color:#354b65;min-height:76px}
.access-scope svg{width:18px;height:18px;flex:none;margin-top:2px}
.access-choice:hover{background:#f2f6fc}.access-choice[aria-pressed=true]:hover{background:#eaf1ff}
.story-enhanced .product-panel.is-in-view .msg{animation:message-arrives .4s cubic-bezier(.22,1,.36,1) both}
.story-enhanced .product-panel.is-in-view .msg.out{animation-delay:.15s}
@keyframes message-arrives{from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.sector-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}
.industry-tabs button>svg:last-child{width:16px;height:16px}
@media(max-width:1100px) and (min-width:901px){.hero .grid{grid-template-columns:.85fr 1.15fr;gap:32px}.workspace-inbox{grid-template-columns:128px minmax(0,1fr)}}
@media(max-width:900px){
  .product-demo{max-width:680px;width:100%;justify-self:center}
  .workspace-inbox{grid-template-columns:160px minmax(0,1fr)}
  .industry-gallery{grid-template-columns:1fr;gap:24px}
  .industry-tabs{grid-template-columns:repeat(2,minmax(0,1fr));border-top:0;gap:8px}
  .industry-tabs button{border:1px solid #d8e1ee;border-radius:8px;padding:12px;min-height:60px;font-size:14px}
  .industry-tabs button>span:last-child{display:none}
  .steps:before,.steps:after{display:none}
  .steps{gap:12px}.steps li{border:1px solid #dce4ee;background:#fff}
  .steps li:before{margin-bottom:16px}
  .fblock{gap:32px;padding:48px 0}
}
@media(max-width:480px){
  .workspace-tabs{gap:16px;padding:0 12px}.workspace-tabs button{font-size:12px;gap:5px}
  .workspace-brand{padding:12px}.workspace-inbox{grid-template-columns:1fr}.conversation-list{display:none}
  .workspace-panel{min-height:386px}.conversation-view{min-height:386px}
  .conversation-messages{padding:16px}.conversation-bubble{font-size:13px;max-width:92%}
  .conversation-person{padding:12px 16px}.conversation-facts{font-size:11px}
  .product-panel .row{grid-template-columns:32px minmax(0,1fr);padding:16px}
  .product-panel .row .chip{grid-column:2;justify-self:start}
  .product-panel .av{width:32px;height:32px}.product-panel .kv{padding:16px}
  .access-person{margin:0 16px;gap:10px;flex-wrap:wrap}.access-person>div{flex-basis:70%}
  .access-state{margin-left:34px}.workspace-section-title{padding:20px 16px 12px}
  .workspace-section-title .workspace-title{font-size:16px}.workspace-footnote{padding:16px;font-size:11px}
  .steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:6px 16px;padding:20px}
  .steps li:before{grid-column:1;grid-row:1/4;width:40px;height:40px;margin:0}
  .steps li>b,.steps li>span{grid-column:2}.steps .step-detail{min-height:0;margin-top:8px}
  .industry-tabs{gap:8px}.industry-tabs button{grid-template-columns:20px 1fr;gap:8px;font-size:12px;padding:12px 8px}
  .industry-tabs svg{width:18px;height:18px}.industry-panel{padding:52px 20px 24px;min-height:400px}
  .industry-panel h3{font-size:26px;margin-bottom:24px}.sector-flow{gap:8px;margin:28px 0}
  .sector-station{font-size:11px}.sector-station i{width:36px;height:36px}.sector-flow:before{top:18px}
  .sector-message{padding:12px}.sector-message p{font-size:12px}.sector-link{font-size:13px}
  .industry-detail{padding:24px}.industry-detail h2{font-size:24px}.industry-detail .pw{gap:24px}
  .industry-detail .pw .w{border-left:0;border-top:1px solid #10234326;padding:20px 0 0}
}
@media(prefers-reduced-motion:reduce){
  .steps .step-detail{opacity:1!important}
  .product-panel.is-in-view .row[data-attention=true],.industry-panel .sector-flow:before{animation:none!important}
}

@media(max-width:900px){.industry-tabs button>svg:last-child{display:none}}

.workspace-section-title .workspace-title{margin-bottom:8px;color:#1a2632;font-size:16px;font-weight:600;line-height:1.3}
.industry-detail h2{display:flex;align-items:center;gap:12px}

.workflow-page .journey h2,.workflow-page .card h2{font-size:20px;line-height:1.3;letter-spacing:0;margin-bottom:6px}

.security-page .rules h2{font-size:19px;line-height:1.3;letter-spacing:0;margin-bottom:8px}