/* Agentic Workflows — light page (shares its system with the Custom App Builder page). Kizen type (Season Light statements, Booton substance), v6ex line language re-inked for white. */
@font-face{font-family:'Booton';src:url(fonts/booton/Booton-Light.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Booton';src:url(fonts/booton/Booton-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Booton';src:url(fonts/booton/Booton-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Booton';src:url(fonts/booton/Booton-SemiBold.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Season Serif';src:url(fonts/season/SeasonSerif-Light.woff2) format('woff2');font-weight:300;font-display:swap}

:root{
  --bg:#FFFFFF; --s1:#F6F7F9; --s2:#F6F7F9; --s3:#F6F7F9; --aw-panel:#F6F7F9; --tint:#E4F0EF; --mist:#E4F0EF; --mist-2:#E4F0EF;
  --line:#E6E8EB; --line-2:#D4D8DD; --line-3:#C2C8CE;
  --ink:#0B1724; --t2:#3B4550; --t3:#5F6872; --t4:#8A929A;
  --teal:#0C595C; --teal-2:#18696C; --teal-3:#15999D; --aqua:#4CBED2; --mint:#E4F0EF; --mint-2:#E4F0EF; --mint-3:#E4F0EF;
  --coral:#F26C56; --coral-2:#E25A44; --peach:#FDEFE9;
  --navy:#0B1724;
  /* this page's colour: Kizen deep teal for icon grounds and figures; kickers in the lighter teal */
  --accent:#0C595C; --accent-tint:#E4F0EF;
  --serif:'Season Serif',Georgia,'Times New Roman',serif;
  --sans:Booton,Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.23,1,.32,1);
  --wrap:1296px;
  color-scheme:light;
}
*{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html{scroll-padding-top:72px}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Booton's alternates for a, g, r and l (ss01-ss04), everywhere Booton sets type, demos included. The font shorthand
   resets feature settings, so they are set on every element; Season Serif has its own ss01-ss05, so its type and the
   mono lines are left out. */
*{font-feature-settings:'ss01','ss02','ss03','ss04' !important}
.h1,.h1 *,.h2,.h2 *,.cs-banner em,.abh-banner em,.abb-l,.abb-l *{font-feature-settings:normal !important}
.faq .h2{font-feature-settings:'ss01','ss02','ss03','ss04' !important}
html,body{overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img,svg{display:block;max-width:100%}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p{margin:0}
.wrap{width:100%;max-width:calc(var(--wrap) + 48px);margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--teal-3);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px;font-size:14px}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.center{text-align:center}
p,h1,h2,h3,li,dt,dd,summary{text-wrap:balance}
.body,.lede,.qa-a p{text-wrap:pretty}

/* ---------------- type ---------------- */
.h1{font:300 clamp(44px,5.2vw,76px)/1.1 var(--serif);color:var(--ink)}
.h1 span{display:block}
.h2{font:300 clamp(40px,4.4vw,60px)/1.12 var(--serif);color:var(--ink)}
.feat .h2{font-size:clamp(36px,3.5vw,52px)}
.h2-xl{font-size:clamp(40px,4.2vw,62px);line-height:1.08}
.h3{font:500 19px/1.3 var(--sans);color:var(--ink)}
.lede{font:400 18px/1.75 var(--sans);color:var(--t3);max-width:580px;margin:24px auto 0}
.body{font:400 16px/1.65 var(--sans);color:var(--t3)}
.kicker{display:inline-block;padding:10px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px #DDE2E6;font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--teal-3)}
.kicker+.h2{margin-top:20px}
.sec-head .kicker{margin-bottom:0}
#case .sec-head{margin-bottom:26px}
.link{display:inline-flex;align-items:center;gap:6px;color:var(--teal);font-weight:500;transition:color .2s}
.link:hover{color:var(--teal-3)}
.link .chev{width:12px;height:12px}

/* ---------------- buttons ---------------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;height:50px;padding:0 22px;border-radius:999px;font:500 14px/1 var(--sans);white-space:nowrap;
  transition:background .2s ease,color .2s ease,transform .16s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-coral{background:var(--coral);color:#fff;padding-right:6px}
.btn-coral:hover{background:var(--coral-2)}
.btn-quiet{background:rgba(11,23,36,.05);color:var(--ink)}
.btn-quiet:hover{background:rgba(11,23,36,.08)}
.btn-sm{height:38px;padding:0 18px;font-size:14px}
.btn-xs{height:32px;padding:0 14px;font-size:13px}
.btn-sm.btn-coral,.btn-xs.btn-coral{padding-right:16px}
.btn-arrow{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--coral-2)}
.btn-quiet{padding-right:6px}
.btn-quiet .btn-arrow{background:#fff}
/* chevron: slides out right while its twin slides in (v6ex) */
.chev{position:relative;display:inline-block;width:14px;height:14px;overflow:hidden;flex:none}
.chev svg{position:absolute;inset:0;width:14px;height:14px;transition:transform .45s var(--ease)}
.chev .c2{transform:translateX(-120%)}
a:hover .chev .c1,a:focus-visible .chev .c1{transform:translateX(120%)}
a:hover .chev .c2,a:focus-visible .chev .c2{transform:none}
@media (prefers-reduced-motion:reduce){.chev svg{transition:none}}

/* ---------------- header (kizen.com) ---------------- */
.nav{position:relative;z-index:60;background:#fff}
.nav-row{display:flex;align-items:center;height:68px;gap:24px;position:relative;z-index:2}
.brand{display:flex;align-items:center;flex:none;width:86px;height:28px;color:var(--ink)}
.brand-clip{display:block;width:28px;overflow:hidden;transition:width .6s var(--ease)}
.brand .brand-logo{display:block;width:86px;height:28px;flex:none;overflow:visible}
.brand .bm{fill:var(--teal);transform-box:fill-box;transform-origin:center;transition:transform .8s var(--ease)}
.brand .bw{fill:var(--ink);opacity:0;transform:translateX(-10px);transition:opacity .35s ease,transform .6s var(--ease)}
.brand{overflow:hidden}
.brand .brand-logo{clip-path:inset(0 calc(100% - 28px) 0 0);transition:clip-path .6s var(--ease)}
.brand.full .brand-logo,.brand:hover .brand-logo,.brand:focus-visible .brand-logo{clip-path:inset(0 0 0 0)}
.brand.full .bw,.brand:hover .bw,.brand:focus-visible .bw{opacity:1;transform:none;transition-delay:.08s,0s}
.brand.full .bm,.brand:hover .bm,.brand:focus-visible .bm{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.brand .brand-logo,.brand .bw,.brand .bm{transition:none}}
.menu{display:flex;align-items:center;gap:30px;margin:0 auto;font:400 14px var(--sans)}
.menu>a,.dd-t{display:flex;align-items:center;gap:5px;color:var(--ink);transition:color .2s;height:68px}
.menu>a:hover,.dd-t:hover,.dd-t[aria-expanded="true"]{color:var(--teal-3)}
.caret{width:10px;height:10px;opacity:.6;transition:transform .25s var(--ease)}
.dd-t[aria-expanded="true"] .caret{transform:rotate(180deg)}
.nav-cta{display:flex;align-items:center;gap:18px;font:400 14px var(--sans)}
.login-wrap{position:relative}
.burger{display:none;width:40px;height:40px;border-radius:12px;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--ink);border-radius:2px}
.burger span:first-child{top:16px}.burger span:last-child{top:23px}
/* dropdowns: one white sheet drops from under the header */
.dd{position:absolute;left:0;right:0;top:100%;z-index:1;pointer-events:none}
.dd .wrap{position:relative}
.dd-panel{position:absolute;left:24px;right:24px;top:0;background:#fff;border-radius:20px;overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-6px);box-shadow:0 24px 48px -24px rgba(11,23,36,.16);
  transition:opacity .2s ease,transform .3s var(--ease),visibility 0s linear .3s}
.dd-panel.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .25s ease .04s,transform .4s var(--ease),visibility 0s}
.dd-body{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:30px 36px 34px}
.dd-title{font:500 15px var(--sans);color:var(--t4)}
.dd-list{display:flex;flex-direction:column;gap:6px}
.dd-list a{display:flex;align-items:center;gap:14px;font:400 16px/1.3 var(--sans);color:var(--ink);padding:6px 0;transition:color .2s}
.dd-list a:hover{color:var(--teal-3)}
.dd-icons{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dd-icons a{align-items:flex-start;padding:14px;border-radius:14px;transition:background .2s}
.dd-icons a:hover{background:var(--s1);color:var(--ink)}
.dd-icons b{display:block;font-weight:500;margin-bottom:4px}
.dd-icons i{display:block;font-style:normal;font-size:13.5px;line-height:1.45;color:var(--t3)}
.dd-ico{width:48px;height:48px;flex:none;border-radius:12px;background:var(--mint);color:var(--teal);display:grid;place-items:center;transition:background .25s,color .25s}
.dd-ico svg{width:26px;height:26px}
.dd-icons a:hover .dd-ico{background:var(--teal);color:#fff}
.dd-foot{display:flex;align-items:center;justify-content:center;gap:16px;height:58px;background:linear-gradient(90deg,#0C595C,#0E7E83 60%,#159CA0)}
.dd-foot p{font:400 15px var(--sans);color:#fff}
.dd-foot a{display:inline-flex;align-items:center;height:32px;padding:0 16px;border-radius:999px;background:#fff;color:var(--teal);font:500 13.5px var(--sans)}
.dd-small{left:auto;right:-12px;top:calc(100% + 8px);min-width:190px;border-radius:14px}
.dd-small .dd-list{padding:10px 18px}
.dd-small .dd-list a{font-size:14.5px}
@media (prefers-reduced-motion:reduce){.dd-panel,.dd-panel.open,.caret{transition:none}}

/* mobile menu */
.mnav{position:fixed;inset:0;z-index:120;background:#fff;overflow:auto;padding-bottom:40px}
.mnav[hidden]{display:none}
.mn-top{display:flex;align-items:center;justify-content:space-between;height:68px}
.mn-x{width:40px;height:40px;display:grid;place-items:center}
.mn-x svg{width:22px;height:22px}
.mn-body{display:flex;flex-direction:column;padding-top:8px}
.mn-link,.mn-g summary{display:flex;align-items:center;justify-content:space-between;height:56px;font:400 19px var(--sans);list-style:none;cursor:pointer}
.mn-g summary::-webkit-details-marker{display:none}
.mn-g summary::after{content:'';width:9px;height:9px;border-right:1.5px solid var(--t3);border-bottom:1.5px solid var(--t3);transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--ease)}
.mn-g[open] summary::after{transform:rotate(-135deg)}
.mn-g a{display:block;padding:11px 0 11px 14px;color:var(--t2);font-size:16px}
.mn-g[open]{padding-bottom:8px}
.mn-cta{margin-top:28px;height:50px;padding-right:20px}

/* sub-nav */
/* the sub-nav is not there at the top of the page; it slides down once the page is scrolled */
.subbar{position:fixed;top:0;left:0;right:0;z-index:50;background:#fff;
  transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform .45s var(--ease),opacity .3s ease}
.subbar.stuck{transform:none;opacity:1;pointer-events:auto}
.subnav{display:flex;align-items:center;height:52px;gap:24px}
.sub-title{font:500 15px var(--sans);color:var(--ink)}
.subnav nav{position:relative;display:flex;gap:28px;margin-left:auto;font:400 14px var(--sans);align-self:stretch}
.subnav nav a{display:flex;align-items:center;color:var(--t3);transition:color .2s}
.subnav nav a:hover,.subnav nav a.on{color:var(--ink)}
.sub-ind{position:absolute;bottom:-1px;left:0;height:2px;width:0;background:var(--teal);border-radius:2px;transition:transform .45s var(--ease),width .45s var(--ease)}
.sub-cta{opacity:0;transform:translateX(8px);pointer-events:none;transition:opacity .3s ease,transform .45s var(--ease);margin-left:4px}
.subbar.stuck .sub-cta{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.sub-ind,.sub-cta,.subbar{transition:none}}

/* ---------------- hero ---------------- */
.hero{position:relative;padding:104px 0 0;isolation:isolate}
.hero-copy{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
/* the tag from Figma 1574:1678: pale pill, mark and words in one dark teal */
.eyebrow{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 15px;margin-bottom:28px;border-radius:24px;background:#F6F7F9;font:400 18px/1 var(--sans);color:#2B5457}
.eyebrow .kz-mark{width:20px;height:20px}
.hero-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.certs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:22px;font:400 13px var(--sans);color:var(--t3)}
.certs li{display:flex;align-items:center;gap:6px}
.ico-shield{width:16px;height:16px;color:var(--teal-3)}
/* entrance: lines rise in sequence */
.hi{opacity:0;transform:translateY(14px);animation:hi 1s var(--ease) forwards;animation-delay:calc(.12s + var(--i,0) * .09s)}
@keyframes hi{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hi{animation:none;opacity:1;transform:none}}

/* the WorkOS-style band, in Kizen colour: white -> peach whisper -> aqua/teal band -> white, with a fine scanline over it */
.hero-bg,.cta-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
/* the band dissolves into the page instead of ending on the section's edge */
.hero-bg{bottom:-160px;-webkit-mask:linear-gradient(#000 0,#000 58%,transparent 100%);mask:linear-gradient(#000 0,#000 58%,transparent 100%)}
.hb-band{position:absolute;left:50%;top:0;width:max(1680px,124%);height:1180px;transform:translateX(-50%);
  background:radial-gradient(107% 100% at 50% 0,
    #FFFFFF 0%,#FFFFFF 37%,#FEFEFD 43%,#FBFCFB 48%,#F6FAF8 52%,#EEF6F4 55.5%,#E2F1F0 58.5%,
    #CFE9E9 61.5%,#B6DEDF 64%,#9CD2D5 66.3%,#88C9CD 68.2%,#7FC3C8 69.8%,#84C5CA 71.4%,#95CDD1 73.2%,
    #ADD8DB 75.2%,#C5E4E5 77.4%,#D9EEEE 79.6%,#E8F5F4 82%,#F3F9F8 84.5%,#FAFCFC 87.2%,#FFFFFF 90%);
  filter:blur(10px);transform-origin:50% 0}
.hb-lines{position:absolute;left:0;right:0;top:440px;height:640px;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 3px,rgba(255,255,255,.5) 3px,rgba(255,255,255,.5) 4px);
  -webkit-mask:radial-gradient(60% 55% at 50% 52%,#000 0,rgba(0,0,0,.65) 45%,transparent 75%);mask:radial-gradient(60% 55% at 50% 52%,#000 0,rgba(0,0,0,.65) 45%,transparent 75%)}
.hero .hb-band{animation:band-in 1.8s cubic-bezier(.33,1,.68,1) backwards,fade-in .8s linear backwards}
.hero .hb-lines{animation:fade-in 1.4s .3s linear backwards}
@keyframes band-in{from{transform:translateX(-50%) translateY(90px) scaleY(.72)}}
@keyframes fade-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero .hb-band,.hero .hb-lines{animation:none}}
.hero-stage{position:relative;margin-top:58px;padding-bottom:0}
.demo-hero{position:relative;width:100%;max-width:1200px;margin:0 auto;aspect-ratio:1200/440;animation:stage-in 1.3s .45s var(--ease) backwards}
@media (max-width:760px){.demo-hero{max-width:420px}}
@keyframes stage-in{from{opacity:0;transform:translateY(40px) scale(.97)}}
@media (prefers-reduced-motion:reduce){.demo-hero{animation:none}}

/* ---------------- trusted ---------------- */
.trusted{padding:64px 24px 0;text-align:center}
.trusted-h{font:400 15px var(--sans);color:var(--t3)}
.logos{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin-top:22px}
.logos li{height:72px;display:grid;place-items:center}
.logos .dup{display:none}
@media (max-width:760px){.logos .dup{display:grid}}
.logos img{max-height:30px;width:auto}
.logos img[alt="AmeriLife"],.logos img[alt="Harbor Health"]{max-height:15px}
.logos img[alt="Pinnacle Financial Services"]{max-height:36px}

@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.logos{animation:none!important}}
/* ---------------- sections ---------------- */
.sec{padding:140px 24px 0}
.sec-head{max-width:1200px;margin:0 auto 56px;text-align:center}
/* section titles run in two lines on wide screens; on phones they wrap as they fit */
.sec-head .h2{text-wrap:balance}
@media (max-width:760px){.br2{display:none}}
.panel{background:var(--s1);border-radius:20px}

/* popular: five cards, the open one widens and plays its one idea */
.sec-sub{margin-top:18px;font:400 17px/1.6 var(--sans);color:var(--t3)}
.wf{display:flex;gap:12px;height:470px}
.wf-card{position:relative;flex:1 1 0;min-width:0;display:block;padding:0;border-radius:26px;background:var(--s1);text-align:left;overflow:hidden;cursor:pointer;
  transition:flex-grow .8s var(--ease),background .4s ease}
.wf-card.on{flex-grow:3.6}
.wf-ico{position:absolute;left:28px;top:28px;display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:#fff;color:var(--accent);transition:background .4s ease,color .4s ease}
.wf-ico .ico{width:26px;height:26px}
.wf-card.on .wf-ico{background:var(--accent);color:#fff}
.wf-t{position:absolute;left:28px;right:24px;bottom:28px;font:400 19px/1.3 var(--sans);color:var(--ink);text-wrap:balance}
.wf-card.on .wf-t{font-size:22px;right:40%}
.wf-stage{position:absolute;left:28px;right:28px;top:108px;bottom:96px;opacity:0;transition:opacity .35s ease}
.wf-card.on .wf-stage{opacity:1;transition:opacity .6s ease .35s}
.wf-in{position:absolute;inset:0;display:block;font-family:var(--sans)}
/* a page: white sheet, a few soft lines */
.pg{position:absolute;display:flex;flex-direction:column;gap:9px;width:84px;height:108px;padding:16px 12px;border-radius:12px;background:#fff;box-shadow:0 14px 30px -18px rgba(11,23,36,.3)}
.pg i{display:block;height:6px;border-radius:3px;background:#E8ECEC}
.pg i:nth-child(2){width:72%}.pg i:nth-child(4){width:58%}
/* classification */
.wc-pile{position:absolute;left:0;top:30px;width:110px;height:140px}
.wc-pile .pg{left:0;top:0}.wc-pile .p2{left:8px;top:-8px}.wc-pile .p3{left:16px;top:-16px}
.wc-fly{position:absolute;left:16px;top:14px;transform-origin:0 0;will-change:transform}
.wc-fly .pg{position:relative}
.wc-trays{position:absolute;right:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:12px;width:58%}
.wc-tray{display:flex;align-items:center;justify-content:space-between;height:62px;padding:0 22px;border-radius:16px;background:#fff;transition:background .35s ease}
.wc-tray b{font:400 17px var(--sans);color:var(--ink)}
.wc-tray em{font:400 22px var(--sans);font-style:normal;color:var(--teal);font-variant-numeric:tabular-nums}
.wc-tray.hit{background:#DCEFEF}
/* extraction */
.we-doc{position:absolute;left:0;top:0;bottom:0;width:44%;display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:18px;background:#fff}
.we-doc b{font:500 15px var(--sans);color:var(--ink);margin-bottom:6px}
.we-doc i{position:relative;display:block;height:8px;border-radius:4px;background:#E8ECEC;overflow:hidden;--hl:0}
.we-doc i::after{content:'';position:absolute;inset:0;background:var(--teal-3);transform-origin:0 50%;transform:scaleX(var(--hl))}
.we-doc i:nth-of-type(3){width:70%}.we-doc i:nth-of-type(5){width:60%}
.we-rec{position:absolute;right:0;top:0;bottom:0;width:50%;display:flex;flex-direction:column;justify-content:center;gap:12px}
.we-row{display:flex;flex-direction:column;gap:6px;padding:18px 22px;border-radius:16px;background:#fff;opacity:0}
.we-row span,.wm-row span,.wq-row span,.wq-total span{font:400 14px var(--sans);color:var(--t3)}
.we-row strong{font:400 24px var(--sans);color:var(--ink);white-space:nowrap}
/* missing data */
.wm-form{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;gap:10px}
.wm-row{position:relative;display:flex;align-items:center;justify-content:space-between;height:50px;padding:0 20px;border-radius:14px;background:#fff;--ring:0;transition:background .35s ease}
.wm-row strong{font:400 16px var(--sans);color:var(--ink)}
.wm-row.empty strong{width:120px;height:10px;border-radius:5px;background:#F2F4F4}
.wm-row.empty::after{content:'';position:absolute;inset:-4px;border-radius:18px;box-shadow:0 0 0 2px rgba(21,153,157,var(--ring))}
.wm-row.flag{background:#DCEFEF}
.wm-note{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;font:400 16px var(--sans);color:var(--teal);opacity:0}
.wm-note .gi{width:20px;height:20px}
/* draft */
.wd-mail{position:absolute;inset:0;display:flex;flex-direction:column;padding:24px 26px;border-radius:18px;background:#fff}
.wd-mail b{font:500 16px var(--sans);color:var(--ink)}
.wd-lines{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.wd-lines i{display:block;height:8px;width:var(--w);border-radius:4px;background:#E8ECEC;transform-origin:0 50%;transform:scaleX(var(--k,0))}
.wd-foot{display:flex;align-items:center;gap:10px;margin-top:auto;font:400 15px var(--sans);color:var(--ink);opacity:0}
.wd-foot .mr-av{display:grid}
/* calculations */
.wk-calc{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px}
.wq-row{display:flex;align-items:center;justify-content:space-between;height:54px;padding:0 22px;border-radius:14px;background:#fff}
.wq-row strong{font:400 18px var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.wq-total{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px 16px;margin-top:auto;padding:20px 22px;border-radius:16px;background:var(--teal)}
.wq-total span{color:rgba(255,255,255,.8)}
.wq-total strong{font:400 30px var(--sans);color:#fff;font-variant-numeric:tabular-nums}
.wq-bar{grid-column:1/-1;height:6px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.wq-bar i{display:block;height:100%;border-radius:3px;background:#fff;transform-origin:0 50%;transform:scaleX(0)}

/* two-column feature rows */
.feat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center;padding:150px 24px 0}
.feat-r .feat-copy{order:0}
.feat-copy .h2{max-width:520px}
.feat-copy .body{margin-top:22px;max-width:460px}
.feat-art{margin:0;position:relative;aspect-ratio:7/5;overflow:hidden}
.art{position:absolute;inset:0}
.art svg{width:100%;height:100%}
.ticks{margin-top:40px;display:flex;flex-direction:column;gap:22px}
.ticks li{display:flex;align-items:center;gap:16px;font:400 17px/1.45 var(--sans);color:var(--t4);transition:color .4s ease}
.tick-ico{display:grid;place-items:center;flex:none;color:var(--t4);transition:color .4s ease}
.tick-ico .ico{width:24px;height:24px}
.ticks li.on{color:var(--ink)}
.ticks li.on .tick-ico{color:var(--teal)}
.ship .h2 em{display:block;font-style:normal;color:var(--teal-3)}

/* show their work: three RBAC-style panels */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard-ui{position:relative;aspect-ratio:4/3.1;overflow:hidden;margin-bottom:28px}
.tcard .kicker{margin-bottom:12px}
.tcard .h3{font-size:21px}
.dots{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.dots li{position:relative;padding-left:18px;font:400 15px/1.55 var(--sans);color:var(--t3)}
.dots li::before{content:'';position:absolute;left:2px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--teal-3)}
/* the security strip: one hairline frame, the shield leading it, the link at its far end */
.trust-line{display:flex;align-items:center;gap:22px;margin:72px auto 0;padding:18px 30px 18px 18px;border:1.5px solid #E2E5E8;border-radius:22px}
.trust-line p{display:flex;flex-wrap:wrap;align-items:center;gap:8px 32px;font:400 15px/1.5 var(--sans);color:var(--t3)}
.trust-line p span:first-child{color:var(--ink)}
.tl-shield{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:16px;background:#E4F0EF;color:#0C595C}
.tl-shield .ico{width:26px;height:26px}
.trust-line>.link{margin-left:auto;flex:none;font:400 15px/1.5 var(--sans)}
.quiet3{display:flex;flex-direction:column;gap:18px;margin-top:40px}
.quiet3 li{display:flex;align-items:flex-start;gap:14px;font:400 15px/1.5 var(--sans);color:var(--t3)}
.quiet3 .ico{width:22px;height:22px;flex:none;color:var(--teal);margin-top:1px}
.quiet3 b{display:block;font-weight:500;color:var(--ink)}
.dtabs{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:40px}
.dtab{position:relative;padding:10px 0 14px;font:400 20px/1.3 var(--sans);color:var(--t4);transition:color .35s ease}
.dtab i{position:absolute;left:0;right:0;bottom:4px;height:2px;border-radius:2px;background:var(--line)}
.dtab i::after{content:'';position:absolute;inset:0;border-radius:2px;background:var(--teal);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.dtab.on{color:var(--ink)}
.dtab:not(.on) i{opacity:0}
#work .center{margin-top:34px}

/* prompt to production */
.build{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bcard-ui{position:relative;aspect-ratio:4/3.3;border-radius:20px;overflow:hidden;margin-bottom:26px;background:var(--s1)}
.bcard .body{margin-top:10px;max-width:360px}

/* kizen difference */
.diff{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:22px;align-items:stretch}
.dcard{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 30px 36px;border-radius:28px;background:var(--s1);cursor:pointer;transition:transform .45s var(--ease);overflow:hidden;outline-offset:4px}
.dcard h3{font:400 26px var(--sans);color:var(--ink)}
.dsub{margin-top:6px;font:400 15px var(--sans);color:var(--t3)}
/* Legacy's three words light in turn with the moment that names them */
.dsub span{transition:color .35s ease}
.dsub span.lit{color:var(--ink)}
.art-diff{position:relative;inset:auto;width:112%;margin:8px -6% 6px;aspect-ratio:360/300}
.dfail{margin-top:auto;font:400 14px/1.5 var(--sans);color:var(--t3)}
.dfail b{display:block;margin-bottom:2px;font:600 11px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--t4)}
.dcard-k{background:var(--teal);color:#fff}
.dcard.on{transform:translateY(-6px) scale(1.01)}
@media (prefers-reduced-motion:reduce){.dcard{transition:none}.dcard.on{transform:none}}
.dcard-k h3{color:#fff;font-size:30px}
.dcard-k .dsub{color:rgba(255,255,255,.78)}
.dpoints{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;padding-top:24px}
.dpoints li{display:flex;flex-direction:column;align-items:center;gap:10px;font:400 13.5px/1.35 var(--sans);color:rgba(255,255,255,.92)}
.dpoints .ico{width:26px;height:26px;color:#fff}

/* case study: three ways to classify a loan packet, as one table; the bars carry the comparison */
.case-h em{display:block;font-style:normal;color:var(--teal-3)}
.cmp{max-width:1120px;margin:0 auto;padding:40px 28px 28px;border-radius:28px;background:var(--s1)}
.cmp-h,.cmp-r{display:grid;grid-template-columns:minmax(260px,1.3fr) 1fr 1fr;gap:0 56px;align-items:center}
.cmp-r{align-items:start}
.cmp-h{padding:0 32px 8px;font:400 13.5px/1.3 var(--sans);color:var(--t4)}
.cmp-r{padding:28px 32px;border-radius:20px;opacity:0;transform:translateY(14px);
  transition:opacity .6s ease calc(var(--i) * .12s),transform .9s var(--ease) calc(var(--i) * .12s)}
.cmp.in .cmp-r{opacity:1;transform:none}
.cmp-r+.cmp-r{margin-top:6px}
.cmp-name b{display:flex;align-items:center;gap:10px;font:400 20px/1.3 var(--sans);color:var(--ink)}
.cmp-name>span{display:block;margin-top:4px;font:400 14px/1.45 var(--sans);color:var(--t3)}
.cmp-name strong{font-weight:500;color:var(--ink)}
.cmp-name>.cmp-acc{margin-top:10px;font-size:15px;color:var(--teal)}
.cmp-v em{display:block;font:400 28px/1.1 var(--sans);font-style:normal;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.cmp-v .bar{position:relative;display:block;height:10px;margin-top:14px}
.cmp-v .bar i{position:absolute;left:0;top:0;bottom:0;width:max(8px,calc(var(--w) * 80%));border-radius:5px;background:#D4D8DD;transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.3s var(--ease) calc(.4s + var(--i) * .18s)}
.cmp.in .cmp-v .bar i{transform:none}
/* bars are drawn to scale in their column (--w = value / column max): 90 min is half of 180, < 7 min is 7/180 */
.cmp-n{display:block;margin-top:10px;font:400 14px/1.45 var(--sans);color:var(--t3)}
.cl{display:none}
/* Kizen's row: the one product surface on the panel, a soft white card once the bars have landed */
.cmp-k{transition:opacity .6s ease calc(var(--i) * .12s),transform .9s var(--ease) calc(var(--i) * .12s),background-color .7s ease 1.5s,box-shadow .7s ease 1.5s}
.cmp.in .cmp-k{background-color:#fff;box-shadow:0 1px 2px rgba(11,23,36,.04),0 30px 60px -36px rgba(11,23,36,.22)}
.cmp-k .cmp-name b,.cmp-k .cmp-v em,.cmp-k .cmp-n{color:var(--teal)}
.cmp-k .cmp-v .bar i{background:var(--teal)}
.ck-mark{display:inline-grid}
.ck-mark .kz-mark{width:20px;height:20px;color:var(--teal)}
.cmp-fig{display:flex;align-items:baseline;gap:8px;margin-top:10px;font:400 14px/1.45 var(--sans);color:var(--teal)}
.cmp-fig b{font:400 20px/1.2 var(--sans);color:var(--teal);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.cmp-r,.cmp-v .bar i{transition:none}}

/* connect · build · stay in control */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hcard-art{position:relative;aspect-ratio:360/220;overflow:hidden;margin-bottom:26px}
.hcard .body{margin-top:10px;max-width:360px}

/* ---------------- custom app builder ---------------- */
.feat-cta{margin-top:30px}
.hero-stage .demo-hero-app{position:relative;aspect-ratio:1120/640}
.hero-stage .demo-hero-app>*{position:absolute;inset:0}

/* frontend + backend: Natively Agentic leads, then two groups */
.fb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 56px;max-width:1200px;margin:0 auto}
/* Frontend + Backend: three columns, each a still on a panel (as the three ways to build), then its line, title and points */
.pf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pf-ui{position:relative;aspect-ratio:480/300;border-radius:20px;overflow:hidden;background:var(--s1)}
.pf-ui .demo{position:absolute;inset:0}
.pf-k{margin-top:28px;font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.pf-h{margin-top:14px;font:400 clamp(24px,2.1vw,28px)/1.2 var(--sans);letter-spacing:-1px;color:var(--ink);text-wrap:balance}
.pf-list{margin-top:20px;display:flex;flex-direction:column;gap:16px}
.pf-list b{display:block;font:400 16px/1.3 var(--sans);color:var(--ink)}
.pf-list span{display:block;margin-top:3px;font:400 14px/1.5 var(--sans);color:var(--t3)}
/* a section line set in a pill, as Figma draws it for Frontend + Backend */
.fb-group{padding-top:10px}
.fb-h{margin-bottom:10px;font:400 15px/1.3 var(--sans);color:var(--t4)}
.fb-list li{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;row-gap:4px;padding:18px 0}
.fb-list .ico{grid-row:1/3;width:44px;height:44px;padding:11px;border-radius:14px;background:var(--accent-tint);color:var(--accent)}
.fb-list b{font:400 18px/1.3 var(--sans);color:var(--ink)}
.fb-list span{font:400 15px/1.5 var(--sans);color:var(--t3)}

/* for developers: nine plain items, three by three */
.dev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 auto}
.dev li{padding:30px 28px 32px;border-radius:20px;background:#121F2C;transition:background .35s ease}
.dev li:hover{background:#172735}
.dev li>.ico{display:block;width:52px;height:52px;padding:13px;margin-bottom:22px;border-radius:14px;background:var(--accent);color:#fff}
.dev h3{font:400 20px/1.3 var(--sans);color:#fff}
.dev p{margin-top:8px;max-width:300px;font:400 15.5px/1.6 var(--sans);color:#A3AEB7}
/* For developers: the IT section, on the page's ink */
.sec-dark{position:relative;margin-top:140px;padding:128px 0 136px;background:#0B1724;color:#fff}
.sec-dark .h2{color:#fff}
.sec-dark .kicker{color:#5CCBCF;box-shadow:inset 0 0 0 1px #26394A}
.sec-dark .dev{gap:16px}
.dev-sec{display:flex;align-items:center;flex-wrap:wrap;gap:20px 56px;margin:16px auto 0;padding:52px 40px;border-radius:20px;background:#121F2C}
/* the certifications sit over the deployment line, one column between the heading and the link */
.dev-sec-m{flex:1;min-width:240px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.dev-sec-h{display:flex;align-items:center;gap:12px;font:400 18px/1 var(--sans);color:#fff}
.dev-sec-h .ico{width:40px;height:40px;padding:10px;border-radius:12px;background:var(--accent);color:#fff}
.dev-badges{display:flex;gap:12px}
.dev-badges img{display:block;width:40px;height:40px}
.dev-sec-p{font:400 15px/1.5 var(--sans);color:#A3AEB7}
.dev-sec-a{color:#5CCBCF}
@media (max-width:760px){.dev-sec{gap:20px 28px;padding:28px 22px}.dev-sec-m{min-width:0;flex-basis:100%}}

/* customer story: one paragraph, then three results, each with its before and after */
.cs{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;max-width:1296px;margin:0 auto}
.cs-copy{padding:0}
.cs-p{font:400 21px/1.6 var(--sans);color:var(--t3);text-wrap:pretty}
.cs-p b{font-weight:400;color:var(--ink)}
.cs-h{margin-top:44px;font:400 22px/1.3 var(--sans);color:var(--ink)}
.cs-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.cs-figs div{display:flex;flex-direction:column;justify-content:flex-end;min-height:150px;padding:22px 20px;border-radius:20px;background:var(--s1)}
.cs-figs dd{margin:0;font:400 50px/1 var(--sans);color:var(--accent);font-variant-numeric:tabular-nums}
.cs-figs [data-count]{display:inline-block}
.cs-figs dt{margin-top:12px;font:400 16px/1.35 var(--sans);color:var(--ink)}
.cs-art{position:relative;margin:0;padding:28px;border-radius:20px;background:var(--s1)}

.cs-fitbox{position:relative;overflow:hidden;border-radius:16px;box-shadow:0 1px 2px rgba(11,23,36,.05),0 30px 60px -34px rgba(11,23,36,.28)}
.cs-fit{position:absolute;left:0;top:0;width:880px;transform-origin:0 0}
/* the commissions application, redrawn in the page's UI: the same structure and words as the product */
.cs-dash{position:relative;padding-bottom:18px;background:#F2F4F5;font-family:var(--sans)}
.cs-nav{display:flex;align-items:center;gap:16px;height:46px;padding:0 18px;background:#fff;font:400 11.5px/1 var(--sans);color:var(--t3);white-space:nowrap}
.cs-mark{display:grid;color:var(--accent)}
.cs-mark .kz-mark{width:20px;height:20px}
.cs-av{display:grid;place-items:center;width:26px;height:26px;margin-left:auto;border-radius:50%;background:var(--accent);font:500 11px/1 var(--sans);font-style:normal;color:#fff}
.cs-banner{position:relative;height:186px;margin:18px 22px 0;border-radius:16px;color:#fff;background:var(--accent)}
.cs-banner b{position:absolute;left:24px;bottom:66px;font:400 24px/1.2 var(--sans)}
.cs-banner span{position:absolute;left:24px;bottom:44px;font:400 13px/1.2 var(--sans);color:#D6EEEF}
.cs-state{position:absolute;left:24px;bottom:18px;display:flex;align-items:center;gap:8px;font:400 12px/1 var(--sans);color:#E6F5F5}
.cs-state i{width:8px;height:8px;border-radius:50%;background:#4ACB86}
.cs-banner em{position:absolute;right:26px;bottom:18px;font:300 42px/1 var(--serif);font-style:normal;color:#fff}
.cs-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 22px 0}
.cs-kpis div{padding:18px 22px;border-radius:14px;background:#fff}
.cs-kpis span{display:block;font:400 12px/1.2 var(--sans);color:var(--t4)}
.cs-kpis b{display:block;margin-top:10px;font:400 32px/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.cs-learnhead{margin:22px 22px 0}
.cs-learnhead b{display:block;font:400 19px/1.2 var(--sans);color:var(--ink)}
.cs-learnhead span{display:block;margin-top:5px;font:400 12px/1.2 var(--sans);color:var(--t4)}
.cs-learn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:12px 22px 0;padding:22px 24px;border-radius:14px;background:#fff}
.cs-learn h5{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:400 14px/1.2 var(--sans);color:var(--ink)}
.cs-learn .csi{flex:none;width:16px;height:16px;color:var(--accent)}
.cs-feature{position:relative;margin-bottom:6px;padding:14px 56px 14px 16px;border-radius:12px;background:var(--s1)}
.cs-feature span{display:block;font:400 10.5px/1.2 var(--sans);color:var(--t4)}
.cs-feature b{display:block;margin-top:4px;font:400 14px/1.3 var(--sans);color:var(--ink)}
.cs-play{position:absolute;right:14px;top:50%;display:grid;place-items:center;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--accent)}
.cs-learn .cs-play .csi{width:14px;height:14px;color:#fff}
.cs-learn p{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:10px 0;font:400 12.5px/1.3 var(--sans);color:var(--t2)}
.cs-learn p .csi{width:15px;height:15px}
.cs-learn>div:last-child p{display:block}
.cs-learn small{display:block;margin-top:3px;font:400 11px/1.2 var(--sans);color:var(--t4)}
.cs-news{margin:14px 22px 0;padding:14px 18px;border-radius:14px;background:#fff;font:400 13px/1.2 var(--sans);color:var(--ink)}
.cs-ki{position:absolute;right:22px;bottom:22px;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--accent);color:#fff;box-shadow:0 12px 24px -10px rgba(11,23,36,.35)}
.cs-ki .kz-mark{width:34px;height:34px}

/* the Kizen difference: three reasons, each with its line icon */
.kd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1296px;margin:0 auto}
.kd{gap:22px}
.kd-ui{display:grid;place-items:center;aspect-ratio:480/300;border-radius:20px;background:var(--s1)}
.kd-ico{display:grid;place-items:center;width:128px;height:128px;border-radius:32px;background:#fff;color:var(--accent)}
.kd-svg{width:80px;height:80px}
.kd h3{margin-top:28px;font:400 clamp(26px,2.3vw,32px)/1.2 var(--sans);letter-spacing:-1px;color:var(--ink)}
.kd p{max-width:380px;margin-top:14px;font:400 17px/1.65 var(--sans);color:var(--t3);text-wrap:pretty}

/* faq: the title column carries a pointer to the docs */
.faq-side{position:sticky;top:90px}
.faq .faq-side .h2{position:static}
.faq-sub{margin-top:18px;font:400 16px/1.6 var(--sans);color:var(--t3)}
.cta-p{max-width:560px;margin:22px auto 0;text-align:center;font:400 18px/1.65 var(--sans);color:var(--t2)}

/* faq */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;align-items:start}
.faq .h2{font:400 clamp(36px,3.4vw,48px)/1.1 var(--sans);position:sticky;top:90px}
.faq-list{display:flex;flex-direction:column;gap:4px}
.qa{border-radius:0;background:none}
.qa summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;font:400 19px/1.4 var(--sans);color:var(--ink);cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{position:relative;width:30px;height:30px;flex:none;border-radius:50%;background:var(--s1);transition:background .25s,transform .45s var(--ease)}
.qa summary i::before,.qa summary i::after{content:'';position:absolute;left:50%;top:50%;width:11px;height:1.4px;margin:-.7px 0 0 -5.5px;background:var(--ink);border-radius:1px;transition:transform .45s var(--ease),background .25s}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i{transform:rotate(45deg);background:var(--ink)}
.qa[open] summary i::before,.qa[open] summary i::after{background:#fff}
.qa-a{overflow:hidden}
.qa-a p{padding:0 72px 24px 0;font:400 16px/1.7 var(--sans);color:var(--t3)}
@media (prefers-reduced-motion:reduce){.qa summary i,.qa summary i::before,.qa summary i::after{transition:none}}

/* cta */
.cta{position:relative;margin-top:150px;padding:150px 0 170px;isolation:isolate;overflow:hidden}
.cta-bg{-webkit-mask:linear-gradient(#000 62%,transparent 96%);mask:linear-gradient(#000 62%,transparent 96%)}
.cta-bg .hb-band{top:-48px;bottom:auto;transform-origin:50% 50%;transform:translateX(-50%) scaleY(-1);opacity:.9}
.cta-bg .hb-lines{top:120px;bottom:auto;height:520px}
.cta-in .hero-ctas{margin-top:38px}

/* ---------------- footer (finished design) ---------------- */
.footer{padding-bottom:24px}
.fbox{background:var(--navy);color:#fff;border-radius:30px;padding:56px 56px 26px}
.ftop{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,8fr);gap:40px}
.ftag{font:300 34px/1.15 var(--sans);color:#fff}
.fcols{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 28px}
.fcol{display:flex;flex-direction:column;gap:10px}
.fh{font:500 15px var(--sans);color:#fff;margin-bottom:4px}
.fh2{margin-top:22px}
.fcol a{font:400 14px/1.4 var(--sans);color:#A7B0BA;transition:color .2s}
.fcol a.fh{color:#fff}
.fcol a:hover{color:#fff}
.hiring{display:inline-flex;align-items:center;height:20px;padding:0 8px;margin-left:6px;border-radius:999px;background:#1E7F80;color:#fff;font-size:11.5px}
.fmid{margin-top:48px}
.flogo{display:inline-flex;color:#fff}
.flogo .brand-logo{width:150px;height:auto}
.flogo .bm,.flogo .bw{fill:#fff}
.fbadges{display:flex;align-items:center;justify-content:space-between;margin-top:36px}
.fcerts{display:flex;gap:10px}
.fcerts img{width:44px;height:44px}
.faward{width:34px;height:auto}
.fbottom{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font:400 13px var(--sans);color:#8D97A2}
.fbottom .legal{margin-left:auto}
.fbottom a{transition:color .2s}
.fbottom a:hover{color:#fff}
.social{display:flex;gap:22px}

/* ---------------- product demos (Stageshow, demos.js) ---------------- */
.demo{position:absolute;inset:0}
.feat-art .demo{inset:0}
.tcard-ui .demo,.bcard-ui .demo{inset:0}

/* ---------------- scroll reveals ---------------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform 1s var(--ease);transition-delay:calc(var(--d,0) * .08s)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{transition:opacity .4s ease;transform:none}}

/* ---------------- responsive ---------------- */
@media (max-width:1100px){
  .menu,.login-wrap{display:none}
  .nav-cta{margin-left:auto}
  .burger{display:block}
  .logos{display:flex;flex-wrap:wrap;justify-content:center}
  .logos li{flex:0 0 calc(25% - 8px)}
  .feat{grid-template-columns:1fr;gap:40px}
  .feat-copy .h2,.feat-copy .body{max-width:640px}
  .trio,.build,.how{grid-template-columns:1fr;max-width:620px;margin:0 auto}
  .diff{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .dcard-k{margin:0}
  .cmp-h{display:none}
  .cmp{padding:12px}
  .cmp-r{grid-template-columns:1fr 1fr;gap:20px 22px;padding:20px}
  .cmp-name,.cmp-n{grid-column:1/-1}
  .cl{display:block;margin-bottom:6px;font:400 12.5px/1.3 var(--sans);color:var(--t4)}
  .cmp-v em{font-size:24px}
  .faq{grid-template-columns:1fr;gap:28px}
  .faq-side{position:static}
  .fb{grid-template-columns:1fr;gap:0}
  .dev{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px}
  .cs{grid-template-columns:minmax(0,1fr)}
  .cs{gap:40px}
  .cs-p{font-size:18px}
  .cs-figs div{min-height:0}
  .cs-figs dd{font-size:42px}
  .cs-art{padding:20px}
  .kd{grid-template-columns:1fr;gap:44px}
  .pf{grid-template-columns:1fr;gap:56px}
  .cs-figs div{background:var(--s1)}
  .sec-dark{padding:96px 0 104px}
  .faq .h2{position:static}
  .ftop{grid-template-columns:1fr}
}
@media (max-width:560px){#models .feat-art{aspect-ratio:358/400}#learn .feat-art{aspect-ratio:358/420}}
@media (max-width:560px){.cs-figs{grid-template-columns:1fr}.cs-art{padding:12px}}
@media (max-width:900px){
  .wf{flex-direction:column;height:auto}
  .wf-card{flex:none;height:96px;transition:height .7s var(--ease),background .4s ease}
  .wf-card.on{height:470px}
  .wf-ico{top:20px;left:20px}
  .wf-t,.wf-card.on .wf-t{left:96px;right:20px;top:20px;bottom:auto;min-height:56px;display:flex;align-items:center;font-size:18px}
  .wf-stage{left:20px;right:20px;top:100px;bottom:22px}
}
@media (max-width:760px){
  .wrap{padding:0 16px}
  .hero{padding-top:64px}
  .hero-stage{margin-top:52px}
  .trust-line{align-items:flex-start;padding:16px 20px 18px 16px;gap:16px}
  .trust-line{flex-wrap:wrap}
  .trust-line p{flex:1;flex-direction:column;align-items:flex-start;gap:6px}
  .trust-line>.link{flex-basis:100%;margin-left:68px}
  .subnav nav{display:none}
  .sub-cta{margin-left:auto}
  .trusted{overflow:hidden}
  .logos{display:flex;flex-wrap:nowrap;width:max-content;gap:44px;animation:marquee 34s linear infinite}
  .logos li{flex:none;height:56px}
  .trusted .logos-mask{-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .certs{gap:6px 14px;font-size:12px}
  .sec,.feat{padding-top:96px}
  .trusted{padding-left:16px;padding-right:16px}
  .sec,.feat{padding-left:16px;padding-right:16px}
  .fbox{padding:40px 22px 22px;border-radius:24px}
  .fcols{grid-template-columns:1fr 1fr}
  .fbottom .legal{margin-left:0}
  .qa summary{font-size:17px}
  .qa-a p{padding-right:8px}
  .hb-band{height:980px}
  .cta{padding:110px 0 120px}
}

.cta .btn-quiet{background:#fff}
.cta .btn-quiet .btn-arrow{background:var(--s1)}
/* the light button: same build as the coral one (words, then a round arrow), solid, no shadow */
.btn-white{background:#EEF1F3;color:var(--ink);padding-right:6px}
.btn-white:hover{background:#E4E8EB}
.btn-white .btn-arrow{background:var(--accent);color:#fff}

@media (max-width:760px){.dev{grid-template-columns:1fr;gap:36px}}
@media (max-width:600px){.hero-stage .demo-hero-app{aspect-ratio:360/700}}



/* ---------------- agentic workflows ---------------- */
/* hero: a loan packet runs through five workflow steps; each lights as the packet passes and keeps its result */
.hero .lede{max-width:640px;text-wrap:balance}
.flow{position:relative;max-width:1200px;margin:0 auto;padding:56px 44px;border-radius:28px;background:var(--s1);animation:stage-in 1.3s .45s var(--ease) backwards}
.fl-row{position:relative;z-index:2;display:grid;grid-template-columns:64px repeat(5,minmax(0,1fr)) 64px;align-items:center;gap:34px}
.fl-end{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:#fff;color:var(--accent)}
.fl-end .ico{width:28px;height:28px}
.fl-out{border-radius:50%;background:var(--accent);color:#fff;transition:transform .6s var(--ease)}
.fl-out .kz-mark{width:32px;height:32px}
.flow.fin .fl-out{transform:scale(1.1)}
.fl-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 10px 20px;border-radius:20px;background:#fff;text-align:center;transition:background-color .3s ease}
.fl-ico{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;background:var(--accent-tint);color:var(--accent);transition:background-color .3s ease,color .3s ease}
.fl-ico .ico{width:22px;height:22px}
.fl-node b{font:400 17px/1.2 var(--sans);color:var(--ink);transition:color .3s ease}
.fl-node em{display:block;font:400 13px/16px var(--sans);font-style:normal;color:var(--accent);white-space:nowrap;clip-path:inset(0 100% 0 0);transition:clip-path .5s var(--ease)}
/* the result's place, held by a quiet bar until the step has run */
.fl-node::after{content:'';position:absolute;left:50%;bottom:24px;width:64px;height:8px;margin-left:-32px;border-radius:4px;background:#EEF0F2;transition:background-color .3s ease}
.fl-node.on{background:var(--accent)}
.fl-node.on b{color:#fff}
.fl-node.on .fl-ico{background:#18696C;color:#fff}
.fl-node.on::after{background:#18696C}
.fl-node.ok .fl-ico{background:var(--accent);color:#fff}
.fl-node.ok em{clip-path:inset(0 0 0 0)}
.fl-node.ok::after{visibility:hidden}
.fl-line{position:absolute;z-index:0;left:0;top:0;width:0;height:2px;border-radius:1px;background:#DDE2E6}
.fl-line i{position:absolute;inset:0;border-radius:inherit;background:var(--accent);transform-origin:0 0;transform:scale(var(--px,0),var(--py,1))}
.fl-tok{position:absolute;z-index:1;left:0;top:0;display:flex;flex-direction:column;justify-content:center;gap:4px;width:28px;height:34px;margin:-17px 0 0 -14px;padding:0 7px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--accent);will-change:transform}
.fl-tok i{height:2px;border-radius:1px;background:var(--accent)}
.fl-tok i:nth-child(2){width:70%}
@media (max-width:760px){
  .flow{padding:20px 16px}
  .fl-row{grid-template-columns:1fr;gap:12px}
  .fl-end{margin-left:6px}
  .fl-node{flex-direction:row;gap:14px;padding:14px 16px;text-align:left}
  .fl-node b{flex:1;font-size:16px}
  .fl-node::after{left:auto;right:16px;bottom:auto;top:50%;margin:-4px 0 0}
}

/* governance: the page's dark band, its three columns as the sister page's developer cards */
.sec-dark{--accent:#15999D}
.sec-dark .sec-sub{color:#A3AEB7}
.gov>li{display:flex;flex-direction:column}
.gov .gov-k{max-width:none;margin:0 0 12px;font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#5CCBCF}
.gov h3{margin:0 0 18px;font:400 22px/1.3 var(--sans);color:#fff}
.gov .dots li{padding:0 0 0 18px;border-radius:0;background:none;font:400 15.5px/1.55 var(--sans);color:#A3AEB7}
.gov .dots li:hover{background:none}
.gov .dots{gap:10px;margin-top:0}
.gov-cta{margin-top:40px;text-align:center}
.gov .dots li::before{background:#5CCBCF}
.dev-badges{flex-wrap:wrap}

/* case study: who it was for, under the table */
.cmp-cap{max-width:1120px;margin:30px auto 0;text-align:center;font:400 19px/1.5 var(--sans);color:var(--t2)}
@media (max-width:760px){.cmp-cap{font-size:17px}}
.cmp [data-count]{display:inline-block}

/* governance: the Security strip set like the three cards above it (icon tile, title, text), its badges larger */
#governance .dev-sec-h{gap:16px;font:400 22px/1.3 var(--sans)}
#governance .dev-sec-h .ico{width:52px;height:52px;padding:13px;border-radius:14px}
#governance .dev-sec-p,#governance .dev-sec-a{font:400 15.5px/1.55 var(--sans)}
#governance .dev-badges{gap:14px}
#governance .dev-badges img{width:56px;height:56px}


/* the pages' CTAs in the site header's button style (www-staging.kizen.com): Try for free white with a coral edge,
   the others solid coral; the site's Switzer, no arrows. Each button keeps its own size. */
.btn{font-family:Switzer,Booton,sans-serif;font-weight:400;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.btn-tff{background:#fff;color:#0B1724;box-shadow:inset 0 0 0 1px #F26C56}
.btn-tff:hover{background:#F26C56;color:#fff}
.btn.btn-coral{padding-right:22px;background:#F26C56;color:#fff;box-shadow:inset 0 0 0 1px #F26C56}
.btn.btn-coral:hover{background:#E45A43;box-shadow:inset 0 0 0 1px #E45A43}
.btn-xs.btn-tff,.btn-xs.btn-coral{padding:0 14px}

/* dark bands take the solid orange button; in the closing CTA, Try for free is plain white (no edge) beside the orange Book a demo */
.sec-dark .btn-tff{background:#F26C56;color:#fff}
.cta .btn.btn-tff{background:#fff;color:#0B1724;box-shadow:none}
.cta .btn.btn-tff:hover{background:#F26C56;color:#fff}

/* customer logos: seven now (Gordon Marketing out), spread with equal space between them and set to one optical size */
@media (min-width:1101px){.logos{display:flex;justify-content:space-between;align-items:center;gap:24px;max-width:1120px;margin-left:auto;margin-right:auto}.logos li{flex:none}}
.logos img[alt="Pinnacle Financial Services"]{max-height:34px}
.logos img[alt="AmeriLife"]{max-height:14px}
.logos img[alt="JSA"]{max-height:28px}
.logos img[alt="MPK Equity Partners"]{max-height:40px}
.logos img[alt="Werqwise"]{max-height:23px}
.logos img[alt="Harbor Health"]{max-height:17px}
.logos img[alt="Platinum Health"]{max-height:16px}