/* Generated from the canvas board CRMOpportunities.dc.html by scripts/canvas/convert.py. Do not edit. */
.cv .wcg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:22px;margin-top:40px}
.cv .wcg>div{background:linear-gradient(100deg,#F4F4FD 0%,#F8F7FC 50%,#FCFAFA 100%);border:1px solid transparent;border-radius:20px;padding:30px 28px 28px;display:flex;flex-direction:column;gap:10px}
.cv .wcg .wci{display:none!important}
.cv .wcg .wci svg{width:20px;height:20px}
.cv .wcg .wct{font-size:22px;font-weight:600;letter-spacing:-.02em;color:#17162B;line-height:1.25}
.cv .wcg .wcd{font-size:16px;line-height:1.55;color:#475569}
.cv section:first-of-type .c>div:nth-child(2)>div{position:relative;animation:hgl 5.5s ease-in-out 1.2s infinite}
.cv section:first-of-type .c>div:nth-child(2)>div::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);background-size:260% 100%;background-position:160% 0;animation:hsh 6.5s ease-in-out 1.6s infinite}
@keyframes hsh{0%{background-position:160% 0}45%,100%{background-position:-60% 0}}
@keyframes hgl{0%,100%{filter:drop-shadow(0 0 0 rgba(96,73,231,0))}50%{filter:drop-shadow(0 18px 38px rgba(96,73,231,.30))}}
@media (prefers-reduced-motion:reduce){.cv section:first-of-type .c>div:nth-child(2)>div,.cv section:first-of-type .c>div:nth-child(2)>div::after{animation:none}}
.cv .fqd summary::-webkit-details-marker{display:none}
.cv .fqd[open] .fqc{transform:rotate(180deg)}
.cv .fqd[open] summary{min-height:0!important;padding-bottom:12px!important}
.cv .fqd:hover{background:linear-gradient(90deg,#EFEDFC 0%,#F6F5FF 100%)!important}
.cv .fqd summary:focus-visible{outline:2px solid #6049E7;outline-offset:-2px}
.cv .hm{--hm:200,194,252;position:relative;overflow:hidden}
.cv .hm>.hm1{position:absolute;top:-10%;right:-6%;width:58%;height:130%;background:radial-gradient(70% 60% at 78% 72%,rgba(var(--hm),.7) 0%,rgba(var(--hm),.38) 40%,rgba(var(--hm),.18) 64%,rgba(var(--hm),0) 100%);filter:blur(14px);pointer-events:none;opacity:.32}
.cv .hm>.hm2{position:absolute;top:-30%;right:12%;width:46%;height:170%;transform:rotate(24deg);border-radius:50% 0 0 50%/60% 0 0 60%;background:#D7D9E2;filter:blur(3px);pointer-events:none;opacity:.17}
.cv .hm>.hm3{position:absolute;top:-30%;right:23%;width:5%;height:170%;transform:rotate(24deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95),rgba(255,255,255,0));filter:blur(3px);pointer-events:none;opacity:.2}
.cv .hm>.hm4{position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(180deg,rgba(255,255,255,0),var(--hmf,#fff));pointer-events:none}
.cv .hm .glass-l{background:rgba(255,255,255,.34)!important;-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(255,255,255,.65)!important;box-shadow:0 30px 60px -24px rgba(16,24,40,0.14),inset 0 1px 0 rgba(255,255,255,.8)!important}
.cv .hm .bp{background:#0F0F14!important;border-color:#0F0F14!important;color:#fff}
.cv .hm .bp:hover{background:#2A2A33!important;border-color:#2A2A33!important;box-shadow:0 8px 20px rgba(15,15,20,.3)!important}
.cv .hm.hmd>.hm1{opacity:.26}
.cv .hm.hmd>.hm2{opacity:.12}
.cv .hm.hmd>.hm3{opacity:.1}
.cv .hm.hmd>.hm4{display:none}
.cv .hm.hmd .bp{background:#fff!important;border-color:#fff!important;color:#17162B}
.cv .hm.hmd .glass-l{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.22)!important}
.cv .hm.hmn>.hm1,.cv .hm.hmn>.hm2,.cv .hm.hmn>.hm3,.cv .hm.hmn>.hm4{display:none!important}
.cv .hm .hmm{background:#F3F4F6!important;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid #E3E1F0!important;box-shadow:0 12px 32px -12px rgba(16,24,40,0.09)!important}
.cv .hm .hmm b,.cv .hm .hmm strong,.cv .hm .hmm [style*="font-weight: 6"],.cv .hm .hmm [style*="font-weight:6"],.cv .hm .hmm [style*="font-weight: 7"],.cv .hm .hmm [style*="font-weight:7"],.cv .hm .hmm [style*="font-weight: 8"],.cv .hm .hmm [style*="font-weight:8"],.cv .hm .hmm [style*="font-weight: bold"],.cv .hm .hmm [style*="font-weight:bold"]{font-weight:500!important}
.cv .hm.hmdk,.cv .hm.hmd{background:#1B1352!important}
.cv .hm.hmdk>.hm1,.cv .hm.hmd>.hm1{top:0!important;left:0!important;right:0!important;bottom:0!important;width:auto!important;height:auto!important;transform:none!important;filter:none!important;opacity:1!important;background:linear-gradient(transparent,transparent),linear-gradient(transparent,transparent)!important}
.cv .hm.hmdk>.hm2,.cv .hm.hmd>.hm2{top:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;transform:none!important;border-radius:0!important;filter:none!important;opacity:1!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 800' preserveAspectRatio='xMidYMid slice'%3E%3Ccircle cx='1080' cy='430' r='150' fill='none' stroke='white' stroke-opacity='0.16' stroke-width='1.2'/%3E%3Ccircle cx='1080' cy='430' r='250' fill='none' stroke='white' stroke-opacity='0.13' stroke-width='1.2'/%3E%3Ccircle cx='1080' cy='430' r='370' fill='none' stroke='white' stroke-opacity='0.1' stroke-width='1.2'/%3E%3Ccircle cx='1080' cy='430' r='510' fill='none' stroke='white' stroke-opacity='0.08' stroke-width='1.2'/%3E%3Ccircle cx='1080' cy='430' r='670' fill='none' stroke='white' stroke-opacity='0.06' stroke-width='1.2'/%3E%3C/svg%3E") center/cover no-repeat!important}
.cv .hm.hmdk>.hm3,.cv .hm.hmdk>.hm4,.cv .hm.hmd>.hm3,.cv .hm.hmd>.hm4{display:none!important}
.cv .hm.hmx{color:#fff!important}
.cv .hm.hmx h1{color:#fff}
.cv .hm.hmx .hmm{color:#17162B}
@keyframes kF{0%{transform:translate(0,0)}50%{transform:translate(3px,-3px)}100%{transform:translate(-2px,3px)}}
@media (prefers-reduced-motion:reduce){.cv [style*="kF"]{animation:none!important}}
.cv .eb{font-family:var(--f-mono),ui-monospace,monospace;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.cv .bp,.cv .bv,.cv .bg,.cv .bd{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border-radius:8px;font-weight:600;font-size:15px;white-space:nowrap;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;box-sizing:border-box}
@media(max-width:1240px){.cv .nvl{display:none!important}.cv .c{padding-left:24px!important;padding-right:24px!important}}
@media(max-width:1100px){.cv .nvn,.cv .nvd{display:none!important}.cv .nvh{display:flex!important}}
@media(max-width:560px){.cv .c{padding-left:16px!important;padding-right:16px!important}.cv .nvs{display:none!important}.cv .nvlogo{width:130px!important;height:auto!important}}
.cv .nvh{display:none}
@media(max-width:700px){.cv .mhide{display:none!important}}
.cv .nvm summary{list-style:none;cursor:pointer}
.cv .nvm summary::-webkit-details-marker{display:none}
.cv .nvm details[open] .nvch{transform:rotate(180deg)}
@media(max-width:900px){.cv :is([style*="overflow: hidden"],[style*="overflow:hidden"]):not(section,footer,.nvm):not(:has(.mq)){overflow-x:auto!important;scrollbar-width:thin}.cv :is([style*="display: grid"],[style*="display:grid"])>*{min-width:0}.cv .c :is([style*="right: -"],[style*="right:-"]){right:6px!important}.cv .c :is([style*="left: -"],[style*="left:-"]){left:6px!important}}
@media(max-width:700px){.cv :is([style*="overflow: hidden"],[style*="overflow:hidden"]):not(section,footer,.nvm):not(:has(.mq)){overflow-x:auto!important;scrollbar-width:thin}.cv :is([style*="grid-template-columns: repeat(4, 1fr)"],[style*="grid-template-columns:repeat(4, 1fr)"],[style*="grid-template-columns:repeat(4,1fr)"]){grid-template-columns:repeat(2,minmax(0,1fr))!important}.cv :is([style*="grid-template-columns: repeat(3, 1fr)"],[style*="grid-template-columns:repeat(3, 1fr)"],[style*="grid-template-columns:repeat(3,1fr)"]){grid-template-columns:minmax(0,1fr)!important}.cv :is([style*="display: grid"],[style*="display:grid"])>*{min-width:0}.cv :is([style*="grid-template-columns: repeat(2, 1fr)"],[style*="grid-template-columns:repeat(2, 1fr)"],[style*="grid-template-columns:repeat(2,1fr)"]){grid-template-columns:repeat(2,minmax(0,1fr))!important}.cv .c :is([style*="right: -"],[style*="right:-"]){right:6px!important}.cv .c :is([style*="left: -"],[style*="left:-"]){left:6px!important}.cv [style*="grid-template-columns: minmax(300px"],.cv [style*="grid-template-columns:minmax(300px"],.cv [style*="grid-template-columns: minmax(280px"],.cv [style*="grid-template-columns:minmax(280px"],.cv [style*="grid-template-columns: minmax(130px"],.cv [style*="grid-template-columns:minmax(130px"]{grid-template-columns:minmax(0,1fr)!important}.cv .c img,.cv .c video{max-width:100%}.cv .c h1,.cv .c h2{overflow-wrap:break-word}}
@media(max-width:1100px){.cv .nvp{display:none!important}.cv .c>div,.cv .c{gap:12px}}
.cv .nvk{transition:background .15s ease}
.cv .nvk:hover{background:#F6F5FF}
.cv .kmk{display:inline-block;flex:none;background:currentColor;-webkit-mask:url(/c/00a0a9828d22.png) center/contain no-repeat;mask:url(/c/00a0a9828d22.png) center/contain no-repeat}
.cv{margin:0;background:#FFFFFF}
.cv a{color:inherit;text-decoration:none}
.cv button{font:inherit;color:inherit;cursor:pointer}
.cv .c{max-width:1280px;margin:0 auto;padding:0 40px;box-sizing:border-box;width:100%}
.cv .eb{font-family:var(--f-inter),system-ui,sans-serif;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none}
.cv .sr{font-family:var(--f-serif),Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.08em}
.cv .hd{margin:0;font-weight:600;letter-spacing:-.032em;line-height:1.06;text-wrap:balance}
.cv .bp,.cv .bv,.cv .bg,.cv .bd{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border-radius:8px;font-weight:600;font-size:14px;white-space:nowrap;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;box-sizing:border-box}
.cv .bp{background:#5238D6;color:#fff;border:1px solid #5238D6;box-shadow:0 1px 2px rgba(16,24,40,0.08)}
.cv .bp:hover{background:#4328B8;transform:translateY(-1px);box-shadow:0 8px 20px rgba(16,24,40,0.14)}
.cv .bv{background:#fff;color:#1D1244;box-shadow:0 1px 2px rgba(16,24,40,0.08)}
.cv .bv:hover{transform:translateY(-2px);box-shadow:0 14px 44px rgba(16,24,40,0.14)}
.cv .bg{border:1px solid rgba(255,255,255,.3);color:#fff}
.cv .bg:hover{background:rgba(255,255,255,.1)}
.cv .bd{background:#fff;border:1px solid #D0D5DD;color:#17162B}
.cv .bd:hover{background:#F6F5FF;border-color:#B9B0F5}
.cv .glass{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14)}
.cv .lift{transition:transform .25s ease,box-shadow .25s ease}
.cv .lift:hover{transform:none;box-shadow:0 0 0 1.5px #6049E7}
@keyframes flow{to{stroke-dashoffset:-100}}
.cv .fl{stroke-dasharray:16 84;animation:flow 8s linear infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.cv .bob{animation:none}
@keyframes marq{to{transform:translateX(-50%)}}
.cv .mq{display:flex;gap:12px;width:max-content;animation:marq 60s linear infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.cv .pu{animation:pulse 2.4s ease-in-out infinite}
@keyframes rise{from{opacity:.01;transform:translateY(22px)}to{opacity:1;transform:none}}
.cv .rise{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes spin{to{transform:rotate(360deg)}}
.cv .spin{animation:spin 70s linear infinite}
.cv .spin2{animation:spin 110s linear infinite reverse}
@keyframes stepin{0%{opacity:.01;transform:translateY(10px)}6%,88%{opacity:1;transform:none}96%,100%{opacity:.01}}
.cv .step{opacity:0;animation:stepin 14s ease infinite both}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.cv .gy{transform-origin:bottom;animation:grow 1.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.cv .gx{transform-origin:left;animation:growx 1.6s cubic-bezier(.2,.8,.2,1) both}
@keyframes ringa{from{stroke-dashoffset:var(--v)}}
.cv .rg{animation:ringa 1.8s cubic-bezier(.2,.8,.2,1) both}
@keyframes wave{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.cv .wv{transform-origin:center;animation:wave 1.1s ease-in-out infinite}
@keyframes caret{50%{opacity:.01}}
.cv .cr{animation:caret 1s steps(1) infinite}
@keyframes dashm{to{stroke-dashoffset:-24}}
.cv .dm{stroke-dasharray:4 6;animation:dashm 1.2s linear infinite}
@keyframes glowp{0%,100%{box-shadow:0 0 0 0 rgba(16,24,40,0.14)}50%{box-shadow:0 0 0 14px rgba(16,24,40,0)}}
.cv .gl{animation:glowp 2.6s ease-out infinite}
.cv .mq.r{animation-direction:reverse}
.cv .shn{position:relative;overflow:hidden}
.cv .shn::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.26) 50%,transparent 70%);transform:translateX(-130%);animation:shn 6s ease-in-out infinite}
@keyframes shn{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.cv .orb{animation:spin 40s linear infinite}
.cv .glass-l{background:#fff;border:1px solid #E3E1F0;box-shadow:0 10px 30px rgba(16,24,40,0.03)}
.cv .sq{position:absolute;inset:0;animation:sqA 25s infinite both}
@keyframes sqA{0%{opacity:.01;transform:translateY(12px)}3%,17%{opacity:1;transform:none}20%,100%{opacity:.01;transform:translateY(-12px)}}
@property --num{syntax:'<integer>';inherits:false;initial-value:0}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.cv .cu{animation:cuA 2.4s cubic-bezier(.2,.8,.2,1) .2s both;counter-reset:n var(--num)}
.cv .cu::after{content:counter(n)}
@keyframes cuA{from{--num:0}to{--num:var(--to)}}
.cv .gb{border:1px solid rgba(255,255,255,.16);background:var(--gbg,#17162B);animation:none}
@keyframes angA{to{--ang:360deg}}
.cv .ld{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);animation:ldA 2s cubic-bezier(.2,.8,.2,1) .3s forwards}
@keyframes ldA{to{stroke-dashoffset:0}}
.cv .dn{animation:dnA 1.6s cubic-bezier(.2,.8,.2,1) .3s both}
@keyframes dnA{from{stroke-dashoffset:var(--s,50)}to{stroke-dashoffset:0}}
.cv .pop{animation:popA .7s cubic-bezier(.2,1.3,.3,1) both}
@keyframes popA{from{opacity:.01;transform:translateY(14px) scale(.92)}to{opacity:1;transform:none}}
.cv .ty{overflow:hidden;white-space:nowrap;width:0;animation:tyA var(--d,3s) steps(var(--n,30)) .4s forwards}
@keyframes tyA{to{width:var(--w,100%)}}
.cv .tilt{transform:none}
.cv .tilt:hover{transform:none}
.cv .hv{animation:hvA 2.2s ease-in-out infinite}
@keyframes hvA{0%,100%{box-shadow:0 0 0 0 rgba(255,90,60,.55)}50%{box-shadow:0 0 0 9px rgba(255,90,60,0)}}
.cv .mv{animation:mvA 5s ease-in-out infinite}
@keyframes mvA{0%,15%{transform:translate(0,0)}45%,70%{transform:var(--mv,translate(120px,48px))}100%{transform:translate(0,0)}}
@supports (animation-timeline:view()){.cv .rv{animation:rvA linear both;animation-timeline:view();animation-range:entry 0% cover 26%}@keyframes rvA{from{opacity:1;transform:translateY(28px)}to{opacity:1;transform:none}}.cv .pz{animation:pzA linear both;animation-timeline:view()}@keyframes pzA{from{transform:translateY(70px)}to{transform:translateY(-70px)}}}
.cv .au{animation:aurora 16s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translate(0,0) scale(1)}100%{transform:translate(60px,40px) scale(1.15)}}
.cv .sh{background-size:220% 100%;animation:sheen 5s linear infinite}
@keyframes sheen{0%{background-position:120% 0}100%{background-position:-120% 0}}
.cv .fa{animation:none}
.cv .fb{animation:none}
@keyframes flA{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1deg)}}
.cv .tl{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.cv .tl:hover{transform:none;box-shadow:0 0 0 1.5px #6049E7}
.cv .cnt{animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
.cv .hov{transition:background .2s ease,transform .2s ease,border-color .2s ease}
.cv .hov:hover{background:rgba(255,255,255,.06);transform:none}
@media (prefers-reduced-motion:reduce){.cv *{animation:none!important;transition:none!important}}
@media(max-width:1100px){.cv .ftg{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:700px){.cv .ftg{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:32px 20px!important}}
.cv b,.cv strong,.cv th{font-weight:600}
.cv *{scrollbar-width:none;-ms-overflow-style:none}
.cv *::-webkit-scrollbar{display:none;width:0;height:0}
@keyframes kR{from{opacity:.01;transform:translateY(18px)}to{opacity:1;transform:none}}
.cv .kr{animation:kR .8s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){.cv .kr{animation:none}}
.cv .ft-social{display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px;}
.cv .ft-social a{display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #EEECF6; color: #475569; transition: background .2s, color .2s;}
.cv .ft-social a:hover{background: #6049E7; color: #fff;}
@media (min-width: 761px){.cv .ftg > div > .eb{font-size: 16px;}.cv .ftg .fl2{font-size: 14px !important;}.cv .ft-legal{font-size: 14px;}}
@media (min-width: 561px){}
@media (max-width: 560px){}
@media (max-width: 760px){.cv .ftg{grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; margin-top: 4px !important;}.cv .ftg > div{border-bottom: 1px solid #DCD9EC;}.cv .ftg > div > .eb{display: flex; align-items: center; justify-content: space-between; min-height: 58px; margin: 0 !important; font-family: var(--f-inter), system-ui, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #17162B !important; cursor: pointer; -webkit-tap-highlight-color: transparent;}.cv .ftg > div > .eb::after{content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px; border-right: 2px solid #475569; border-bottom: 2px solid #475569; transform: translateY(-3px) rotate(45deg); transition: transform .2s ease;}.cv .ftg > div[data-open] > .eb::after{transform: translateY(2px) rotate(-135deg);}.cv .ftg > div:not([data-open]) > .eb + div{display: none !important;}.cv .ftg > div > .eb + div{gap: 2px !important; padding-bottom: 14px;}.cv .ftg .fl2{font-size: 14px !important; line-height: 22px !important; padding: 8px 0;}.cv .ft-social{display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px;}.cv .ft-social a{display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #EEECF6; color: #475569;}.cv .ft-legal{gap: 12px 24px !important; font-size: 14px;}.cv .ft-legal a{padding: 4px 0;}.cv .ft-copy{font-size: 13px !important; margin-top: 18px !important;}}
/* Layout fixes on top of the canvas design, for places where it breaks: text running out of its card, badges
   wrapping. Appended to every design page's stylesheet by scripts/canvas/convert.py, so these come last.
   Selectors match the site's style attributes as written (no space after the colon). */

/* Badges (fully rounded labels) never break onto a second line. */
.cv span:is([style*="border-radius:999px"],[style*="border-radius: 999px"]) {
  white-space: nowrap;
}

/* Use-case panels on the industry and solution pages: on desktop the illustration gets a larger share of the row;
   where even that is too narrow for its content, it goes under the text, at full width. */
.cv .ucp {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}
@media (max-width: 1240px) {
  .cv .ucp {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Their illustrations (kanban boards): lighter frame and column padding, so the cards keep room for their words. */
.cv .ucp :is([style*="background:linear-gradient(160deg,#F1F0F9,#F8F7FC)"],[style*="background: linear-gradient(160deg, #F1F0F9, #F8F7FC)"]):is([style*="padding:26px"],[style*="padding: 26px"]) {
  padding: 14px !important;
}
.cv .ucp :is([style*="background:linear-gradient(160deg,#F1F0F9,#F8F7FC)"],[style*="background: linear-gradient(160deg, #F1F0F9, #F8F7FC)"]) > div > :is([style*="padding:16px"],[style*="padding: 16px"]) {
  padding: 12px !important;
}
.cv :is([style*="display:flex;gap:10px"],[style*="display: flex; gap: 10px"]):has(> :is([style*="flex:1;min-width:0;background:#F5F4FA"],[style*="flex: 1; min-width: 0; background: #F5F4FA"])) {
  gap: 6px !important;
}
.cv :is([style*="flex:1;min-width:0;background:#F5F4FA;border-radius:8px;padding:10px"],[style*="flex: 1; min-width: 0; background: #F5F4FA; border-radius: 8px; padding: 10px"]) {
  padding: 6px !important;
}
.cv :is([style*="flex:1;min-width:0;background:#F5F4FA;border-radius:8px;padding:10px"],[style*="flex: 1; min-width: 0; background: #F5F4FA; border-radius: 8px; padding: 10px"]) .pop {
  padding: 8px !important;
}

/* Labels centred on a point (left:50% plus translate(-50%)): the browser caps their width at the space to the
   right of that point, so a long label ran out of its pill (the agent ring on the home page). Size them to their
   content instead. */
.cv :is([style*="position:absolute;left:50%;top:0;transform:translate(-50%,-50%)"],[style*="position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%)"]) {
  width: max-content;
}

/* Agent ring on the home page: at 52% the ring is too small for the side labels to clear the logo in its centre. */
.cv :is([style*="width:52%"],[style*="width: 52%"]):is([style*="border-radius:50%"],[style*="border-radius: 50%"])[style*="dashed"] {
  width: min(100%, max(72%, 290px)) !important;
}

/* "Your whole enterprise" diagram (home and Enterprise Search): below 760px the design keeps it at 760px in a
   sideways scroller, so on a phone most of it sits off screen. Fit it to the width instead, trimming the empty
   bands around the drawing (x 110 to 1090 and the top 70 of its 1200 by 710 viewBox). */
@media (max-width: 800px) {
  .cv div:has(> svg:is([style*="min-width:760px"],[style*="min-width: 760px"])) {
    overflow: hidden !important;
  }
  .cv svg:is([style*="min-width:760px"],[style*="min-width: 760px"]) {
    min-width: 0 !important;
    width: calc(100% * 1200 / 980) !important;
    margin-left: calc(-100% * 110 / 980);
    margin-top: calc(-100% * 70 / 980);
  }
}

/* Governance orbit on the home page: drawn for a 520px box, but on a phone the box is squeezed below that, which
   moves the right-hand nodes and pushes the side labels off both edges. Keep the 520px drawing, scale it down a
   little more, and let the labels wrap onto two lines. */
@media (max-width: 420px) {
  .cv :is([style*="width:520px;max-width:100%;height:520px"],[style*="width: 520px; max-width: 100%; height: 520px"]) {
    width: 520px !important;
    max-width: none !important;
    zoom: 0.6 !important;
  }
  .cv :is([style*="width:520px;max-width:100%;height:520px"],[style*="width: 520px; max-width: 100%; height: 520px"]) :is([style*="gap:6px;width:160px;text-align:center"],[style*="gap: 6px; width: 160px; text-align: center"]) {
    width: 110px !important;
  }
}
@media (max-width: 360px) {
  .cv :is([style*="width:520px;max-width:100%;height:520px"],[style*="width: 520px; max-width: 100%; height: 520px"]) {
    zoom: 0.52 !important;
  }
}

/* Agent cards on the home page: on a phone the "Live" badge took room from the agent's name, which then broke
   over four lines. The name gets the row beside the icon and the badge goes under it. */
@media (max-width: 560px) {
  .cv :is([style*="display:flex;align-items:center;gap:14px"],[style*="display: flex; align-items: center; gap: 14px"]):has(> span.eb:is([style*="margin-left:auto"],[style*="margin-left: auto"])) {
    flex-wrap: wrap;
  }
  .cv :is([style*="display:flex;align-items:center;gap:14px"],[style*="display: flex; align-items: center; gap: 14px"]):has(> span.eb:is([style*="margin-left:auto"],[style*="margin-left: auto"])) > div {
    flex: 1 1 calc(100% - 70px);
    min-width: 0;
  }
  .cv :is([style*="display:flex;align-items:center;gap:14px"],[style*="display: flex; align-items: center; gap: 14px"]) > span.eb:is([style*="margin-left:auto"],[style*="margin-left: auto"]) {
    margin-left: 70px !important;
  }
}

/* Phones, after fireworks.ai: series of cards swipe sideways instead of stacking into a long column, and cards keep
   a 20px inset and moderate titles so more of the content fits each screen. */
@media (max-width: 560px) {
  /* Card grids (auto-fit columns of 230px and wider, which a phone shows one per row) with four or more cards become
     a row that scrolls and snaps, with the next card peeking in. Grids of two or three, grids of small items (under
     230px, two per row on a phone; the home page's industry cards excepted, so they swipe like the team cards next
     to them), stat tiles and one-line tiles (icon and label in a row) stay as they are. */
  .cv :is(:is([style*="repeat(auto-fit,minmax(min("],[style*="repeat(auto-fit, minmax(min("]), [style*="minmax(230px"], [style*="minmax(240px"],
    [style*="minmax(250px"], [style*="minmax(260px"], [style*="minmax(300px"], .wcg):not(
    [style*="min(170px"], [style*="min(190px"], [style*="min(200px"], [style*="min(210px"], [style*="min(220px"], :has(.cnt), :has(> :first-child:is([style*="align-items:center"],[style*="align-items: center"]):not(:is([style*="flex-direction:column"],[style*="flex-direction: column"])))
  ):has(> :nth-child(4)) {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .cv :is(:is([style*="repeat(auto-fit,minmax(min("],[style*="repeat(auto-fit, minmax(min("]), [style*="minmax(230px"], [style*="minmax(240px"],
    [style*="minmax(250px"], [style*="minmax(260px"], [style*="minmax(300px"], .wcg):not(
    [style*="min(170px"], [style*="min(190px"], [style*="min(200px"], [style*="min(210px"], [style*="min(220px"], :has(.cnt), :has(> :first-child:is([style*="align-items:center"],[style*="align-items: center"]):not(:is([style*="flex-direction:column"],[style*="flex-direction: column"])))
  ):has(> :nth-child(4)) > * {
    scroll-snap-align: start;
  }

  /* Four or more stat tiles (a counting number and its caption) sit two to a row. */
  .cv :is([style*="repeat(auto-fit,minmax(min("],[style*="repeat(auto-fit, minmax(min("]):has(.cnt):has(> :nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* A column of four or more tab buttons (the agent picker, the integration categories) becomes one row of pills
     that scrolls sideways. */
  .cv :is([style*="flex-direction:column"],[style*="flex-direction: column"]):has(> button:nth-of-type(4)) {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  /* Its box (the integrations page's category column) must not grow to the row's full length. */
  .cv .ig-side {
    min-width: 0;
  }
  .cv :is([style*="flex-direction:column"],[style*="flex-direction: column"]):has(> button:nth-of-type(4)) > button {
    flex: none;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    white-space: nowrap;
  }

  /* Prompt pills (rounded, 10px tall padding) hold whole sentences: they wrap rather than run off the screen. */
  .cv span:is([style*="border-radius:999px"],[style*="border-radius: 999px"]):is([style*="padding:10px"],[style*="padding: 10px"]) {
    max-width: 100%;
    white-space: normal;
  }

  /* The typed prompt in the feature pages' chat bubble is one long line; it wraps instead of pushing the bubble off
     the left of the screen. */
  .cv .pfty {
    white-space: normal;
  }

  /* Card insets of 28px and more come down to 20px. */
  .cv [style*="border-radius"]:is(:is([style*="padding:28px"],[style*="padding: 28px"]), :is([style*="padding:32px"],[style*="padding: 32px"]), :is([style*="padding:36px"],[style*="padding: 36px"]),
    :is([style*="padding:40px"],[style*="padding: 40px"]), :is([style*="padding:44px"],[style*="padding: 44px"]), :is([style*="padding:48px"],[style*="padding: 48px"])):not([style*="px 0"]) {
    padding: 20px !important;
  }

  /* Type scale for phones, set against fireworks.ai (3 Nov 2026): the design's desktop clamps bottom out at 34-42px
     for every heading level, so section titles (H2) often came out larger than the page title. Page title about
     38px (ours lead with the search phrase, so they run longer than fireworks.ai's 42px titles), section titles
     32px, card titles about 23px. Lead lines (19-20px in the design) read at 17px; body text is 16px (15-18.5px
     in the design) and small text 14px. Buttons: 16px text, 50px tall. */
  .cv h1.hd {
    font-size: clamp(32px, 9.8vw, 40px) !important;
    line-height: 1.08 !important;
  }
  .cv h2.hd {
    font-size: clamp(26px, 8.2vw, 32px) !important;
    line-height: 1.12 !important;
  }
  .cv h3.hd,
  .cv h3:is(:is([style*="font-size:34px"],[style*="font-size: 34px"]), :is([style*="font-size:36px"],[style*="font-size: 36px"]), :is([style*="font-size:38px"],[style*="font-size: 38px"]), :is([style*="font-size:40px"],[style*="font-size: 40px"]),
    :is([style*="font-size:44px"],[style*="font-size: 44px"])) {
    font-size: clamp(20px, 6vw, 24px) !important;
    line-height: 1.18 !important;
  }
  .cv p:is(:is([style*="font-size:19px"],[style*="font-size: 19px"]), :is([style*="font-size:20px"],[style*="font-size: 20px"])) {
    font-size: 17px !important;
  }
  .cv p:is(:is([style*="font-size:17.5px"],[style*="font-size: 17.5px"]), :is([style*="font-size:18px"],[style*="font-size: 18px"]), :is([style*="font-size:18.5px"],[style*="font-size: 18.5px"])),
  .cv :is(p, div, span, li):is(:is([style*="font-size:15px"],[style*="font-size: 15px"]), :is([style*="font-size:15.5px"],[style*="font-size: 15.5px"]), :is([style*="font-size:16.5px"],[style*="font-size: 16.5px"]),
    :is([style*="font-size:17px"],[style*="font-size: 17px"])) {
    font-size: 16px !important;
  }
  .cv p:is([style*="font-size:13.5px"],[style*="font-size: 13.5px"]),
  .cv :is(p, div, span, li):is([style*="font-size:14.5px"],[style*="font-size: 14.5px"]) {
    font-size: 14px !important;
  }
  .cv :is(a, button):is(.bp, .bd, .bv, .bg) {
    font-size: 16px !important;
    min-height: 50px;
  }

  /* Product cards on the home page: the tagline ("AI work management") goes under the wordmark rather than
     floating beside it. */
  .cv .lift > :is([style*="display:flex;align-items:baseline;justify-content:space-between"],[style*="display: flex; align-items: baseline; justify-content: space-between"]) {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* Sticky tab bars (feature and solution pickers) keep to one line that scrolls sideways, instead of wrapping
     into three rows that cover the page. */
  .cv :is([style*="position:sticky"],[style*="position: sticky"]) > .c:is([style*="flex-wrap:wrap"],[style*="flex-wrap: wrap"]) {
    flex-wrap: nowrap !important;
  }
  .cv :is([style*="position:sticky"],[style*="position: sticky"]) > .c > :is([style*="flex-wrap:wrap"],[style*="flex-wrap: wrap"]) {
    flex: 1;
    flex-wrap: nowrap !important;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .cv :is([style*="position:sticky"],[style*="position: sticky"]) > .c > :is([style*="flex-wrap:wrap"],[style*="flex-wrap: wrap"]) > * {
    flex: none;
  }

  /* Guardrail table on AI Governance (ID, policy, category, severity, what it enforces): each row stacks under its
     ID, the category and severity side by side, and the column headings go. */
  .cv :is([style*="grid-template-columns:44px minmax(0,1.25fr) minmax(0,1.15fr) 84px minmax(0,2.4fr)"],[style*="grid-template-columns: 44px minmax(0, 1.25fr) minmax(0, 1.15fr) 84px minmax(0, 2.4fr)"]) {
    grid-template-columns: 44px auto 1fr !important;
    row-gap: 8px !important;
    align-items: start !important;
  }
  .cv :is([style*="grid-template-columns:44px minmax(0,1.25fr) minmax(0,1.15fr) 84px minmax(0,2.4fr)"],[style*="grid-template-columns: 44px minmax(0, 1.25fr) minmax(0, 1.15fr) 84px minmax(0, 2.4fr)"]).eb {
    display: none !important;
  }
  .cv :is([style*="grid-template-columns:44px minmax(0,1.25fr) minmax(0,1.15fr) 84px minmax(0,2.4fr)"],[style*="grid-template-columns: 44px minmax(0, 1.25fr) minmax(0, 1.15fr) 84px minmax(0, 2.4fr)"]) > :nth-child(2),
  .cv :is([style*="grid-template-columns:44px minmax(0,1.25fr) minmax(0,1.15fr) 84px minmax(0,2.4fr)"],[style*="grid-template-columns: 44px minmax(0, 1.25fr) minmax(0, 1.15fr) 84px minmax(0, 2.4fr)"]) > :nth-child(5) {
    grid-column: 2 / -1;
  }
  .cv :is([style*="grid-template-columns:44px minmax(0,1.25fr) minmax(0,1.15fr) 84px minmax(0,2.4fr)"],[style*="grid-template-columns: 44px minmax(0, 1.25fr) minmax(0, 1.15fr) 84px minmax(0, 2.4fr)"]) > :nth-child(3) {
    grid-column: 2;
  }
  .cv :is([style*="grid-template-columns:44px minmax(0,1.25fr) minmax(0,1.15fr) 84px minmax(0,2.4fr)"],[style*="grid-template-columns: 44px minmax(0, 1.25fr) minmax(0, 1.15fr) 84px minmax(0, 2.4fr)"]) > :nth-child(4) {
    grid-column: 3;
  }

  /* Sprint backlog rows (handle, story, epic, priority, points): the story gets the full width and its tags and
     points go on the line below. */
  .cv :is([style*="grid-template-columns:20px 1fr auto auto 40px"],[style*="grid-template-columns: 20px 1fr auto auto 40px"]) {
    grid-template-columns: 20px auto auto 1fr !important;
    row-gap: 6px !important;
  }
  .cv :is([style*="grid-template-columns:20px 1fr auto auto 40px"],[style*="grid-template-columns: 20px 1fr auto auto 40px"]) > :nth-child(2) {
    grid-column: 2 / -1;
  }
  .cv :is([style*="grid-template-columns:20px 1fr auto auto 40px"],[style*="grid-template-columns: 20px 1fr auto auto 40px"]) > :nth-child(3) {
    grid-column: 2;
  }
  .cv :is([style*="grid-template-columns:20px 1fr auto auto 40px"],[style*="grid-template-columns: 20px 1fr auto auto 40px"]) > :nth-child(5) {
    grid-column: 4;
    justify-self: end;
  }

  /* Two-panel illustrations in the gradient frames (the features and solutions hubs): side by side they had to be
     shrunk to 60% to fit, so on a phone the panels stack instead. */
  .cv :is([style*="position:relative"],[style*="position: relative"]) > :is([style*="display:grid"],[style*="display: grid"]):is([style*="gap:18px;align-items:start"],[style*="gap: 18px; align-items: start"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* The frame's dashed ring sits partly outside it; clip it rather than let the frame scroll sideways. */
  .cv :has(> :is([style*="position:relative"],[style*="position: relative"]) > :is([style*="display:grid"],[style*="display: grid"]):is([style*="gap:18px;align-items:start"],[style*="gap: 18px; align-items: start"])) {
    overflow: hidden !important;
  }

  /* Sprint board on the Sprints page: four columns squeezed to 80px each; they keep a readable width and the board
     scrolls sideways like the real one. */
  .cv :is([style*="grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;overflow:hidden"],[style*="grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; overflow: hidden"]) {
    grid-template-columns: repeat(4, 150px) !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  /* Before and after panels on the solution pages (before, arrow, after): side by side each panel was 124px and
     shrunk to 60%. They stack, with the arrow turned to point down between them. */
  .cv .prb {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  .cv .prb > :nth-child(2) {
    transform: rotate(90deg);
  }

  /* Model Hub routing diagram (request, router, models): drawn at 520px in a sideways scroller, which hid the
     models. It fits the width instead. */
  .cv :is([style*="min-width:520px;display:grid;grid-template-columns:1fr 74px 1.1fr"],[style*="min-width: 520px; display: grid; grid-template-columns: 1fr 74px 1.1fr"]) {
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) !important;
    gap: 8px !important;
  }
}

@media (max-width: 700px) {
  /* Side column plus content grids (the solution pages' before and after panels): the side column's 220 to 260px
     minimum left the content a sliver on a phone. They stack. */
  .cv :is(:is([style*="grid-template-columns:minmax(220px,."],[style*="grid-template-columns: minmax(220px, ."]), :is([style*="grid-template-columns:minmax(260px,"],[style*="grid-template-columns: minmax(260px, "])) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Model orchestration on the AI page: drawn at 640px with the models either side of the hub, so on a phone the
     models sat off screen and never appeared. The hub goes on top and the models in two columns under it. */
  .cv :is([style*="grid-template-columns:1fr 160px 1fr"],[style*="grid-template-columns: 1fr 160px 1fr"]):is([style*="min-width:640px"],[style*="min-width: 640px"]) {
    min-width: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .cv :is([style*="grid-template-columns:1fr 160px 1fr"],[style*="grid-template-columns: 1fr 160px 1fr"]):is([style*="min-width:640px"],[style*="min-width: 640px"]) > .gl {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    margin-bottom: 12px;
  }
}

/* Home page "By industry" cards: ten of them in auto-fit columns left a row of two under rows of four (laptops) or
   one under rows of three (tablets). Five columns, or two on tablets, keep the rows full. */
@media (min-width: 901px) {
  .cv [style*="minmax(min(215px"] {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 561px) and (max-width: 900px) {
  .cv [style*="minmax(min(215px"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Glass callouts (white text on translucent white or lilac) in the solution and features pages' illustrations: the design sets them on the
   light lilac frame, where the text disappears. On that frame they become white cards with dark text. The frame is
   matched as written and as the browser rewrites it once the fit script scales it. */
.cv :is(:is([style*="linear-gradient(160deg,#F1F0F9,#F8F7FC)"],[style*="linear-gradient(160deg, #F1F0F9, #F8F7FC)"]), [style*="rgb(241, 240, 249), rgb(248, 247, 252)"])
  :is(:is([style*="rgba(255,255,255,.24),rgba(255,255,255,.12)"],[style*="rgba(255, 255, 255, .24), rgba(255, 255, 255, .12)"]), :is([style*="rgba(96,73,231,0.168),rgba(96,73,231,0.084)"],[style*="rgba(96, 73, 231, 0.168), rgba(96, 73, 231, 0.084)"]),
    :is([style*="rgba(255,255,255,.14),rgba(255,255,255,.05)"],[style*="rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)"])) {
  background: #fff !important;
  border-color: #E3E1F0 !important;
  backdrop-filter: none !important;
  color: #17162B !important;
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
}
.cv :is(:is([style*="linear-gradient(160deg,#F1F0F9,#F8F7FC)"],[style*="linear-gradient(160deg, #F1F0F9, #F8F7FC)"]), [style*="rgb(241, 240, 249), rgb(248, 247, 252)"])
  :is(:is([style*="rgba(255,255,255,.24),rgba(255,255,255,.12)"],[style*="rgba(255, 255, 255, .24), rgba(255, 255, 255, .12)"]), :is([style*="rgba(96,73,231,0.168),rgba(96,73,231,0.084)"],[style*="rgba(96, 73, 231, 0.168), rgba(96, 73, 231, 0.084)"]),
    :is([style*="rgba(255,255,255,.14),rgba(255,255,255,.05)"],[style*="rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)"]))
  :is([style*="color:#fff"],[style*="color: #fff"]) {
  color: #475569 !important;
}

/* Text that is read by crawlers and screen readers but not shown: the number behind an animated counter
   (convert.py counter_text), which the design draws with CSS. */
.cv .vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Desktop type scale (1024px and wider), set against fireworks.ai on 3 Nov 2026. The design's headings use inline
   clamp() sizes that reach 58-78px for page titles, up to 68px for section titles (bigger than the page title) and
   40-52px for panel titles, and paragraphs come in eight sizes. Here:
   - page titles: one size, 60px at 1440px (titles the design set smaller, 50-58px, sit in narrow hero columns or
     run long, as on the compare, demo and support pages, and keep their size);
   - section titles: the statement sizes (54-68px) stop at 52px, below the 60px page title;
   - panel titles: stop at 32px;
   - body text: 14.5-18.5px rounded to 14, 16 or 18px (19-20px lead lines stay; smaller text, mostly inside the
     product mock-ups, keeps its size);
   - buttons: 16px text, 52px tall, as on fireworks.ai (the header's buttons keep the nav size).
   Phones and tablets have their own scales (above and below). */
@media (min-width: 1024px) {
  .cv h1.hd:is(:is([style*=",60px)"],[style*=", 60px)"]), :is([style*=",62px)"],[style*=", 62px)"]), :is([style*=",64px)"],[style*=", 64px)"]), :is([style*=",66px)"],[style*=", 66px)"]), :is([style*=",67px)"],[style*=", 67px)"]),
    :is([style*=",68px)"],[style*=", 68px)"]), :is([style*=",76px)"],[style*=", 76px)"]), :is([style*=",78px)"],[style*=", 78px)"])) {
    font-size: clamp(46px, 4.2vw, 60px) !important;
  }
  .cv h2.hd:is(:is([style*=",54px)"],[style*=", 54px)"]), :is([style*=",60px)"],[style*=", 60px)"]), :is([style*=",62px)"],[style*=", 62px)"]), :is([style*=",64px)"],[style*=", 64px)"]), :is([style*=",66px)"],[style*=", 66px)"]),
    :is([style*=",68px)"],[style*=", 68px)"])) {
    font-size: clamp(38px, 3.6vw, 52px) !important;
  }
  .cv h3.hd:is(:is([style*="font-size:38px"],[style*="font-size: 38px"]), :is([style*=",40px)"],[style*=", 40px)"]), :is([style*=",52px)"],[style*=", 52px)"])) {
    font-size: clamp(26px, 2.25vw, 32px) !important;
  }
  .cv p:is([style*="font-size:13.5px"],[style*="font-size: 13.5px"]),
  .cv :is(p, div, span, li):is([style*="font-size:14.5px"],[style*="font-size: 14.5px"]) {
    font-size: 14px !important;
  }
  .cv :is(p, div, span, li):is(:is([style*="font-size:15px"],[style*="font-size: 15px"]), :is([style*="font-size:15.5px"],[style*="font-size: 15.5px"]), :is([style*="font-size:16.5px"],[style*="font-size: 16.5px"]),
    :is([style*="font-size:17px"],[style*="font-size: 17px"])) {
    font-size: 16px !important;
  }
  .cv :is(p, div, span, li):is(:is([style*="font-size:17.5px"],[style*="font-size: 17.5px"]), :is([style*="font-size:18.5px"],[style*="font-size: 18.5px"])) {
    font-size: 18px !important;
  }
  .cv :is(a, button):is(.bp, .bd, .bv, .bg):not(.nvs, .nvd) {
    font-size: 16px !important;
    min-height: 52px;
  }
}

/* Tablet type scale (561-1023px), set against fireworks.ai on 3 Nov 2026. Between the phone and desktop scales the
   design's clamps left page titles at 31-42px while section titles reached 40px and the home page's product
   titles 38px, so a section title could outrank the page title. Here:
   - page titles: 40px rising to 46px (about 43px on a 768px iPad); fireworks.ai uses 48px, ours run longer;
   - section titles: the statement sizes stop at 32-38px (about 35px at 768px), always below the page title,
     meeting the phone (32px) and desktop (38px at 1024px) sizes at either end;
   - panel titles: 24-28px;
   - body text 16px, lead lines 18px, small text 14px;
   - buttons: 16px text, 52px tall. */
@media (min-width: 561px) and (max-width: 1023px) {
  .cv h1.hd {
    font-size: clamp(40px, 5.6vw, 46px) !important;
  }
  .cv h2.hd:is(:is([style*=",54px)"],[style*=", 54px)"]), :is([style*=",60px)"],[style*=", 60px)"]), :is([style*=",62px)"],[style*=", 62px)"]), :is([style*=",64px)"],[style*=", 64px)"]), :is([style*=",66px)"],[style*=", 66px)"]),
    :is([style*=",68px)"],[style*=", 68px)"])) {
    font-size: clamp(32px, 4.5vw, 38px) !important;
  }
  .cv h3.hd:is(:is([style*="font-size:38px"],[style*="font-size: 38px"]), :is([style*=",40px)"],[style*=", 40px)"]), :is([style*=",52px)"],[style*=", 52px)"])) {
    font-size: clamp(24px, 3.4vw, 28px) !important;
  }
  .cv p:is(:is([style*="font-size:19px"],[style*="font-size: 19px"]), :is([style*="font-size:20px"],[style*="font-size: 20px"])) {
    font-size: 18px !important;
  }
  .cv p:is(:is([style*="font-size:17.5px"],[style*="font-size: 17.5px"]), :is([style*="font-size:18px"],[style*="font-size: 18px"]), :is([style*="font-size:18.5px"],[style*="font-size: 18.5px"])),
  .cv :is(p, div, span, li):is(:is([style*="font-size:15px"],[style*="font-size: 15px"]), :is([style*="font-size:15.5px"],[style*="font-size: 15.5px"]), :is([style*="font-size:16.5px"],[style*="font-size: 16.5px"]),
    :is([style*="font-size:17px"],[style*="font-size: 17px"])) {
    font-size: 16px !important;
  }
  .cv p:is([style*="font-size:13.5px"],[style*="font-size: 13.5px"]),
  .cv :is(p, div, span, li):is([style*="font-size:14.5px"],[style*="font-size: 14.5px"]) {
    font-size: 14px !important;
  }
  .cv :is(a, button):is(.bp, .bd, .bv, .bg):not(.nvs, .nvd) {
    font-size: 16px !important;
    min-height: 52px;
  }
}

/* Spacing, set against fireworks.ai on 3 Nov 2026.
   - Sections: the design gives every section's container the same top and bottom padding (56-112px) at every
     width, so phones got desktop spacing: about 165-220px between sections, against 80-100px on fireworks.ai
     (120-140px on tablets). The large paddings scale to about 0.8 on tablets and 0.55 on phones; small ones (8-48px,
     where one section runs into the next) and desktop are unchanged.
   - Hero: page title to intro line and intro line to buttons 40px on desktop, 32px on tablets and phones (the design
     had 20-28px and 28-38px).
   - Section title to its subtitle: 24px (the design had 16-24px). */
.cv h2.hd + p {
  margin-top: 24px !important;
}
.cv h1.hd + p {
  margin-top: 40px !important;
}
.cv h1.hd + p + div:has(> :is(a, button):is(.bp, .bd, .bv, .bg)) {
  margin-top: 40px !important;
}
@media (max-width: 1023px) {
  .cv h1.hd + p,
  .cv h1.hd + p + div:has(> :is(a, button):is(.bp, .bd, .bv, .bg)) {
    margin-top: 32px !important;
  }
}
@media (min-width: 561px) and (max-width: 1023px) {
  .cv section > .c:is(:is([style*="padding-top:56px"],[style*="padding-top: 56px"])) {
    padding-top: 48px !important;
  }
  .cv section > .c:is(:is([style*="padding-top:64px"],[style*="padding-top: 64px"])) {
    padding-top: 52px !important;
  }
  .cv section > .c:is(:is([style*="padding-top:72px"],[style*="padding-top: 72px"])) {
    padding-top: 56px !important;
  }
  .cv section > .c:is(:is([style*="padding-top:80px"],[style*="padding-top: 80px"])) {
    padding-top: 64px !important;
  }
  .cv section > .c:is(:is([style*="padding-top:88px"],[style*="padding-top: 88px"])) {
    padding-top: 72px !important;
  }
  .cv section > .c:is(:is([style*="padding-top:104px"],[style*="padding-top: 104px"])) {
    padding-top: 84px !important;
  }
  .cv section > .c:is(:is([style*="padding-top:112px"],[style*="padding-top: 112px"])) {
    padding-top: 88px !important;
  }
  .cv section > .c:is(:is([style*="padding-bottom:64px"],[style*="padding-bottom: 64px"])) {
    padding-bottom: 52px !important;
  }
  .cv section > .c:is(:is([style*="padding-bottom:72px"],[style*="padding-bottom: 72px"])) {
    padding-bottom: 56px !important;
  }
  .cv section > .c:is(:is([style*="padding-bottom:80px"],[style*="padding-bottom: 80px"])) {
    padding-bottom: 64px !important;
  }
  .cv section > .c:is(:is([style*="padding-bottom:88px"],[style*="padding-bottom: 88px"])) {
    padding-bottom: 72px !important;
  }
  .cv section > .c:is(:is([style*="padding-bottom:96px"],[style*="padding-bottom: 96px"])) {
    padding-bottom: 76px !important;
  }
}
@media (max-width: 560px) {
  .cv section > .c:is(:is([style*="padding-top:56px"],[style*="padding-top: 56px"])) {
    padding-top: 32px !important;
  }
  .cv section > .c:is(:is([style*="padding-top:64px"],[style*="padding-top: 64px"])) {
    padding-top: 36px !important;
  }
  .cv section > .c:is(:is([style*="padding-top:72px"],[style*="padding-top: 72px"])) {
    padding-top: 40px !important;
  }
  .cv section > .c:is(:is([style*="padding-top:80px"],[style*="padding-top: 80px"])) {
    padding-top: 44px !important;
  }
  .cv section > .c:is(:is([style*="padding-top:88px"],[style*="padding-top: 88px"])) {
    padding-top: 48px !important;
  }
  .cv section > .c:is(:is([style*="padding-top:104px"],[style*="padding-top: 104px"])) {
    padding-top: 56px !important;
  }
  .cv section > .c:is(:is([style*="padding-top:112px"],[style*="padding-top: 112px"])) {
    padding-top: 60px !important;
  }
  .cv section > .c:is(:is([style*="padding-bottom:64px"],[style*="padding-bottom: 64px"])) {
    padding-bottom: 36px !important;
  }
  .cv section > .c:is(:is([style*="padding-bottom:72px"],[style*="padding-bottom: 72px"])) {
    padding-bottom: 40px !important;
  }
  .cv section > .c:is(:is([style*="padding-bottom:80px"],[style*="padding-bottom: 80px"])) {
    padding-bottom: 44px !important;
  }
  .cv section > .c:is(:is([style*="padding-bottom:88px"],[style*="padding-bottom: 88px"])) {
    padding-bottom: 48px !important;
  }
  .cv section > .c:is(:is([style*="padding-bottom:96px"],[style*="padding-bottom: 96px"])) {
    padding-bottom: 52px !important;
  }
}

/* AI page, "Tasks completed today" (the only .fd-r feed): a later design edit turned each feed row into a tall card
   (avatar, task, check, mock-up), so the six cards stacked into a column about 2,750px tall while the text beside it
   is about 460px, leaving the section mostly empty on one side. The cards now sit in a row, one card wide, and the
   feed advances to the next card every 5s (pausing on hover), as a live feed; the steps assume six cards. With
   reduced motion the row scrolls sideways instead. */
.cv div:has(> .fd-r) {
  flex-direction: row !important;
  gap: 16px !important;
  overflow: hidden;
  border-radius: 20px;
}
.cv .fd-r {
  flex: 0 0 100%;
  min-width: 0;
  box-sizing: border-box;
  opacity: 1 !important;
  animation: fdSlide 30s cubic-bezier(0.65, 0, 0.35, 1) infinite !important;
  animation-delay: 0s !important;
}
.cv div:has(> .fd-r):is(:hover, :focus-within) > .fd-r {
  animation-play-state: paused !important;
}
@keyframes fdSlide {
  0%, 13.67% { transform: none; }
  16.67%, 30.33% { transform: translateX(calc(-100% - 16px)); }
  33.33%, 47% { transform: translateX(calc(-200% - 32px)); }
  50%, 63.67% { transform: translateX(calc(-300% - 48px)); }
  66.67%, 80.33% { transform: translateX(calc(-400% - 64px)); }
  83.33%, 97% { transform: translateX(calc(-500% - 80px)); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cv div:has(> .fd-r) {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .cv .fd-r {
    flex-basis: 88%;
    animation: none !important;
    scroll-snap-align: start;
  }
}

/* Two-column sections where one side is far shorter than the other keep the short side in view while the long side
   scrolls past (the design leaves it at the top, with an empty column beside the rest): the "FAQs on ..." title
   beside its questions on every page, and the audit-log panel beside the six governance cards on AI Workflows.
   Only where the columns sit side by side. */
@media (min-width: 900px) {
  .cv div:has(> div > details.fqd) > div:not(:has(> details.fqd)),
  .cv .wf-aside {
    position: sticky;
    top: 100px;
    align-self: start;
  }
}

/* Animated counters (.cu, .sb-n) count from 0 to their figure; with reduced motion the animation is off, so they
   showed 0. They show the figure itself. */
@media (prefers-reduced-motion: reduce) {
  .cv :is(.cu, .sb-n) {
    --num: var(--to) !important;
  }
}

/* AI Governance, "Your environment" diagram (people -> environment -> tools): the five capability chips sat in five
   fixed columns, so below about 1100px their labels ran out of the chips and over one another. The chips wrap
   instead, and on phones the diagram stacks with its arrows pointing down. */
.cv :is([style*="grid-template-columns:repeat(5,minmax(0,1fr))"],[style*="grid-template-columns: repeat(5, minmax(0, 1fr))"]):has(> div:is([style*="font-size:12.5px;font-weight:600"],[style*="font-size: 12.5px; font-weight: 600"])) {
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)) !important;
}
@media (max-width: 760px) {
  .cv :is([style*="grid-template-columns:minmax(0,.6fr) 28px minmax(0,3.2fr) 28px minmax(0,.6fr)"],[style*="grid-template-columns: minmax(0, .6fr) 28px minmax(0, 3.2fr) 28px minmax(0, .6fr)"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .cv :is([style*="grid-template-columns:minmax(0,.6fr) 28px minmax(0,3.2fr) 28px minmax(0,.6fr)"],[style*="grid-template-columns: minmax(0, .6fr) 28px minmax(0, 3.2fr) 28px minmax(0, .6fr)"]) > :is(:nth-child(2), :nth-child(4)) {
    justify-self: center;
    transform: rotate(90deg);
  }
}

/* AI Stack, the five layers (icon, layer, role, what it includes): four columns left the layer name running into
   its role on phones. Each row stacks the three texts beside the icon. */
@media (max-width: 560px) {
  .cv :is([style*="grid-template-columns:44px 1.1fr 1.2fr 1.6fr"],[style*="grid-template-columns: 44px 1.1fr 1.2fr 1.6fr"]) {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    row-gap: 2px !important;
    align-items: start !important;
  }
  .cv :is([style*="grid-template-columns:44px 1.1fr 1.2fr 1.6fr"],[style*="grid-template-columns: 44px 1.1fr 1.2fr 1.6fr"]) > :first-child {
    grid-row: span 3;
  }
}

/* "Searching ..." / "Kroolo is reading ..." lines (.tdots) share a grid cell with the answer that replaces them. The
   design's reduced-motion rule shows every state at once, so the line sat on top of the answer; with reduced motion
   only the answer shows. */
@media (prefers-reduced-motion: reduce) {
  .cv .tdots:is([style*="grid-area:1/1"],[style*="grid-area: 1/1"]) {
    visibility: hidden !important;
  }
}